feat: ST-101-ST-110 M1 producten, PBI backlog, iconen en PWA manifest

- Product aanmaken/bewerken/archiveren/herstellen (ST-101, ST-103)
- SplitPane component met versleepbare splitter en localStorage (ST-104)
- PanelNavBar herbruikbaar paneelheader component (ST-105)
- PbiList met prioriteitsgroepen, inline aanmaken, filter en verwijderen (ST-106-ST-110)
- StoryPanel placeholder rechter paneel met selectie via Zustand (ST-109)
- App iconen geinstalleerd: favicon, apple-icon, PWA manifest (192/512px)
- AppIcon SVG component in navigatiebar
- Root layout metadata bijgewerkt naar Nederlands

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-24 11:33:47 +02:00
parent 8017968e60
commit ffda65490f
23 changed files with 1229 additions and 26 deletions

View file

@ -2,7 +2,9 @@
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { restoreProductAction } from '@/actions/products'
interface Product {
id: string
@ -14,17 +16,30 @@ interface Product {
interface ProductListProps {
products: Product[]
isDemo: boolean
showArchived?: boolean
}
export function ProductList({ products, isDemo }: ProductListProps) {
export function ProductList({ products, isDemo, showArchived = false }: ProductListProps) {
const router = useRouter()
const [, startTransition] = useTransition()
function handleRestore(id: string) {
startTransition(async () => {
await restoreProductAction(id)
router.refresh()
})
}
if (products.length === 0) {
return (
<div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3">
<p className="text-muted-foreground">Je hebt nog geen producten aangemaakt.</p>
{!isDemo && (
<Button variant="outline" render={<Link href="/products/new" />}>
<p className="text-muted-foreground">
{showArchived
? 'Geen gearchiveerde producten.'
: 'Je hebt nog geen producten aangemaakt.'}
</p>
{!isDemo && !showArchived && (
<Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
Maak je eerste product aan
</Button>
)}
@ -37,8 +52,10 @@ export function ProductList({ products, isDemo }: ProductListProps) {
{products.map(product => (
<div
key={product.id}
onClick={() => router.push(`/products/${product.id}`)}
className="group cursor-pointer bg-surface-container-low border border-border rounded-xl p-4 hover:border-primary transition-colors"
onClick={() => !showArchived && router.push(`/products/${product.id}`)}
className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
}`}
>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
@ -51,17 +68,27 @@ export function ProductList({ products, isDemo }: ProductListProps) {
</p>
)}
</div>
{product.repo_url && (
<a
href={product.repo_url}
target="_blank"
rel="noopener noreferrer"
onClick={e => e.stopPropagation()}
className="text-xs text-muted-foreground hover:text-primary shrink-0 underline"
>
Repo
</a>
)}
<div className="flex items-center gap-3 shrink-0">
{product.repo_url && (
<a
href={product.repo_url}
target="_blank"
rel="noopener noreferrer"
onClick={e => e.stopPropagation()}
className="text-xs text-muted-foreground hover:text-primary underline"
>
Repo
</a>
)}
{showArchived && !isDemo && (
<button
onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
className="text-xs text-primary hover:underline"
>
Herstellen
</button>
)}
</div>
</div>
</div>
))}