summaryrefslogtreecommitdiff
path: root/issues/005-visual-task-timing-differentiation.md
diff options
context:
space:
mode:
Diffstat (limited to 'issues/005-visual-task-timing-differentiation.md')
-rw-r--r--issues/005-visual-task-timing-differentiation.md61
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