diff --git a/src/pages/ListView.tsx b/src/pages/ListView.tsx index 857cd66..c791e69 100644 --- a/src/pages/ListView.tsx +++ b/src/pages/ListView.tsx @@ -19,6 +19,7 @@ import { useSettings } from "../hooks/useSettings"; import { useTouchDrag } from "../hooks/useTouchDrag"; import { useNotifications } from "../hooks/useNotifications"; import { useKeyboardShortcuts, KeyboardShortcutsHelp, type Shortcut } from "../hooks/useKeyboardShortcuts"; +import { usePullToRefresh, PullToRefreshIndicator } from "../hooks/usePullToRefresh"; import { canEdit, canInvite, canDeleteList } from "../lib/permissions"; import { groupByAisle, classifyItem } from "../lib/groceryAisles"; import { useCategories } from "../hooks/useCategories"; @@ -51,6 +52,18 @@ export function ListView() { const { haptic } = useSettings(); const { scheduleItemsNotifications, isEnabled: notificationsEnabled } = useNotifications({ userDid: did }); + // Pull-to-refresh + const handleRefresh = useCallback(async () => { + haptic('medium'); + await new Promise(resolve => setTimeout(resolve, 800)); + haptic('success'); + }, [haptic]); + + const { isRefreshing, pullDistance, pullRef } = usePullToRefresh({ + onRefresh: handleRefresh, + threshold: 80, + }); + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isShareModalOpen, setIsShareModalOpen] = useState(false); const [isPublishModalOpen, setIsPublishModalOpen] = useState(false); @@ -592,7 +605,14 @@ export function ListView() { const totalCount = items.length; return ( -
+
+ {/* Pull-to-refresh indicator */} + + {/* Header - Redesigned for less crowding */}