Commit a6b22ec1c9b247536111dd2c2e8682f9b3f550c5 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-06 11:39:29-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-09 15:08:10-07:00
log	a6b22ec1c9b247536111dd2c2e8682f9b3f550c5
tree	c572c37306f1eaa293a1666a5b3991b29b766d11
parent	bb49ebf6e54a078f9937f85de338ac5c8fc4a236

Fix project drag clicks and sidebar collapse/scroll behavior

- prevent accidental project toggles after drag operations
- switch project rows to Collapsible for stable expand/collapse animation
- add optional hidden scrollbar mode to ScrollArea and apply it in SidebarContent

4 files changed, 32 insertions(+), 89 deletions(-)

apps
- web
  - src
    components
    Sidebar.tsx
    ui
    collapsible.tsx
    scroll-area.tsx
    sidebar.tsx

apps/web/src/components/Sidebar.tsx+19-83

 @@ -61,6 +61,7 @@ import {
 } from "./desktopUpdate.logic";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
+import { Collapsible, CollapsibleContent } from "./ui/collapsible";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import {
   SidebarContent,
 @@ -231,18 +232,20 @@ function SortableProjectItem({
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } =
     useSortable({ id: projectId });
   return (
-    <div
+    <li
       ref={setNodeRef}
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
       }}
-      className={`rounded-md ${
+      className={`group/menu-item relative rounded-md ${
         isDragging ? "z-20 opacity-80" : ""
       } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`}
+      data-sidebar="menu-item"
+      data-slot="sidebar-menu-item"
     >
       {children({ attributes, listeners })}
-    </div>
+    </li>
   );
 }
 @@ -294,14 +297,7 @@ export default function Sidebar() {
   const renamingCommittedRef = useRef(false);
   const renamingInputRef = useRef<HTMLInputElement | null>(null);
   const dragInProgressRef = useRef(false);
-  const suppressProjectClickFromGestureRef = useRef(false);
+  const suppressProjectClickAfterDragRef = useRef(false);
-  const suppressProjectClickResetTimerRef = useRef<number | null>(null);
-  const projectTitlePointerRef = useRef<{
-    pointerId: number;
-    startX: number;
-    startY: number;
-    moved: boolean;
-  } | null>(null);
   const [desktopUpdateState, setDesktopUpdateState] = useState<DesktopUpdateState | null>(null);
   const shouldBrowseForProjectImmediately = isElectron;
   const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately;
 @@ -861,64 +857,20 @@ export default function Sidebar() {
   const handleProjectDragStart = useCallback((_event: DragStartEvent) => {
     dragInProgressRef.current = true;
+    suppressProjectClickAfterDragRef.current = true;
   }, []);
   const handleProjectDragCancel = useCallback((_event: DragCancelEvent) => {
     dragInProgressRef.current = false;
   }, []);
-  const handleProjectTitlePointerDownCapture = useCallback(
+  const handleProjectTitlePointerDownCapture = useCallback(() => {
-    (event: React.PointerEvent<HTMLButtonElement>) => {
+    suppressProjectClickAfterDragRef.current = false;
-      projectTitlePointerRef.current = {
-        pointerId: event.pointerId,
-        startX: event.clientX,
-        startY: event.clientY,
-        moved: false,
-      };
-    },
-    [],
-  );
-  const handleProjectTitlePointerMoveCapture = useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      const pointer = projectTitlePointerRef.current;
-      if (!pointer || pointer.pointerId !== event.pointerId) return;
-      const movedX = Math.abs(event.clientX - pointer.startX);
-      const movedY = Math.abs(event.clientY - pointer.startY);
-      if (movedX > 3 || movedY > 3) {
-        pointer.moved = true;
-      }
-    },
-    [],
-  );
-  const handleProjectTitlePointerUpCapture = useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      const pointer = projectTitlePointerRef.current;
-      if (pointer?.pointerId === event.pointerId) {
-        if (pointer.moved) {
-          suppressProjectClickFromGestureRef.current = true;
-          if (suppressProjectClickResetTimerRef.current !== null) {
-            window.clearTimeout(suppressProjectClickResetTimerRef.current);
-          }
-          suppressProjectClickResetTimerRef.current = window.setTimeout(() => {
-            suppressProjectClickFromGestureRef.current = false;
-            suppressProjectClickResetTimerRef.current = null;
-          }, 0);
-        }
-        projectTitlePointerRef.current = null;
-      }
-    },
-    [],
-  );
-  const handleProjectTitlePointerCancelCapture = useCallback(() => {
-    projectTitlePointerRef.current = null;
   }, []);
   const handleProjectTitleClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>, projectId: ProjectId) => {
-      if (dragInProgressRef.current || suppressProjectClickFromGestureRef.current) {
+      if (dragInProgressRef.current || suppressProjectClickAfterDragRef.current) {
         event.preventDefault();
         event.stopPropagation();
         return;
 @@ -940,14 +892,6 @@ export default function Sidebar() {
     [toggleProject],
   );
-  useEffect(() => {
-    return () => {
-      if (suppressProjectClickResetTimerRef.current !== null) {
-        window.clearTimeout(suppressProjectClickResetTimerRef.current);
-      }
-    };
-  }, []);
   useEffect(() => {
     const onWindowKeyDown = (event: KeyboardEvent) => {
       const activeThread = routeThreadId
 @@ -1318,7 +1262,10 @@ export default function Sidebar() {
                   return (
                     <SortableProjectItem key={project.id} projectId={project.id}>
                       {(dragHandleProps) => (
-                        <SidebarMenuItem className="group/collapsible">
+                        <Collapsible
+                          className="group/collapsible"
+                          open={project.expanded}
+                        >
                           <div className="group/project-header relative">
                             <SidebarMenuButton
                               size="sm"
 @@ -1326,9 +1273,6 @@ export default function Sidebar() {
                               {...dragHandleProps.attributes}
                               {...dragHandleProps.listeners}
                               onPointerDownCapture={handleProjectTitlePointerDownCapture}
-                              onPointerMoveCapture={handleProjectTitlePointerMoveCapture}
-                              onPointerUpCapture={handleProjectTitlePointerUpCapture}
-                              onPointerCancelCapture={handleProjectTitlePointerCancelCapture}
                               onClick={(event) => handleProjectTitleClick(event, project.id)}
                               onKeyDown={(event) => handleProjectTitleKeyDown(event, project.id)}
                               onContextMenu={(event) => {
 @@ -1379,15 +1323,8 @@ export default function Sidebar() {
                             </Tooltip>
                           </div>
-                          <div
+                          <CollapsibleContent keepMounted>
-                            className={`grid transition-[grid-template-rows,opacity] duration-200 ease-out ${
+                            <SidebarMenuSub className="mx-1 my-0 w-full translate-x-0 gap-0 px-1.5 py-0">
-                              project.expanded
-                                ? "grid-rows-[1fr] opacity-100"
-                                : "pointer-events-none grid-rows-[0fr] opacity-0"
-                            }`}
-                          >
-                            <div className="min-h-0 overflow-hidden">
-                              <SidebarMenuSub className="mx-1 my-0 w-full translate-x-0 gap-0 px-1.5 py-0">
                                 {visibleThreads.map((thread) => {
                                   const isActive = routeThreadId === thread.id;
                                   const threadStatus = resolveThreadStatusPill({
 @@ -1558,9 +1495,8 @@ export default function Sidebar() {
                                   </SidebarMenuSubItem>
                                 )}
                               </SidebarMenuSub>
-                            </div>
+                          </CollapsibleContent>
-                          </div>
+                        </Collapsible>
-                        </SidebarMenuItem>
                       )}
                     </SortableProjectItem>
                   );

apps/web/src/components/ui/collapsible.tsx+1-1

...	@@ -22,7 +22,7 @@ function CollapsiblePanel({ className, ...props }: CollapsiblePrimitive.Panel.Pr	...	@@ -22,7 +22,7 @@ function CollapsiblePanel({ className, ...props }: CollapsiblePrimitive.Panel.Pr
22	return (	22	return (
23	<CollapsiblePrimitive.Panel	23	<CollapsiblePrimitive.Panel
24	className={cn(	24	className={cn(
25	"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0",	25	"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0 data-open:data-ending-style:[height:var(--collapsible-panel-height)]",
26	className,	26	className,
27	)}	27	)}
28	data-slot="collapsible-panel"	28	data-slot="collapsible-panel"

apps/web/src/components/ui/scroll-area.tsx+10-3

 @@ -9,10 +9,12 @@ function ScrollArea({
   children,
   scrollFade = false,
   scrollbarGutter = false,
+  hideScrollbars = false,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
+  hideScrollbars?: boolean;
 }) {
   return (
     <ScrollAreaPrimitive.Root className={cn("size-full min-h-0", className)} {...props}>
 @@ -22,14 +24,19 @@ function ScrollArea({
           scrollFade &&
             "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
           scrollbarGutter && "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5",
+          hideScrollbars && "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         )}
         data-slot="scroll-area-viewport"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar orientation="vertical" />
+      {!hideScrollbars && (
-      <ScrollBar orientation="horizontal" />
+        <>
-      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+          <ScrollBar orientation="vertical" />
+          <ScrollBar orientation="horizontal" />
+          <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+        </>
+      )}
     </ScrollAreaPrimitive.Root>
   );
 }

apps/web/src/components/ui/sidebar.tsx+2-2

...	@@ -651,10 +651,10 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S	...	@@ -651,10 +651,10 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
651		651
652	function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {	652	function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
653	return (	653	return (
654	<ScrollArea className="**:data-[slot=scroll-area-scrollbar]:hidden" scrollFade>	654	<ScrollArea hideScrollbars scrollFade className="h-auto min-h-0 flex-1">
655	<div	655	<div
656	className={cn(	656	className={cn(
657	"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",	657	"flex w-full min-w-0 flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden",
658	className,	658	className,
659	)}	659	)}
660	data-sidebar="content"	660	data-sidebar="content"