From 9702a92b2f8148835fbf4bd91457bd686a5f9498 Mon Sep 17 00:00:00 2001
From: Krusty <krusty@clawdbot.com>
Date: Tue, 10 Feb 2026 01:32:14 -0800
Subject: [PATCH] feat: add pull-to-refresh on ListView

Adds the same pull-to-refresh gesture already used on the Home page
to the ListView page, giving mobile users a consistent refresh UX
across all list views.
---
 src/pages/ListView.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

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 (
-    <div className="max-w-3xl mx-auto">
+    <div ref={pullRef} className="max-w-3xl mx-auto">
+      {/* Pull-to-refresh indicator */}
+      <PullToRefreshIndicator
+        pullDistance={pullDistance}
+        threshold={80}
+        isRefreshing={isRefreshing}
+      />
+
       {/* Header - Redesigned for less crowding */}
       <div className="mb-6">
         <div className="flex items-start gap-3">