diff --git a/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx b/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx index 944536c8f..0aed0db61 100644 --- a/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx +++ b/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx @@ -2,14 +2,9 @@ import { Settings, Trash2, Users } from "lucide-react"; import { useTranslations } from "next-intl"; +import type { MouseEvent } from "react"; import { useCallback, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; -import { - ContextMenu, - ContextMenuContent, - ContextMenuItem, - ContextMenuTrigger, -} from "@/components/ui/context-menu"; import { DropdownMenu, DropdownMenuContent, @@ -80,19 +75,28 @@ export function SearchSpaceAvatar({ const initials = getInitials(name); const sizeClasses = size === "sm" ? "h-8 w-8 text-xs" : "h-10 w-10 text-sm"; - // Long-press state for mobile - const [longPressMenuOpen, setLongPressMenuOpen] = useState(false); + const [menuOpen, setMenuOpen] = useState(false); const longPressTimer = useRef | null>(null); const touchMoved = useRef(false); + const openMenu = useCallback(() => { + setMenuOpen(true); + }, []); + + const handleContextMenu = useCallback((event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + setMenuOpen(true); + }, []); + const handleTouchStart = useCallback(() => { touchMoved.current = false; longPressTimer.current = setTimeout(() => { if (!touchMoved.current) { - setLongPressMenuOpen(true); + openMenu(); } }, 500); - }, []); + }, [openMenu]); const handleTouchMove = useCallback(() => { touchMoved.current = true; @@ -120,12 +124,26 @@ export function SearchSpaceAvatar({ ); - const avatarButton = ( + const avatarButton = (withMenuHandlers = false) => (