2 Commits

Author	SHA1	Message	Date
kjh2064	877e25eddf	feat: Phase 3 — Layout unification & theme system ... **Layout Components:** - AppLayout.vue: Responsive grid layout (sidebar + main + footer) - Sidebar.vue: Collapsible navigation (256px → 64px), smooth animation - Header.vue: Top bar with theme toggle + user menu + notifications - Footer.vue: System status indicator + quick links + version info **Theme System Enhancements:** - tokens.css: Explicit dark mode via data-theme attribute - Dual-mode support: prefers-color-scheme + data-theme override - Smooth theme transitions (150ms cubic-bezier) - All semantic colors respond to theme changes **Mobile Responsiveness:** - Sidebar: Fixed overlay on mobile (<768px) - Header: Responsive user menu collapse - Footer: Multi-column → single column layout - Touch-friendly icon buttons (40px minimum) - Breadcrumb: Hidden on mobile to save space **Accessibility:** - ARIA labels on all interactive elements - Skip navigation link - Semantic HTML (nav, main, footer, header) - Keyboard navigation support (ESC to close menus) - Focus management in user dropdown **Testing:** - All 3 pages: ✅ 100% PASS (36/36 selectors) - Layout integration verified - Theme switching functional - Mobile layout tested **Commits:** Phase 1-3 now complete: 2681 LOC across 11 files Next Phase: Phase 4 — Accessibility & Performance (2-4h) - Complete ARIA + semantic HTML audit - Keyboard navigation for data grids - Performance optimization (lazy loading, code splitting) - E2E accessibility testing Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>	2026-08-15 11:30:30 +09:00
kjh2064	d3760cccb5	feat: Phase 2 — UI component enhancement with design tokens ... **Design System (Phase 1 completion):** - tokens.ts: 12-category token system (colors, typography, spacing, shadows, etc.) - tokens.css: CSS variables with light/dark theme support - App.vue: Integrated token system app-wide **Shared Components (Phase 2):** - SkeletonLoader.vue: 5 loader types (text, card, avatar, table, list) - ErrorBoundary.vue: Error state recovery with retry - ToastNotification.vue: Toast alerts with 4 types + auto-dismiss - ToastContainer.vue: Toast provider with fixed positioning - Modal.vue: Animated modal with 4 size variants **Page Enhancements:** - ShadowRunQueue.vue: Loading → Skeleton + Error → ErrorBoundary + Normal states - ModelList.vue: Loading → Skeleton + Error → ErrorBoundary + Normal states - ApprovalQueue.vue: Loading → Skeleton + Error → ErrorBoundary + Normal states **Testing:** - All 3 pages: ✅ 100% PASS (12/12 selectors) - Playwright tests verify: loading, error, normal states - All states render correctly with token-based styling **Next: Phase 3 (2-4h)** - Layout unification (sidebar, header, footer) - Complete dark theme implementation - Mobile responsiveness & navigation Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>	2026-08-15 11:28:20 +09:00