diff --git a/packages/web/src/app/bookmarks/-bookmark-list.tsx b/packages/web/src/app/bookmarks/-bookmark-list.tsx index 2807d27..b608956 100644 --- a/packages/web/src/app/bookmarks/-bookmark-list.tsx +++ b/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 | 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} >