From 7a2c6d3f2a48fc451460747bcd49dda3c4b87ffd Mon Sep 17 00:00:00 2001
From: Michael <michael.dombaugh@gmail.com>
Date: Tue, 3 Mar 2026 16:12:19 +0000
Subject: [PATCH] feat: sequential numbering on focus items within domain
 groups

Display-only row numbers (1, 2, 3...) scoped per domain group.
Numbers update instantly on drag-and-drop reorder via JS renumber.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 templates/focus.html | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/templates/focus.html b/templates/focus.html
index c3f1122..bc843da 100644
--- a/templates/focus.html
+++ b/templates/focus.html
@@ -17,13 +17,13 @@
 <div class="card">
 <table id="focus-table" style="width:100%;border-collapse:collapse;font-size:0.8rem;">
 <colgroup>
-    <col style="width:24px"><col style="width:20px"><col style="width:74px"><col style="width:10px">
+    <col style="width:18px"><col style="width:24px"><col style="width:20px"><col style="width:74px"><col style="width:10px">
     <col><col style="width:110px"><col style="width:120px"><col style="width:50px"><col style="width:24px">
 </colgroup>
 {% for domain in hierarchy %}
     <tbody>
     <tr class="focus-domain-header" data-domain-key="{{ domain.key }}" style="cursor:pointer;">
-        <td colspan="9" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
+        <td colspan="10" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
             <span style="display:inline-flex;align-items:center;gap:6px;">
                 <svg class="focus-domain-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" style="transition:transform 0.15s;flex-shrink:0;color:var(--muted);"><polyline points="4 2 8 6 4 10"/></svg>
                 <span style="width:8px;height:8px;border-radius:50%;background:{{ domain.color or 'var(--accent)' }};flex-shrink:0;"></span>
@@ -36,6 +36,7 @@
     <tbody class="focus-drag-group" data-domain-key="{{ domain.key }}">
     {% for item in domain.rows %}
     <tr class="focus-drag-row" draggable="true" data-id="{{ item.id }}" style="border-bottom:1px solid var(--border);{{ 'opacity:0.6;' if item.completed }}">
+        <td class="focus-row-num" style="padding:1px 2px;vertical-align:middle;text-align:center;color:var(--muted);font-size:0.72rem;font-weight:600;">{{ loop.index }}</td>
         <td style="padding:1px 1px;vertical-align:middle;">{% with reorder_url="/focus/reorder", item_id=item.id, extra_fields={"focus_date": focus_date|string} %}{% include 'partials/reorder_arrows.html' %}{% endwith %}</td>
         <td style="padding:1px 1px;vertical-align:middle;">
             <form action="/focus/{{ item.id }}/toggle" method="post" style="display:inline">
@@ -215,6 +216,17 @@
         });
     });
 
+    // Renumber rows within each domain group
+    function renumberFocusRows() {
+        document.querySelectorAll('.focus-drag-group').forEach(function(tbody) {
+            var rows = tbody.querySelectorAll('.focus-drag-row');
+            rows.forEach(function(row, i) {
+                var numCell = row.querySelector('.focus-row-num');
+                if (numCell) numCell.textContent = i + 1;
+            });
+        });
+    }
+
     // Drag-and-drop reorder within domain groups
     var dragRow = null;
     var dragGroup = null;
@@ -277,6 +289,7 @@
             } else {
                 tbody.insertBefore(dragRow, row);
             }
+            renumberFocusRows();
         });
     });
 })();