style(designer): Gameday Designer UI/UX Polish

[dachrisch]

PHASE 4 COMPLETION: Gameday Designer UI/UX Polish

Overview

This phase focused on standardizing the Gameday Designer's list-based UI, improving visual consistency, and implementing responsive layout behaviors.

Key Changes

1. Unified Action Button Pattern

• Adaptive Labels: Most action buttons (Add Field, Add Stage, Add Game, Add Group, Undo, Redo, Generate Tournament) now use an adaptive label pattern. They default to icon-only and reveal their text label on hover with a smooth width transition.
• Delete Actions: Standardized as outline-danger icon-only buttons that never expand on hover, preventing accidental layout shifts or misclicks during rapid deletion.
• Empty State "Big" Buttons: Buttons inside empty containers (e.g., "Add your first field") are permanently expanded (Icon + Label) for better discoverability.
• Static Action Buttons: The Import and Export buttons in the header are now static (Icon only) to maintain a consistent header layout.

2. Iconography & Visual Style

• Refreshed Set: Migrated to a more modern Bootstrap Icon set:
  • STAGE: bi-layers
  • FOLDER: bi-collection
  • DELETE: bi-trash3
  • TOURNAMENT: bi-trophy
• Consistent Spacing: Applied me-2 class to all icons when labels are visible.
• Accent Colors: Maintained field/stage accent colors via color pickers, now integrated into the standard header action group.

3. Responsive Layout & Accessibility

• Grid System: Fields are now arranged in a fields-grid using CSS Grid, restricted to a maximum of 2 columns on wide screens (min-width: 900px).
• i18n Tooltips: All actionable buttons provide descriptive title attributes, fully translated in English and German.
• Fixed Popovers/Dropdowns: Added strategy: 'fixed' to the Team Pool "Move to group" dropdown and the Status Bar validation popovers to prevent clipping by parent container boundaries.

4. Notification System

• Replaced standard browser alert() calls with a modern, non-blocking Toast notification system (NotificationToast.tsx) positioned at the bottom-right of the viewport.

Technical Improvements

• Component Standardization: Refactored FieldSection, StageSection, GameTable, and TeamGroupCard to use common UI patterns.
• Test Suite Updates: Updated Vitest suites (FlowToolbar.test.tsx, GlobalTeamTable.test.tsx, FieldSection.test.tsx, StageSection.test.tsx) to match the new accessible titles and button behaviors.
• State Management: Integrated notification state into useDesignerController.

Verification Status

• All automated Vitest tests passing (1000+ tests).
• Manual verification of hover transitions and responsive breakpoints complete.
• Cross-language (DE/EN) tooltip verification complete.

[codecov]

Codecov Report

❌ Patch coverage is 82.85714% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.63%. Comparing base (b9f57a5) to head (e641fc8).
⚠️ Report is 22 commits behind head on master.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ameday_designer/src/hooks/useDesignerController.ts	78.57%	3 Missing ⚠️
gameday_designer/src/components/FlowToolbar.tsx	33.33%	2 Missing ⚠️
...eday_designer/src/components/NotificationToast.tsx	87.50%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #729      +/-   ##
==========================================
- Coverage   84.99%   84.63%   -0.37%     
==========================================
  Files         114      116       +2     
  Lines        3879     3898      +19     
  Branches      805      806       +1     
==========================================
+ Hits         3297     3299       +2     
- Misses        398      412      +14     
- Partials      184      187       +3     

Flag	Coverage Δ
gameday_designer	85.12% <82.85%> (-0.56%)	⬇️
liveticker	92.85% <ø> (ø)
passcheck	83.76% <ø> (ø)
scorecard	82.82% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
gameday_designer/src/components/ListCanvas.tsx	93.75% <ø> (-0.37%)	⬇️
...ameday_designer/src/components/ListDesignerApp.tsx	100.00% <100.00%> (ø)
...eday_designer/src/components/list/FieldSection.tsx	90.56% <100.00%> (+14.64%)	⬆️
gameday_designer/src/components/list/GameTable.tsx	84.80% <100.00%> (ø)
...y_designer/src/components/list/GlobalTeamTable.tsx	88.23% <ø> (-5.89%)	⬇️
...eday_designer/src/components/list/StageSection.tsx	87.27% <100.00%> (+12.27%)	⬆️
...day_designer/src/components/list/TeamGroupCard.tsx	64.10% <100.00%> (-18.18%)	⬇️
gameday_designer/src/types/designer.ts	100.00% <ø> (ø)
gameday_designer/src/utils/iconConstants.ts	100.00% <100.00%> (ø)
...eday_designer/src/components/NotificationToast.tsx	87.50% <87.50%> (ø)
... and 2 more

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.