feat: ST-201-ST-210 M2 stories, drag-and-drop en Zustand stores

- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201)
- useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202)
- PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203)
- PBI slepen over prioriteitsgrens wijzigt priority (ST-204)
- Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206)
- Story drag-and-drop horizontaal binnen en tussen groepen (ST-207)
- Story detail slide-over met bewerkformulier (ST-208)
- Story verwijderen met bevestigingsstap (ST-209)
- Filter op status en prioriteit in rechterpaneel (ST-210)
- Fix: infinite loop in useEffect door stabiele string dependency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-24 11:46:18 +02:00
parent ffda65490f
commit 4dd62c199c
25 changed files with 1794 additions and 100 deletions

BIN
.icons/icon-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

92
.icons/icon-master.svg Normal file
View file

@ -0,0 +1,92 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Background gradient -->
<linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#1a1028"/>
<stop offset="100%" stop-color="#0d0a14"/>
</linearGradient>
<!-- Rocket nose gradient -->
<linearGradient id="nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#c4b5fd"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<!-- Glow filter -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Flame glow -->
<filter id="flame-glow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background rounded rect -->
<rect width="512" height="512" rx="114" fill="url(#bg)"/>
<!-- Subtle radial glow behind rocket -->
<ellipse cx="256" cy="270" rx="140" ry="160" fill="#7c3aed" opacity="0.07"/>
<!-- ── BLOCK 1 (PBI) — bottom ── -->
<rect x="178" y="374" width="156" height="64" rx="14" fill="#3b55c4" opacity="0.55"/>
<rect x="178" y="374" width="156" height="64" rx="14" stroke="#4f6ef7" stroke-width="2" fill="none"/>
<!-- PBI label dots -->
<circle cx="210" cy="406" r="5" fill="#7c9fff" opacity="0.7"/>
<circle cx="228" cy="406" r="5" fill="#7c9fff" opacity="0.5"/>
<circle cx="246" cy="406" r="5" fill="#7c9fff" opacity="0.3"/>
<!-- ── BLOCK 2 (Story) — middle ── -->
<rect x="148" y="294" width="216" height="76" rx="14" fill="#4c52b8" opacity="0.7"/>
<rect x="148" y="294" width="216" height="76" rx="14" stroke="#818cf8" stroke-width="2" fill="none"/>
<!-- Story label line -->
<rect x="174" y="322" width="100" height="6" rx="3" fill="#a5b4fc" opacity="0.5"/>
<rect x="174" y="338" width="68" height="6" rx="3" fill="#a5b4fc" opacity="0.3"/>
<!-- ── BLOCK 3 (Task) — upper body ── -->
<rect x="164" y="210" width="184" height="80" rx="14" fill="#6d28d9" opacity="0.85"/>
<rect x="164" y="210" width="184" height="80" rx="14" stroke="#a78bfa" stroke-width="2" fill="none"/>
<!-- Task checkmark -->
<path d="M196 252 L212 268 L240 238" stroke="#c4b5fd" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8"/>
<!-- ── ROCKET NOSE ── -->
<path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
fill="url(#nose)" opacity="0.95" filter="url(#glow)"/>
<!-- Nose highlight -->
<path d="M256 70 C238 70 200 118 196 190"
stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.15" fill="none"/>
<!-- ── WINDOW ── -->
<circle cx="256" cy="148" r="34" fill="#0d0a14" opacity="0.65"/>
<circle cx="256" cy="148" r="26" fill="#ddd6fe" opacity="0.12"/>
<circle cx="256" cy="148" r="18" fill="#ede9fe" opacity="0.9"/>
<!-- Window shine -->
<circle cx="248" cy="140" r="5" fill="white" opacity="0.6"/>
<!-- ── FINS ── -->
<path d="M164 330 L110 400 L164 400 Z" fill="#3b55c4" opacity="0.55"/>
<path d="M164 330 L110 400 L164 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
<path d="M348 330 L402 400 L348 400 Z" fill="#3b55c4" opacity="0.55"/>
<path d="M348 330 L402 400 L348 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
<!-- ── EXHAUST FLAME ── -->
<path d="M214 438 Q235 480 256 462 Q277 480 298 438"
stroke="#f59e0b" stroke-width="10" stroke-linecap="round" fill="none"
opacity="0.9" filter="url(#flame-glow)"/>
<path d="M228 438 Q242 468 256 455 Q270 468 284 438"
stroke="#fcd34d" stroke-width="7" stroke-linecap="round" fill="none"
opacity="0.75"/>
<path d="M238 438 Q248 458 256 450 Q264 458 274 438"
stroke="#fef3c7" stroke-width="4" stroke-linecap="round" fill="none"
opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

125
.icons/icons/INSTALL.md Normal file
View file

@ -0,0 +1,125 @@
# Scrum4Me — Icon installatie voor Next.js
## Bestandslocaties
Kopieer de bestanden naar de juiste plek in je Next.js App Router project:
```
app/
favicon.ico ← favicon.ico
icon-192.png ← icon-192.png (rename: icon.png)
apple-icon.png ← icon-180.png (rename: apple-icon.png)
public/
icon-512.png ← voor PWA manifest
icon-192.png ← voor PWA manifest
components/
shared/
app-icon.tsx ← herbruikbare React component
```
## Stap 1 — Favicon en app icons
```bash
# Kopieer naar app/ map (Next.js pikt deze automatisch op)
cp favicon.ico ../app/favicon.ico
cp icon-192.png ../app/icon.png
cp icon-180.png ../app/apple-icon.png
# Kopieer naar public/ voor manifest
cp icon-512.png ../public/icon-512.png
cp icon-192.png ../public/icon-192.png
```
## Stap 2 — Metadata in app/layout.tsx
```tsx
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
default: 'Scrum4Me',
template: '%s — Scrum4Me',
},
description: 'Lichtgewicht Scrum-planner voor solo developers en kleine teams',
icons: {
icon: [
{ url: '/favicon.ico', sizes: '48x48' },
{ url: '/icon.png', sizes: '192x192', type: 'image/png' },
],
apple: [
{ url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
],
},
manifest: '/manifest.json',
}
```
## Stap 3 — PWA manifest (optioneel)
Maak `public/manifest.json` aan:
```json
{
"name": "Scrum4Me",
"short_name": "Scrum4Me",
"description": "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
"start_url": "/dashboard",
"display": "standalone",
"background_color": "#0d0a14",
"theme_color": "#7c3aed",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}
```
## Stap 4 — AppIcon component gebruiken
```tsx
// In de navigatiebalk:
import { AppIcon } from '@/components/shared/app-icon'
export function Navbar() {
return (
<nav>
<div className="flex items-center gap-2">
<AppIcon size={28} />
<span className="font-semibold text-foreground">Scrum4Me</span>
</div>
</nav>
)
}
```
## Gegenereerde bestanden — overzicht
| Bestand | Formaat | Gebruik |
|---|---|---|
| `favicon.ico` | ICO (16+32+48) | Browser tabblad |
| `icon-16.png` | PNG 16×16 | Browser fallback |
| `icon-32.png` | PNG 32×32 | Browser retina tabblad |
| `icon-48.png` | PNG 48×48 | Windows taskbar |
| `icon-76.png` | PNG 76×76 | iPad non-retina |
| `icon-120.png` | PNG 120×120 | iPhone retina |
| `icon-144.png` | PNG 144×144 | Windows tile |
| `icon-152.png` | PNG 152×152 | iPad retina |
| `icon-180.png` | PNG 180×180 | Apple touch icon |
| `icon-192.png` | PNG 192×192 | Android / PWA |
| `icon-512.png` | PNG 512×512 | PWA splash / stores |
| `icon-master.svg` | SVG | Bronbestand (master) |
| `icon-simple.svg` | SVG | Vereenvoudigd voor kleine formaten |
| `app-icon.tsx` | React | Inline SVG component |

70
.icons/icons/app-icon.tsx Normal file
View file

@ -0,0 +1,70 @@
// components/shared/app-icon.tsx
// Scrum4Me app icon — concept 5 (Rocket)
// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />
interface AppIconProps {
size?: number
className?: string
}
export function AppIcon({ size = 32, className }: AppIconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
aria-label="Scrum4Me"
>
<defs>
<linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor="#1a1028"/>
<stop offset="100%" stopColor="#0d0a14"/>
</linearGradient>
<linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor="#c4b5fd"/>
<stop offset="100%" stopColor="#7c3aed"/>
</linearGradient>
</defs>
{/* Background */}
<rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
{/* Block 1 — PBI */}
<rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
{/* Block 2 — Story */}
<rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
{/* Block 3 — Task */}
<rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
{/* Rocket nose */}
<path
d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
fill="url(#s4m-nose)"
/>
{/* Window */}
<circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
<circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
<circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>
{/* Fins */}
<path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
<path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
{/* Flame */}
<path
d="M212 432 Q244 472 256 456 Q268 472 300 432"
stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
/>
<path
d="M232 432 Q248 460 256 448 Q264 460 280 432"
stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
/>
</svg>
)
}

BIN
.icons/icons/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 569 B

BIN
.icons/icons/icon-120.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

BIN
.icons/icons/icon-144.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
.icons/icons/icon-152.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
.icons/icons/icon-16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

BIN
.icons/icons/icon-180.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
.icons/icons/icon-192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
.icons/icons/icon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
.icons/icons/icon-48.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
.icons/icons/icon-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
.icons/icons/icon-76.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View file

@ -0,0 +1,92 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Background gradient -->
<linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#1a1028"/>
<stop offset="100%" stop-color="#0d0a14"/>
</linearGradient>
<!-- Rocket nose gradient -->
<linearGradient id="nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#c4b5fd"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<!-- Glow filter -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Flame glow -->
<filter id="flame-glow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background rounded rect -->
<rect width="512" height="512" rx="114" fill="url(#bg)"/>
<!-- Subtle radial glow behind rocket -->
<ellipse cx="256" cy="270" rx="140" ry="160" fill="#7c3aed" opacity="0.07"/>
<!-- ── BLOCK 1 (PBI) — bottom ── -->
<rect x="178" y="374" width="156" height="64" rx="14" fill="#3b55c4" opacity="0.55"/>
<rect x="178" y="374" width="156" height="64" rx="14" stroke="#4f6ef7" stroke-width="2" fill="none"/>
<!-- PBI label dots -->
<circle cx="210" cy="406" r="5" fill="#7c9fff" opacity="0.7"/>
<circle cx="228" cy="406" r="5" fill="#7c9fff" opacity="0.5"/>
<circle cx="246" cy="406" r="5" fill="#7c9fff" opacity="0.3"/>
<!-- ── BLOCK 2 (Story) — middle ── -->
<rect x="148" y="294" width="216" height="76" rx="14" fill="#4c52b8" opacity="0.7"/>
<rect x="148" y="294" width="216" height="76" rx="14" stroke="#818cf8" stroke-width="2" fill="none"/>
<!-- Story label line -->
<rect x="174" y="322" width="100" height="6" rx="3" fill="#a5b4fc" opacity="0.5"/>
<rect x="174" y="338" width="68" height="6" rx="3" fill="#a5b4fc" opacity="0.3"/>
<!-- ── BLOCK 3 (Task) — upper body ── -->
<rect x="164" y="210" width="184" height="80" rx="14" fill="#6d28d9" opacity="0.85"/>
<rect x="164" y="210" width="184" height="80" rx="14" stroke="#a78bfa" stroke-width="2" fill="none"/>
<!-- Task checkmark -->
<path d="M196 252 L212 268 L240 238" stroke="#c4b5fd" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8"/>
<!-- ── ROCKET NOSE ── -->
<path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
fill="url(#nose)" opacity="0.95" filter="url(#glow)"/>
<!-- Nose highlight -->
<path d="M256 70 C238 70 200 118 196 190"
stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.15" fill="none"/>
<!-- ── WINDOW ── -->
<circle cx="256" cy="148" r="34" fill="#0d0a14" opacity="0.65"/>
<circle cx="256" cy="148" r="26" fill="#ddd6fe" opacity="0.12"/>
<circle cx="256" cy="148" r="18" fill="#ede9fe" opacity="0.9"/>
<!-- Window shine -->
<circle cx="248" cy="140" r="5" fill="white" opacity="0.6"/>
<!-- ── FINS ── -->
<path d="M164 330 L110 400 L164 400 Z" fill="#3b55c4" opacity="0.55"/>
<path d="M164 330 L110 400 L164 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
<path d="M348 330 L402 400 L348 400 Z" fill="#3b55c4" opacity="0.55"/>
<path d="M348 330 L402 400 L348 400 Z" stroke="#4f6ef7" stroke-width="1.5" fill="none" opacity="0.6"/>
<!-- ── EXHAUST FLAME ── -->
<path d="M214 438 Q235 480 256 462 Q277 480 298 438"
stroke="#f59e0b" stroke-width="10" stroke-linecap="round" fill="none"
opacity="0.9" filter="url(#flame-glow)"/>
<path d="M228 438 Q242 468 256 455 Q270 468 284 438"
stroke="#fcd34d" stroke-width="7" stroke-linecap="round" fill="none"
opacity="0.75"/>
<path d="M238 438 Q248 458 256 450 Q264 458 274 438"
stroke="#fef3c7" stroke-width="4" stroke-linecap="round" fill="none"
opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -0,0 +1,40 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-s" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#1a1028"/>
<stop offset="100%" stop-color="#0d0a14"/>
</linearGradient>
<linearGradient id="nose-s" x1="256" y1="60" x2="256" y2="230" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#c4b5fd"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
</defs>
<rect width="512" height="512" rx="114" fill="url(#bg-s)"/>
<!-- Block 1 (PBI) -->
<rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
<!-- Block 2 (Story) -->
<rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
<!-- Block 3 (Task) -->
<rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
<!-- Rocket nose -->
<path d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z" fill="url(#nose-s)"/>
<!-- Window -->
<circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
<circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
<!-- Fins -->
<path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
<path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
<!-- Flame -->
<path d="M212 432 Q244 472 256 456 Q268 472 300 432"
stroke="#f59e0b" stroke-width="12" stroke-linecap="round" fill="none" opacity="0.95"/>
<path d="M232 432 Q248 460 256 448 Q264 460 280 432"
stroke="#fef3c7" stroke-width="7" stroke-linecap="round" fill="none" opacity="0.7"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB