refactor(ui): extract duplicated row-expand handler into shared function

The same ~250-character inline onclick handler was copy-pasted across
all 7 list templates. Extract it into a toggleRow() function in
base.html and replace the inline copies with a single call.

templates/base.html

@@ -23,6 +23,18 @@
     <script defer src="/components/photo-capture.js"></script>
     <script defer src="/components/searchable-select.js"></script>
     {% block head %}{% endblock %}
+    <script>
+      const toggleRow = (event) => {
+        if (event.target.closest('.card-detail')) return;
+        const row = event.currentTarget;
+        row.classList.toggle('expanded');
+        row.querySelector('.card-detail')?.classList.toggle('hidden');
+        const r = row.nextElementSibling;
+        if (r?.classList.contains('detail-row')) r.classList.toggle('hidden');
+        row.querySelector('.icon-expand')?.classList.toggle('hidden');
+        row.querySelector('.icon-collapse')?.classList.toggle('hidden');
+      };
+    </script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const mobileQuery = window.matchMedia("(max-width: 767px)");

templates/partials/lists/bag_list.html

@@ -36,7 +36,7 @@
         <tbody class="divide-y/70">
           {% for bag in bags.items %}
           <tr class="transition hover:bg-surface-alt"
-            {% if is_authenticated %}onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"{% endif %}
+            {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ bag.created_date }}</div>

templates/partials/lists/brew_list.html

@@ -65,7 +65,7 @@
         <tbody class="divide-y/70">
           {% for brew in brews.items %}
           <tr class="transition hover:bg-surface-alt"
-            {% if is_authenticated %}onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"{% endif %}
+            {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ brew.created_date }}</div>

templates/partials/lists/cafe_list.html

@@ -39,7 +39,7 @@
             data-sort-country="{{ cafe.country }}"
             data-sort-city="{{ cafe.city }}"
             class="transition hover:bg-surface-alt"
-            onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"
+            onclick="toggleRow(event)"
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ cafe.created_date }}</div>

templates/partials/lists/cup_list.html

@@ -38,7 +38,7 @@
           <tr
             data-star-key="{{ cup.id }}"
             class="transition hover:bg-surface-alt"
-            {% if is_authenticated %}onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"{% endif %}
+            {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ cup.created_date }}</div>

templates/partials/lists/gear_list.html

@@ -36,7 +36,7 @@
         <tbody class="divide-y/70">
           {% for item in gear.items %}
           <tr class="transition hover:bg-surface-alt"
-            {% if is_authenticated %}onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"{% endif %}
+            {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ item.created_date }}</div>

templates/partials/lists/roast_list.html

@@ -42,7 +42,7 @@
             data-sort-origin="{{ roast.origin }}"
             data-sort-producer="{{ roast.producer }}"
             class="transition hover:bg-surface-alt"
-            {% if is_authenticated %}onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"{% endif %}
+            {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ roast.created_date }}</div>

templates/partials/lists/roaster_list.html

@@ -39,7 +39,7 @@
             data-sort-country="{{ roaster.country }}"
             data-sort-city="{{ roaster.city }}"
             class="transition hover:bg-surface-alt"
-            {% if roaster.has_homepage || is_authenticated %}onclick="if(event.target.closest('.card-detail'))return;this.classList.toggle('expanded');this.querySelector('.card-detail')?.classList.toggle('hidden');const r=this.nextElementSibling;if(r?.classList.contains('detail-row'))r.classList.toggle('hidden');this.querySelector('.icon-expand')?.classList.toggle('hidden');this.querySelector('.icon-collapse')?.classList.toggle('hidden');"{% endif %}
+            {% if roaster.has_homepage || is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
             <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
               <div>{{ roaster.created_date }}</div>