feat: activity-first home page (F11c)

forgejo_admin commented

2026-03-15 16:12:36 +00:00

Owner

Lineage

plan-pal-e-docs → Phase F11 (Design System Overhaul) → F11c (Activity-First Home Page)

Repo

forgejo_admin/pal-e-app

User Story

As a pal-e-docs user
I want the home page to show me what changed recently, what's in progress, and project health at a glance
So that I can quickly orient myself without clicking through multiple pages

Context

The current home page is a generic landing: project cards, board cards, and a tag cloud. It doesn't answer the key questions: "what changed?", "what's in progress?", "how are projects doing?"

A prototype was built at ~/html-playground/6-pal-e-home/index.html and approved by Lucas on his phone. PR #181 (pal-e-docs backend) added limit/offset params to GET /notes and a new GET /boards/activity cross-board endpoint. PR #35 (pal-e-app) deployed the CSS design system with custom properties.

This issue ports the approved prototype into the real SvelteKit app with live API data.

File Targets

Files the agent should modify:

src/lib/api.ts — update types (Board, BoardItem, Note, Project to include updated_at, id, board_id) + update listNotes() to accept limit/offset/status params + add new listBoardActivity() function
src/routes/+page.server.ts — fetch recent notes (limit=10), board activity (column=in_progress, limit=5), all boards (for progress bars + boardId lookup), all projects
src/routes/+page.svelte — replace current home page with prototype layout (greeting, recently updated, in progress, projects, board progress bars)

Files the agent should NOT touch:

src/routes/+layout.svelte — nav is handled here, prototype nav is just visual context
src/app.css — design system is already deployed
src/lib/components/* — no new components needed

Acceptance Criteria

Home page shows time-of-day greeting ("Good morning/afternoon/evening")
"Recently Updated" section shows 10 most recent notes with title, note_type badge, project name, and relative time
"In Progress" section shows up to 5 board items in in_progress column with title, board name context, and yellow "in progress" badge
"Projects" section shows all projects sorted by updated_at DESC with board item counts
"Board Progress" section shows horizontal stacked bars (green=done, yellow=in-progress, gray=backlog) per board
Private notes show red "PRIVATE" badge
All colors use CSS custom properties from app.css — zero hardcoded hex values
Mobile layout works at 600px breakpoint (stacked columns, smaller text)
Note titles link to /notes/{slug}, project names link to /projects/{slug}

Test Expectations

Page loads without errors (no 502/500)
All 4 API calls resolve (notes, boards, activity, projects)
Graceful degradation if one API call fails (show other sections)
Run command: manual verification — CI is broken (pre-existing bug)

Constraints

Use scoped <style> in Svelte — no Tailwind utility classes for layout structure
Use var(--color-*) custom properties for all colors
Relative time helper should be a simple inline function, not an external dependency
The BoardItemOut from activity endpoint has board_id (int) — build a boardId → board lookup map from the boards list to resolve board names
Keep existing <svelte:head> title tag
listNotes() default sort is updated_at DESC — no sort param needed, just limit=10

Checklist

PR opened
No unrelated changes
Lucas verifies on phone before merge

plan-pal-e-docs — parent plan
phase-pal-e-docs-design-overhaul — parent phase (F11)
convention-frontend-css — CSS custom property rules
sop-frontend-experiment — prototype-first workflow that produced this design

### Lineage `plan-pal-e-docs` → Phase F11 (Design System Overhaul) → F11c (Activity-First Home Page) ### Repo `forgejo_admin/pal-e-app` ### User Story As a pal-e-docs user I want the home page to show me what changed recently, what's in progress, and project health at a glance So that I can quickly orient myself without clicking through multiple pages ### Context The current home page is a generic landing: project cards, board cards, and a tag cloud. It doesn't answer the key questions: "what changed?", "what's in progress?", "how are projects doing?" A prototype was built at `~/html-playground/6-pal-e-home/index.html` and approved by Lucas on his phone. PR #181 (pal-e-docs backend) added `limit`/`offset` params to `GET /notes` and a new `GET /boards/activity` cross-board endpoint. PR #35 (pal-e-app) deployed the CSS design system with custom properties. This issue ports the approved prototype into the real SvelteKit app with live API data. ### File Targets Files the agent should modify: - `src/lib/api.ts` — update types (`Board`, `BoardItem`, `Note`, `Project` to include `updated_at`, `id`, `board_id`) + update `listNotes()` to accept `limit`/`offset`/`status` params + add new `listBoardActivity()` function - `src/routes/+page.server.ts` — fetch recent notes (limit=10), board activity (column=in_progress, limit=5), all boards (for progress bars + boardId lookup), all projects - `src/routes/+page.svelte` — replace current home page with prototype layout (greeting, recently updated, in progress, projects, board progress bars) Files the agent should NOT touch: - `src/routes/+layout.svelte` — nav is handled here, prototype nav is just visual context - `src/app.css` — design system is already deployed - `src/lib/components/*` — no new components needed ### Acceptance Criteria - [ ] Home page shows time-of-day greeting ("Good morning/afternoon/evening") - [ ] "Recently Updated" section shows 10 most recent notes with title, note_type badge, project name, and relative time - [ ] "In Progress" section shows up to 5 board items in `in_progress` column with title, board name context, and yellow "in progress" badge - [ ] "Projects" section shows all projects sorted by `updated_at` DESC with board item counts - [ ] "Board Progress" section shows horizontal stacked bars (green=done, yellow=in-progress, gray=backlog) per board - [ ] Private notes show red "PRIVATE" badge - [ ] All colors use CSS custom properties from `app.css` — zero hardcoded hex values - [ ] Mobile layout works at 600px breakpoint (stacked columns, smaller text) - [ ] Note titles link to `/notes/{slug}`, project names link to `/projects/{slug}` ### Test Expectations - [ ] Page loads without errors (no 502/500) - [ ] All 4 API calls resolve (notes, boards, activity, projects) - [ ] Graceful degradation if one API call fails (show other sections) - Run command: manual verification — CI is broken (pre-existing bug) ### Constraints - Use scoped `<style>` in Svelte — no Tailwind utility classes for layout structure - Use `var(--color-*)` custom properties for all colors - Relative time helper should be a simple inline function, not an external dependency - The `BoardItemOut` from activity endpoint has `board_id` (int) — build a `boardId → board` lookup map from the boards list to resolve board names - Keep existing `<svelte:head>` title tag - `listNotes()` default sort is `updated_at DESC` — no sort param needed, just `limit=10` ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] Lucas verifies on phone before merge ### Related - `plan-pal-e-docs` — parent plan - `phase-pal-e-docs-design-overhaul` — parent phase (F11) - `convention-frontend-css` — CSS custom property rules - `sop-frontend-experiment` — prototype-first workflow that produced this design