feat(PBI-91): expliciete schermstaat + draft-zichtbaarheid PB-page (#210)

* docs(ST-1369): plan PBI-91 — expliciete schermstaat + draft-zichtbaarheid

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

* feat(ST-1369): screen-state module — ScreenState + deriveScreenState()

Pure afleidingslaag die de verspreide schermstaat-derivatie van de Product
Backlog page consolideert tot één testbaar ScreenState-model. Nog geen
consumers — die volgen in T-1035/T-1036.

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

* test(ST-1369): unit-tests voor deriveScreenState()

Dekt alle vier de kinds (NO_SPRINT, DRAFT, ACTIVE, EDITING), de building-flag
en de draft-voorrang boven een actieve sprint.

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

* feat(ST-1369): SprintSwitcher op deriveScreenState + draft op trigger (G5)

De trigger-knop toont nu de concept-sprint zodra er een sprint-draft loopt,
niet langer alleen de (disabled) dropdown-regel. Schermstaat-afleiding loopt
via de pure deriveScreenState() i.p.v. losse flags.

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

* feat(ST-1369): NewSprintTrigger achter isActiveProduct-gate (G6)

De "Nieuwe sprint"-knop rendert niet langer op een niet-actief product —
een sprint-draft starten daar was verwarrend. page.tsx geeft de bestaande
isActiveProduct-flag door.

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

* test(ST-1369): component-tests voor draft-op-trigger (G5) en isActiveProduct-gate (G6)

sprint-switcher: trigger toont concept-sprint bij een pending draft, en geen
concept-label zonder draft. new-sprint-trigger: nieuw testbestand — rendert
niet op een niet-actief product, wel op een actief product zonder draft.

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

---------

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

__tests__/components/backlog/new-sprint-trigger.test.tsx

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import type { ReactNode } from 'react'
+
+const workflowMock: {
+  value: { pendingSprintDraft?: Record<string, unknown> } | undefined
+} = { value: undefined }
+
+vi.mock('@/stores/user-settings/store', () => ({
+  useUserSettingsStore: (
+    selector: (s: {
+      entities: {
+        settings: {
+          workflow: { pendingSprintDraft?: Record<string, unknown> } | undefined
+        }
+      }
+    }) => unknown,
+  ) => selector({ entities: { settings: { workflow: workflowMock.value } } }),
+}))
+
+vi.mock('./new-sprint-metadata-dialog', () => ({
+  NewSprintMetadataDialog: () => null,
+}))
+
+vi.mock('@/components/shared/demo-tooltip', () => ({
+  DemoTooltip: ({ children }: { children: ReactNode }) => children,
+}))
+
+import { NewSprintTrigger } from '@/components/backlog/new-sprint-trigger'
+
+beforeEach(() => {
+  workflowMock.value = undefined
+})
+
+describe('NewSprintTrigger', () => {
+  it('renders the button on an active product without a draft', () => {
+    render(<NewSprintTrigger productId="p1" isDemo={false} isActiveProduct={true} />)
+    expect(screen.getByText('Nieuwe sprint')).toBeInTheDocument()
+  })
+
+  it('renders nothing on a non-active product (G6)', () => {
+    const { container } = render(
+      <NewSprintTrigger productId="p1" isDemo={false} isActiveProduct={false} />,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders nothing when a sprint draft is pending', () => {
+    workflowMock.value = { pendingSprintDraft: { p1: { goal: 'X' } } }
+    const { container } = render(
+      <NewSprintTrigger productId="p1" isDemo={false} isActiveProduct={true} />,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+})

__tests__/components/shared/sprint-switcher.test.tsx

@@ -24,6 +24,11 @@ vi.mock('sonner', () => ({
 }))
 
 const isDemoMock = { value: false }
+const workflowMock: {
+  value:
+    | { pendingSprintDraft?: Record<string, { goal: string } | undefined> }
+    | undefined
+} = { value: undefined }
 // Mock-state shape moet alle paden dekken die SprintSwitcher selecteert:
 // - s.context.isDemo (oude code)
 // - s.entities.settings.workflow?.pendingSprintDraft?.[productId]?.goal (PBI-79)
@@ -38,8 +43,11 @@ type MockStoreState = {
   }
 }
 vi.mock('@/stores/user-settings/store', () => ({
-  useUserSettingsStore: (selector: (s: { context: { isDemo: boolean }; entities: { settings: { workflow: null } } }) => unknown) =>
-    selector({ context: { isDemo: isDemoMock.value }, entities: { settings: { workflow: null } } }),
+  useUserSettingsStore: (selector: (s: MockStoreState) => unknown) =>
+    selector({
+      context: { isDemo: isDemoMock.value },
+      entities: { settings: { workflow: workflowMock.value } },
+    }),
 }))
 
 vi.mock('@/components/ui/dropdown-menu', () => {
@@ -85,6 +93,7 @@ const sprints = [
 beforeEach(() => {
   vi.clearAllMocks()
   isDemoMock.value = false
+  workflowMock.value = undefined
   actionMock.mockResolvedValue({ success: true })
   pathnameMock.mockReturnValue('/products/p1/sprint')
 })
@@ -137,4 +146,29 @@ describe('SprintSwitcher', () => {
     expect(pushMock).not.toHaveBeenCalled()
     expect(actionMock).not.toHaveBeenCalled()
   })
+
+  it('shows the concept-sprint on the trigger when a draft is pending (G5)', () => {
+    workflowMock.value = { pendingSprintDraft: { p1: { goal: 'Test goal' } } }
+    render(
+      <SprintSwitcher
+        productId="p1"
+        sprints={sprints}
+        activeSprint={null}
+        buildingSprintIds={[]}
+      />,
+    )
+    expect(screen.getByText('⚙ Concept — Test goal')).toBeInTheDocument()
+  })
+
+  it('shows no concept label on the trigger when no draft is pending', () => {
+    render(
+      <SprintSwitcher
+        productId="p1"
+        sprints={sprints}
+        activeSprint={sprints[0]}
+        buildingSprintIds={[]}
+      />,
+    )
+    expect(screen.queryByText(/⚙ Concept/)).not.toBeInTheDocument()
+  })
 })

__tests__/stores/product-workspace/screen-state.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import {
+  deriveScreenState,
+  type ScreenStateInput,
+} from '@/stores/product-workspace/screen-state'
+
+const base: ScreenStateInput = {
+  activeSprintItem: null,
+  buildingSprintIds: [],
+  hasPendingDraft: false,
+  pendingAdds: [],
+  pendingRemoves: [],
+}
+
+describe('deriveScreenState', () => {
+  it('returns NO_SPRINT without draft or active sprint', () => {
+    expect(deriveScreenState(base)).toEqual({ kind: 'NO_SPRINT' })
+  })
+
+  it('returns DRAFT when a pending draft exists', () => {
+    expect(deriveScreenState({ ...base, hasPendingDraft: true })).toEqual({
+      kind: 'DRAFT',
+    })
+  })
+
+  it('lets a draft win over an active sprint with pending changes', () => {
+    expect(
+      deriveScreenState({
+        ...base,
+        hasPendingDraft: true,
+        activeSprintItem: { id: 's1' },
+        pendingAdds: ['x'],
+      }),
+    ).toEqual({ kind: 'DRAFT' })
+  })
+
+  it('returns ACTIVE for an active sprint with no pending changes', () => {
+    expect(
+      deriveScreenState({ ...base, activeSprintItem: { id: 's1' } }),
+    ).toEqual({ kind: 'ACTIVE', building: false })
+  })
+
+  it('flags building when the active sprint is in buildingSprintIds', () => {
+    expect(
+      deriveScreenState({
+        ...base,
+        activeSprintItem: { id: 's1' },
+        buildingSprintIds: ['s1'],
+      }),
+    ).toEqual({ kind: 'ACTIVE', building: true })
+  })
+
+  it('returns EDITING when there are pending adds', () => {
+    expect(
+      deriveScreenState({
+        ...base,
+        activeSprintItem: { id: 's1' },
+        pendingAdds: ['x'],
+      }),
+    ).toEqual({ kind: 'EDITING', building: false })
+  })
+
+  it('returns EDITING when there are pending removes', () => {
+    expect(
+      deriveScreenState({
+        ...base,
+        activeSprintItem: { id: 's1' },
+        pendingRemoves: ['y'],
+      }),
+    ).toEqual({ kind: 'EDITING', building: false })
+  })
+
+  it('flags building on EDITING when the active sprint is building', () => {
+    expect(
+      deriveScreenState({
+        ...base,
+        activeSprintItem: { id: 's1' },
+        pendingAdds: ['x'],
+        buildingSprintIds: ['s1'],
+      }),
+    ).toEqual({ kind: 'EDITING', building: true })
+  })
+})