From 37e19955460b44efe8bc9cbe8474afe1249fef8d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 7 Mar 2026 04:44:24 +0530
Subject: [PATCH] feat: refactor long-press functionality in
 AllPrivateChatsSidebar and AllSharedChatsSidebar to utilize custom hook for
 improved code reusability and maintainability

---
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     | 40 ++++++++-----------
 .../ui/sidebar/AllSharedChatsSidebar.tsx      | 40 ++++++++-----------
 surfsense_web/hooks/use-long-press.ts         | 10 ++++-
 3 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index 01cd5b556..28b259bdc 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -17,6 +17,7 @@ import {
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useLongPress } from "@/hooks/use-long-press";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -85,23 +86,14 @@ 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 pendingThreadIdRef = useRef<number | null>(null);
+	const { handlers: longPressHandlers, wasLongPress } = useLongPress(
+		useCallback(() => {
+			if (pendingThreadIdRef.current !== null) {
+				setOpenDropdownId(pendingThreadIdRef.current);
+			}
+		}, [])
+	);
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
@@ -376,15 +368,15 @@ export function AllPrivateChatsSidebar({
 									<button
 										type="button"
 										onClick={() => {
-											if (longPressTriggeredRef.current) {
-												longPressTriggeredRef.current = false;
-												return;
-											}
+											if (wasLongPress()) return;
 											handleThreadClick(thread.id);
 										}}
-										onTouchStart={() => handleLongPressStart(thread.id)}
-										onTouchEnd={handleLongPressCancel}
-										onTouchMove={handleLongPressCancel}
+										onTouchStart={() => {
+											pendingThreadIdRef.current = thread.id;
+											longPressHandlers.onTouchStart();
+										}}
+										onTouchEnd={longPressHandlers.onTouchEnd}
+										onTouchMove={longPressHandlers.onTouchMove}
 										disabled={isBusy}
 										className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 									>
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index a9b1a6f69..c45a7952e 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -17,6 +17,7 @@ import {
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useLongPress } from "@/hooks/use-long-press";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -85,23 +86,14 @@ 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 pendingThreadIdRef = useRef<number | null>(null);
+	const { handlers: longPressHandlers, wasLongPress } = useLongPress(
+		useCallback(() => {
+			if (pendingThreadIdRef.current !== null) {
+				setOpenDropdownId(pendingThreadIdRef.current);
+			}
+		}, [])
+	);
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
@@ -376,15 +368,15 @@ export function AllSharedChatsSidebar({
 									<button
 										type="button"
 										onClick={() => {
-											if (longPressTriggeredRef.current) {
-												longPressTriggeredRef.current = false;
-												return;
-											}
+											if (wasLongPress()) return;
 											handleThreadClick(thread.id);
 										}}
-										onTouchStart={() => handleLongPressStart(thread.id)}
-										onTouchEnd={handleLongPressCancel}
-										onTouchMove={handleLongPressCancel}
+										onTouchStart={() => {
+											pendingThreadIdRef.current = thread.id;
+											longPressHandlers.onTouchStart();
+										}}
+										onTouchEnd={longPressHandlers.onTouchEnd}
+										onTouchMove={longPressHandlers.onTouchMove}
 										disabled={isBusy}
 										className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 									>
diff --git a/surfsense_web/hooks/use-long-press.ts b/surfsense_web/hooks/use-long-press.ts
index 611a6ae85..3301b40f1 100644
--- a/surfsense_web/hooks/use-long-press.ts
+++ b/surfsense_web/hooks/use-long-press.ts
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 const LONG_PRESS_DELAY = 500;
 
@@ -21,6 +21,14 @@ export function useLongPress(onLongPress: () => void, delay = LONG_PRESS_DELAY)
 		}
 	}, []);
 
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) {
+				clearTimeout(timerRef.current);
+			}
+		};
+	}, []);
+
 	const handlers = {
 		onTouchStart: start,
 		onTouchEnd: cancel,