feat: board filtering + status view

### Lineage `plan-pal-e-docs` → Phase F2 (`phase-pal-e-docs-board-filtering`) ### Repo `forgejo_admin/pal-e-app` ### User Story As a platform operator I want to filter board items by type and collapse columns So that I can focus on specific work types and see status at a glance on boards with 10-20+ items ### Context Board pages currently show all items in all 7 columns with no filtering. The backend already supports `item_type` and `column` query params on `GET /boards/{slug}/items`, but since the frontend loads all items for drag-and-drop, filtering should be client-side for responsiveness. The existing board page (`src/routes/boards/[slug]/+page.svelte`) has: - 7 columns: backlog, todo, next_up, in_progress, qa, needs_approval, done - Drag-and-drop (desktop + mobile touch + tap-to-move fallback) - Item cards with type badges using TYPE_COLORS Item types available: plan (#ffd700), phase (#55efc4), issue (#74b9ff), todo (#e94560), repo (#dfe6e9), project (#a29bfe). ### File Targets Files to modify: - `src/routes/boards/[slug]/+page.svelte` — add filter pills, collapsible columns, summary card, "hide done" toggle - `src/routes/projects/[slug]/+page.svelte` — add board mini-view showing column distribution Files NOT to touch: - `src/lib/api.ts` — no API changes needed (client-side filtering) - `src/routes/+layout.svelte` — nav changes are in Issue #1 (search) - `src/lib/components/blocks/` — block renderers are unrelated ### Acceptance Criteria - [ ] When I click a type filter pill (e.g., "phase"), then only items of that type are shown across all columns - [ ] When I click multiple filter pills, then only items matching ALL selected types are shown (AND logic) - [ ] When I click an active filter pill, then the filter is removed - [ ] Filter pills show the count of matching items - [ ] When I click "Hide done", then the done column is hidden - [ ] When I click a column header, then the column collapses to show only the header and item count - [ ] A board summary card at the top shows: total items, items per column (horizontal bar), items per type - [ ] On the project detail page, a board mini-view shows column distribution for the project's board - [ ] Filter state is persisted in URL query params (`?type=phase&hide_done=true`) - [ ] Drag-and-drop still works with filters active (filtered-out items are hidden, not removed) ### Test Expectations - [ ] Manual test: filter by "phase" type, verify only phase items shown, column counts update - [ ] Manual test: toggle "hide done", verify done column hides/shows - [ ] Manual test: collapse a column, verify it shows count only - [ ] Manual test: drag an item between columns with a filter active, verify it works - [ ] Manual test: reload page with `?type=phase&hide_done=true`, verify filters restored ### Constraints - Filter pills must use `typeColor()` from `src/lib/colors.ts` — filled background when active, outline when inactive - Client-side filtering only — do NOT add server-side API calls for filtering - Drag-and-drop must continue to work with filters active (use `$derived` to filter displayed items while keeping full list for moves) - Column collapse state should be stored in URL params too - Summary card uses the same dark theme (#0e0e18 card bg, #1a1a2e borders) - Board mini-view on project page should be lightweight — just colored bars showing distribution, clickable to navigate to full board ### Checklist - [ ] PR opened with `Closes #2` - [ ] No unrelated changes - [ ] Drag-and-drop works with filters active - [ ] Dark theme consistent with existing pages ### Related - `phase-pal-e-docs-board-filtering` — plan phase in pal-e-docs - `plan-pal-e-docs` — parent plan

forgejo_admin commented

2026-03-14 22:18:14 +00:00

Owner

Lineage

plan-pal-e-docs → Phase F2 (phase-pal-e-docs-board-filtering)

Repo

forgejo_admin/pal-e-app

User Story

As a platform operator
I want to filter board items by type and collapse columns
So that I can focus on specific work types and see status at a glance on boards with 10-20+ items

Context

Board pages currently show all items in all 7 columns with no filtering. The backend already supports item_type and column query params on GET /boards/{slug}/items, but since the frontend loads all items for drag-and-drop, filtering should be client-side for responsiveness.

The existing board page (src/routes/boards/[slug]/+page.svelte) has:

7 columns: backlog, todo, next_up, in_progress, qa, needs_approval, done
Drag-and-drop (desktop + mobile touch + tap-to-move fallback)
Item cards with type badges using TYPE_COLORS

Item types available: plan (#ffd700), phase (#55efc4), issue (#74b9ff), todo (#e94560), repo (#dfe6e9), project (#a29bfe).

File Targets

Files to modify:

src/routes/boards/[slug]/+page.svelte — add filter pills, collapsible columns, summary card, "hide done" toggle
src/routes/projects/[slug]/+page.svelte — add board mini-view showing column distribution

Files NOT to touch:

src/lib/api.ts — no API changes needed (client-side filtering)
src/routes/+layout.svelte — nav changes are in Issue #1 (search)
src/lib/components/blocks/ — block renderers are unrelated

Acceptance Criteria

When I click a type filter pill (e.g., "phase"), then only items of that type are shown across all columns
When I click multiple filter pills, then only items matching ALL selected types are shown (AND logic)
When I click an active filter pill, then the filter is removed
Filter pills show the count of matching items
When I click "Hide done", then the done column is hidden
When I click a column header, then the column collapses to show only the header and item count
A board summary card at the top shows: total items, items per column (horizontal bar), items per type
On the project detail page, a board mini-view shows column distribution for the project's board
Filter state is persisted in URL query params (?type=phase&hide_done=true)
Drag-and-drop still works with filters active (filtered-out items are hidden, not removed)

Test Expectations

Manual test: filter by "phase" type, verify only phase items shown, column counts update
Manual test: toggle "hide done", verify done column hides/shows
Manual test: collapse a column, verify it shows count only
Manual test: drag an item between columns with a filter active, verify it works
Manual test: reload page with ?type=phase&hide_done=true, verify filters restored

Constraints

Filter pills must use typeColor() from src/lib/colors.ts — filled background when active, outline when inactive
Client-side filtering only — do NOT add server-side API calls for filtering
Drag-and-drop must continue to work with filters active (use $derived to filter displayed items while keeping full list for moves)
Column collapse state should be stored in URL params too
Summary card uses the same dark theme (#0e0e18 card bg, #1a1a2e borders)
Board mini-view on project page should be lightweight — just colored bars showing distribution, clickable to navigate to full board