# Plan: Iterate Layers Panel Visual Design

## Goal
Iteratively improve the iced layers panel to match the Photoshop reference screenshots. Test, take screenshots, compare, and fix until it looks right.

## Visual Issues to Fix (from code analysis)

### 1. Active Layer Row Styling
**Current**: `active_item_bg` uses `bg_active` (#404040) with 1px accent border
**Photoshop**: Subtle blue-tinted background fill, no prominent border
**Fix**: Change active row to use `accent` color at low alpha (0.15-0.2) for background, remove or淡化 the border

### 2. Layer Row Spacing
**Current**: `spacing(1)` between rows — too tight
**Photoshop**: ~4px spacing between rows
**Fix**: Increase to `spacing(2)` or `spacing(3)`

### 3. Visibility Icon
**Current**: `◉`/`○` Unicode characters
**Photoshop**: Eye icon (👁)
**Fix**: Use eye emoji or simpler toggle indicator

### 4. Thumbnail Border
**Current**: No border on thumbnails
**Photoshop**: 1px subtle border around thumbnails
**Fix**: Add container with border around thumbnail image

### 5. Layer Name Font
**Current**: Monospace font for active layer
**Photoshop**: Proportional font for all layers
**Fix**: Remove `.font(iced::Font::MONOSPACE)` from active layer name

### 6. Controls Layout
**Current**: Blend mode, opacity, lock in separate rows
**Photoshop**: More compact, blend mode + opacity on same row
**Fix**: Reorganize controls to be more compact

### 7. Button Styling
**Current**: Default iced button styling
**Photoshop**: Flat buttons with subtle borders, no background
**Fix**: Add button style function for flat Photoshop-like buttons

### 8. Panel Header
**Current**: "Layers" text with monospace font
**Photoshop**: Panel title with specific styling
**Fix**: Adjust header to match Photoshop's panel title style

## Implementation Steps

1. **Fix active row styling** — Change background to accent color at low alpha
2. **Increase row spacing** — Change from `spacing(1)` to `spacing(2)`
3. **Fix visibility icon** — Use eye emoji or simpler indicator
4. **Add thumbnail border** — Wrap thumbnail in container with border
5. **Fix font** — Remove monospace from active layer name
6. **Reorganize controls** — Make more compact
7. **Add button styles** — Create flat Photoshop-like button style
8. **Fix panel header** — Match Photoshop's title style

## Verification
1. Build and run the app
2. Take screenshot of Layers panel
3. Compare with Photoshop reference
4. Identify remaining differences
5. Repeat until satisfied