mimo

.mimocode/plans/1783877383042-clever-nebula.md

@@ -0,0 +1,64 @@
+# 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