# 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