From b970be11ee895c34e019231022e9e5244e4aec2f Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 20 Sep 2026 01:32:44 +0000
Subject: Stop per-store add forms jumping to the bottom of the page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inline "Add to <store>..." forms submitted with a bare
hx-swap="innerHTML" against #shopping-items-list. Those forms live *inside*
that target, so the swap destroys the form that submitted it and the page ends
up scrolled to the bottom rather than staying on the store being added to. The
quick-add form at the top never had this because it sits outside the target and
already carried an explicit scroll: modifier.

Each store section now has a stable id and its inline form scrolls back to it,
so adding to a store keeps that store in view.

Adds a `slug` template function for the id: store names are user data
("Trader Joe's", "Hardware Store") going straight into element ids, so anything
outside [a-z0-9-] is collapsed to a dash and an empty result becomes "unnamed"
rather than an invalid, shared anchor.

Tests render the real template with the real func map, and assert every inline
add form has a scroll target — the bug is trivially reintroduced by copying a
section.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018AwnALZL6bD4VBtATDVv3B
---
 web/templates/partials/shopping-tab.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'web')

diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 06d2b56..e68876f 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -97,7 +97,7 @@
     {{if .Grouped}}
     <!-- Grouped View: Items by Store -->
     {{range .Stores}}
-    <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5 mb-6">
+    <section id="store-{{slug .Name}}" class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5 mb-6">
         <div class="flex items-center justify-between mb-4">
             <h2 class="text-xl font-medium text-white">{{.Name}}</h2>
             <a href="/shopping/mode/{{.Name}}"
@@ -127,10 +127,15 @@
         </div>
         {{end}}
         <!-- 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
+             explicit scroll target the page lands at the bottom instead of
+             staying on the store you were adding to. Anchored to this store's
+             own section, which is re-rendered with the same id. -->
         <form class="inline-add-form mt-3 flex gap-2"
               hx-post="/shopping/add"
               hx-target="#shopping-items-list"
-              hx-swap="innerHTML">
+              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="Add to {{.Name}}..."
-- 
cgit v1.2.3