timetracker/.tasks/done/TT-008-projects-feature-ui.md
2026-08-03 21:51:48 +02:00

2.9 KiB

TT-008 — Projects Feature UI

Type: Story
Priority: High
Labels: ui, feature, projects
Depends on: TT-005
Blocks: TT-006 (project picker)


Summary

Implement the Projects screen where users manage their projects — create, edit, archive, and delete. Projects are referenced by time entries and the timer.

UI Specification

ProjectsScreen layout

┌──────────────────────────────┐
│  AppBar: "Projects"  [+ Add] │
│  [Active] [Archived]  ← tabs │
├──────────────────────────────┤
│  ┌─────────────────────────┐ │
│  │ 🟦 My Project      →    │ │
│  │ 14h 30m total           │ │
│  └─────────────────────────┘ │
│  ┌─────────────────────────┐ │
│  │ 🟩 Backend         →    │ │
│  │ 8h 00m total            │ │
│  └─────────────────────────┘ │
└──────────────────────────────┘

Widgets to build

Widget File Description
ProjectsScreen projects_screen.dart Tabbed screen: Active / Archived
ProjectListTile widgets/project_list_tile.dart Tile with color dot, name, total hours
ProjectFormSheet widgets/project_form_sheet.dart Create / edit bottom sheet
ColorPickerRow widgets/color_picker_row.dart Row of selectable color circles

ProjectFormSheet Fields

  • Name (required, text field, unique validation)
  • Color (required, ColorPickerRow — 12 preset colors)
  • Description (optional, multiline text field)

Actions per project (long-press or trailing menu)

  • Edit
  • Archive / Unarchive
  • Delete (only if no time entries reference it; otherwise show warning)

Acceptance Criteria

  • Active tab shows non-archived projects
  • Archived tab shows archived projects
  • Each tile shows total tracked hours (all-time)
  • "+" → create form; tap tile → edit form
  • Archive action sets archivedAt; moves project to Archived tab immediately
  • Delete blocked with dialog if project has entries
  • Color picker shows ≥ 10 preset colors
  • Name uniqueness validated before save
  • Widget test: empty state renders "No projects yet"
  • Widget test: create form saves and tile appears

Files to create / modify

  • lib/features/projects/presentation/projects_screen.dart (replace stub)
  • lib/features/projects/presentation/widgets/project_list_tile.dart
  • lib/features/projects/presentation/widgets/project_form_sheet.dart
  • lib/features/projects/presentation/widgets/color_picker_row.dart
  • test/features/projects/projects_screen_test.dart