Match dashboard filter/sort behavior in offline task app

The offline task app was showing every cached task including completed
ones, with no sorting -- unlike the online dashboard, which hides
completed tasks by default and sorts by due date. Ports the same
filter tabs (All/Today/Upcoming/Overdue/Completed) and sort options
(due date asc/desc, priority high/low) from tasks/views.py's
DashboardView so offline mode isn't a degraded view.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Keith Smith
2026-09-04 23:20:27 -06:00
co-authored by Claude Sonnet 5
parent 19697fbc01
commit fc045a0c4b
3 changed files with 106 additions and 8 deletions
+14
View File
@@ -20,12 +20,26 @@
<div style="max-width: 640px; margin: 0 auto; padding: var(--space-lg);">
<div class="task-pane-header">
<h1 class="task-pane-title">Tasks (Offline)</h1>
<select id="offline-sort-select" class="form-select" style="width: auto;">
<option value="due_date">Due Date (Earliest)</option>
<option value="due_date_desc">Due Date (Latest)</option>
<option value="priority">Priority (High to Low)</option>
<option value="priority_low">Priority (Low to High)</option>
</select>
</div>
<p class="text-muted" style="margin-bottom: var(--space-lg);">
You're offline. Changes you make here will sync automatically once you're back online.
</p>
<div id="offline-filter-tabs" style="display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg);">
<button type="button" class="btn btn-sm btn-primary" data-filter="all">All Tasks</button>
<button type="button" class="btn btn-sm btn-secondary" data-filter="today">Today</button>
<button type="button" class="btn btn-sm btn-secondary" data-filter="upcoming">Upcoming</button>
<button type="button" class="btn btn-sm btn-secondary" data-filter="overdue">Overdue</button>
<button type="button" class="btn btn-sm btn-secondary" data-filter="completed">Completed</button>
</div>
<form id="offline-add-task-form" class="quick-add">
<input type="text" id="offline-task-title" class="quick-add-input" placeholder="Add a new task..." required>
<button type="submit" class="btn btn-primary">Add</button>