1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
|
