janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Scrum4Me/components/shared/app-icon.tsx
Janpeter Visser d292e445d9
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

89 lines
4.2 KiB
TypeScript
Raw Blame History

import { debugProps } from '@/lib/debug'
interface AppIconProps {
size?: number
className?: string
}
export function AppIcon({ size = 32, className }: AppIconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
aria-label="Scrum4Me"
{...debugProps('app-icon')}
>
<defs>
<linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor="#90b6dc"/>
<stop offset="100%" stopColor="#e7e0ff"/>
</linearGradient>
<linearGradient id="s4m-nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor="#e9d5ff"/>
<stop offset="100%" stopColor="#7c3aed"/>
</linearGradient>
<filter id="s4m-glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="s4m-flame" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
{/* Background */}
<rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
<ellipse cx="256" cy="270" rx="140" ry="160" fill="#c4b5fd" opacity="0.12"/>
{/* Block 1 — PBI */}
<rect x="178" y="374" width="156" height="64" rx="14" fill="#dbeafe"/>
<rect x="178" y="374" width="156" height="64" rx="14" stroke="#8b5cf6" strokeWidth="2" fill="none"/>
<circle cx="210" cy="406" r="5" fill="#7c3aed" opacity="0.8"/>
<circle cx="228" cy="406" r="5" fill="#7c3aed" opacity="0.6"/>
<circle cx="246" cy="406" r="5" fill="#7c3aed" opacity="0.4"/>
{/* Block 2 — Story */}
<rect x="148" y="294" width="216" height="76" rx="14" fill="#ede9fe"/>
<rect x="148" y="294" width="216" height="76" rx="14" stroke="#a78bfa" strokeWidth="2" fill="none"/>
<rect x="174" y="322" width="100" height="6" rx="3" fill="#c7d2fe" opacity="0.8"/>
<rect x="174" y="338" width="68" height="6" rx="3" fill="#c7d2fe" opacity="0.6"/>
{/* Block 3 — Task */}
<rect x="164" y="210" width="184" height="80" rx="14" fill="#e9d5ff"/>
<rect x="164" y="210" width="184" height="80" rx="14" stroke="#7c3aed" strokeWidth="2" fill="none"/>
<path d="M196 252 L212 268 L240 238" stroke="#7135f8" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity="0.95"/>
{/* Rocket nose */}
<path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
fill="url(#s4m-nose)" opacity="0.95" filter="url(#s4m-glow)"/>
<path d="M256 70 C238 70 200 118 196 190"
stroke="white" strokeWidth="3" strokeLinecap="round" opacity="0.25" fill="none"/>
{/* Window */}
<circle cx="256" cy="148" r="34" fill="#ffffff" opacity="0.85"/>
<circle cx="256" cy="148" r="26" fill="#f8f4ff" opacity="0.95"/>
<circle cx="256" cy="148" r="18" fill="#ffffff" opacity="0.9"/>
<circle cx="248" cy="140" r="5" fill="white" opacity="0.85"/>
{/* Fins */}
<path d="M164 330 L110 400 L164 400 Z" fill="#dbeafe"/>
<path d="M164 330 L110 400 L164 400 Z" stroke="#8b5cf6" strokeWidth="1.5" fill="none" opacity="0.75"/>
<path d="M348 330 L402 400 L348 400 Z" fill="#dbeafe"/>
<path d="M348 330 L402 400 L348 400 Z" stroke="#8b5cf6" strokeWidth="1.5" fill="none" opacity="0.75"/>
{/* Flame */}
<path d="M214 438 Q235 480 256 462 Q277 480 298 438"
stroke="#fbbf24" strokeWidth="10" strokeLinecap="round" fill="none"
opacity="0.9" filter="url(#s4m-flame)"/>
<path d="M228 438 Q242 468 256 455 Q270 468 284 438"
stroke="#fde68a" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.75"/>
<path d="M238 438 Q248 458 256 450 Q264 458 274 438"
stroke="#fef3c7" strokeWidth="4" strokeLinecap="round" fill="none" opacity="0.6"/>
</svg>
)
}
Reference in a new issue View git blame Copy permalink