forgejo_admin/pal-e-docs-app
1
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Wire kanban board component to real boards API #3

New issue
Closed
opened 2026-03-13 20:10:28 +00:00 by forgejo_admin · 0 comments
forgejo_admin commented 2026-03-13 20:10:28 +00:00
Owner
Copy link

Lineage

plan-pal-e-docs → Phase 3 (Board UI)

Repo

forgejo_admin/pal-e-app

User Story

As a project manager
I want to see real board data in a kanban UI with drag-and-drop
So that I can visually manage work items across columns

Context

A working kanban component exists in ~/html-playground/4-sprint-board/ with desktop drag-and-drop, touch drag with long-press and ghost card, tap-to-move mobile fallback, board tabs, and dark theme styling — but it uses mock data. The pal-e-app scaffold (PR #2) has typed API client, board list page, and board detail page — but no drag-and-drop or board tabs.

This issue promotes the playground kanban into pal-e-app, replacing mock data with real API calls and adding write operations for drag-and-drop persistence.

API endpoints available:

  • GET /boards — list all boards
  • GET /boards/{slug} — board metadata (columns, title)
  • GET /boards/{slug}/items — all items for a board
  • PATCH /boards/{slug}/items/{item_id} — move item (body: {column, position, points, labels})
  • Column values: backlog, todo, next_up, in_progress, qa, needs_approval, done
  • Item types: plan, phase, issue, repo, project, todo

File Targets

Files to modify:

  • src/lib/api.ts — Add moveItem(boardSlug, itemId, {column, position}) mutation function
  • src/routes/boards/[slug]/+page.svelte — Replace static card list with full kanban: drag-and-drop (desktop + touch), column layout with horizontal scroll, card styling with type-based colors, points display, board color theming
  • src/routes/boards/[slug]/+page.server.ts — May need adjustment for data shape
  • src/routes/boards/+page.svelte — Add board color dots/badges to the board list (optional enhancement)
  • src/routes/+layout.svelte — Switch to dark theme to match kanban aesthetic
  • src/app.css — Add any needed global styles for dark theme

Files NOT to touch:

  • k8s/** — infrastructure (separate issue)
  • .woodpecker.yaml — CI (separate issue)
  • Dockerfile — already correct

Acceptance Criteria

  • /boards shows list of all boards (7 boards)
  • /boards/{slug} shows kanban board with columns as horizontal scrollable lanes
  • Each column shows header with name + item count
  • Cards show: title, note_type badge (color-coded by type), project badge, points badge (if set), labels
  • Desktop: HTML5 drag-and-drop moves cards between columns
  • Mobile: long-press (300ms) initiates touch drag with ghost card; tap selects card then tap column to move
  • Drop/move triggers PATCH /boards/{slug}/items/{item_id} with new column — persists after refresh
  • Board tabs at top allow switching between boards without going back to list (load all boards, show tabs)
  • Different note_type values get different accent colors (e.g. plan=gold, phase=green, issue=blue, todo=red, project=purple, repo=lavender)
  • Dark theme consistent with playground aesthetic (dark backgrounds, subtle borders, colored accents)
  • Responsive: columns snap-scroll on mobile, full layout on desktop

Test Expectations

  • npm run check passes (TypeScript)
  • npm run lint passes (ESLint)
  • npm run build succeeds (production build)
  • Manual test: drag a card, refresh page, card stays in new column

Constraints

  • Use Tailwind 4 classes (already configured via @import 'tailwindcss' in app.css). Convert ALL inline <style> from playground to Tailwind utilities.
  • Server-side data loading via +page.server.ts (SvelteKit convention — api.ts uses private env vars)
  • Client-side mutations via fetch('/boards/...') — need a thin client-side API wrapper OR use SvelteKit form actions
  • Svelte 5 runes: use $state, $derived, $props (already used in scaffold)
  • The playground source is at ~/html-playground/4-sprint-board/src/routes/+page.svelte — use as reference but rewrite for Tailwind + real data, don't copy-paste the <style> block
  • Board tabs should load board list from the server data and allow switching without full page nav
  • API base URL for client-side mutations: use SvelteKit API routes as proxy (don't expose internal cluster URL to browser)

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes

Related

  • pal-e-docs — project this affects
  • plan-pal-e-docs — Phase 3 of the interactive knowledge platform plan
### Lineage `plan-pal-e-docs` → Phase 3 (Board UI) ### Repo `forgejo_admin/pal-e-app` ### User Story As a project manager I want to see real board data in a kanban UI with drag-and-drop So that I can visually manage work items across columns ### Context A working kanban component exists in `~/html-playground/4-sprint-board/` with desktop drag-and-drop, touch drag with long-press and ghost card, tap-to-move mobile fallback, board tabs, and dark theme styling — but it uses mock data. The pal-e-app scaffold (PR #2) has typed API client, board list page, and board detail page — but no drag-and-drop or board tabs. This issue promotes the playground kanban into pal-e-app, replacing mock data with real API calls and adding write operations for drag-and-drop persistence. **API endpoints available:** - `GET /boards` — list all boards - `GET /boards/{slug}` — board metadata (columns, title) - `GET /boards/{slug}/items` — all items for a board - `PATCH /boards/{slug}/items/{item_id}` — move item (body: `{column, position, points, labels}`) - Column values: `backlog`, `todo`, `next_up`, `in_progress`, `qa`, `needs_approval`, `done` - Item types: `plan`, `phase`, `issue`, `repo`, `project`, `todo` ### File Targets Files to modify: - `src/lib/api.ts` — Add `moveItem(boardSlug, itemId, {column, position})` mutation function - `src/routes/boards/[slug]/+page.svelte` — Replace static card list with full kanban: drag-and-drop (desktop + touch), column layout with horizontal scroll, card styling with type-based colors, points display, board color theming - `src/routes/boards/[slug]/+page.server.ts` — May need adjustment for data shape - `src/routes/boards/+page.svelte` — Add board color dots/badges to the board list (optional enhancement) - `src/routes/+layout.svelte` — Switch to dark theme to match kanban aesthetic - `src/app.css` — Add any needed global styles for dark theme Files NOT to touch: - `k8s/**` — infrastructure (separate issue) - `.woodpecker.yaml` — CI (separate issue) - `Dockerfile` — already correct ### Acceptance Criteria - [ ] `/boards` shows list of all boards (7 boards) - [ ] `/boards/{slug}` shows kanban board with columns as horizontal scrollable lanes - [ ] Each column shows header with name + item count - [ ] Cards show: title, note_type badge (color-coded by type), project badge, points badge (if set), labels - [ ] Desktop: HTML5 drag-and-drop moves cards between columns - [ ] Mobile: long-press (300ms) initiates touch drag with ghost card; tap selects card then tap column to move - [ ] Drop/move triggers `PATCH /boards/{slug}/items/{item_id}` with new column — persists after refresh - [ ] Board tabs at top allow switching between boards without going back to list (load all boards, show tabs) - [ ] Different note_type values get different accent colors (e.g. plan=gold, phase=green, issue=blue, todo=red, project=purple, repo=lavender) - [ ] Dark theme consistent with playground aesthetic (dark backgrounds, subtle borders, colored accents) - [ ] Responsive: columns snap-scroll on mobile, full layout on desktop ### Test Expectations - [ ] `npm run check` passes (TypeScript) - [ ] `npm run lint` passes (ESLint) - [ ] `npm run build` succeeds (production build) - Manual test: drag a card, refresh page, card stays in new column ### Constraints - Use Tailwind 4 classes (already configured via `@import 'tailwindcss'` in app.css). Convert ALL inline `<style>` from playground to Tailwind utilities. - Server-side data loading via `+page.server.ts` (SvelteKit convention — api.ts uses private env vars) - Client-side mutations via `fetch('/boards/...')` — need a thin client-side API wrapper OR use SvelteKit form actions - Svelte 5 runes: use `$state`, `$derived`, `$props` (already used in scaffold) - The playground source is at `~/html-playground/4-sprint-board/src/routes/+page.svelte` — use as reference but rewrite for Tailwind + real data, don't copy-paste the `<style>` block - Board tabs should load board list from the server data and allow switching without full page nav - API base URL for client-side mutations: use SvelteKit API routes as proxy (don't expose internal cluster URL to browser) ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `pal-e-docs` — project this affects - `plan-pal-e-docs` — Phase 3 of the interactive knowledge platform plan
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
226-fix-wget-auth
No results found.
Labels
Clear labels   
domain:backend

   
domain:devops

   
domain:frontend
No labels
domain:backend
domain:devops
domain:frontend
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
forgejo_admin/pal-e-docs-app#3
No description provided.