Fusion
2b5331a1a0
- Add CSS custom properties for spacing scale (4px base), breakpoints, and fluid typography - Create layout utilities: Container, Stack, Row, Grid - Update AppShell with responsive mobile navigation - Update card grid with responsive columns - Update dialogs with viewport-aware sizing and mobile fullscreen - Update workspace layout for mobile stacking - Ensure minimum 44px touch targets for buttons - Add table-responsive and text truncation utilities - Update page headers for mobile stacking Quality gates: typecheck ✓, lint ✓, build ✓
3.7 KiB
3.7 KiB
Universal Icon System - Tasks
Phase 1: Setup
-
Task 1.1: Install Phosphor Icons
npm install @phosphor-icons/react- Add to package.json dependencies
-
Task 1.2: Create Icon component
- Create
components/icon.tsx - Implement size variants (sm, md, lg, xl)
- Support color inheritance and explicit colors
- Add accessibility props (aria-label, aria-hidden)
- Create
-
Task 1.3: Create icon registry
- Create
utils/icons.ts - Map logical names to Phosphor icon components
- Group by category (navigation, actions, status, git, files)
- Export TypeScript types for icon names
- Create
Phase 2: Replace Raw Unicode Symbols
-
Task 2.1: Replace validation icons in git-repositories.tsx
✓→Icon name="check"⚠→Icon name="warning"✗→Icon name="x"
-
Task 2.2: Replace git toolbar icons in git-toolbar.tsx
●→Icon name="dot"↓→Icon name="arrow-down"❓→Icon name="question"
-
Task 2.3: Scan and replace all other Unicode symbols
- Search for remaining Unicode symbols across all TSX files
- Replace with appropriate Icon components
Phase 3: Update Navigation
- Task 3.1: Update app-shell.tsx navigation
- Replace text-only nav items with icon + text
- Use navigation icons (dashboard, projects, settings, etc.)
- Maintain current layout and styling
Phase 4: Update Action Buttons
-
Task 4.1: Update button components
- Add icon support to Button component
- Update all primary/secondary buttons with relevant icons
- Ensure proper spacing between icon and text
-
Task 4.2: Update form actions
- Save buttons:
Icon name="save" - Cancel buttons:
Icon name="x" - Delete buttons:
Icon name="trash" - Edit buttons:
Icon name="pencil"
- Save buttons:
Phase 5: Update Status Indicators
- Task 5.1: Replace status badges
- Success states:
Icon name="check"+ green color - Error states:
Icon name="x"+ red color - Warning states:
Icon name="warning"+ yellow color - Loading states:
Icon name="spinner"+ animation
- Success states:
Phase 6: Update Git Components
-
Task 6.1: Update GitToolbar
- Branch icon:
Icon name="git-branch" - Fetch icon:
Icon name="arrows-clockwise" - Pull icon:
Icon name="arrow-down" - Push icon:
Icon name="arrow-up" - Commit icon:
Icon name="git-commit"
- Branch icon:
-
Task 6.2: Update GitHistoryPage
- History icon:
Icon name="clock-counter-clockwise" - Merge icon:
Icon name="git-merge" - Branch selector icon:
Icon name="git-branch"
- History icon:
Phase 7: Update File Components
-
Task 7.1: Update file tree icons
- Folder icon:
Icon name="folder" - File icon:
Icon name="file" - Code file icon:
Icon name="code" - Binary file icon:
Icon name="file-binary"
- Folder icon:
-
Task 7.2: Update FileEditor toolbar
- Edit icon:
Icon name="pencil" - Save icon:
Icon name="floppy-disk" - Copy icon:
Icon name="copy"
- Edit icon:
Phase 8: CSS and Styling
-
Task 8.1: Add icon CSS classes
- Create
.iconbase class - Size variants:
.icon-sm,.icon-md,.icon-lg,.icon-xl - Alignment utilities for icon + text combos
- Create
-
Task 8.2: Ensure consistent spacing
- Icon margins in buttons
- Icon alignment with text
- Icon padding in navigation items
Phase 9: Quality Gates
-
Task 9.1: TypeScript checks
npm run typecheck- Fix any type errors
-
Task 9.2: Lint checks
npm run lint- Fix any linting issues
-
Task 9.3: Build verification
npm run build- Verify bundle size impact
-
Task 9.4: Visual verification
- Check all pages for icon rendering
- Verify no missing icons or broken layouts
- Check dark/light theme compatibility