feat(PBI-80): demo-user mag eigen UI-voorkeuren wijzigen (#194)

* feat(PBI-80): SprintSwitcher demo-fork (ST-1345)

Demo-sessies navigeren bij sprint-wissel direct via router.push, zonder
de geblokkeerde setActiveSprintAction aan te roepen. De server-action
behoudt zijn 403-guard als defense in depth.

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

* feat(PBI-80): NavBar demo-fork + URL-derived actief product (ST-1346)

Demo: product-switch in de NavBar navigeert direct via router.push zonder
setActiveProductAction. Voor de weergave (label + dropdown-highlight +
nav-links) leiden we voor demo de actieve product af uit pathname, zodat
de UI consistent is met de URL — de server-render houdt de seed-default
prop maar die wordt voor demo overschreven.

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

* docs(PBI-80): ADR-0006 addendum + demo-client-state patroon (ST-1347)

ADR-0006 krijgt een "Updated 2026-05-12"-sectie die de PBI-80-uitzondering
documenteert: client-side UI-prefs (filters, sort, layout, scope-keuze) zijn
voor demo toegestaan via in-memory store, terwijl alle data-mutaties three-layer
beschermd blijven. Patroon-doc beschrijft wanneer en hoe `isDemo` te gebruiken
in nieuwe componenten. CLAUDE.md quickref + docs/INDEX.md ge-update.

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/shared/nav-bar.tsx

@@ -49,7 +49,19 @@ export function NavBar({
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
 
+  const urlProductId = pathname.match(/^\/products\/([^/]+)/)?.[1] ?? null
+  const displayActive =
+    isDemo && urlProductId
+      ? products.find(p => p.id === urlProductId) ?? activeProduct
+      : activeProduct
+  const activeId = displayActive?.id ?? null
+
   function handleSwitchProduct(productId: string) {
+    if (productId === displayActive?.id) return
+    if (isDemo) {
+      router.push(`/products/${productId}`)
+      return
+    }
     startTransition(async () => {
       const result = await setActiveProductAction(productId)
       if (result?.error) {
@@ -62,8 +74,6 @@ export function NavBar({
     })
   }
 
-  const activeId = activeProduct?.id ?? null
-
   // Nav link helpers
   const disabledSpan = (label: string) => (
     <span
@@ -153,7 +163,7 @@ export function NavBar({
 
       {/* Midden: actief product */}
       <div className="flex items-center justify-center">
-        {activeProduct ? (
+        {displayActive ? (
           <DropdownMenu>
             <DropdownMenuTrigger
               disabled={isPending}
@@ -161,9 +171,9 @@ export function NavBar({
               className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
             >
               <span className="truncate max-w-[180px]">
-                {activeProduct.name.length > 22
-                  ? activeProduct.name.slice(0, 22) + '…'
-                  : activeProduct.name}
+                {displayActive.name.length > 22
+                  ? displayActive.name.slice(0, 22) + '…'
+                  : displayActive.name}
               </span>
               <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
             </DropdownMenuTrigger>
@@ -171,9 +181,9 @@ export function NavBar({
               {products.map(p => (
                 <DropdownMenuItem
                   key={p.id}
-                  onClick={() => p.id !== activeProduct.id && handleSwitchProduct(p.id)}
+                  onClick={() => p.id !== displayActive.id && handleSwitchProduct(p.id)}
                   className={cn(
-                    p.id === activeProduct.id && 'bg-primary-container text-primary-container-foreground font-medium'
+                    p.id === displayActive.id && 'bg-primary-container text-primary-container-foreground font-medium'
                   )}
                 >
                   <span className="truncate">{p.name}</span>

components/shared/sprint-switcher.tsx

@@ -49,6 +49,7 @@ export function SprintSwitcher({
   const [isPending, startTransition] = useTransition()
   const [showClosed, setShowClosed] = useState(false)
   const buildingSet = new Set(buildingSprintIds)
+  const isDemo = useUserSettingsStore(s => s.context.isDemo)
 
   // PBI-79: zolang er een sprint-draft loopt tonen we 'Concept — [goal]'
   // bovenaan de dropdown. De draft staat alleen in deze session-store; bij
@@ -65,6 +66,10 @@ export function SprintSwitcher({
 
   function handleSwitchSprint(sprintId: string) {
     if (sprintId === activeSprint?.id) return
+    if (isDemo) {
+      router.push(`/products/${productId}/sprint/${sprintId}`)
+      return
+    }
     startTransition(async () => {
       const result = await switchActiveSprintAction(productId, sprintId)
       if ('error' in result) {