feat: implement long-press functionality across chat and document components for enhanced user interaction and integrate custom hook for reusability

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -58,6 +58,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useLongPress } from "@/hooks/use-long-press";
 import { documentsApiService } from "@/lib/apis/documents-api.service";
 import { getDocumentTypeIcon, getDocumentTypeLabel } from "./DocumentTypeIcon";
 import type { Document, DocumentStatus } from "./types";
@@ -285,31 +286,17 @@ function MobileCardWrapper({
 	onLongPress: () => void;
 	children: React.ReactNode;
 }) {
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const { handlers, wasLongPress } = useLongPress(onLongPress);
-	const didLongPressRef = useRef(false);
-
-	const clearTimer = useCallback(() => {
-		if (timerRef.current) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-	}, []);
 
 	return (
 		// biome-ignore lint/a11y/useSemanticElements: touch-only long-press wrapper for mobile
 		<div
 			role="group"
-			onTouchStart={() => {
+			onTouchStart={handlers.onTouchStart}
-				didLongPressRef.current = false;
+			onTouchMove={handlers.onTouchMove}
-				timerRef.current = setTimeout(() => {
-					didLongPressRef.current = true;
-					onLongPress();
-				}, 500);
-			}}
-			onTouchMove={clearTimer}
 			onTouchEnd={(e) => {
-				clearTimer();
+				handlers.onTouchEnd();
-				if (didLongPressRef.current) {
+				if (wasLongPress()) {
 					e.preventDefault();
 				}
 			}}

surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx

@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -85,6 +85,24 @@ export function AllPrivateChatsSidebar({
 	const [isRenaming, setIsRenaming] = useState(false);
 	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
 
+	const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const longPressTriggeredRef = useRef(false);
+
+	const handleLongPressStart = useCallback((threadId: number) => {
+		longPressTriggeredRef.current = false;
+		longPressTimerRef.current = setTimeout(() => {
+			longPressTriggeredRef.current = true;
+			setOpenDropdownId(threadId);
+		}, 500);
+	}, []);
+
+	const handleLongPressCancel = useCallback(() => {
+		if (longPressTimerRef.current) {
+			clearTimeout(longPressTimerRef.current);
+			longPressTimerRef.current = null;
+		}
+	}, []);
+
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
 	useEffect(() => {
@@ -357,7 +375,16 @@ export function AllPrivateChatsSidebar({
 								{isMobile ? (
 									<button
 										type="button"
-											onClick={() => handleThreadClick(thread.id)}
+										onClick={() => {
+											if (longPressTriggeredRef.current) {
+												longPressTriggeredRef.current = false;
+												return;
+											}
+											handleThreadClick(thread.id);
+										}}
+										onTouchStart={() => handleLongPressStart(thread.id)}
+										onTouchEnd={handleLongPressCancel}
+										onTouchMove={handleLongPressCancel}
 										disabled={isBusy}
 										className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 									>
@@ -396,7 +423,9 @@ export function AllPrivateChatsSidebar({
 											size="icon"
 											className={cn(
 												"h-6 w-6 shrink-0",
-													"md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+												isMobile
+													? "opacity-0 pointer-events-none absolute"
+													: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
 												"transition-opacity"
 											)}
 											disabled={isBusy}

surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx

@@ -16,7 +16,7 @@ import {
 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -85,6 +85,24 @@ export function AllSharedChatsSidebar({
 	const [isRenaming, setIsRenaming] = useState(false);
 	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
 
+	const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const longPressTriggeredRef = useRef(false);
+
+	const handleLongPressStart = useCallback((threadId: number) => {
+		longPressTriggeredRef.current = false;
+		longPressTimerRef.current = setTimeout(() => {
+			longPressTriggeredRef.current = true;
+			setOpenDropdownId(threadId);
+		}, 500);
+	}, []);
+
+	const handleLongPressCancel = useCallback(() => {
+		if (longPressTimerRef.current) {
+			clearTimeout(longPressTimerRef.current);
+			longPressTimerRef.current = null;
+		}
+	}, []);
+
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
 	useEffect(() => {
@@ -357,7 +375,16 @@ export function AllSharedChatsSidebar({
 								{isMobile ? (
 									<button
 										type="button"
-											onClick={() => handleThreadClick(thread.id)}
+										onClick={() => {
+											if (longPressTriggeredRef.current) {
+												longPressTriggeredRef.current = false;
+												return;
+											}
+											handleThreadClick(thread.id);
+										}}
+										onTouchStart={() => handleLongPressStart(thread.id)}
+										onTouchEnd={handleLongPressCancel}
+										onTouchMove={handleLongPressCancel}
 										disabled={isBusy}
 										className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 									>
@@ -396,7 +423,9 @@ export function AllSharedChatsSidebar({
 											size="icon"
 											className={cn(
 												"h-6 w-6 shrink-0",
-													"md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+												isMobile
+													? "opacity-0 pointer-events-none absolute"
+													: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
 												"transition-opacity"
 											)}
 											disabled={isBusy}

surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useCallback, useState } from "react";
 import {
 	ArchiveIcon,
 	MessageSquare,
@@ -17,6 +18,8 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { useLongPress } from "@/hooks/use-long-press";
 import { cn } from "@/lib/utils";
 
 interface ChatListItemProps {
@@ -39,12 +42,24 @@ export function ChatListItem({
 	onDelete,
 }: ChatListItemProps) {
 	const t = useTranslations("sidebar");
+	const isMobile = useIsMobile();
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+
+	const { handlers: longPressHandlers, wasLongPress } = useLongPress(
+		useCallback(() => setDropdownOpen(true), [])
+	);
+
+	const handleClick = useCallback(() => {
+		if (wasLongPress()) return;
+		onClick?.();
+	}, [onClick, wasLongPress]);
 
 	return (
 		<div className="group/item relative w-full">
 			<button
 				type="button"
-				onClick={onClick}
+				onClick={handleClick}
+				{...(isMobile ? longPressHandlers : {})}
 				className={cn(
 					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left transition-colors",
 					"[&>span:last-child]:truncate",
@@ -57,9 +72,14 @@ export function ChatListItem({
 				<span className="w-[calc(100%-3rem)] ">{name}</span>
 			</button>
 
-			{/* Actions dropdown */}
+			{/* Actions dropdown - trigger hidden on mobile, long-press opens it instead */}
-			<div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-100 md:opacity-0 md:group-hover/item:opacity-100 transition-opacity">
+			<div className={cn(
-				<DropdownMenu>
+				"absolute right-1 top-1/2 -translate-y-1/2 transition-opacity",
+				isMobile
+					? "opacity-0 pointer-events-none"
+					: "opacity-0 group-hover/item:opacity-100"
+			)}>
+				<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
 					<DropdownMenuTrigger asChild>
 						<Button variant="ghost" size="icon" className="h-6 w-6">
 							<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />

surfsense_web/hooks/use-long-press.ts

@@ -0,0 +1,39 @@
+import { useCallback, useRef } from "react";
+
+const LONG_PRESS_DELAY = 500;
+
+export function useLongPress(onLongPress: () => void, delay = LONG_PRESS_DELAY) {
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const triggeredRef = useRef(false);
+
+	const start = useCallback(() => {
+		triggeredRef.current = false;
+		timerRef.current = setTimeout(() => {
+			triggeredRef.current = true;
+			onLongPress();
+		}, delay);
+	}, [onLongPress, delay]);
+
+	const cancel = useCallback(() => {
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+
+	const handlers = {
+		onTouchStart: start,
+		onTouchEnd: cancel,
+		onTouchMove: cancel,
+	};
+
+	const wasLongPress = useCallback(() => {
+		if (triggeredRef.current) {
+			triggeredRef.current = false;
+			return true;
+		}
+		return false;
+	}, []);
+
+	return { handlers, wasLongPress };
+}