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

Closed

forgejo_admin wants to merge 3 commits from 46-svelte-kanban-board-prototype into main

forgejo_admin commented

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

Owner

Summary

Replaces the broken vanilla JS kanban board prototype with a working Svelte 5 + Vite implementation. All 9 interactive features now function correctly: drag-and-drop, filtering, column collapse, child expansion, board switching, and cross-project overview.

Changes

pal-e-app/board.svelte -- New Svelte 5 component with all board logic using runes ($state, $derived). 370 lines, mostly HTML with a focused script block.
pal-e-app/index.html -- Replaced with Vite entry point using mount() API (Svelte 5 requirement).
pal-e-app/app.css -- Added Google Fonts @import for Atkinson Hyperlegible. All existing CSS preserved.
pal-e-app/package.json -- Minimal deps: svelte 5, @sveltejs/vite-plugin-svelte 5, vite 6.
pal-e-app/vite.config.js -- Minimal Vite config with Svelte plugin.
pal-e-app/.gitignore -- Excludes node_modules/ and dist/.
Removed pal-e-app/app.js and pal-e-app/board.html (vanilla JS files).

Test Plan

cd pal-e-app && npm install && npm run dev -- board renders at localhost:5173
npm run build passes with zero warnings
Playwright verification: overview cards, board tabs, filter pills, column collapse, child expansion, drag-and-drop between columns
All 5 files flat in pal-e-app/, no subdirectories, no SvelteKit, no TypeScript

Review Checklist

Passed automated review-fix loop
No secrets committed
No unnecessary file changes
Commit messages are descriptive

Closes forgejo_admin/pal-e-app#46

## Summary Replaces the broken vanilla JS kanban board prototype with a working Svelte 5 + Vite implementation. All 9 interactive features now function correctly: drag-and-drop, filtering, column collapse, child expansion, board switching, and cross-project overview. ## Changes - `pal-e-app/board.svelte` -- New Svelte 5 component with all board logic using runes ($state, $derived). 370 lines, mostly HTML with a focused script block. - `pal-e-app/index.html` -- Replaced with Vite entry point using `mount()` API (Svelte 5 requirement). - `pal-e-app/app.css` -- Added Google Fonts @import for Atkinson Hyperlegible. All existing CSS preserved. - `pal-e-app/package.json` -- Minimal deps: svelte 5, @sveltejs/vite-plugin-svelte 5, vite 6. - `pal-e-app/vite.config.js` -- Minimal Vite config with Svelte plugin. - `pal-e-app/.gitignore` -- Excludes node_modules/ and dist/. - Removed `pal-e-app/app.js` and `pal-e-app/board.html` (vanilla JS files). ## Test Plan - [x] `cd pal-e-app && npm install && npm run dev` -- board renders at localhost:5173 - [x] `npm run build` passes with zero warnings - [x] Playwright verification: overview cards, board tabs, filter pills, column collapse, child expansion, drag-and-drop between columns - [x] All 5 files flat in pal-e-app/, no subdirectories, no SvelteKit, no TypeScript ## Review Checklist - [x] Passed automated review-fix loop - [x] No secrets committed - [x] No unnecessary file changes - [x] Commit messages are descriptive ## Related - Closes forgejo_admin/pal-e-app#46

forgejo_admin added 3 commits

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

feat: add pal-e-app kanban board playground prototype d7b5003841

Vanilla HTML/CSS/JS kanban board with cross-project overview,
drag-and-drop columns, hierarchical drill-down sub-boards,
type filtering, and mobile-first responsive layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix: review cleanup -- remove dead code, use CSS classes for landing card d7ea297753

- Remove unused TYPE_COLORS constant from app.js
- Implement actual drag reorder (splice items in array) instead of dead code
- Replace inline styles and JS event handlers on landing page card with CSS classes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

feat: replace vanilla JS kanban with Svelte 5 prototype 308a587553

Replace broken vanilla JS board with a Svelte 5 + Vite implementation.
All interactivity now works: drag-and-drop between columns, type filter
pills, hide-done toggle, column collapse with vertical headers, child
item expansion, cross-project overview cards, and board tab switching.

5 flat files, no subdirectories, no SvelteKit, no TypeScript.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

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

Author

Owner

QA Review -- PR #8

Summary

Replaces vanilla JS kanban prototype with Svelte 5 + Vite. 5 flat files, no subdirectories, no SvelteKit. All 9 interactive features implemented and verified via Playwright.

Findings

Architecture -- PASS

Clean 5-file flat structure as specified: app.css, board.svelte, index.html, package.json, vite.config.js
Correct Svelte 5 mount API (mount() not new Component())
Svelte 5 runes used properly ($state, $derived)
No TypeScript, no SvelteKit, no Tailwind
.gitignore correctly excludes node_modules/ and dist/

Interactivity -- PASS

Drag-and-drop between columns: verified working (HTML5 drag API with positional reorder)
Filter pills: toggle on/off with type-colored active state
Hide done toggle: filters done column items, button text toggles
Column collapse: vertical header with rotated text, expand via +/- button
Child expansion: sub-items render inline with type badges and status indicators
Board switching: via overview cards and tabs, filter pills update per board
Cross-project overview: summary cards with distribution bars

Code Quality -- PASS

vite build produces zero warnings
All state mutations trigger Svelte reactivity correctly (clone-and-reassign pattern for Sets, spread for arrays)
structuredClone(BOARDS) prevents mutation of source data
Drag handlers properly clean up state on dragend
e.stopPropagation() used correctly on nested interactive elements

CSS -- PASS

Existing design system CSS preserved intact
Google Fonts @import added for Atkinson Hyperlegible
All board styles use CSS custom properties from :root
Mobile-first responsive at 600px breakpoint with scroll-snap columns
No inline styles except for dynamic values (colors, widths)

Minor Observations (non-blocking)

TYPE_COLORS constant is defined but never referenced in the template (colors come from CSS classes badge--{type} and data-type attribute selectors instead). Could be removed for cleanliness, but harmless.
onDragLeave receives col parameter but does not use it. Could simplify to onDragLeave(e).

VERDICT: PASS

Clean implementation matching the spec. Build is warning-free. All interactive features verified working via Playwright testing.

## QA Review -- PR #8 ### Summary Replaces vanilla JS kanban prototype with Svelte 5 + Vite. 5 flat files, no subdirectories, no SvelteKit. All 9 interactive features implemented and verified via Playwright. ### Findings **Architecture -- PASS** - Clean 5-file flat structure as specified: `app.css`, `board.svelte`, `index.html`, `package.json`, `vite.config.js` - Correct Svelte 5 mount API (`mount()` not `new Component()`) - Svelte 5 runes used properly (`$state`, `$derived`) - No TypeScript, no SvelteKit, no Tailwind - `.gitignore` correctly excludes `node_modules/` and `dist/` **Interactivity -- PASS** - Drag-and-drop between columns: verified working (HTML5 drag API with positional reorder) - Filter pills: toggle on/off with type-colored active state - Hide done toggle: filters done column items, button text toggles - Column collapse: vertical header with rotated text, expand via +/- button - Child expansion: sub-items render inline with type badges and status indicators - Board switching: via overview cards and tabs, filter pills update per board - Cross-project overview: summary cards with distribution bars **Code Quality -- PASS** - `vite build` produces zero warnings - All state mutations trigger Svelte reactivity correctly (clone-and-reassign pattern for Sets, spread for arrays) - `structuredClone(BOARDS)` prevents mutation of source data - Drag handlers properly clean up state on dragend - `e.stopPropagation()` used correctly on nested interactive elements **CSS -- PASS** - Existing design system CSS preserved intact - Google Fonts `@import` added for Atkinson Hyperlegible - All board styles use CSS custom properties from `:root` - Mobile-first responsive at 600px breakpoint with scroll-snap columns - No inline styles except for dynamic values (colors, widths) **Minor Observations (non-blocking)** - `TYPE_COLORS` constant is defined but never referenced in the template (colors come from CSS classes `badge--{type}` and `data-type` attribute selectors instead). Could be removed for cleanliness, but harmless. - `onDragLeave` receives `col` parameter but does not use it. Could simplify to `onDragLeave(e)`. ### VERDICT: PASS Clean implementation matching the spec. Build is warning-free. All interactive features verified working via Playwright testing.