From 4ac78382343e14c00ba21ee11ee4642255509eef Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Tue, 3 Feb 2026 15:17:46 -1000
Subject: Document Quick Add UX pattern and filter checked shopping items

- Add Quick Add UX pattern to DESIGN.md documenting expected behaviors
  for form submission, error handling, and completed item display
- Filter checked items from shopping-tab.html display (both grouped
  and ungrouped views)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 DESIGN.md                                | 20 ++++++++++++++++++++
 web/templates/partials/shopping-tab.html |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/DESIGN.md b/DESIGN.md
index 27157d2..e0cf867 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -200,6 +200,26 @@ BuildTimeline(ctx, store, calendarClient, tasksClient, start, end)
 - **Labels:** `text-xs font-medium tracking-wider uppercase`
 - **Body:** `text-sm text-white/70`
 
+### Quick Add UX Pattern
+
+All quick-add forms (shopping, tasks, etc.) must follow these behaviors for rapid data entry:
+
+**On Successful Submission:**
+1. **Clear input** - Reset the form/input field immediately
+2. **Refocus input** - Return focus to the text input for the next entry
+3. **Visual feedback** - Brief flash (green background, 300ms) to confirm success
+4. **Update list** - New item appears in the list immediately
+
+**On Error:**
+1. **Preserve input** - Do not clear the input so user can retry
+2. **Show error** - Display error message near the input
+3. **Maintain focus** - Keep focus on the input
+
+**Checked/Completed Items:**
+- Completed items are immediately removed from view (not just crossed out)
+- User items: Deleted from database
+- External items (Trello, PlanToEat): Marked as checked, filtered from display
+
 ---
 
 ## API Integrations
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 0b22c15..b09a54f 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -64,6 +64,7 @@
             {{if .Name}}<h3 class="text-sm text-white/60 mb-2 uppercase tracking-wide">{{.Name}}</h3>{{end}}
             <ul class="space-y-2">
                 {{range .Items}}
+                {{if not .Checked}}
                 <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5">
                     <span class="flex-1 text-white">{{.Name}}</span>
                     {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
@@ -72,6 +73,7 @@
                     </span>
                 </li>
                 {{end}}
+                {{end}}
             </ul>
         </div>
         {{end}}
@@ -97,6 +99,7 @@
             {{range .Stores}}
             {{range .Categories}}
             {{range .Items}}
+            {{if not .Checked}}
             <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5">
                 <span class="flex-1 text-white">{{.Name}}</span>
                 {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
@@ -110,6 +113,7 @@
             {{end}}
             {{end}}
             {{end}}
+            {{end}}
         </ul>
     </section>
     {{end}}
-- 
cgit v1.2.3