feat: focus page table layout with domain grouping, area/project columns, compact padding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

templates/focus.html

@@ -12,63 +12,45 @@
     <span class="text-sm" style="font-weight:600">{{ focus_date }}</span>
 </div>
 
-<!-- Focus items: Domain > Area > Project hierarchy -->
+<!-- Focus items grouped by domain -->
 {% if items %}
+<div class="card">
+<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><col style="width:110px"><col style="width:120px"><col style="width:50px"><col style="width:24px">
+</colgroup>
 {% for domain in hierarchy %}
-<div class="card mb-2">
-    <!-- Domain header -->
-    <div style="padding:4px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;">
-        <span style="width:8px;height:8px;border-radius:50%;background:{{ domain.color or 'var(--accent)' }};flex-shrink:0;"></span>
-        <span style="font-weight:700;font-size:0.8rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--text)">{{ domain.label }}</span>
-    </div>
-    {% for area in domain.areas %}
-    <!-- Area header -->
-    <div style="padding:3px 10px 3px 24px;border-bottom:1px solid var(--border);background:var(--surface2);">
-        <span style="font-weight:600;font-size:0.78rem;color:var(--muted)">{{ area.label }}</span>
-    </div>
-    {% for project in area.projects %}
-    <!-- Project header -->
-    <div style="padding:2px 10px 2px 40px;border-bottom:1px solid var(--border);">
-        <span style="font-weight:500;font-size:0.75rem;color:var(--muted)">{{ project.label }}</span>
-    </div>
-    {% for item in project.rows %}
-    <div class="focus-item {{ 'completed' if item.completed }}" style="padding:3px 8px;min-height:0;">
-        {% with reorder_url="/focus/reorder", item_id=item.id, extra_fields={"focus_date": focus_date|string} %}
-        {% include 'partials/reorder_arrows.html' %}
-        {% endwith %}
-        <form action="/focus/{{ item.id }}/toggle" method="post" style="display:inline">
-            <div class="row-check">
-                <input type="checkbox" id="f-{{ item.id }}" {{ 'checked' if item.completed }} onchange="this.form.submit()">
-                <label for="f-{{ item.id }}"></label>
-            </div>
-        </form>
-        {% if item.task_id %}
-            <span class="focus-meta" style="width:72px;min-width:72px;flex-shrink:0;">{{ item.due_date if item.due_date else '&nbsp;'|safe }}</span>
-            <span class="priority-dot priority-{{ item.priority }}"></span>
-            {% if item.title %}
-            <a href="/tasks/{{ item.task_id }}" class="focus-title">{{ item.title }}</a>
-            {% else %}
-            <span class="focus-title" style="color:var(--muted)">[Deleted]</span>
-            {% endif %}
-            {% if item.estimated_minutes %}<span class="focus-meta">~{{ item.estimated_minutes }}min</span>{% endif %}
-        {% elif item.list_item_id %}
-            <span style="color:var(--muted);font-size:0.85rem;margin-right:4px">&#9776;</span>
-            {% if item.list_item_content %}
-            <a href="/lists/{{ item.list_item_list_id }}" class="focus-title">{{ item.list_item_content }}</a>
-            {% else %}
-            <span class="focus-title" style="color:var(--muted)">[Deleted]</span>
-            {% endif %}
-            {% if item.list_name %}<span class="row-tag" style="background:var(--purple);color:#fff">{{ item.list_name }}</span>{% endif %}
-        {% endif %}
-        <form action="/focus/{{ item.id }}/remove" method="post" style="display:inline">
-            <button class="btn btn-ghost btn-xs" style="color:var(--red)" title="Remove from focus">&times;</button>
-        </form>
-    </div>
+    <tr><td colspan="9" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
+        <span style="display:inline-flex;align-items:center;gap:6px;">
+            <span style="width:8px;height:8px;border-radius:50%;background:{{ domain.color or 'var(--accent)' }};flex-shrink:0;"></span>
+            <span style="font-weight:700;font-size:0.8rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--text)">{{ domain.label }}</span>
+        </span>
+    </td></tr>
+    {% for item in domain.rows %}
+    <tr style="border-bottom:1px solid var(--border);{{ 'opacity:0.6;' if item.completed }}">
+        <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">
+                <div class="row-check"><input type="checkbox" id="f-{{ item.id }}" {{ 'checked' if item.completed }} onchange="this.form.submit()"><label for="f-{{ item.id }}"></label></div>
+            </form>
+        </td>
+        <td style="padding:1px 3px;vertical-align:middle;color:var(--muted);font-size:0.78rem;white-space:nowrap;">{{ item.due_date or '' }}</td>
+        <td style="padding:1px 1px;vertical-align:middle;">{% if item.task_id %}<span class="priority-dot priority-{{ item.priority }}"></span>{% elif item.list_item_id %}<span style="color:var(--muted);font-size:0.85rem;">&#9776;</span>{% endif %}</td>
+        <td style="padding:1px 3px;vertical-align:middle;{{ 'text-decoration:line-through;' if item.completed }}">{% if item.task_id %}{% if item.title %}<a href="/tasks/{{ item.task_id }}" class="focus-title">{{ item.title }}</a>{% else %}<span style="color:var(--muted)">[Deleted]</span>{% endif %}{% elif item.list_item_id %}{% if item.list_item_content %}<a href="/lists/{{ item.list_item_list_id }}" class="focus-title">{{ item.list_item_content }}</a>{% else %}<span style="color:var(--muted)">[Deleted]</span>{% endif %}{% endif %}</td>
+        <td style="padding:1px 3px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{% if item.area_name %}<span class="row-tag">{{ item.area_name }}</span>{% endif %}</td>
+        <td style="padding:1px 3px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{% if item.task_id and item.project_name %}<span class="row-tag" style="background:var(--accent-soft);color:var(--accent)">{{ item.project_name }}</span>{% elif item.list_item_id and item.list_name %}<span class="row-tag" style="background:var(--purple);color:#fff">{{ item.list_name }}</span>{% endif %}</td>
+        <td style="padding:1px 3px;vertical-align:middle;text-align:right;color:var(--muted);font-size:0.78rem;">{{ '~%smin'|format(item.estimated_minutes) if item.estimated_minutes else '' }}</td>
+        <td style="padding:1px 1px;vertical-align:middle;">
+            <form action="/focus/{{ item.id }}/remove" method="post" style="display:inline">
+                <button class="btn btn-ghost btn-xs" style="color:var(--red)" title="Remove from focus">&times;</button>
+            </form>
+        </td>
+    </tr>
     {% endfor %}
-    {% endfor %}
-    {% endfor %}
-</div>
 {% endfor %}
+</table>
+</div>
 {% else %}
 <div class="empty-state mb-4"><div class="empty-state-text">No focus items for this day</div></div>
 {% endif %}