feat(gui): directory block, re-org of some code (#2314)

2 files changed, 17 insertions, 11 deletions

diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx
index 64c2fca6..7002f3c4 100644
--- a/ui/src/pages/History.tsx
+++ b/ui/src/pages/History.tsx
@@ -6,7 +6,7 @@ import HistorySearch from "@/components/HistorySearch.tsx";
 import Stats from "@/components/history/Stats.tsx";
 import Drawer from "@/components/Drawer.tsx";
 
-import { useStore } from "@/state/store";
+import { AtuinState, useStore } from "@/state/store";
 
 function Header() {
   return (
@@ -49,9 +49,13 @@ function Header() {
 }
 
 export default function Search() {
-  const history = useStore((state) => state.shellHistory);
-  const refreshHistory = useStore((state) => state.refreshShellHistory);
-  const historyNextPage = useStore((state) => state.historyNextPage);
+  const history = useStore((state: AtuinState) => state.shellHistory);
+  const refreshHistory = useStore(
+    (state: AtuinState) => state.refreshShellHistory,
+  );
+  const historyNextPage = useStore(
+    (state: AtuinState) => state.historyNextPage,
+  );
 
   let [query, setQuery] = useState("");
 
@@ -84,12 +88,7 @@ export default function Search() {
 
   return (
     <>
-      <div className="w-full flex-1 flex-col p-4">
-        <div className="p-10 history-header">
-          <Header />
-          <p>A history of all the commands you run in your shell.</p>
-        </div>
-
+      <div className="w-full flex-1 flex-col">
         <div className="flex h-16 shrink-0 items-center gap-x-4 border-b border-t border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 history-search">
           <HistorySearch
             query={query}
diff --git a/ui/src/pages/Runbooks.tsx b/ui/src/pages/Runbooks.tsx
index 6b517553..d0efbc1c 100644
--- a/ui/src/pages/Runbooks.tsx
+++ b/ui/src/pages/Runbooks.tsx
@@ -1,5 +1,8 @@
 import Editor from "@/components/runbooks/editor/Editor";
 import List from "@/components/runbooks/List";
+
+import { Checkbox } from "@nextui-org/react";
+
 import { useStore } from "@/state/store";
 
 export default function Runbooks() {
@@ -8,7 +11,11 @@ export default function Runbooks() {
   return (
     <div className="flex w-full !max-w-full flex-row ">
       <List />
-      {currentRunbook && <Editor />}
+      {currentRunbook && (
+        <div className="flex w-full">
+          <Editor />
+        </div>
+      )}
 
       {!currentRunbook && (
         <div className="flex align-middle justify-center flex-col h-screen w-full">