feat(gui): add runbook list, ability to create and delete, sql storage (#2282)

* wip

* saving works :))

* functioning delete button

* persist selection properly

1 files changed, 13 insertions, 2 deletions

diff --git a/ui/src/pages/Runbooks.tsx b/ui/src/pages/Runbooks.tsx
index 4237e065..0452a578 100644
--- a/ui/src/pages/Runbooks.tsx
+++ b/ui/src/pages/Runbooks.tsx
@@ -1,9 +1,20 @@
 import Editor from "@/components/runbooks/editor/Editor";
+import List from "@/components/runbooks/List";
+import { useStore } from "@/state/store";
 
 export default function Runbooks() {
+  const currentRunbook = useStore((store) => store.currentRunbook);
+
   return (
-    <div className="w-full flex-1 flex-col p-4">
-      <Editor />
+    <div className="w-full flex flex-row ">
+      <List />
+      {currentRunbook && <Editor />}
+
+      {!currentRunbook && (
+        <div className="flex align-middle justify-center flex-col h-screen w-full">
+          <h1 className="text-center">Select or create a runbook</h1>
+        </div>
+      )}
     </div>
   );
 }