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>
This commit is contained in:
2026-03-05 22:38:12 +00:00
parent 6abef336c4
commit 865d0870d7
2 changed files with 16 additions and 2 deletions

View File

@@ -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)

View File

@@ -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>