diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-02-03 15:17:46 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-02-03 15:17:46 -1000 |
| commit | 4ac78382343e14c00ba21ee11ee4642255509eef (patch) | |
| tree | 89501f12dcad768ca354473b9c6cdca0623e265c | |
| parent | 25a5b7ecf9ddd31da54e91f87988b77aea857571 (diff) | |
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>
| -rw-r--r-- | DESIGN.md | 20 | ||||
| -rw-r--r-- | web/templates/partials/shopping-tab.html | 4 |
2 files changed, 24 insertions, 0 deletions
@@ -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}} |