fix: render SortableProjectItem as <li> to produce valid HTML inside <ul>

cursoragent · juliusmarminge · cursoragent · commit 410550ecbeb4 · 2026-03-06T18:59:43.000Z
SortableProjectItem previously rendered a &lt;div&gt; wrapper between
SidebarMenu (&lt;ul&gt;) and SidebarMenuItem (&lt;li&gt;), creating invalid HTML:
&lt;ul&gt;&lt;div&gt;&lt;li&gt;…&lt;/li&gt;&lt;/div&gt;&lt;/ul&gt;.

Change SortableProjectItem to render a SidebarMenuItem (&lt;li&gt;) directly,
removing the redundant inner SidebarMenuItem wrapper at the call site.

Co-authored-by: Julius Marminge &lt;juliusmarminge@users.noreply.github.com&gt;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
@@ -273,26 +273,28 @@ type SortableProjectHandleProps = Pick<ReturnType<typeof useSortable>, "attribut
 
 function SortableProjectItem({
   projectId,
+  className,
   children,
 }: {
   projectId: ProjectId;
+  className?: string;
   children: (handleProps: SortableProjectHandleProps) => React.ReactNode;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } =
     useSortable({ id: projectId });
   return (
-    <div
+    <SidebarMenuItem
       ref={setNodeRef}
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
       }}
       className={`rounded-md ${
         isDragging ? "z-20 opacity-80" : ""
-      } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`}
+      } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""} ${className ?? ""}`}
     >
       {children({ attributes, listeners })}
-    </div>
+    </SidebarMenuItem>
   );
 }
 
@@ -1205,9 +1207,9 @@ export default function Sidebar() {
                       : projectThreads;
 
                   return (
-                    <SortableProjectItem key={project.id} projectId={project.id}>
+                    <SortableProjectItem key={project.id} projectId={project.id} className="group/collapsible">
                       {(dragHandleProps) => (
-                        <SidebarMenuItem className="group/collapsible">
+                        <>
                           <div className="group/project-header relative">
                             <SidebarMenuButton
                               size="sm"
@@ -1448,7 +1450,7 @@ export default function Sidebar() {
                               </SidebarMenuSub>
                             </div>
                           </div>
-                        </SidebarMenuItem>
+                        </>
                       )}
                     </SortableProjectItem>
                   );
