diff options
| -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}} |