feat: critical flag toggle on focus items

Adds a clickable flag marker (⚑) on each focus row to mark items as
critical. Red when active, subtle when inactive. Toggle via POST.

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

routers/focus.py

@@ -592,6 +592,15 @@ async def toggle_focus(focus_id: str, request: Request, db: AsyncSession = Depen
     return RedirectResponse(url=referer, status_code=303)
 
 
+@router.post("/{focus_id}/toggle-critical")
+async def toggle_critical(focus_id: str, request: Request, db: AsyncSession = Depends(get_db)):
+    repo = BaseRepository("daily_focus", db)
+    item = await repo.get(focus_id)
+    if item:
+        await repo.update(focus_id, {"critical": not item.get("critical", False)})
+    return RedirectResponse(url="/focus", status_code=303)
+
+
 @router.post("/{focus_id}/remove")
 async def remove_from_focus(focus_id: str, request: Request, db: AsyncSession = Depends(get_db)):
     repo = BaseRepository("daily_focus", db)

templates/focus.html

@@ -24,13 +24,13 @@
 <div class="card">
 <table id="focus-table" style="width:100%;border-collapse:collapse;font-size:0.8rem;">
 <colgroup>
-    <col style="width:18px"><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:18px"><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="10" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
+        <td colspan="11" 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>
@@ -50,6 +50,11 @@
                 <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 1px;vertical-align:middle;text-align:center;">
+            <form action="/focus/{{ item.id }}/toggle-critical" method="post" style="display:inline">
+                <button type="submit" class="btn-critical-toggle" title="Toggle critical" style="background:none;border:none;cursor:pointer;padding:0;font-size:0.8rem;line-height:1;{{ 'color:var(--red);' if item.critical else 'color:var(--border);' }}">&#9873;</button>
+            </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>{% else %}<span style="color:var(--muted);font-size:0.85rem;">&#9679;</span>{% endif %}</td>
         <td style="padding:1px 3px;vertical-align:middle;{{ 'text-decoration:line-through;' if item.completed }}">{% if item.task_id %}{% if item.task_title %}<a href="/tasks/{{ item.task_id }}" class="focus-title">{{ item.task_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 %}{% else %}<a href="/focus/{{ item.id }}" class="focus-title">{{ item.title }}</a>{% endif %}</td>