hcie-rust-v3.05/.kilo/plans/1783261806870-gui-photoshop-aesthetic-overhaul.md

# Photoshop-Grade GUI Aesthetic Overhaul

## Problem

The current GUI uses emoji icons, inconsistent spacing, flat color tokens with poor contrast
hierarchy, and egui's default widget styling in many places. The result looks like a
prototype, not a professional image editor. The goal is Photoshop-level polish:
refined warm-dark palette, consistent SVG iconography, subtle depth cues, proper typography,
and disciplined spacing.

## Root Causes Identified

### 1. Emoji Icons Everywhere (HIGH IMPACT)

| Location | File:Line | Emoji Used | Problem |
|---|---|---|---|
| Toolbar buttons | `panels.rs:413-470` | `📄 📂 💾 ↩ ↪ 🔍+ 🔍- ☀ 🌙` | Looks amateurish on desktop |
| Layer visibility | `panels.rs:879-882` | `👁` | Cross-platform rendering inconsistency |
| Layer lock | `panels.rs:799` | `🔒` | Same |
| Layer group folder | `panels.rs:914` | `📁` | Same |
| Layer link/chain | `panels.rs:47` | `🔗 🔓` | Same |
| Toolbox toggle | `toolbox.rs:211` | `<<` `>>` text | Not a real icon |
| Layer move/delete | `panels.rs:933-946` | `× ▲ ▼ M↓` text | Plain text buttons |
| Layer FX badge | `panels.rs:951-952` | `fx` / `fx*` text | Text badge, not icon |
| Toolbox swap icon | `toolbox.rs:286` | `⇄` | Unicode character, not icon |
| Panel list toggle | `panels.rs:212` | `◧ ☰` | Unicode characters |
| Search box icon | `brushes_panel.rs:818` | `🔍` | Emoji |

### 2. Theme Color Palette — Flat Grays, No Warmth (HIGH IMPACT)

File: `egui-panel-adapter/src/theme.rs:79-91`

The Photoshop preset uses pure neutral grays `(30,30,30)`, `(45,45,45)`, `(60,60,60)`. Real
Photoshop's dark theme uses slightly warm-tinted grays with more contrast depth between
workspace, panels, and elevated surfaces. The current palette has:

- **bg_app to bg_panel delta is only 15** (30→45). Real Photoshop has ~20-25 step.
- **No surface elevation system** — everything is the same flat gray. Missing:
  elevated panels, recessed tracks, inset controls.
- **accent blue is generic** `(59,130,246)` — Photoshop uses a more muted steel-blue.

### 3. Toolbar Styling (MEDIUM IMPACT)

File: `panels.rs:337-390` (`draw_modern_toolbar_button`)

- Uses emoji+text labels (`"📄 New"`) instead of icon-only buttons.
- 34px toolbar height is cramped.
- No icon-only compact mode; every button has text.
- Separators between groups are just `ui.separator()` — no visual grouping.

### 4. Layer Panel Visual Noise (MEDIUM IMPACT)

File: `panels.rs:728-960`

- Row height is too tight (`3px item_spacing.y`).
- Emoji icons for visibility/lock create inconsistent rendering.
- `small_button("×")`, `small_button("▲")` etc. use egui's default styling.
- Active layer highlight uses `accent.gamma_multiply(0.2)` which is too subtle.
- Thumbnail is only 22×16px — too small.
- Blend mode ComboBox uses egui default styling.

### 5. egui Default Widget Styling Leaks (MEDIUM IMPACT)

File: `mod.rs:166-223` (`apply_theme`)

- `Visuals::dark()` is called first, then overridden. This leaves many
  sub-properties at dark() defaults that clash with the custom palette.
- Scrollbar styling, popup shadows, and tooltip styling are inherited defaults.
- ComboBox, DragValue, Checkbox all use egui's built-in rendering which
  looks generic.
- `spacing.slider_width = 180.0` is too wide for panel toolbars.

### 6. Tab & Header Styling (MEDIUM IMPACT)

File: `mod.rs:3008-3040` (egui_dock style)

- Tab corner radius `{ nw: 3, ne: 3, sw: 0, se: 0 }` is correct but the
  active tab has no bottom accent line indicator.
- Tab spacing `0.0` makes tabs feel cramped.
- `fill_tab_bar = true` means inactive tabs fill the entire bar width,
  looking blocky.

### 7. Status Bar Styling (LOW-MEDIUM IMPACT)

File: `panels.rs:502-653`

- Minimized-panel icon buttons use accent-colored 28×28 squares.
- Zoom slider uses egui default `Slider` — not the custom `PlainSlider`.
- Mixed font sizes (10px, 11px, 12px) create visual noise.
- Canvas size label and zoom percentage compete for attention.

### 8. Brushes Panel (LOW IMPACT)

File: `brushes_panel.rs:790-890`

- Category pills are fine but use `egui::Button` default frame.
- "✏ Edit Brush" button uses emoji.
- Search box uses emoji `🔍`.

### 9. Color Swatch Widget (LOW IMPACT)

File: `toolbox.rs:239-331`

- Overlapping foreground/background swatches are custom-painted with
  zero rounding and basic 1px borders — looks flat.
- Swap icon is Unicode `⇄`, default icon is plain black/white squares.

### 10. Spacing Inconsistencies (LOW IMPACT)

- `item_spacing` is `(4, 4)` globally but panel content overrides it locally
  to `(1, 1)`, `(2, 2)`, `(3, 3)`, `(4, 4)` at different places.
- `inner_margin` varies: `Margin::symmetric(4, 4)` toolbar, `Margin::symmetric(0, 0)` menubar,
  `Margin::symmetric(2, 3)` layer rows, `Margin::symmetric(8, 6)` brush search.
- No consistent 4px or 8px grid.

## Fix Plan

### Task 1: Refine Photoshop Theme Colors
**Files:** `egui-panel-adapter/src/theme.rs`

- Warm the grays slightly: add +2 red, +1 green to each dark step to get
  Photoshop's characteristic warm-dark look.
- Increase bg_app→bg_panel contrast: `bg_app: (28,28,30)` → `bg_panel: (50,50,54)`.
- Add a `bg_elevated` token for popups/tooltips: `(55,55,60)`.
- Add a `bg_recessed` token for slider tracks/insets: `(18,18,20)`.
- Mute the accent: `(59,130,246)` → `(56,120,220)` (slightly less saturated).
- Tighten `border_high`: `(70,70,70)` → `(62,62,66)` for subtler borders.

### Task 2: Replace Emoji with SVG Icons in Toolbar
**Files:** `panels.rs`, `assets/icons/`

- Create or reuse SVG icons for: New, Open, Save, Undo, Redo, ZoomIn, ZoomOut, Light/Dark.
- Modify `draw_modern_toolbar_button` to accept an optional icon source.
- Change button style to icon-only (24×24) with tooltip on hover.
- Keep text label in tooltip only.

### Task 3: Replace Emoji with SVG Icons in Layer Panel
**Files:** `panels.rs`, toolbox/assets

- Replace `👁` with an SVG eye icon.
- Replace `🔒` with an SVG lock icon.
- Replace `📁` with an SVG folder icon.
- Replace `🔗 🔓` with SVG chain/unlink icons.
- Replace `× ▲ ▼` with SVG close/up/down icons.
- Replace `fx` text badge with an SVG FX icon (or styled text with proper font).

### Task 4: Improve egui Visuals Configuration
**Files:** `mod.rs` (`apply_theme`)

- After `Visuals::dark()`, explicitly set:
  - `visuals.popup_shadow` — subtle shadow for depth.
  - `visuals.window_rounding` — `CornerRadius::same(6)`.
  - `visuals.menu_rounding` — `CornerRadius::same(6)`.
  - `visuals.scrollbar` — narrower (8px), recessed track.
  - `visuals.slider_trailing_fill` — true.
  - `visuals.handle_shape` — `HandleShape::Rect { aspect_ratio: 0.5 }`.
  - `visuals.interact_cursor` — `CursorIcon::PointingHand` for buttons.
- Reduce `spacing.slider_width` from 180 to 140.
- Reduce `spacing.button_padding` from `(8, 4)` to `(6, 3)` for compactness.

### Task 5: Improve Tab & Header Styling
**Files:** `mod.rs` (egui_dock style section)

- Add 2px bottom accent line on active tab.
- Increase tab spacing to `2.0`.
- Set `fill_tab_bar = false` so tabs don't stretch to fill width.
- Increase tab bar height from `28.0` to `30.0`.
- Tab text size: 11.5px (consistent).

### Task 6: Improve Layer Panel Layout
**Files:** `panels.rs` (`show_layers`)

- Increase layer row height: `item_spacing.y` from 3 to 4.
- Increase thumbnail size from 22×16 to 32×24.
- Use 6px rounded corners on layer row frames.
- Stronger active layer accent: `gamma_multiply(0.2)` → `gamma_multiply(0.3)`.
- Replace `small_button` calls with styled icon buttons.
- Add 1px separator between layer groups.

### Task 7: Improve Status Bar
**Files:** `panels.rs` (`show_status_bar`)

- Replace egui default `Slider` with `PlainSlider` for zoom.
- Standardize font size to 11px.
- Make minimized-panel icon buttons 24×24 (from 28×28).
- Remove redundant "Active Tool:" prefix — just show the tool name.

### Task 8: Improve Toolbar Layout
**Files:** `panels.rs` (`show_unified_toolbar`)

- Increase toolbar height from 34 to 36.
- Replace emoji toolbar buttons with icon-only SVG buttons (24×24).
- Add subtle group separators (2px vertical line, `border_low` color).
- Right-align theme toggle and AI status.

### Task 9: Improve Color Swatch Widget
**Files:** `toolbox.rs` (`render_overlapping_swatches`)

- Add 3px rounding to foreground/background swatch rects.
- Use SVG swap icon instead of `⇄` text.
- Use SVG default-color icon instead of plain black/white squares.
- Add 1px shadow on foreground swatch for depth.

### Task 10: Standardize Spacing Grid
**Files:** Multiple (panels.rs, toolbox.rs, brushes_panel.rs, mod.rs)

- Adopt an 8px base grid: all margins and padding are multiples of 4px.
- Panel content `inner_margin`: 8px horizontal, 6px vertical.
- Panel header: 4px padding.
- Widget gaps: 4px.
- Remove local overrides of `item_spacing` where possible.

### Task 11: Improve Brushes Panel
**Files:** `brushes_panel.rs`

- Replace `🔍` emoji with SVG search icon.
- Replace `✏ Edit Brush` with SVG edit icon + text.
- Category pills: increase rounding to 14px, add 1px border on hover.

## Execution Order

1. **Task 1** (theme colors) — foundation, everything else depends on it
2. **Task 4** (egui visuals) — global widget styling
3. **Task 5** (tab styling) — immediate visual impact
4. **Task 2 + 3** (SVG icons) — replace emoji everywhere
5. **Task 8** (toolbar layout) — biggest visible change
6. **Task 6** (layer panel) — second biggest visible area
7. **Task 7** (status bar)
8. **Task 9** (color swatches)
9. **Task 10** (spacing grid)
10. **Task 11** (brushes panel)

## Validation

After each task:
1. `cargo build -p hcie-gui-egui` — must compile clean.
2. Launch app, press F12 for full viewport screenshot.
3. Compare against previous screenshot.
4. Check all 5 themes (Photoshop, ProDark, Amoled, PhotoshopLight, ProLight).

Final validation:
- `cargo run -p hcie-gui-egui -- --screenshot-panel "Tools"` — verify toolbox.
- `cargo run -p hcie-gui-egui -- --screenshot-panel "Layers"` — verify layers.
- `cargo run -p hcie-gui-egui -- --screenshot-panel "Color Palette"` — verify colors.
- Visual inspection: no emoji visible in any panel, consistent icon style.