Make shopping items editable: tap to rename, move store/section, delete

Tapping an item outside shopping mode now opens an edit sheet. User-added items
can be renamed, moved between stores and sections, and deleted. PlanToEat items
show why they cannot be edited — the client is read-only, so presenting fields
that silently would not save is worse than saying so — and offer removal, which
marks them checked, the same mechanism shopping mode already uses.

This needed a store registry first. Stores previously existed only because some
item referenced them by name, with Trello's list names quietly acting as the
registry; removing Trello as a source made the gap visible. Without a registry
you cannot move an item into an empty store, and moving the last item out of a
store makes it vanish mid-edit. Migration 034 adds shopping_stores and
shopping_sections, seeded from the stores currently in use, and gives items a
section column — sections previously existed only as PlanToEat category
strings, so a user item could not be filed under one at all.

Registered stores and sections now appear in the list even when empty, which is
the whole point of the registry.

Two deliberate choices about destructive edges:
  * Renaming a store renames it and moves its items in one transaction. Items
    reference the store by name, so doing either alone orphans them.
  * Deleting a store or section keeps the items, moving them to Unassigned or
    clearing the section. Losing the list is far worse than re-filing an item.
  * An UPDATE matching no rows is an error, not a silent success, so a stale id
    cannot look like a saved edit.

Section options are rebuilt per store in the edit sheet rather than shipped as
one flat list, so a Costco item cannot be filed under a Safeway aisle.

18 new store tests, 11 handler tests.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018AwnALZL6bD4VBtATDVv3B

2 files changed, 152 insertions, 2 deletions

diff --git a/web/templates/partials/shopping-item-edit.html b/web/templates/partials/shopping-item-edit.html
new file mode 100644
index 0000000..e5220f5
--- /dev/null
+++ b/web/templates/partials/shopping-item-edit.html
@@ -0,0 +1,114 @@
+{{define "shopping-item-edit"}}
+<div id="shopping-edit-backdrop"
+     class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm p-0 sm:p-4"
+     onclick="if(event.target === this) this.remove()">
+    <div class="w-full sm:max-w-md bg-slate-900 border border-white/10 rounded-t-2xl sm:rounded-2xl p-5 space-y-4">
+
+        <div class="flex items-start justify-between gap-3">
+            <h3 class="text-lg font-medium text-white">{{if .Editable}}Edit item{{else}}Item{{end}}</h3>
+            <button type="button" class="text-white/40 hover:text-white text-xl leading-none"
+                    onclick="document.getElementById('shopping-edit-backdrop').remove()">&times;</button>
+        </div>
+
+        {{if .Editable}}
+        <form hx-post="/shopping/item/{{.ID}}"
+              hx-target="#shopping-items-list"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) document.getElementById('shopping-edit-backdrop').remove()"
+              class="space-y-4">
+
+            <div>
+                <label class="block text-xs uppercase tracking-wide text-white/50 mb-1">Name</label>
+                <input type="text" name="name" value="{{.Name}}" required autocomplete="off"
+                       class="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30">
+            </div>
+
+            <div>
+                <label class="block text-xs uppercase tracking-wide text-white/50 mb-1">Store</label>
+                <select name="store" id="edit-store-select" required
+                        class="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30">
+                    {{range .Stores}}
+                    <option value="{{.Name}}" {{if .Selected}}selected{{end}}>{{.Name}}</option>
+                    {{end}}
+                </select>
+            </div>
+
+            <div>
+                <label class="block text-xs uppercase tracking-wide text-white/50 mb-1">Section</label>
+                <select name="section" id="edit-section-select"
+                        class="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30">
+                    <option value="">— none —</option>
+                </select>
+                <p class="text-xs text-white/30 mt-1">Sections belong to a store; changing store changes the options.</p>
+            </div>
+
+            <div class="flex gap-2 pt-1">
+                <button type="submit"
+                        class="flex-1 bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                    Save
+                </button>
+                <button type="button"
+                        class="px-4 py-2 rounded-lg text-sm border border-red-500/30 text-red-400 hover:bg-red-500/10 transition-colors"
+                        hx-delete="/shopping/item/{{.ID}}"
+                        hx-target="#shopping-items-list"
+                        hx-swap="innerHTML"
+                        hx-confirm="Delete {{.Name}}?"
+                        hx-on::after-request="if(event.detail.successful) document.getElementById('shopping-edit-backdrop').remove()">
+                    Delete
+                </button>
+            </div>
+        </form>
+
+        <script>
+        (function() {
+            // Section options are per-store, so they are rebuilt whenever the
+            // store changes rather than shipped as one flat list — otherwise
+            // you could file a Costco item under a Safeway aisle.
+            var sectionsByStore = {
+                {{- range .Stores}}
+                {{.Name}}: [{{range $i, $s := .Sections}}{{if $i}}, {{end}}{{$s.Name}}{{end}}],
+                {{- end}}
+            };
+            var current = {{.Section}};
+            var storeSel = document.getElementById('edit-store-select');
+            var sectionSel = document.getElementById('edit-section-select');
+
+            function rebuild() {
+                var opts = sectionsByStore[storeSel.value] || [];
+                sectionSel.innerHTML = '<option value="">— none —</option>';
+                opts.forEach(function(name) {
+                    var o = document.createElement('option');
+                    o.value = name;
+                    o.textContent = name;
+                    if (name === current) o.selected = true;
+                    sectionSel.appendChild(o);
+                });
+            }
+            storeSel.addEventListener('change', function() { current = ''; rebuild(); });
+            rebuild();
+        })();
+        </script>
+
+        {{else}}
+        <div class="space-y-3">
+            <div>
+                <div class="text-white">{{.Name}}</div>
+                <div class="text-sm text-white/50">{{.Store}}</div>
+            </div>
+            <p class="text-sm text-amber-300/80 bg-amber-500/10 border border-amber-500/20 rounded-lg p-3">
+                {{.ReadOnlyWhy}}
+            </p>
+            <button type="button"
+                    class="w-full px-4 py-2 rounded-lg text-sm border border-red-500/30 text-red-400 hover:bg-red-500/10 transition-colors"
+                    hx-delete="/shopping/item/{{.ID}}?source={{.Source}}"
+                    hx-target="#shopping-items-list"
+                    hx-swap="innerHTML"
+                    hx-confirm="Remove {{.Name}} from the list?"
+                    hx-on::after-request="if(event.detail.successful) document.getElementById('shopping-edit-backdrop').remove()">
+                Remove from list
+            </button>
+        </div>
+        {{end}}
+    </div>
+</div>
+{{end}}
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 9d49122..4937b73 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -53,6 +53,21 @@
         </div>
     </form>
 
+    <!-- New store -->
+    <form class="flex gap-2"
+          hx-post="/shopping/stores"
+          hx-target="#shopping-items-list"
+          hx-swap="innerHTML"
+          hx-on::after-request="if(event.detail.successful) this.reset()">
+        <input type="hidden" name="grouped" value="{{.Grouped}}">
+        <input type="text" name="name" placeholder="New store..."
+               class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-sm"
+               required autocomplete="off">
+        <button type="submit" class="bg-white/10 hover:bg-white/20 text-white/70 hover:text-white px-4 py-2 rounded-lg text-sm transition-colors">
+            Add store
+        </button>
+    </form>
+
     <!-- Items List Container -->
     <div id="shopping-items-list">
         {{template "shopping-items-content" .}}
@@ -114,7 +129,10 @@
             <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">
+                <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 cursor-pointer"
+                    hx-get="/shopping/item/{{.ID}}/edit?source={{.Source}}&name={{.Name}}&store={{.Store}}"
+                    hx-target="body"
+                    hx-swap="beforeend">
                     <span class="flex-1 text-white">{{.Name}}</span>
                     {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
                     <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}">
@@ -126,6 +144,21 @@
             </ul>
         </div>
         {{end}}
+        <!-- Add a section to this store -->
+        <form class="mt-3 flex gap-2"
+              hx-post="/shopping/sections"
+              hx-target="#shopping-items-list"
+              hx-swap="innerHTML scroll:#store-{{slug .Name}}:top">
+            <input type="hidden" name="store" value="{{.Name}}">
+            <input type="hidden" name="grouped" value="true">
+            <input type="text" name="name" placeholder="New section in {{.Name}}..."
+                   class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-xs"
+                   required autocomplete="off">
+            <button type="submit" class="bg-white/5 hover:bg-white/15 text-white/50 hover:text-white px-3 py-2 rounded-lg text-xs transition-colors">
+                + section
+            </button>
+        </form>
+
         <!-- Inline Add Item -->
         <!-- scroll: is not optional here. This form sits *inside* the swap
              target, so submitting it replaces the form mid-request; without an
@@ -155,7 +188,10 @@
             {{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">
+            <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 cursor-pointer"
+                hx-get="/shopping/item/{{.ID}}/edit?source={{.Source}}&name={{.Name}}&store={{.Store}}"
+                hx-target="body"
+                hx-swap="beforeend">
                 <span class="flex-1 text-white">{{.Name}}</span>
                 {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
                 <span class="text-xs px-2 py-0.5 rounded bg-white/10 text-white/50">