# ImageViewer Refactoring Plan

## Overview

Decompose the monolithic 589-line `ImageViewer.tsx` into a well-organized module structure similar to AudioPlayer.

## Current Structure (Before)

```
ImageViewer/
├── ImageViewer.tsx (589 lines) - Everything in one file
├── index.ts (16 lines)
└── README.md
```

**Issues:**
- Single 589-line file with mixed concerns
- 2 sub-components inline (ImageToolbar, ImageInfo)
- 1 utility function inline (createLQIP)
- 8 separate useState calls
- Types defined inline
- Constants hardcoded

## Target Structure (After)

```
ImageViewer/
├── index.ts                    # Public API
├── README.md                   # Documentation
├── components/
│   ├── index.ts
│   ├── ImageViewer.tsx         # Main component (~150 lines)
│   ├── ImageToolbar.tsx        # Toolbar with zoom/rotate/flip (~130 lines)
│   └── ImageInfo.tsx           # Dimensions display (~35 lines)
├── hooks/
│   ├── index.ts
│   ├── useImageTransform.ts    # Rotation/flip state management
│   └── useImageLoading.ts      # LQIP and loading state
├── utils/
│   ├── index.ts
│   ├── lqip.ts                 # LQIP generator utility
│   └── constants.ts            # Zoom presets, size limits
└── types.ts                    # All type definitions
```

## Benefits

1. **Separation of Concerns** - Each file has single responsibility
2. **Testability** - Hooks and utils can be unit tested independently
3. **Reusability** - Components can be used standalone
4. **Maintainability** - Easier to find and modify specific functionality
5. **Code Organization** - Consistent with AudioPlayer structure

## Execution Phases

| Phase | Description | Files |
|-------|-------------|-------|
| 1 | Create folder structure | components/, hooks/, utils/ |
| 2 | Extract types | types.ts |
| 3 | Extract constants and utilities | utils/constants.ts, utils/lqip.ts |
| 4 | Extract hooks | hooks/useImageTransform.ts, hooks/useImageLoading.ts |
| 5 | Split components | ImageToolbar.tsx, ImageInfo.tsx |
| 6 | Refactor main component | ImageViewer.tsx (simplified) |
| 7 | Update exports | index.ts, components/index.ts, hooks/index.ts |
| 8 | Cleanup and verify | Delete old file, run pnpm check |

## Risk Assessment

- **Low Risk**: Pure extraction with no logic changes
- **Testing**: Run `pnpm check` after each phase
- **Rollback**: Keep old file until verification complete
