From 26e1a4d9302ca0aee2db872c832214b5adec3232 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Fri, 6 Feb 2026 18:19:12 +0000
Subject: [PATCH] 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                        | 12 ++++++++++++
 templates/partials/lists/bag_list.html     |  2 +-
 templates/partials/lists/brew_list.html    |  2 +-
 templates/partials/lists/cafe_list.html    |  2 +-
 templates/partials/lists/cup_list.html     |  2 +-
 templates/partials/lists/gear_list.html    |  2 +-
 templates/partials/lists/roast_list.html   |  2 +-
 templates/partials/lists/roaster_list.html |  2 +-
 8 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 68548bd..b3a6764 100644
--- a/templates/base.html
+++ b/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)");
diff --git a/templates/partials/lists/bag_list.html b/templates/partials/lists/bag_list.html
index 04123cb..084d63c 100644
--- a/templates/partials/lists/bag_list.html
+++ b/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>
diff --git a/templates/partials/lists/brew_list.html b/templates/partials/lists/brew_list.html
index 8c3dc06..0c81977 100644
--- a/templates/partials/lists/brew_list.html
+++ b/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>
diff --git a/templates/partials/lists/cafe_list.html b/templates/partials/lists/cafe_list.html
index 17e5871..bc864a3 100644
--- a/templates/partials/lists/cafe_list.html
+++ b/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>
diff --git a/templates/partials/lists/cup_list.html b/templates/partials/lists/cup_list.html
index e2ef89a..b3c3bae 100644
--- a/templates/partials/lists/cup_list.html
+++ b/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>
diff --git a/templates/partials/lists/gear_list.html b/templates/partials/lists/gear_list.html
index 2029cae..68ae83c 100644
--- a/templates/partials/lists/gear_list.html
+++ b/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>
diff --git a/templates/partials/lists/roast_list.html b/templates/partials/lists/roast_list.html
index d686233..901bce5 100644
--- a/templates/partials/lists/roast_list.html
+++ b/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>
diff --git a/templates/partials/lists/roaster_list.html b/templates/partials/lists/roaster_list.html
index 14db53a..0df500b 100644
--- a/templates/partials/lists/roaster_list.html
+++ b/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>