Testing functionality of the workspace storing and receiving

package-lock.json

@@ -32,9 +32,11 @@
         "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@types/js-cookie": "^3.0.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "js-cookie": "^3.0.5",
         "lucide-react": "^0.553.0",
         "next": "16.0.1",
         "react": "19.2.0",
@@ -2221,6 +2223,12 @@
         "tailwindcss": "4.1.17"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.19.25",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz",
@@ -2429,6 +2437,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",

package.json

@@ -32,9 +32,11 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/js-cookie": "^3.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.553.0",
     "next": "16.0.1",
     "react": "19.2.0",

src/app/workspace/page.tsx

@@ -2,25 +2,40 @@
 
 import Router from "@/components/Router";
 import AppSidebar, { SidebarTrigger } from "@/components/sidebar/AppSidebar";
-import useWorkspace from "@/hooks/workspace";
+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";
 
 export default function Workspace() {
-  const workspace = useWorkspace();
+  const [currentWorkspace, setCurrentWorkspace] = useState<string>();
 
-  return (
+  const { workspace, loadWorkspace } = useWorkspace();
-    <AppSidebar workspace={workspace}>
+
+  const [route, setRoute] = useState<EntityId>();
+
+  useEffect(() => {
+    setCurrentWorkspace(Cookies.get("workspace"));
+  }, []);
+
+  useEffect(() => {
+    loadWorkspace(currentWorkspace);
+  }, [currentWorkspace]);
+
+  return workspace ? (
+    <AppSidebar workspace={workspace} setRoute={setRoute}>
       <SidebarTrigger className="w-full px-4">
         <div className="px-4">
           <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[workspace.route].name}
+            {workspace.entities[route || ""]?.name}
           </header>
         </div>
       </SidebarTrigger>
 
       <Router workspace={workspace} />
     </AppSidebar>
-  );
+  ) : null;
 }

src/components/sidebar/AppSidebar.tsx

@@ -16,14 +16,16 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { ChevronDown } from "lucide-react";
-import { Workspace } from "@/hooks/workspace";
+import { EntityId, SetState, Workspace } from "@/lib/types";
 
 export default function AppSidebar({
   children,
   workspace,
+  setRoute,
 }: Readonly<{
   children: React.ReactNode;
   workspace: Workspace;
+  setRoute: SetState<EntityId | undefined>;
 }>) {
   return (
     <SidebarProvider>
@@ -51,8 +53,13 @@ export default function AppSidebar({
         </SidebarHeader>
         <SidebarContent>
           <SidebarMenu>
-            {workspace.entityLayout.map((entity, i) => (
+            {workspace.layout.map((entity, i) => (
-              <EntitySwitch entity={entity} workspace={workspace} key={i} />
+              <EntitySwitch
+                entity={entity}
+                workspace={workspace}
+                key={i}
+                setRoute={setRoute}
+              />
             ))}
           </SidebarMenu>
         </SidebarContent>

src/components/sidebar/Entity.tsx

@@ -9,7 +9,7 @@ import {
 } from "../ui/sidebar";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
 import { ChevronDown } from "lucide-react";
-import { Workspace } from "@/hooks/workspace";
+import { EntityId, SetState, Workspace } from "@/lib/types";
 
 export type SidebarEntity =
   | {
@@ -25,9 +25,11 @@ export type SidebarEntity =
 export default function EntitySwitch({
   entity,
   workspace,
+  setRoute,
 }: {
   entity: SidebarEntity;
   workspace: Workspace;
+  setRoute: SetState<EntityId | undefined>;
 }) {
   if (entity.kind === "group") {
     return (
@@ -45,7 +47,12 @@ export default function EntitySwitch({
             <SidebarGroupContent>
               <SidebarMenu>
                 {entity.children?.map((entity, i) => (
-                  <EntitySwitch entity={entity} workspace={workspace} key={i} />
+                  <EntitySwitch
+                    entity={entity}
+                    workspace={workspace}
+                    key={i}
+                    setRoute={setRoute}
+                  />
                 ))}
               </SidebarMenu>
             </SidebarGroupContent>
@@ -58,7 +65,7 @@ export default function EntitySwitch({
       <SidebarMenuItem>
         <SidebarMenuButton
           onClick={() => {
-            workspace.setRoute(entity.id);
+            setRoute(entity.id);
           }}
         >
           {workspace.entities[entity.id].name}

src/hooks/workspace.ts

@@ -5,25 +5,37 @@ import {
 } from "@/lib/workspace";
 import { useEffect, useState } from "react";
 
-export function useWorkspace(workspaceId: string) {
+export function useWorkspace() {
-  const [workspace, setWorkspace] = useState<Workspace>(() =>
+  const [workspace, setWorkspace] = useState<Workspace>();
-    loadWorkspaceFromLocalStorage(workspaceId),
-  );
 
   const updateEntity = (entityId: EntityId, updater: (e: Entity) => Entity) => {
-    setWorkspace((prev) => ({
+    setWorkspace((prev) =>
+      prev
+        ? {
             ...prev,
             entities: {
               ...prev.entities,
               [entityId]: updater(prev.entities[entityId]),
             },
             updatedAt: Date.now(),
-    }));
+          }
+        : undefined,
+    );
+  };
+
+  const loadWorkspace = (workspaceId: string | undefined) => {
+    if (!workspaceId) {
+      return setWorkspace(undefined);
+    }
+
+    const w = loadWorkspaceFromLocalStorage(workspaceId);
+    setWorkspace(w);
+    return w;
   };
 
   useEffect(() => {
-    saveWorkspaceToLocalStorage(workspace);
+    if (workspace) saveWorkspaceToLocalStorage(workspace);
   }, [workspace]);
 
-  return { workspace, updateEntity };
+  return { workspace, loadWorkspace, updateEntity };
 }