hcie-rust-v3.05/.mimocode/plans/1783771837559-curious-river.md

Iced GUI — Photoshop-Style UI Overhaul Plan

Goal

Transform the iced GUI from a generic dark theme to a professional Photoshop-like appearance with proper toolbox, menus, panels, and window management.

---

1. Custom Window Frame (No OS Title Bar)

Files: main.rs, app.rs

Changes:

• Set decorations: false in iced window settings to hide OS title bar
• Build custom title bar with: app icon, "HCIE" text, menu bar, window controls (min/max/close)
• Add Message::WindowDrag, Message::WindowMinimize, Message::WindowMaximize, Message::WindowClose
• Use iced::window::drag(id) for title bar drag-to-move
• Use iced::window::minimize(id, true) for minimize
• Use iced::window::toggle_maximize(id) for maximize
• Title bar: 24px height, #2a2a2a background, subtle bottom border
• Window controls: minimize/maximize/close buttons on right side (like Photoshop)

Window Setup:

iced::application("HCIE", HcieIcedApp::update, HcieIcedApp::view)
    .window_settings(window::Settings {
        decorations: false,
        ..Default::default()
    })

---

2. Photoshop-Style Theme

Files: panels/styles.rs, theme.rs

Color Palette (matching Photoshop):

Token	Value	Usage
bg_app	#1e1e1e	Main app background
bg_panel	#2d2d2d	Panel backgrounds
bg_panel_header	#333333	Panel title bars
bg_hover	#3a3a3a	Hover states
bg_active	#404040	Active/selected states
accent	#2d8ceb	Blue accent (selection, active tool)
border	#1a1a1a	Panel borders (very subtle)
border_high	#444444	Emphasized borders
text_primary	#cccccc	Primary text
text_secondary	#888888	Secondary text
text_disabled	#555555	Disabled text
canvas_bg	#262626	Canvas area background

Style Functions to Update:

• panel_background() — #2d2d2d with no visible border
• panel_header() — #333333 background, no horizontal rule
• active_item_bg() — subtle #404040 highlight (NOT blue tint)
• inactive_item_bg() — transparent
• menubar_background() — #2a2a2a
• statusbar_background() — #2a2a2a
• sidebar_background() — #2d2d2d
• titlebar_background() — #1e1e1e

---

3. Toolbox with SVG Icons (Photoshop-Style)

Files: sidebar/mod.rs, new: sidebar/tool_slots.rs

Layout:

• Single column (default): 36px wide, icons only, no text labels
• Two-column mode: Toggle button (◀/▶ arrow) at top expands to 72px
• Toggle button: small arrow at top of toolbox
• Tool buttons: 28x28px icons, 3px rounded corners
• Active tool: subtle #404040 background + #2d8ceb border
• Hover: #3a3a3a background
• Submenu indicator: small triangle for tools with sub-tools

Tool Slots (matching egui's TOOL_SLOTS):

Slot 0:  Move
Slot 1:  VectorSelect
Slot 2:  Select (rect)
Slot 3:  Lasso, PolygonSelect (submenu)
Slot 4:  MagicWand
Slot 5:  SmartSelect, VisionSelect (submenu)
Slot 6:  Crop
Slot 7:  Eyedropper
Slot 8:  Brush
Slot 9:  Pen
Slot 10: Spray
Slot 11: Eraser
Slot 12: FloodFill
Slot 13: Gradient
Slot 14: Text
Slot 15: VectorLine
Slot 16: VectorRect
Slot 17: VectorCircle
Slot 18: Vector shapes (submenu: Arrow, Star, Polygon, etc.)
Slot 19: Retouch (submenu: SpotRemoval, RedEye, SmartPatch)

SVG Icons:

• Use existing SVG files from hcie-egui-app/assets/icons/
• Copy SVG files to hcie-iced-app/assets/icons/
• Use iced's svg::Handle::from_path() to load icons
• Tint icons: active=#2d8ceb, default=#cccccc, hover=#ffffff
• Icon size: 20x20px within 28x28 button

Color Swatches (bottom of toolbox):

• Overlapping fg/bg swatches (20x20 each, offset 2px)
• Swap button (⇅) between them
• Reset to B/W button

---

4. Panel Titles (Modern, No Blue Tint)

Files: dock/view.rs

Current (bad):

• Blue tinted background on active panel
• Horizontal rule under title
• Primitive appearance

New (Photoshop-style):

• Panel header: #333333 background, 24px height
• Title text: 11px, #cccccc color, no bold
• No horizontal rule
• Close/maximize buttons: subtle, appear on hover only
• Active panel: slightly lighter header (#3a3a3a)
• Panel border: 1px #1a1a1a (barely visible)

Implementation:

• Remove horizontal_rule from panel titles
• Replace blue tint with neutral #3a3a3a for active
• Make close/maximize buttons hover-only (opacity transition)
• Add small panel icon next to title (from SVG assets)

---

5. Menu Dropdown (Overlay, Not Separate Panel)

Files: panels/menus.rs

Current (bad):

• Menu opens as a separate panel in the dock
• Takes up space, pushes other content

New (Photoshop-style):

• Menu dropdown renders as an overlay on top of the UI
• Dark background #2d2d2d, 1px border #444444
• Items: 11px text, 24px height, hover highlight #3a3a3a
• Keyboard shortcuts shown on right side in #888888
• Separators: 1px line #3a3a3a
• Click outside to close
• Escape to close

Implementation:

• Track active_menu: Option<usize> in app state
• When menu button clicked, set active_menu = Some(idx)
• Render dropdown as a Stack overlay on top of main content
• Use iced::widget::mouse_area wrapper to detect clicks outside
• Menu items dispatch Message::MenuAction(menu_idx, item_idx)

---

6. Dock Manager (Draggable Panels)

Files: dock/state.rs, dock/view.rs

Current:

• Dock exists with PaneGrid but drag/drop may not be fully functional
• Panel rearrangement limited

New:

• Ensure on_drag(Message::PaneDragged) is properly wired
• Handle DragEvent::Picked, DragEvent::Dropped, DragEvent::Canceled
• On Dropped: call state.drop(pane, target) for proper rearrangement
• Add right-click context menu on panel titles (Pin, Float, Close)
• Support panel undocking (float) and re-docking

Implementation:

• Wire Message::PaneDragged handler to call appropriate state methods
• Add PaneDrop(pane, target) message that calls state.drop()
• Add context menu overlay for panel title bars

---

7. Menu Items (Full Photoshop-Style)

Files: panels/menus.rs, app.rs

Menu Structure:

Menu	Items
File	New, Open, Open Recent, Save, Save As, Export PNG, Export JPEG, Close
Edit	Undo, Redo, Cut, Copy, Paste, Select All, Deselect, Fill
Image	Canvas Size, Image Size, Rotate CW, Rotate CCW, Flip H, Flip V
Layer	New Layer, Duplicate, Delete, Merge Down, Flatten, Clear
Filter	(all filter categories with submenus)
Select	All, Deselect, Invert, Grow, Shrink, Feather
View	Zoom In, Zoom Out, Fit Screen, 100%, Panel Toggles
Window	Dock Profile, Reset Layout
Help	About, Documentation

---

Execution Order

1. Theme colors — Update styles.rs with Photoshop palette
2. Custom title bar — Hide OS decorations, build custom title bar
3. Toolbox SVG icons — Copy SVGs, implement icon rendering
4. Toolbox layout — Single column + expand toggle
5. Panel titles — Remove blue tint, modernize
6. Menu overlay — Implement dropdown overlay system
7. Dock drag/drop — Wire pane rearrangement
8. Menu items — Wire all menu actions

---

Verification

1. Build: cargo build -p hcie-iced-gui
2. Launch and compare with Photoshop screenshot
3. Test: tool selection, drawing, color picking, menu dropdowns, panel rearrangement
4. Screenshot comparison with Photoshop reference