feat: domain > area > project hierarchy for daily focus with compact padding

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

templates/focus.html

@@ -12,15 +12,31 @@
     <span class="text-sm" style="font-weight:600">{{ focus_date }}</span>
 </div>
 
-<!-- Focus items grouped by project -->
+<!-- Focus items: Domain > Area > Project hierarchy -->
 {% if items %}
-{% for group in grouped_items %}
-<div class="card mb-3">
-    <div class="card-header" style="padding:6px 12px;">
-        <h3 class="card-title" style="font-size:0.85rem;margin:0;">{{ group.label }}</h3>
+{% 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 item in group.rows %}
-    <div class="focus-item {{ 'completed' if item.completed }}">
+    {% for area in domain.areas %}
+    {% if area.label %}
+    <!-- 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>
+    {% endif %}
+    {% for project in area.projects %}
+    {% if project.label %}
+    <!-- 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(--accent)">{{ project.label }}</span>
+    </div>
+    {% endif %}
+    {% 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 %}
@@ -53,6 +69,8 @@
         </form>
     </div>
     {% endfor %}
+    {% endfor %}
+    {% endfor %}
 </div>
 {% endfor %}
 {% else %}
@@ -60,11 +78,11 @@
 {% endif %}
 
 <!-- Add to Focus -->
-<div class="card mt-4">
-    <div class="card-header"><h2 class="card-title">Add to Focus</h2></div>
+<div class="card mt-3">
+    <div class="card-header" style="padding:4px 10px;"><h2 class="card-title" style="font-size:0.85rem;margin:0;">Add to Focus</h2></div>
 
     <!-- Tab strip -->
-    <div class="tab-strip" style="padding: 0 12px;">
+    <div class="tab-strip" style="padding: 0 10px;">
         <a href="/focus?focus_date={{ focus_date }}&source_type=tasks{% if current_search %}&search={{ current_search }}{% endif %}{% if current_domain_id %}&domain_id={{ current_domain_id }}{% endif %}{% if current_project_id %}&project_id={{ current_project_id }}{% endif %}"
            class="tab-item {{ 'active' if current_source_type == 'tasks' }}">Tasks</a>
         <a href="/focus?focus_date={{ focus_date }}&source_type=list_items{% if current_search %}&search={{ current_search }}{% endif %}{% if current_domain_id %}&domain_id={{ current_domain_id }}{% endif %}{% if current_project_id %}&project_id={{ current_project_id }}{% endif %}"
@@ -72,7 +90,7 @@
     </div>
 
     <!-- Filters -->
-    <form class="filters-bar" method="get" action="/focus" id="focus-filters" style="padding: 8px 12px; border-bottom: 1px solid var(--border);">
+    <form class="filters-bar" method="get" action="/focus" id="focus-filters" style="padding: 4px 10px; border-bottom: 1px solid var(--border);">
         <input type="hidden" name="focus_date" value="{{ focus_date }}">
         <input type="hidden" name="source_type" value="{{ current_source_type }}">
         <input type="text" name="search" value="{{ current_search }}" placeholder="Search..." class="filter-select" style="min-width:150px">
@@ -105,7 +123,7 @@
     <!-- Available tasks -->
     {% if current_source_type == 'tasks' %}
         {% for t in available_tasks %}
-        <div class="list-row{% if loop.index > 25 %} focus-hidden-item hidden{% endif %}">
+        <div class="list-row{% if loop.index > 25 %} focus-hidden-item hidden{% endif %}" style="padding:3px 8px;min-height:0;">
             <span class="priority-dot priority-{{ t.priority }}"></span>
             <span class="row-title">{{ t.title }}</span>
             {% if t.project_name %}<span class="row-tag">{{ t.project_name }}</span>{% endif %}
@@ -117,18 +135,18 @@
             </form>
         </div>
         {% else %}
-        <div style="padding: 16px; color: var(--muted); font-size: 0.85rem;">No available tasks matching filters</div>
+        <div style="padding: 8px 10px; color: var(--muted); font-size: 0.8rem;">No available tasks matching filters</div>
         {% endfor %}
         {% if available_tasks|length > 25 %}
-        <div style="padding: 8px 12px; text-align:center;" id="focus-show-more-wrap">
-            <button class="btn btn-ghost btn-sm" id="focus-show-more">Show all {{ available_tasks|length }} tasks</button>
+        <div style="padding: 4px 10px; text-align:center;" id="focus-show-more-wrap">
+            <button class="btn btn-ghost btn-xs" id="focus-show-more">Show all {{ available_tasks|length }} tasks</button>
         </div>
         {% endif %}
 
     <!-- Available list items -->
     {% elif current_source_type == 'list_items' %}
         {% for li in available_list_items %}
-        <div class="list-row{% if loop.index > 25 %} focus-hidden-item hidden{% endif %}">
+        <div class="list-row{% if loop.index > 25 %} focus-hidden-item hidden{% endif %}" style="padding:3px 8px;min-height:0;">
             <span style="color:var(--muted);font-size:0.85rem;margin-right:4px">&#9776;</span>
             <span class="row-title">{{ li.content }}</span>
             {% if li.list_name %}<span class="row-tag" style="background:var(--purple);color:#fff">{{ li.list_name }}</span>{% endif %}
@@ -139,11 +157,11 @@
             </form>
         </div>
         {% else %}
-        <div style="padding: 16px; color: var(--muted); font-size: 0.85rem;">No available list items matching filters</div>
+        <div style="padding: 8px 10px; color: var(--muted); font-size: 0.8rem;">No available list items matching filters</div>
         {% endfor %}
         {% if available_list_items|length > 25 %}
-        <div style="padding: 8px 12px; text-align:center;" id="focus-show-more-wrap">
-            <button class="btn btn-ghost btn-sm" id="focus-show-more">Show all {{ available_list_items|length }} items</button>
+        <div style="padding: 4px 10px; text-align:center;" id="focus-show-more-wrap">
+            <button class="btn btn-ghost btn-xs" id="focus-show-more">Show all {{ available_list_items|length }} items</button>
         </div>
         {% endif %}
     {% endif %}