implement long press on list item

packages/web/src/app/bookmarks/-bookmark-list.tsx

@@ -11,6 +11,8 @@ import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
 import { DialogKind, useBookmarkPageStore } from "./-store"
 
+const LONG_PRESS_DELAY_MS = 500
+
 enum BookmarkListItemAction {
 	Open = "Open",
 	Edit = "Edit",
@@ -273,11 +275,40 @@ const BookmarkListItem = memo(
 		const setIsItemExpanded = useBookmarkListStore((state) => state.setIsItemExpanded)
 		const onItemAction = useBookmarkListStore((state) => state.onItemAction)
 
+		const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+		const isLongPressActive = useRef(false)
+
 		useEffect(() => {
 			if (selected) {
 				store.getState().setSelectedIndex(index)
 			}
-		}, [selected, index, store.getState])
+		}, [selected, index, store])
+
+		function handleTouchStart() {
+			isLongPressActive.current = true
+			longPressTimerRef.current = setTimeout(() => {
+				if (isLongPressActive.current) {
+					setSelectedBookmarkId(bookmark.id)
+					setIsItemExpanded(true)
+				}
+			}, LONG_PRESS_DELAY_MS)
+		}
+
+		function handleTouchEnd() {
+			isLongPressActive.current = false
+			if (longPressTimerRef.current) {
+				clearTimeout(longPressTimerRef.current)
+			}
+		}
+
+		useEffect(
+			() => () => {
+				if (longPressTimerRef.current) {
+					clearTimeout(longPressTimerRef.current)
+				}
+			},
+			[],
+		)
 
 		function deleteItem() {
 			onItemAction(bookmark, BookmarkListItemAction.Delete)
@@ -304,6 +335,9 @@ const BookmarkListItem = memo(
 					"text-teal-600": selected && !isBookmarkItemExpanded,
 				})}
 				onMouseEnter={onItemHover}
+				onTouchStart={handleTouchStart}
+				onTouchEnd={handleTouchEnd}
+				onTouchCancel={handleTouchEnd}
 			>
 				<button
 					type="button"