diff options
Diffstat (limited to 'issues/005-visual-task-timing-differentiation.md')
| -rw-r--r-- | issues/005-visual-task-timing-differentiation.md | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/issues/005-visual-task-timing-differentiation.md b/issues/005-visual-task-timing-differentiation.md new file mode 100644 index 0000000..4cc40b4 --- /dev/null +++ b/issues/005-visual-task-timing-differentiation.md @@ -0,0 +1,61 @@ +# [FEATURE] Visual differentiation for task timing + +## Description +Tasks after today should be grayed out, past deadline should be emphasized. + +## User Story +As a user, I want past-due tasks highlighted and future tasks dimmed so urgency is immediately visible. + +## Technical Context +- Pure presentation logic in template +- Affects: `partials/todoist-tasks.html`, `partials/tasks-tab.html` +- Requires comparing task `due_date` against current date + +## Test Strategy + +### Unit Test (Red) +**File:** `internal/handlers/handlers_test.go` + +Test helper function returns correct urgency class. + +```go +func TestTaskUrgencyClass(t *testing.T) { + tests := []struct { + name string + dueDate time.Time + expected string + }{ + {"overdue yesterday", yesterday, "overdue"}, + {"due today", today, "today"}, + {"due tomorrow", tomorrow, "future"}, + {"no due date", zeroTime, "none"}, + } + // ... +} +``` + +### E2E Test (Red) +Assert CSS classes applied correctly to tasks based on due date. + +## Proposed Approach + +1. Add template helper or compute urgency class in handler +2. Return struct with `UrgencyClass` field for each task +3. Apply Tailwind classes based on urgency: + - `text-red-600 font-bold` (overdue) + - `text-inherit` or default (today) + - `text-gray-400` (future) +4. Consider adding visual indicator icon (e.g., warning for overdue) + +## Affected Components +- `internal/handlers/handlers.go` +- `internal/models/types.go` (if adding field to view model) +- `web/templates/partials/todoist-tasks.html` +- `web/templates/partials/tasks-tab.html` + +## Definition of Done +- [ ] Overdue tasks visually emphasized (red/bold) +- [ ] Future tasks grayed out +- [ ] Today's tasks normal styling +- [ ] Unit tests for urgency calculation +- [ ] E2E test verifies correct classes applied |
