Sprint: Verbeteren debug mode (#179)

* feat(PBI-49): add debugProps helper + Vitest test Adds lib/debug.ts with debugProps(id, component, file) that returns data-debug-id and data-debug-label attrs in dev mode, empty object in production. Adds __tests__/lib/debug.test.ts covering both modes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(PBI-49): add debug-id pattern doc + CLAUDE.md reference Adds docs/patterns/debug-id.md documenting the named-component boundary rule (6 punten), helper-voorbeeld, skip-criteria en motivatie voor handmatige pad-argumenten. Voegt verwijzing toe aan CLAUDE.md patterns-tabel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(PBI-49): migrate 17 shared/ components to debugProps helper Replace hardcoded data-debug-id + data-debug-label attribute pairs with {...debugProps(id, component, file)} spread in all 17 components/shared/ files. Existing debug-ids preserved unchanged. * feat(PBI-49): add debugProps to backlog/, sprint/, solo/ components * feat(PBI-49): add debugProps to jobs/ + ideas/ components * feat(PBI-49): add debugProps to products/ + settings/ + notifications/ components * feat(PBI-49): add debugProps to admin/ + dashboard/ + dialogs/ + mobile/ + split-pane/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(PBI-49): use attr(data-debug-id) for debug tooltip in globals.css * refactor(PBI-49): remove data-debug-label from debugProps helper + test Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(PBI-49): strip unused component/file args from debugProps in shared/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to StatusBar, NavBar, PanelNavBar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to components/sprint/* - new-sprint-dialog: __submit on submit button - sprint-backlog: __list on SprintBacklogLeft + SprintBacklogRight scroll areas - sprint-board-client: root wrapper div (display:contents) + __drag-overlay - sprint-header: __title on goal button, __dates on dates button, __actions on action cluster - sprint-run-controls: root on controls div, __start/__cancel on action buttons; __blockers-dialog on dialog content - start-sprint-button: root on trigger button, __dialog on dialog content, __submit on submit button - sync-active-sprint-cookie: no debug-id (returns null, side-effect only), comment added Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to components/backlog/* * feat(PBI-49): add BEM sub-element data-debug-id to components/ideas/* * feat(PBI-49): add BEM sub-element data-debug-id to components/dashboard/* + components/markdown.tsx Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to new-product-button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to components/solo/* Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-elements to nav-status-indicators Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to components/jobs/* Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to components/products/* * feat(PBI-49): add BEM sub-element data-debug-id to components/notifications/* - answer-modal: __content (scroll area), __submit (footer) - notifications-bridge: skip comment (bridge, non-rendering wrapper) - notifications-realtime-mount: skip comment (returns null) - notifications-sheet: __header, __items (questions list) - push-toggle: __switch (button), __label (button text) on subscribed/unsubscribed states * feat(PBI-49): add BEM sub-element data-debug-id to components/settings/* - leave-product-button: root only (single-button component) - min-quota-editor: __input (number input), __save (save button) - profile-editor: __username (bio/short-description input), __save (submit) - role-manager: __roles (checkbox list), __add (save button) - token-manager: __tokens (active tokens list), __generate (create button) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(PBI-49): add BEM sub-element data-debug-id to admin, auth, dialogs, entity-dialog, mobile, split-pane * docs(PBI-49): add debug-labels BEM pattern doc + CLAUDE.md entry Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 22:46:29 +02:00 · 2026-05-09 22:46:29 +02:00 · d292e445d9
commit d292e445d9
parent ce43f7720a
93 changed files with 600 additions and 218 deletions
--- a/components/sprint/new-sprint-dialog.tsx
+++ b/components/sprint/new-sprint-dialog.tsx
@ -21,6 +21,7 @@ import {
  entityDialogHeaderClasses,
 } from '@/components/shared/entity-dialog-layout'
 import { createSprintWithPbisAction } from '@/actions/sprints'
+import { debugProps } from '@/lib/debug'

 interface NewSprintDialogProps {
  open: boolean
@ -102,6 +103,7 @@ export function NewSprintDialog({
          showCloseButton={false}
          onKeyDown={handleKeyDown}
          className={entityDialogContentClasses}
+          {...debugProps('new-sprint-dialog', 'NewSprintDialog', 'components/sprint/new-sprint-dialog.tsx')}
        >
          <div className={entityDialogHeaderClasses}>
            <DialogTitle className="text-xl font-semibold">Nieuwe sprint</DialogTitle>
@ -173,6 +175,7 @@ export function NewSprintDialog({
                type="submit"
                form="new-sprint-form"
                disabled={isPending || !sprintGoal.trim() || pbiIds.length === 0}
+                data-debug-id="new-sprint-dialog__submit"
              >
                {isPending ? 'Aanmaken…' : 'Sprint aanmaken'}
              </Button>
--- a/components/sprint/sprint-backlog.tsx
+++ b/components/sprint/sprint-backlog.tsx
@ -26,6 +26,7 @@ import { PbiDialog, type PbiDialogState } from '@/components/backlog/pbi-dialog'
 import { StoryDialog, type StoryDialogState } from '@/components/backlog/story-dialog'
 import type { PbiStatusApi } from '@/lib/task-status'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'

 const STATUS_COLORS: Record<string, string> = {
  OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
@ -276,7 +277,7 @@ export function SprintBacklogLeft({
  const orderedStories = order.map(id => storyMap[id]).filter(Boolean)

  return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('sprint-backlog-left', 'SprintBacklogLeft', 'components/sprint/sprint-backlog.tsx')}>
      <PanelNavBar
        title="Sprint Backlog"
        actions={
@ -293,6 +294,7 @@ export function SprintBacklogLeft({
      />
      <div
        ref={setNodeRef}
+        data-debug-id="sprint-backlog-left__list"
        className={cn(
          'flex-1 overflow-y-auto transition-colors',
          isOver && 'bg-primary/5 ring-2 ring-inset ring-primary/20 rounded'
@ -631,10 +633,11 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, pr
  )

  return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('sprint-backlog-right', 'SprintBacklogRight', 'components/sprint/sprint-backlog.tsx')}>
      <PanelNavBar title="Product Backlog" actions={headerActions} />
      <div
        ref={setNodeRef}
+        data-debug-id="sprint-backlog-right__list"
        className={cn(
          'flex-1 overflow-y-auto py-2 transition-colors',
          isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
--- a/components/sprint/sprint-board-client.tsx
+++ b/components/sprint/sprint-board-client.tsx
@ -18,6 +18,7 @@ import {
  removeStoryFromSprintAction,
  reorderSprintStoriesAction,
 } from '@/actions/sprints'
+import { debugProps } from '@/lib/debug'

 interface SprintBoardClientProps {
  productId: string
@ -193,6 +194,7 @@ export function SprintBoardClient({
  const selectedTasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []

  return (
+    <div {...debugProps('sprint-board-client')} className="contents">
    <DndContext
      id="sprint-board"
      sensors={sensors}
@ -244,12 +246,13 @@ export function SprintBoardClient({
      />
      <DragOverlay>
        {activeDragStory && (
-          <div className="flex items-center gap-3 px-6 py-2 bg-popover border border-primary rounded shadow-lg text-sm opacity-95 w-72">
+          <div className="flex items-center gap-3 px-6 py-2 bg-popover border border-primary rounded shadow-lg text-sm opacity-95 w-72" data-debug-id="sprint-board-client__drag-overlay">
            <span className="text-muted-foreground select-none">⠿</span>
            <span className="truncate flex-1">{activeDragStory.title}</span>
          </div>
        )}
      </DragOverlay>
    </DndContext>
+    </div>
  )
 }
--- a/components/sprint/sprint-header.tsx
+++ b/components/sprint/sprint-header.tsx
@ -32,6 +32,7 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { updateSprintGoalAction, updateSprintDatesAction, completeSprintAction, setAllSprintTasksDoneAction } from '@/actions/sprints'
 import type { SprintStory } from './sprint-backlog'
+import { debugProps } from '@/lib/debug'

 interface Sprint {
  id: string
@ -130,7 +131,7 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
  }

  return (
-    <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0">
+    <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0" {...debugProps('sprint-header', 'SprintHeader', 'components/sprint/sprint-header.tsx')}>
      <div className="flex items-center justify-between gap-4">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
@ -153,7 +154,7 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
              </div>
            </form>
          ) : (
-            <button onClick={() => !isDemo && setEditingGoal(true)} className="text-left mt-0.5 group">
+            <button onClick={() => !isDemo && setEditingGoal(true)} className="text-left mt-0.5 group" data-debug-id="sprint-header__title">
              <p className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
                {sprint.sprint_goal}
              </p>
@ -161,9 +162,9 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
          )}
        </div>

-        <div className="flex items-center gap-2 shrink-0">
+        <div className="flex items-center gap-2 shrink-0" data-debug-id="sprint-header__actions">
          <DemoTooltip show={isDemo}>
-            <Button size="sm" variant="ghost" disabled={isDemo} className="text-muted-foreground" onClick={() => !isDemo && setEditingDates(true)}>
+            <Button size="sm" variant="ghost" disabled={isDemo} className="text-muted-foreground" data-debug-id="sprint-header__dates" onClick={() => !isDemo && setEditingDates(true)}>
              {sprint.start_date && sprint.end_date
                ? `${toDateInputValue(sprint.start_date)} → ${toDateInputValue(sprint.end_date)}`
                : 'Datums instellen'}
--- a/components/sprint/sprint-run-controls.tsx
+++ b/components/sprint/sprint-run-controls.tsx
@ -174,13 +174,14 @@ export function SprintRunControls({
          </Button>
        </div>
      )}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2" data-debug-id="sprint-run-controls">
        {canStart && (
          <Button
            size="sm"
            onClick={handleStart}
            disabled={pending || isDemo}
            className="text-xs"
+            data-debug-id="sprint-run-controls__start"
          >
            Start Sprint
          </Button>
@ -192,6 +193,7 @@ export function SprintRunControls({
            disabled={pending || isDemo}
            variant="default"
            className="text-xs"
+            data-debug-id="sprint-run-controls__start"
          >
            Hervat sprint
          </Button>
@ -203,6 +205,7 @@ export function SprintRunControls({
            disabled={pending || isDemo}
            variant="outline"
            className="text-xs"
+            data-debug-id="sprint-run-controls__cancel"
          >
            Annuleer sprint-run
          </Button>
@ -210,7 +213,7 @@ export function SprintRunControls({
      </div>

      <Dialog open={blockers !== null} onOpenChange={(open) => { if (!open) setBlockers(null) }}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-lg" data-debug-id="sprint-run-controls__blockers-dialog">
          <DialogHeader>
            <DialogTitle>Sprint kan nog niet starten</DialogTitle>
            <DialogDescription>
--- a/components/sprint/start-sprint-button.tsx
+++ b/components/sprint/start-sprint-button.tsx
@ -79,7 +79,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
  return (
    <>
      <DemoTooltip show={isDemo}>
-        <Button size="sm" onClick={() => setOpen(true)} disabled={isDemo}>
+        <Button size="sm" onClick={() => setOpen(true)} disabled={isDemo} data-debug-id="start-sprint-button">
          Sprint starten
        </Button>
      </DemoTooltip>
@ -89,6 +89,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
          showCloseButton={false}
          onKeyDown={handleKeyDown}
          className={entityDialogContentClasses}
+          data-debug-id="start-sprint-button__dialog"
        >
          <div className={entityDialogHeaderClasses}>
            <DialogTitle className="text-xl font-semibold">Nieuwe Sprint starten</DialogTitle>
@ -171,7 +172,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
              <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
                Annuleren
              </Button>
-              <Button type="submit" form="start-sprint-form" disabled={pending}>
+              <Button type="submit" form="start-sprint-form" disabled={pending} data-debug-id="start-sprint-button__submit">
                {pending ? 'Aanmaken…' : 'Sprint starten'}
              </Button>
            </div>
--- a/components/sprint/sync-active-sprint-cookie.tsx
+++ b/components/sprint/sync-active-sprint-cookie.tsx
@ -12,5 +12,6 @@ export function SyncActiveSprintCookie({ productId, sprintId }: Props) {
  useEffect(() => {
    syncActiveSprintCookieAction(productId, sprintId)
  }, [productId, sprintId])
+  // No data-debug-id: this component renders null (side-effect only).
  return null
 }
--- a/components/sprint/task-list.tsx
+++ b/components/sprint/task-list.tsx
@ -21,6 +21,7 @@ import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
 import { useSprintStore } from '@/stores/sprint-store'
 import { updateTaskStatusAction, reorderTasksAction } from '@/actions/tasks'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import { debugProps } from '@/lib/debug'
 import { cn } from '@/lib/utils'

 const STATUS_CYCLE: Record<string, 'TO_DO' | 'IN_PROGRESS' | 'DONE'> = {
@ -200,7 +201,7 @@ export function TaskList({ storyId, sprintId: _sprintId, productId: _productId,
  }

  return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('task-list', 'TaskList', 'components/sprint/task-list.tsx')}>
      <PanelNavBar
        title="Taken"
        actions={
@ -220,9 +221,9 @@ export function TaskList({ storyId, sprintId: _sprintId, productId: _productId,
        }
      />

-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto" data-debug-id="task-list__items">
        {orderedTasks.length === 0 ? (
-          <div className="text-center mt-8 space-y-3">
+          <div className="text-center mt-8 space-y-3" data-debug-id="task-list__empty">
            <p className="text-sm text-muted-foreground">Geen taken voor deze story.</p>
            <DemoTooltip show={isDemo}>
              <Button