Merge pull request #93 from tanmay5114/fix/issue-86/cursor-freezing-after-deleting-document

Fix/issue 86/cursor freezing after deleting document

Author: will-lp1

apps/saru/app/api/history/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server';
-import { auth } from "@/lib/auth"; // Import Better Auth
-import { headers } from 'next/headers'; // Import headers
-import { getDocumentsById, getChatsByUserId } from '@/lib/db/queries'; // Import Drizzle queries
+import { auth } from "@/lib/auth"; 
+import { headers } from 'next/headers';
+import { getDocumentsById, getChatsByUserId } from '@/lib/db/queries';
 
 export async function GET() {
   // --- Authentication --- 

apps/saru/components/chat/chat-header.tsx

@@ -64,7 +64,7 @@ function PureChatHeader({
   return (
     <header
       className={cn(
-        'flex sticky top-0 bg-background/80 backdrop-blur-sm z-10 border-b border-border border-r border-border items-center px-3 h-[45px] gap-2 transition-all duration-200',
+        'flex sticky top-0 bg-background/80 backdrop-blur-sm z-10 border-b border-r border-border items-center px-3 h-[45px] gap-2 transition-all duration-200',
         className,
       )}
     >

apps/saru/components/sidebar/sidebar-documents.tsx

@@ -4,12 +4,11 @@ import { isToday, isYesterday, subMonths, subWeeks } from 'date-fns';
 import Link from 'next/link';
 import { useRouter, usePathname } from 'next/navigation';
 import type { User } from '@/lib/auth';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import useSWR from 'swr';
 import { cn, fetcher } from '@/lib/utils';
 import {
-  FileIcon,
   MoreHorizontalIcon,
   PlusIcon,
   TrashIcon,
@@ -24,12 +23,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   SidebarGroup,
   SidebarGroupContent,
@@ -45,7 +38,6 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import useSWRInfinite from 'swr/infinite';
-import { motion } from 'framer-motion';
 
 type GroupedDocuments = {
   today: Document[];
@@ -104,9 +96,21 @@ const PureDocumentItem = ({
   }, [document, isActive, isSelectionMode, isSelected, onToggleSelect, setOpenMobile, onSelect]);
 
   const router = useRouter();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const closeTimerRef = useRef<number | null>(null);
+  const [showCustomMenu, setShowCustomMenu] = useState(false);
 
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
+  
   return (
-    <SidebarMenuItem>
+    <SidebarMenuItem className="relative">
       <div className="flex items-center w-full">
         {isSelectionMode && (
           <div className="flex items-center pl-2 pr-1">
@@ -132,27 +136,70 @@ const PureDocumentItem = ({
       </div>
 
       {!isSelectionMode && (
-        <DropdownMenu modal={true}>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuAction
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground mr-0.5"
-              showOnHover={!isActive}
-            >
-              <MoreHorizontalIcon />
-              <span className="sr-only">More</span>
-            </SidebarMenuAction>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent side="bottom" align="end">
-            <DropdownMenuItem
-              className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive dark:text-red-500"
-              onSelect={() => onDelete(document.id)}
-            >
-              <TrashIcon />
-              <span>Delete</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <SidebarMenuAction
+          ref={buttonRef}
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground mr-0.5"
+          showOnHover={!isActive}
+          data-state={showCustomMenu ? 'open' : 'closed'}
+          aria-haspopup="menu"
+          aria-expanded={showCustomMenu}
+          aria-controls={`doc-menu-${document.id}`}
+          onBlur={(e) => {
+            if (closeTimerRef.current) {
+              clearTimeout(closeTimerRef.current);
+              closeTimerRef.current = null;
+            }
+            const next = e.relatedTarget as Node | null;
+            if (menuRef.current && next && menuRef.current.contains(next)) return;
+            closeTimerRef.current = window.setTimeout(() => setShowCustomMenu(false), 100);
+          }}
+          onClick={() => setShowCustomMenu((v) => !v)}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              e.stopPropagation();
+              setShowCustomMenu(false);
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setShowCustomMenu((v) => !v);
+            }
+          }}
+        >
+          <MoreHorizontalIcon />
+          <span className="sr-only">More</span>
+        </SidebarMenuAction>
+      )}
+
+      {!isSelectionMode && showCustomMenu && (
+        <div 
+          ref={menuRef}
+          id={`doc-menu-${document.id}`}
+          role="menu"
+          aria-labelledby={`doc-menu-${document.id}`}
+          className="absolute right-0 top-full z-50 min-w-[8rem] overflow-visible rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
+          style={{ 
+            marginTop: '2px' 
+          }}
+          onMouseDown={(e) => e.preventDefault()}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              e.stopPropagation();
+              setShowCustomMenu(false);
+              buttonRef.current?.focus();
+            }
+          }}
+          >
+          <Button
+            variant="destructive"
+            size="sm"
+            role="menuitem"
+            className="h-7 text-sm w-full"
+            onClick={() => { setShowCustomMenu(false); onDelete(document.id); }}
+          >
+            Delete
+            <TrashIcon />
+          </Button>
+        </div>
       )}
     </SidebarMenuItem>
   );