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>

components/split-pane/split-pane.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+
+interface SplitPaneProps {
+  left: React.ReactNode
+  right: React.ReactNode
+  storageKey: string
+  defaultSplit?: number // percentage for left pane, default 40
+  minSize?: number      // minimum px per pane, default 200
+}
+
+export function SplitPane({
+  left,
+  right,
+  storageKey,
+  defaultSplit = 40,
+  minSize = 200,
+}: SplitPaneProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [split, setSplit] = useState<number>(defaultSplit)
+  const [isDragging, setIsDragging] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const [activeTab, setActiveTab] = useState<'left' | 'right'>('left')
+
+  // Load stored split on mount
+  useEffect(() => {
+    const stored = localStorage.getItem(`split-pane:${storageKey}`)
+    if (stored) {
+      const val = parseFloat(stored)
+      if (!isNaN(val) && val > 0 && val < 100) setSplit(val)
+    }
+  }, [storageKey])
+
+  // Detect mobile
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 1024)
+    check()
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [])
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging || !containerRef.current) return
+    const rect = containerRef.current.getBoundingClientRect()
+    const containerWidth = rect.width
+    const offsetX = e.clientX - rect.left
+    const minPct = (minSize / containerWidth) * 100
+    const maxPct = 100 - minPct
+    const newSplit = Math.min(maxPct, Math.max(minPct, (offsetX / containerWidth) * 100))
+    setSplit(newSplit)
+    localStorage.setItem(`split-pane:${storageKey}`, String(newSplit))
+  }, [isDragging, minSize, storageKey])
+
+  const onMouseUp = useCallback(() => setIsDragging(false), [])
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', onMouseMove)
+      window.addEventListener('mouseup', onMouseUp)
+    }
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove)
+      window.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [isDragging, onMouseMove, onMouseUp])
+
+  if (isMobile) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="flex border-b border-border shrink-0">
+          <button
+            onClick={() => setActiveTab('left')}
+            className={cn(
+              'flex-1 py-2 text-sm font-medium transition-colors',
+              activeTab === 'left'
+                ? 'border-b-2 border-primary text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            Backlog
+          </button>
+          <button
+            onClick={() => setActiveTab('right')}
+            className={cn(
+              'flex-1 py-2 text-sm font-medium transition-colors',
+              activeTab === 'right'
+                ? 'border-b-2 border-primary text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            Stories
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {activeTab === 'left' ? left : right}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className="flex h-full overflow-hidden select-none">
+      {/* Left pane */}
+      <div className="flex flex-col overflow-hidden" style={{ width: `${split}%` }}>
+        {left}
+      </div>
+
+      {/* Divider */}
+      <div
+        onMouseDown={() => setIsDragging(true)}
+        className={cn(
+          'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
+          isDragging && 'bg-primary'
+        )}
+      />
+
+      {/* Right pane */}
+      <div className="flex flex-col overflow-hidden flex-1">
+        {right}
+      </div>
+    </div>
+  )
+}