Theme and default functionality

src/app/workspace/page.tsx

@@ -6,14 +6,19 @@ import { useWorkspace } from "@/hooks/workspace";
 import { ChevronRight } from "lucide-react";
 import Cookies from "js-cookie";
 import { useEffect, useState } from "react";
-import { EntityId } from "@/lib/types";
+import { Route } from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import {
+  createDefaultWorkspace,
+  saveWorkspaceToLocalStorage,
+} from "@/lib/workspace";
 
 export default function Workspace() {
   const [currentWorkspace, setCurrentWorkspace] = useState<string>();
 
   const { workspace, loadWorkspace } = useWorkspace();
 
-  const [route, setRoute] = useState<EntityId>();
+  const [route, setRoute] = useState<Route>({});
 
   useEffect(() => {
     setCurrentWorkspace(Cookies.get("workspace"));
@@ -21,6 +26,8 @@ export default function Workspace() {
 
   useEffect(() => {
     loadWorkspace(currentWorkspace);
+    if (currentWorkspace) Cookies.set("workspace", currentWorkspace);
+    else Cookies.remove("workspace");
   }, [currentWorkspace]);
 
   return workspace ? (
@@ -30,12 +37,23 @@ export default function Workspace() {
           <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
             {workspace.name}
             <ChevronRight className="h-5" />
-            {workspace.entities[route || ""]?.name}
+            {workspace.entities[route.entity || ""]?.name}
           </header>
         </div>
       </SidebarTrigger>
 
       <Router workspace={workspace} />
     </AppSidebar>
-  ) : null;
+  ) : (
+    <main
+      className="flex h-svh items-center justify-center"
+      onClick={() => {
+        const w = createDefaultWorkspace();
+        saveWorkspaceToLocalStorage(w);
+        setCurrentWorkspace(w.id);
+      }}
+    >
+      <Button>Create a new workspace</Button>
+    </main>
+  );
 }