Sidebar

src/components/sidebar/Entity.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import {
   SidebarGroup,
@@ -9,11 +11,12 @@ import {
 } from "../ui/sidebar";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
 import { ChevronDown } from "lucide-react";
-import { EntityId, Route, SetState, Workspace } from "@/lib/types";
+import { Route, Workspace } from "@/lib/types";
 
 export type SidebarEntity =
   | {
       kind: "group";
+      id: string; // ✅ add stable id
       name: string;
       children: SidebarEntity[];
     }
@@ -22,35 +25,39 @@ export type SidebarEntity =
       id: string;
     };
 
+type Props = {
+  entity: SidebarEntity;
+  workspace: Workspace;
+  setRoute: (route: Route) => void;
+};
+
 export default function EntitySwitch({
   entity,
   workspace,
   setRoute,
-}: {
-  entity: SidebarEntity;
-  workspace: Workspace;
-  setRoute: SetState<Route>;
-}) {
+}: Props) {
+  // ---- GROUP ----
   if (entity.kind === "group") {
     return (
       <Collapsible defaultOpen className="group/collapsible">
         <SidebarGroup>
           <SidebarGroupLabel asChild>
             <SidebarMenuButton asChild>
-              <CollapsibleTrigger>
+              <CollapsibleTrigger className="flex w-full items-center">
                 {entity.name}
-                <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
               </CollapsibleTrigger>
             </SidebarMenuButton>
           </SidebarGroupLabel>
+
           <CollapsibleContent>
             <SidebarGroupContent>
               <SidebarMenu>
-                {entity.children?.map((entity, i) => (
+                {entity.children.map((child) => (
                   <EntitySwitch
-                    entity={entity}
+                    key={child.id} // ✅ stable key
+                    entity={child}
                     workspace={workspace}
-                    key={i}
                     setRoute={setRoute}
                   />
                 ))}
@@ -60,17 +67,27 @@ export default function EntitySwitch({
         </SidebarGroup>
       </Collapsible>
     );
-  } else {
-    return (
-      <SidebarMenuItem>
-        <SidebarMenuButton
-          onClick={() => {
-            setRoute({ workspace: workspace.id, entity: entity.id });
-          }}
-        >
-          {workspace.entities[entity.id].name}
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-    );
   }
-}
+
+  // ---- ITEM ----
+  const workspaceEntity = workspace.entities[entity.id];
+
+  if (!workspaceEntity) {
+    return null; // defensive against stale layout
+  }
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        onClick={() =>
+          setRoute({
+            workspace: workspace.id,
+            entity: entity.id,
+          })
+        }
+      >
+        {workspaceEntity.name}
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}