From 546e105b1058efbaea6f687cada1fe23b274787d Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 3 Feb 2026 13:37:50 +0000
Subject: [PATCH] fix(templates): prefix Datastar signals with underscore to
 mark as local

Datastar sends all non-underscore signals with every backend request.
UI-only signals (showForm, navOpen, isSubmitting, form ref, brew
parameters) were being serialized into pagination/search/sort URLs,
creating bloated requests. Prefix them with _ so Datastar's default
filterSignals excludes them from requests.
---
 CLAUDE.md               | 16 ++++++++--------
 templates/bags.html     | 16 ++++++++--------
 templates/brews.html    | 40 ++++++++++++++++++++--------------------
 templates/gear.html     | 16 ++++++++--------
 templates/nav.html      | 10 +++++-----
 templates/roasters.html | 14 +++++++-------
 templates/roasts.html   | 14 +++++++-------
 7 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index fa77fc1..99ee48f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -211,11 +211,11 @@ pub fn render_fragment<T: Template>(template: T, selector: &'static str) -> Resu
 Templates use Datastar attributes for interactivity:
 
 ```html
-<!-- Reactive state -->
-<section data-signals:show-form="false" data-signals:is-submitting="false">
+<!-- Local signals (underscore prefix = not sent to server) -->
+<section data-signals:_show-form="false" data-signals:_is-submitting="false">
 
   <!-- Visibility binding -->
-  <div data-show="$showForm" style="display: none">
+  <div data-show="$_showForm" style="display: none">
     <!-- Form content -->
   </div>
 
@@ -228,17 +228,17 @@ Templates use Datastar attributes for interactivity:
   </form>
 
   <!-- Reset form on completion -->
-  <form data-ref="form"
-        data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form.reset())">
+  <form data-ref="_form"
+        data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form.reset())">
 </section>
 ```
 
 Key attributes:
 
-- `data-signals:name="value"` - Reactive state signals
-- `data-show="$signal"` - Conditional visibility
+- `data-signals:_name="value"` - Local signals (underscore prefix excludes from backend requests)
+- `data-show="$_signal"` - Conditional visibility
 - `data-on:event="expression"` - Event handlers
-- `data-ref="name"` - DOM element references
+- `data-ref="_name"` - DOM element references (underscore prefix for local refs)
 - `@get/@post/@put/@delete(url, options)` - HTTP actions with automatic Datastar headers
 
 #### URL Generation
diff --git a/templates/bags.html b/templates/bags.html
index ad78565..4ab8ea6 100644
--- a/templates/bags.html
+++ b/templates/bags.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %} {% block title %}Brewlog · Bags{% endblock %} {% block content %}
-<section data-signals:show-form="false" data-signals:is-submitting="false">
+<section data-signals:_show-form="false" data-signals:_is-submitting="false">
   <header class="flex flex-wrap items-start justify-between gap-4">
     <div class="flex flex-col gap-2">
       <h1 class="text-3xl font-semibold">Bags</h1>
@@ -9,8 +9,8 @@
     <button
       type="button"
       class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
-      data-class:hidden="$showForm"
-      data-on:click="$showForm = true"
+      data-class:hidden="$_showForm"
+      data-on:click="$_showForm = true"
       aria-label="Add new bag"
     >
       <span aria-hidden="true">+</span>
@@ -34,7 +34,7 @@
   {% else %}
   <div
     class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
-    data-show="$showForm"
+    data-show="$_showForm"
     style="display: none"
   >
     <div>
@@ -47,9 +47,9 @@
       method="post"
       action="/api/v1/bags"
       class="mt-4 flex flex-col gap-4"
-      data-on:submit="$isSubmitting = true; @post('/api/v1/bags?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#bag-list', mode: 'replace'}})"
-      data-ref="form"
-      data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $isSubmitting = false)"
+      data-on:submit="$_isSubmitting = true; @post('/api/v1/bags?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#bag-list', mode: 'replace'}})"
+      data-ref="_form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_isSubmitting = false)"
     >
       <div class="grid gap-4 sm:grid-cols-2">
         <label class="flex flex-col gap-1 text-sm">
@@ -94,7 +94,7 @@
         <button
           type="button"
           class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
-          data-on:click="$showForm = false"
+          data-on:click="$_showForm = false"
         >
           Cancel
         </button>
diff --git a/templates/brews.html b/templates/brews.html
index 1977b17..b043c01 100644
--- a/templates/brews.html
+++ b/templates/brews.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %} {% block title %}Brewlog · Brews{% endblock %} {% block content %}
-<section data-signals:show-form="false" data-signals:is-submitting="false" data-signals:temp="91.0" data-signals:grind="6.0" data-signals:volume="250" data-signals:weight="15.0">
+<section data-signals:_show-form="false" data-signals:_is-submitting="false" data-signals:_temp="91.0" data-signals:_grind="6.0" data-signals:_volume="250" data-signals:_weight="15.0">
   <header class="flex flex-wrap items-start justify-between gap-4">
     <div class="flex flex-col gap-2">
       <h1 class="text-3xl font-semibold">Brews</h1>
@@ -9,8 +9,8 @@
     <button
       type="button"
       class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
-      data-class:hidden="$showForm"
-      data-on:click="$showForm = true"
+      data-class:hidden="$_showForm"
+      data-on:click="$_showForm = true"
       aria-label="Add new brew"
     >
       <span aria-hidden="true">+</span>
@@ -40,7 +40,7 @@
   {% else %}
   <div
     class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
-    data-show="$showForm"
+    data-show="$_showForm"
     style="display: none"
   >
     <div>
@@ -51,9 +51,9 @@
       method="post"
       action="/api/v1/brews"
       class="mt-4 flex flex-col gap-4 overflow-hidden"
-      data-on:submit="$isSubmitting = true; @post('/api/v1/brews?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
-      data-ref="form"
-      data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $temp = 91.0, $grind = 6.0, $volume = 250, $weight = 15.0, $isSubmitting = false)"
+      data-on:submit="$_isSubmitting = true; @post('/api/v1/brews?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
+      data-ref="_form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_temp = 91.0, $_grind = 6.0, $_volume = 250, $_weight = 15.0, $_isSubmitting = false)"
     >
       <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         <!-- Bag selector -->
@@ -102,9 +102,9 @@
         <div class="flex flex-col gap-1 text-sm">
           <span class="text-stone-700">Coffee (g) *</span>
           <div class="flex items-center gap-2">
-            <button type="button" class="btn-adjust" data-on:click="$weight = Math.max(1, $weight - 0.5)">-</button>
-            <input type="number" name="coffee_weight" step="any" min="1" required class="input-field flex-1 text-center" data-attr:value="$weight" data-on:input="$weight = this.valueAsNumber" />
-            <button type="button" class="btn-adjust" data-on:click="$weight = $weight + 0.5">+</button>
+            <button type="button" class="btn-adjust" data-on:click="$_weight = Math.max(1, $_weight - 0.5)">-</button>
+            <input type="number" name="coffee_weight" step="any" min="1" required class="input-field flex-1 text-center" data-attr:value="$_weight" data-on:input="$_weight = this.valueAsNumber" />
+            <button type="button" class="btn-adjust" data-on:click="$_weight = $_weight + 0.5">+</button>
           </div>
         </div>
 
@@ -112,9 +112,9 @@
         <div class="flex flex-col gap-1 text-sm">
           <span class="text-stone-700">Grind Setting *</span>
           <div class="flex items-center gap-2">
-            <button type="button" class="btn-adjust" data-on:click="$grind = Math.max(0, $grind - 0.5)">-</button>
-            <input type="number" name="grind_setting" step="any" min="0" required class="input-field flex-1 text-center" data-attr:value="$grind" data-on:input="$grind = this.valueAsNumber" />
-            <button type="button" class="btn-adjust" data-on:click="$grind = $grind + 0.5">+</button>
+            <button type="button" class="btn-adjust" data-on:click="$_grind = Math.max(0, $_grind - 0.5)">-</button>
+            <input type="number" name="grind_setting" step="any" min="0" required class="input-field flex-1 text-center" data-attr:value="$_grind" data-on:input="$_grind = this.valueAsNumber" />
+            <button type="button" class="btn-adjust" data-on:click="$_grind = $_grind + 0.5">+</button>
           </div>
         </div>
 
@@ -122,9 +122,9 @@
         <div class="flex flex-col gap-1 text-sm">
           <span class="text-stone-700">Water (ml) *</span>
           <div class="flex items-center gap-2">
-            <button type="button" class="btn-adjust" data-on:click="$volume = Math.max(10, $volume - 10)">-</button>
-            <input type="number" name="water_volume" step="any" min="10" required class="input-field flex-1 text-center" data-attr:value="$volume" data-on:input="$volume = this.valueAsNumber" />
-            <button type="button" class="btn-adjust" data-on:click="$volume = $volume + 10">+</button>
+            <button type="button" class="btn-adjust" data-on:click="$_volume = Math.max(10, $_volume - 10)">-</button>
+            <input type="number" name="water_volume" step="any" min="10" required class="input-field flex-1 text-center" data-attr:value="$_volume" data-on:input="$_volume = this.valueAsNumber" />
+            <button type="button" class="btn-adjust" data-on:click="$_volume = $_volume + 10">+</button>
           </div>
         </div>
 
@@ -132,9 +132,9 @@
         <div class="flex flex-col gap-1 text-sm">
           <span class="text-stone-700">Temp (C) *</span>
           <div class="flex items-center gap-2">
-            <button type="button" class="btn-adjust" data-on:click="$temp = Math.max(0, $temp - 0.5)">-</button>
-            <input type="number" name="water_temp" step="any" min="0" max="100" required class="input-field flex-1 text-center" data-attr:value="$temp" data-on:input="$temp = this.valueAsNumber" />
-            <button type="button" class="btn-adjust" data-on:click="$temp = Math.min(100, $temp + 0.5)">+</button>
+            <button type="button" class="btn-adjust" data-on:click="$_temp = Math.max(0, $_temp - 0.5)">-</button>
+            <input type="number" name="water_temp" step="any" min="0" max="100" required class="input-field flex-1 text-center" data-attr:value="$_temp" data-on:input="$_temp = this.valueAsNumber" />
+            <button type="button" class="btn-adjust" data-on:click="$_temp = Math.min(100, $_temp + 0.5)">+</button>
           </div>
         </div>
       </div>
@@ -143,7 +143,7 @@
         <button
           type="button"
           class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
-          data-on:click="$showForm = false"
+          data-on:click="$_showForm = false"
         >
           Cancel
         </button>
diff --git a/templates/gear.html b/templates/gear.html
index 66bf96a..44f6ea5 100644
--- a/templates/gear.html
+++ b/templates/gear.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block title %}Brewlog · Gear{% endblock %}
 {% block content %}
-<section data-signals:show-form="false" data-signals:is-submitting="false">
+<section data-signals:_show-form="false" data-signals:_is-submitting="false">
   <header class="flex flex-wrap items-start justify-between gap-4">
     <div class="flex flex-col gap-2">
       <h1 class="text-3xl font-semibold">Gear</h1>
@@ -11,8 +11,8 @@
     <button
       type="button"
       class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
-      data-class:hidden="$showForm"
-      data-on:click="$showForm = true"
+      data-class:hidden="$_showForm"
+      data-on:click="$_showForm = true"
       aria-label="Add new gear"
     >
       <span aria-hidden="true">+</span>
@@ -23,7 +23,7 @@
   {% if is_authenticated %}
   <div
     class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
-    data-show="$showForm"
+    data-show="$_showForm"
     style="display: none"
   >
     <div>
@@ -36,9 +36,9 @@
       method="post"
       action="/api/v1/gear"
       class="mt-4 flex flex-col gap-4"
-      data-on:submit="$isSubmitting = true; @post('/api/v1/gear?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#gear-list', mode: 'replace'}})"
-      data-ref="form"
-      data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $isSubmitting = false)"
+      data-on:submit="$_isSubmitting = true; @post('/api/v1/gear?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#gear-list', mode: 'replace'}})"
+      data-ref="_form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_isSubmitting = false)"
     >
       <div class="grid gap-4 sm:grid-cols-2">
         <label class="flex flex-col gap-1 text-sm">
@@ -76,7 +76,7 @@
         <button
           type="button"
           class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
-          data-on:click="$showForm = false"
+          data-on:click="$_showForm = false"
         >
           Cancel
         </button>
diff --git a/templates/nav.html b/templates/nav.html
index 12da103..0e258d1 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -1,4 +1,4 @@
-<nav class="relative rounded-lg border border-amber-300 bg-amber-100/80 p-3 text-sm text-stone-600" data-signals:nav-open="false">
+<nav class="relative rounded-lg border border-amber-300 bg-amber-100/80 p-3 text-sm text-stone-600" data-signals:_nav-open="false">
     <div class="flex items-center justify-between">
         <div class="font-semibold uppercase tracking-[0.25em] text-amber-700"><a href="/timeline">B{rew}log</a></div>
         <!-- Desktop links -->
@@ -18,17 +18,17 @@
             {% endif %}
         </div>
         <!-- Hamburger button (mobile only) -->
-        <button class="md:hidden p-1 text-amber-700" data-on:click="$navOpen = !$navOpen" aria-label="Toggle menu">
-            <svg data-show="!$navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <button class="md:hidden p-1 text-amber-700" data-on:click="$_navOpen = !$_navOpen" aria-label="Toggle menu">
+            <svg data-show="!$_navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
             </svg>
-            <svg data-show="$navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none">
+            <svg data-show="$_navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
         </button>
     </div>
     <!-- Mobile menu -->
-    <div class="md:hidden flex flex-col gap-2 pt-3 mt-3 border-t border-amber-300" data-show="$navOpen" style="display:none">
+    <div class="md:hidden flex flex-col gap-2 pt-3 mt-3 border-t border-amber-300" data-show="$_navOpen" style="display:none">
         <a class="py-1 transition {% if nav_active == "roasters" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/roasters">Roasters</a>
         <a class="py-1 transition {% if nav_active == "roasts" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/roasts">Roasts</a>
         <a class="py-1 transition {% if nav_active == "bags" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/bags">Bags</a>
diff --git a/templates/roasters.html b/templates/roasters.html
index 9f7ce91..329b561 100644
--- a/templates/roasters.html
+++ b/templates/roasters.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %} {% block title %}Brewlog · Roasters{% endblock %} {% block content %}
-<section data-signals:show-form="false">
+<section data-signals:_show-form="false">
   <header class="flex flex-wrap items-start justify-between gap-4">
     <div class="flex flex-col gap-2">
       <h1 class="text-3xl font-semibold">Roasters</h1>
@@ -9,8 +9,8 @@
     <button
       type="button"
       class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
-      data-class:hidden="$showForm"
-      data-on:click="$showForm = true"
+      data-class:hidden="$_showForm"
+      data-on:click="$_showForm = true"
       aria-label="Add new roaster"
     >
       <span aria-hidden="true">+</span>
@@ -21,7 +21,7 @@
   {% if is_authenticated %}
   <div
     class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
-    data-show="$showForm"
+    data-show="$_showForm"
     style="display: none"
   >
     <div>
@@ -35,8 +35,8 @@
       action="/api/v1/roasters"
       class="mt-4 flex flex-col gap-4"
       data-on:submit="@post('/api/v1/roasters?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
-      data-ref="form"
-      data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form && $form.reset())"
+      data-ref="_form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form && $_form.reset())"
     >
       <div class="grid gap-4 sm:grid-cols-2">
         <label class="flex flex-col gap-1 text-sm">
@@ -86,7 +86,7 @@
         <button
           type="button"
           class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
-          data-on:click="($showForm = false, $form && $form.reset())"
+          data-on:click="($_showForm = false, $_form && $_form.reset())"
         >
           Cancel
         </button>
diff --git a/templates/roasts.html b/templates/roasts.html
index 331fda0..0de2eed 100644
--- a/templates/roasts.html
+++ b/templates/roasts.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %} {% block title %}Brewlog · Roasts{% endblock %} {% block content %}
-<section data-signals:show-form="false">
+<section data-signals:_show-form="false">
   <header class="flex flex-wrap items-start justify-between gap-4">
     <div class="flex flex-col gap-2">
       <h1 class="text-3xl font-semibold">Roasts</h1>
@@ -9,8 +9,8 @@
     <button
       type="button"
       class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
-      data-class:hidden="$showForm"
-      data-on:click="$showForm = true"
+      data-class:hidden="$_showForm"
+      data-on:click="$_showForm = true"
       aria-label="Add new roast"
     >
       <span aria-hidden="true">+</span>
@@ -35,7 +35,7 @@
   {% else %}
   <div
     class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
-    data-show="$showForm"
+    data-show="$_showForm"
     style="display: none"
   >
     <div>
@@ -49,8 +49,8 @@
       action="/api/v1/roasts"
       class="mt-4 flex flex-col gap-4"
       data-on:submit="@post('/api/v1/roasts?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
-      data-ref="form"
-      data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form && $form.reset())"
+      data-ref="_form"
+      data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form && $_form.reset())"
     >
       <div class="grid gap-4 sm:grid-cols-2">
         <label class="flex flex-col gap-1 text-sm">
@@ -109,7 +109,7 @@
         <button
           type="button"
           class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
-          data-on:click="($showForm = false, $form && $form.reset())"
+          data-on:click="($_showForm = false, $_form && $_form.reset())"
         >
           Cancel
         </button>