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.