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 ✓
122 lines
3.7 KiB
Markdown
122 lines
3.7 KiB
Markdown
# Universal Icon System - Tasks
|
|
|
|
## Phase 1: Setup
|
|
|
|
- [x] **Task 1.1**: Install Phosphor Icons
|
|
- `npm install @phosphor-icons/react`
|
|
- Add to package.json dependencies
|
|
|
|
- [x] **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)
|
|
|
|
- [x] **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
|
|
|
|
## Phase 2: Replace Raw Unicode Symbols
|
|
|
|
- [x] **Task 2.1**: Replace validation icons in git-repositories.tsx
|
|
- `✓` → `Icon name="check"`
|
|
- `⚠` → `Icon name="warning"`
|
|
- `✗` → `Icon name="x"`
|
|
|
|
- [x] **Task 2.2**: Replace git toolbar icons in git-toolbar.tsx
|
|
- `●` → `Icon name="dot"`
|
|
- `↓` → `Icon name="arrow-down"`
|
|
- `❓` → `Icon name="question"`
|
|
|
|
- [x] **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
|
|
|
|
- [x] **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"`
|
|
|
|
## 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
|
|
|
|
## 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"`
|
|
|
|
- [ ] **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"`
|
|
|
|
## 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"`
|
|
|
|
- [ ] **Task 7.2**: Update FileEditor toolbar
|
|
- Edit icon: `Icon name="pencil"`
|
|
- Save icon: `Icon name="floppy-disk"`
|
|
- Copy icon: `Icon name="copy"`
|
|
|
|
## Phase 8: CSS and Styling
|
|
|
|
- [ ] **Task 8.1**: Add icon CSS classes
|
|
- Create `.icon` base class
|
|
- Size variants: `.icon-sm`, `.icon-md`, `.icon-lg`, `.icon-xl`
|
|
- Alignment utilities for icon + text combos
|
|
|
|
- [ ] **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
|