Very awful code

src/app/workspace/page.tsx

@@ -11,7 +11,7 @@ const id = (prefix = "t") =>
   `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 
 export default function Workspace() {
-  const [tasks, setTasks] = useState<Task[]>([]);
+  const [route, setRoute] = useState("");
   const workspace = useWorkspace();
 
   const createTask = (status: string) => {
@@ -20,11 +20,14 @@ export default function Workspace() {
       title: "New task",
       status: status,
     };
-    setTasks((c) => [...c, task]);
+    workspace.entityData[workspace.route].setTasks((c: Task[]) => [...c, task]);
   };
 
   return (
     <AppSidebar workspace={workspace}>
+      <Router route={route} setRoute={setRoute}>
+        {(route) => (
+          <>
             <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">
@@ -33,8 +36,8 @@ export default function Workspace() {
               </div>
             </SidebarTrigger>
             <TaskView
-        tasks={tasks}
+              tasks={workspace.entityData[workspace.route].setTasks}
-        setTasks={setTasks}
+              setTasks={workspace.entityData[workspace.route].tasks}
               createTask={createTask}
               tags={{
                 website: { color: "yellow", name: "Website" },
@@ -42,6 +45,9 @@ export default function Workspace() {
                 app: { color: "blue", name: "App" },
               }}
             />
+          </>
+        )}
+      </Router>
     </AppSidebar>
   );
 }

src/components/sidebar/Entity.tsx

@@ -9,15 +9,14 @@ import {
 } from "../ui/sidebar";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
 import { ChevronDown } from "lucide-react";
+import { Entity } from "@/hooks/workspace";
 
-export interface Entity {
+export interface SidebarEntity extends Entity {
-  id: string;
-  name: string;
   kind: "group" | "todo";
-  children?: Entity[];
+  children?: SidebarEntity[];
 }
 
-export default function EntitySwitch({ entity }: { entity: Entity }) {
+export default function EntitySwitch({ entity }: { entity: SidebarEntity }) {
   switch (entity.kind) {
     case "group":
       return (

src/hooks/workspace.ts

@@ -1,17 +1,42 @@
-import { Entity } from "@/components/sidebar/Entity";
+import { SidebarEntity } from "@/components/sidebar/Entity";
-import { SetState } from "@/lib/types";
+import { SetState, Task } from "@/lib/types";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+export interface Entity {
+  id: string;
+  name: string;
+}
 
 export type Workspace = {
   name: string;
-  entities: Entity[];
+  entities: SidebarEntity[];
+  entityData: Record<string, any>;
 
   route: string;
   setRoute: SetState<string>;
 };
 
+function useTasks() {
+  return useState<Task[]>([]);
+}
+
 export default function useWorkspace(): Workspace {
-  const [route, setRoute] = useState("");
+  const [route, setRoute] = useState("alpha_tasks");
+  const [tasks, setTasks] = useTasks();
+
+  useEffect(() => {
+    setTasks([
+      { id: "1", title: "Buy groceries", status: "todo" },
+      { id: "2", title: "Plan sprint", status: "todo" },
+      {
+        id: "3",
+        title: "Build App",
+        description: "A simple description",
+        tags: ["website", "api", "app"],
+        status: "inprogress",
+      },
+    ]);
+  }, []);
 
   return {
     name: "Personal Workspace",
@@ -24,6 +49,13 @@ export default function useWorkspace(): Workspace {
       },
     ],
 
+    entityData: {
+      alpha_tasks: {
+        tasks,
+        setTasks,
+      },
+    },
+
     route,
     setRoute,
   };