Playground: kanban board prototype with improved UX #46

New issue

Open

opened 2026-03-23 14:16:10 +00:00 by forgejo_admin · 1 comment

forgejo_admin commented

2026-03-23 14:16:10 +00:00

Owner

Type

Feature

Lineage

Standalone — board-pal-e-docs kanban MVP

Repo

forgejo_admin/pal-e-playground

User Story

As the superuser
I want a playground kanban prototype I can iterate on with my own eyes
So that the board design feels like mine before it goes into production

Context

The current pal-e-app kanban was agent-built without visual iteration with Lucas. This ticket is the design phase — build it in the playground, iterate until it feels right, then promote to pal-e-app in a separate ticket.

File Targets

Files to modify:

~/pal-e-playground/pal-e-app/board.html — iterate on kanban design
~/pal-e-playground/pal-e-app/app.css — evolve styles as design changes
~/pal-e-playground/pal-e-app/app.js — add interactivity (drag-drop, filters, mock data rendering)

Files NOT to touch:

~/pal-e-app/ — don't change production until design is approved

Acceptance Criteria

Lucas approves the kanban design on phone and desktop
Cards show title, type badge, points, child-count indicator
Items are visually prioritized top-to-bottom in each column
Mobile-first layout

Test Expectations

Lucas visual review on phone
Lucas visual review on desktop

Constraints

Design is taste-driven — iterate with Lucas, not rules
Keep it simple — MVP, not every feature from the SvelteKit version
Pure HTML/CSS/JS, no frameworks

Checklist

PR opened
Tests pass
No unrelated changes

project-pal-e-docs — pal-e-app is the frontend

### Type Feature ### Lineage Standalone — board-pal-e-docs kanban MVP ### Repo `forgejo_admin/pal-e-playground` ### User Story As the superuser I want a playground kanban prototype I can iterate on with my own eyes So that the board design feels like mine before it goes into production ### Context The current pal-e-app kanban was agent-built without visual iteration with Lucas. This ticket is the design phase — build it in the playground, iterate until it feels right, then promote to pal-e-app in a separate ticket. ### File Targets Files to modify: - `~/pal-e-playground/pal-e-app/board.html` — iterate on kanban design - `~/pal-e-playground/pal-e-app/app.css` — evolve styles as design changes - `~/pal-e-playground/pal-e-app/app.js` — add interactivity (drag-drop, filters, mock data rendering) Files NOT to touch: - `~/pal-e-app/` — don't change production until design is approved ### Acceptance Criteria - [ ] Lucas approves the kanban design on phone and desktop - [ ] Cards show title, type badge, points, child-count indicator - [ ] Items are visually prioritized top-to-bottom in each column - [ ] Mobile-first layout ### Test Expectations - [ ] Lucas visual review on phone - [ ] Lucas visual review on desktop ### Constraints - Design is taste-driven — iterate with Lucas, not rules - Keep it simple — MVP, not every feature from the SvelteKit version - Pure HTML/CSS/JS, no frameworks ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `project-pal-e-docs` — pal-e-app is the frontend

forgejo_admin referenced this issue from a pull request from forgejo_admin/pal-e-playground that will close it,

2026-03-24 16:09:19 +00:00

feat: add pal-e-app kanban board playground prototype #7

forgejo_admin commented

2026-03-24 16:40:24 +00:00

Author

Owner

Scope Revision: Vanilla JS → Svelte (no SvelteKit)

The vanilla JS prototype (PR #7 on pal-e-playground) proved the layout but drag-and-drop and state management are broken — vanilla DOM manipulation can't handle interactive kanban.

Revised approach: Svelte compiler only, no SvelteKit

5 flat files, no directories:

app.css          ← pure CSS design system (source of truth, shared)
index.html       ← entry point, real HTML, mounts board.svelte
board.svelte     ← kanban board (HTML with {#each}, $state, drag-drop)
package.json     ← svelte + vite (8 lines)
vite.config.js   ← register svelte plugin (5 lines)

User stories

Human: As the superuser, I can interact with my kanban board visually — drag to reorder priority, filter by type, expand children — so that the board is a thinking tool I use daily.

AI: As an AI agent (Betty Sue), I need the human to verify board state visually, so that column flow violations, priority mistakes, and stale items are caught by human eyes.

Key design decisions

.svelte files ARE HTML — promotes directly to pal-e-app with zero translation
app.css is pure CSS, no Tailwind — playground→production copy-paste
Pages expand as HTML+Svelte pairs (board.html+board.svelte, projects.html+projects.svelte, etc.)
Shared components extracted only when two pages need the same thing
npm run dev for hot reload iteration, npm run build outputs static files for playground nginx

Acceptance criteria (unchanged)

Lucas approves the kanban design on phone and desktop
Cards drag between columns and reorder within columns
Type filter pills work
Items with children show expandable drill-down
Mobile-first, Atkinson Hyperlegible, light theme

## Scope Revision: Vanilla JS → Svelte (no SvelteKit) The vanilla JS prototype (PR #7 on pal-e-playground) proved the layout but drag-and-drop and state management are broken — vanilla DOM manipulation can't handle interactive kanban. ### Revised approach: Svelte compiler only, no SvelteKit **5 flat files, no directories:** ``` app.css ← pure CSS design system (source of truth, shared) index.html ← entry point, real HTML, mounts board.svelte board.svelte ← kanban board (HTML with {#each}, $state, drag-drop) package.json ← svelte + vite (8 lines) vite.config.js ← register svelte plugin (5 lines) ``` ### User stories **Human:** As the superuser, I can interact with my kanban board visually — drag to reorder priority, filter by type, expand children — so that the board is a thinking tool I use daily. **AI:** As an AI agent (Betty Sue), I need the human to verify board state visually, so that column flow violations, priority mistakes, and stale items are caught by human eyes. ### Key design decisions - `.svelte files ARE HTML` — promotes directly to pal-e-app with zero translation - `app.css` is pure CSS, no Tailwind — playground→production copy-paste - Pages expand as HTML+Svelte pairs (board.html+board.svelte, projects.html+projects.svelte, etc.) - Shared components extracted only when two pages need the same thing - `npm run dev` for hot reload iteration, `npm run build` outputs static files for playground nginx ### Acceptance criteria (unchanged) - [ ] Lucas approves the kanban design on phone and desktop - [ ] Cards drag between columns and reorder within columns - [ ] Type filter pills work - [ ] Items with children show expandable drill-down - [ ] Mobile-first, Atkinson Hyperlegible, light theme

forgejo_admin referenced this issue from a pull request from forgejo_admin/pal-e-playground that will close it,

2026-03-24 16:48:14 +00:00

feat: replace vanilla JS kanban with Svelte 5 prototype #8

forgejo_admin referenced this issue

2026-03-28 05:42:38 +00:00

Integrate playground-approved kanban into pal-e-app #47