Fixed entities

src/app/workspace/page.tsx

@@ -5,6 +5,7 @@ import AppSidebar, { SidebarTrigger } from "@/components/sidebar/AppSidebar";
 import TaskView from "@/components/view/TaskView";
 import useWorkspace from "@/hooks/workspace";
 import { Task } from "@/lib/types";
+import { ChevronRight } from "lucide-react";
 import { useEffect, useState } from "react";
 
 const id = (prefix = "t") =>
@@ -20,7 +21,7 @@ export default function Workspace() {
       title: "New task",
       status: status,
     };
-    workspace.entityData[workspace.route].setTasks((c: Task[]) => [...c, task]);
+    workspace.entities[workspace.route].setTasks((c: Task[]) => [...c, task]);
   };
 
   return (
@@ -30,14 +31,16 @@ export default function Workspace() {
           <>
             <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">
+                <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
-                  Workspace
+                  {workspace.name}
+                  <ChevronRight className="h-5" />
+                  {workspace.entities[workspace.route].name}
                 </header>
               </div>
             </SidebarTrigger>
             <TaskView
-              tasks={workspace.entityData[workspace.route].setTasks}
+              tasks={workspace.entities[workspace.route].tasks}
-              setTasks={workspace.entityData[workspace.route].tasks}
+              setTasks={workspace.entities[workspace.route].setTasks}
               createTask={createTask}
               tags={{
                 website: { color: "yellow", name: "Website" },

src/components/sidebar/AppSidebar.tsx

@@ -51,8 +51,8 @@ export default function AppSidebar({
         </SidebarHeader>
         <SidebarContent>
           <SidebarMenu>
-            {workspace.entities.map((entity, i) => (
+            {workspace.entityLayout.map((entity, i) => (
-              <EntitySwitch entity={entity} key={i} />
+              <EntitySwitch entity={entity} workspace={workspace} key={i} />
             ))}
           </SidebarMenu>
         </SidebarContent>

src/components/sidebar/Entity.tsx

@@ -9,44 +9,61 @@ import {
 } from "../ui/sidebar";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
 import { ChevronDown } from "lucide-react";
-import { Entity } from "@/hooks/workspace";
+import { Workspace } from "@/hooks/workspace";
 
-export interface SidebarEntity extends Entity {
+export type SidebarEntity =
-  kind: "group" | "todo";
+  | {
-  children?: SidebarEntity[];
+      kind: "group";
-}
+      name: string;
+      children: SidebarEntity[];
+    }
+  | {
+      kind?: "item";
+      id: string;
+    };
 
-export default function EntitySwitch({ entity }: { entity: SidebarEntity }) {
+export default function EntitySwitch({
-  switch (entity.kind) {
+  entity,
-    case "group":
+  workspace,
-      return (
+}: {
-        <Collapsible defaultOpen className="group/collapsible">
+  entity: SidebarEntity;
-          <SidebarGroup>
+  workspace: Workspace;
-            <SidebarGroupLabel asChild>
+}) {
-              <SidebarMenuButton asChild>
+  if (entity.kind === "group") {
-                <CollapsibleTrigger>
+    return (
-                  {entity.name}
+      <Collapsible defaultOpen className="group/collapsible">
-                  <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+        <SidebarGroup>
-                </CollapsibleTrigger>
+          <SidebarGroupLabel asChild>
-              </SidebarMenuButton>
+            <SidebarMenuButton asChild>
-            </SidebarGroupLabel>
+              <CollapsibleTrigger>
-            <CollapsibleContent>
+                {entity.name}
-              <SidebarGroupContent>
+                <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-                <SidebarMenu>
+              </CollapsibleTrigger>
-                  {entity.children?.map((entity, i) => (
+            </SidebarMenuButton>
-                    <EntitySwitch entity={entity} key={i} />
+          </SidebarGroupLabel>
-                  ))}
+          <CollapsibleContent>
-                </SidebarMenu>
+            <SidebarGroupContent>
-              </SidebarGroupContent>
+              <SidebarMenu>
-            </CollapsibleContent>
+                {entity.children?.map((entity, i) => (
-          </SidebarGroup>
+                  <EntitySwitch entity={entity} workspace={workspace} key={i} />
-        </Collapsible>
+                ))}
-      );
+              </SidebarMenu>
-    case "todo":
+            </SidebarGroupContent>
-      return (
+          </CollapsibleContent>
-        <SidebarMenuItem>
+        </SidebarGroup>
-          <SidebarMenuButton>{entity.name}</SidebarMenuButton>
+      </Collapsible>
-        </SidebarMenuItem>
+    );
-      );
+  } else {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          onClick={() => {
+            workspace.setRoute(entity.id);
+          }}
+        >
+          {workspace.entities[entity.id].name}
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
   }
 }

src/hooks/workspace.ts

@@ -2,19 +2,21 @@ import { SidebarEntity } from "@/components/sidebar/Entity";
 import { SetState, Task } from "@/lib/types";
 import { useEffect, useState } from "react";
 
-export interface Entity {
+export type Entity = {
-  id: string;
   name: string;
-}
+  kind: "todo";
+  setTasks: SetState<Task[]>;
+  tasks: Task[];
+};
 
-export type Workspace = {
+export interface Workspace {
   name: string;
-  entities: SidebarEntity[];
+  entityLayout: SidebarEntity[];
-  entityData: Record<string, any>;
+  entities: Record<string, Entity>;
 
   route: string;
   setRoute: SetState<string>;
-};
+}
 
 function useTasks() {
   return useState<Task[]>([]);
@@ -40,21 +42,32 @@ export default function useWorkspace(): Workspace {
 
   return {
     name: "Personal Workspace",
-    entities: [
+    entities: {
-      {
-        id: "alpha",
-        name: "Project alpha",
-        kind: "group",
-        children: [{ id: "alpha_tasks", name: "Tasks", kind: "todo" }],
-      },
-    ],
-
-    entityData: {
       alpha_tasks: {
+        name: "Alpha tasks",
+        kind: "todo",
+        tasks,
+        setTasks,
+      },
+      beta_tasks: {
+        name: "Beta tasks",
+        kind: "todo",
         tasks,
         setTasks,
       },
     },
+    entityLayout: [
+      {
+        kind: "group",
+        name: "Project alpha",
+        children: [{ id: "alpha_tasks" }],
+      },
+      {
+        kind: "group",
+        name: "Project beta",
+        children: [{ id: "beta_tasks" }],
+      },
+    ],
 
     route,
     setRoute,