From cc69b3ebb6d499dfc7e226f7ce040955ea6f1070 Mon Sep 17 00:00:00 2001
From: Bastian Wagner <bastian.wagner@softconcis.de>
Date: Sun, 16 Aug 2026 13:14:08 +0200
Subject: [PATCH] Extract dashboard row and sync-all form into reusable
 partials

These render the initial dashboard page today and will also be
rendered standalone by the sync routes in the next commits, so the
same markup drives both the full page and the post-sync response.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/web/templates/dashboard.html              | 28 ++-----------------
 .../templates/fragments/sync_all_form.html    |  5 ++++
 app/web/templates/fragments/toast.html        |  3 ++
 app/web/templates/fragments/user_row.html     | 24 ++++++++++++++++
 4 files changed, 34 insertions(+), 26 deletions(-)
 create mode 100644 app/web/templates/fragments/sync_all_form.html
 create mode 100644 app/web/templates/fragments/toast.html
 create mode 100644 app/web/templates/fragments/user_row.html

diff --git a/app/web/templates/dashboard.html b/app/web/templates/dashboard.html
index 53e116c..a61bfd2 100644
--- a/app/web/templates/dashboard.html
+++ b/app/web/templates/dashboard.html
@@ -27,36 +27,12 @@
 
 <div class="page-actions">
     <a class="btn secondary" href="/users/new">Add user</a>
-    <form method="post" action="/sync-all" class="inline-form">
-        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-        <button type="submit">Sync all now</button>
-    </form>
+    {% include "fragments/sync_all_form.html" %}
 </div>
 
 <ul class="user-list">
     {% for row in rows %}
-    <li class="card user-card">
-        <div class="user-main">
-            <a class="user-name" href="/users/{{ row.id }}">{{ row.name }}</a>
-            <div class="user-meta">
-                <span class="badge badge-{{ row.health_state }}">{{ row.health_state.replace("_", " ") }}</span>
-                <span>{{ "enabled" if row.enabled else "disabled" }}</span>
-                <span>last sync: {{ row.last_sync_at or "-" }}</span>
-                <span>last activity: {{ row.last_activity_name or "-" }} ({{ row.last_activity_status or "-" }})</span>
-            </div>
-            {% if row.action_reason == "garmin_mfa_required" %}
-            <span class="action-required">Garmin MFA required &mdash; <a href="/users/{{ row.id }}">resolve</a></span>
-            {% elif row.action_reason == "mywhoosh_device_conflict" %}
-            <span class="action-required">MyWhoosh account logged in on another device &mdash; log out there, then <a href="/users/{{ row.id }}">retry</a></span>
-            {% endif %}
-        </div>
-        <div class="user-actions">
-            <form method="post" action="/users/{{ row.id }}/sync" class="inline-form">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                <button type="submit" class="secondary">Sync now</button>
-            </form>
-        </div>
-    </li>
+    {% include "fragments/user_row.html" %}
     {% else %}
     <li class="card empty-state">No users yet.</li>
     {% endfor %}
diff --git a/app/web/templates/fragments/sync_all_form.html b/app/web/templates/fragments/sync_all_form.html
new file mode 100644
index 0000000..eeb338d
--- /dev/null
+++ b/app/web/templates/fragments/sync_all_form.html
@@ -0,0 +1,5 @@
+<form method="post" action="/sync-all" class="inline-form"
+      hx-post="/sync-all" hx-target="this" hx-swap="outerHTML" hx-disabled-elt="find button">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <button type="submit">Sync all now</button>
+</form>
diff --git a/app/web/templates/fragments/toast.html b/app/web/templates/fragments/toast.html
new file mode 100644
index 0000000..dbe130c
--- /dev/null
+++ b/app/web/templates/fragments/toast.html
@@ -0,0 +1,3 @@
+<div id="toast-container" hx-swap-oob="true">
+    <div class="toast toast-{{ level }}">{{ message }}</div>
+</div>
diff --git a/app/web/templates/fragments/user_row.html b/app/web/templates/fragments/user_row.html
new file mode 100644
index 0000000..c9b4f58
--- /dev/null
+++ b/app/web/templates/fragments/user_row.html
@@ -0,0 +1,24 @@
+<li class="card user-card" id="user-row-{{ row.id }}"{% if oob %} hx-swap-oob="true"{% endif %}>
+    <div class="user-main">
+        <a class="user-name" href="/users/{{ row.id }}">{{ row.name }}</a>
+        <div class="user-meta">
+            <span class="badge badge-{{ row.health_state }}">{{ row.health_state.replace("_", " ") }}</span>
+            <span>{{ "enabled" if row.enabled else "disabled" }}</span>
+            <span>last sync: {{ row.last_sync_at or "-" }}</span>
+            <span>last activity: {{ row.last_activity_name or "-" }} ({{ row.last_activity_status or "-" }})</span>
+        </div>
+        {% if row.action_reason == "garmin_mfa_required" %}
+        <span class="action-required">Garmin MFA required &mdash; <a href="/users/{{ row.id }}">resolve</a></span>
+        {% elif row.action_reason == "mywhoosh_device_conflict" %}
+        <span class="action-required">MyWhoosh account logged in on another device &mdash; log out there, then <a href="/users/{{ row.id }}">retry</a></span>
+        {% endif %}
+    </div>
+    <div class="user-actions">
+        <form method="post" action="/users/{{ row.id }}/sync" class="inline-form"
+              hx-post="/users/{{ row.id }}/sync" hx-target="closest .user-card" hx-swap="outerHTML"
+              hx-disabled-elt="find button">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+            <button type="submit" class="secondary">Sync now</button>
+        </form>
+    </div>
+</li>