hcie-rust-v3.05/.kilo/plans/1784456713003-iced-gui-visual-polish-plan.md

# ICED GUI Visual Parity with egui

## Context

The current Iced GUI has the same panels as the egui version but several visual/behavioral gaps remain. The goal is to bring the Iced GUI to egui-level polish. This plan is based on a side-by-side pixel-level comparison of `_images/egui.png` (target) vs the current Iced GUI.

---

## Gap Analysis (egui vs Iced)

| # | Area | egui | Iced | Gap |
|---|------|------|------|-----|
| 1 | **Menu bar** | File, Edit, Tools, Image, Layer, Filter, Select, View, Window, Help (10 items) | File, Edit, Image, Select, View, Filter, Plugin, Window, More, AI, Help (11 items) | Iced has extra Plugin/AI/More menus cluttering the bar; egui has Tools/Layer menus instead |
| 2 | **Toolbar** | Compact: Brush dropdown + Size + Opacity | Long: Brush Size + Opacity + Hardness + Tolerance + Feather + Blur Radius + brush tip icons | Iced toolbar is too wide/cluttered; egui is minimal |
| 3 | **Brushes grid** | 3-column grid with thumbnail previews | 2-column grid (constrained by narrow dock width) | Iced grid needs more horizontal space |
| 4 | **Filter list** | Categorized + collapsible (Blur ▸, Sharpen ▸, Pixelate ▸, Distort ▸, Stylize ▸, Color & Light ▸) | Flat list with no categories | Iced filters need categories + collapsible groups |
| 5 | **Layer panel** | Clean: thumbnail + name + eye + lock; opacity/blending inline; +Lay/+Vec/+Grp/Flatten toolbar | Shows "opacity: unavailable in hcie-engine-api fx" debug text; missing layer action buttons | Ugly debug text visible; missing quick-action buttons |
| 6 | **Color Palette** | Prominent: large color wheel, FG/BG swatches, Hex input, W/H/G tabs | Same panels exist but ColorPicker is squashed at bottom of right column | ColorPicker needs more vertical space |
| 7 | **Properties panel** | Shows: layer name, Opacity, Visible checkbox, Blend Mode dropdown, Type, Tool Settings (Size/Opacity/Hardness/Flow/Spacing/Color Variant) | Exists but layout differs | Should match egui's grouped layout |
| 8 | **Right column layout** | ColorPalette (top-right) + LayerStyles/History tabs (mid-right) + Properties (bottom-right) | Filters + Layers + ColorPicker + Properties all stacked | Right column overcrowded; Filters shouldn't be on right |
| 9 | **Background** | Consistent dark theme `#2b2b2b` with `#353535` panel bg | Lighter warm theme with inconsistent panel colors | Theme needs refinement for darker, more consistent panels |
| 10 | **Status bar** | Tool name + Mouse coords + Canvas size + Zoom% + Zoom slider | Similar but slightly different styling | Minor; acceptable |

---

## Tasks

### 1. Fix layer panel debug text and add action buttons

**Problem:** Layer panel shows "opacity: unavailable in hcie-engine-api fx" which is debug text leaking into the UI. Also missing the `+Lay`, `+Vec`, `+Grp`, `Flatten` quick-action buttons that egui has.

**Files:**
- `hcie-iced-app/crates/hcie-iced-gui/src/panels/layers.rs`

**Changes:**
- Remove or hide any debug/error text about "unavailable in hcie-engine-api fx"
- Add a row of action buttons at the bottom of the layer panel: `+Layer`, `+Group`, `Flatten`, matching egui's `[+Lay] [+Vec] [+Grp] [Flatten]` bar
- Wire buttons to existing messages (`LayerAdd`, `LayerFlatten`, etc.)

---

### 2. Refactor Filters panel into categorized collapsible groups

**Problem:** egui shows filters organized into expandable categories (Blur ▸, Sharpen ▸, Pixelate ▸, Distort ▸, Stylize ▸, Color & Light ▸). Iced shows a flat unordered list.

**Files:**
- `hcie-iced-app/crates/hcie-iced-gui/src/panels/filters.rs`

**Changes:**
- Define filter categories with labels: "Blur", "Sharpen", "Pixelate", "Distort", "Stylize", "Color & Light"
- Each category is a collapsible section (▶/▼ toggle) containing its filter items
- Add a `FilterCategoryExpanded` state field in `HcieIcedApp` to track which categories are open (default: all open)
- Add a `Message::FilterCategoryToggle(String)` message
- When no filter is selected, show "Filter Selection" header as in egui
- Keep existing filter selection + parameter panel behavior

---

### 3. Simplify the merged toolbar to match egui

**Problem:** The Iced toolbar shows too many inline sliders (Size, Opacity, Hardness, Tolerance, Feather, Blur Radius, brush tip icons). egui shows only: Brush dropdown + Size + Opacity.

**Files:**
- `hcie-iced-app/crates/hcie-iced-gui/src/panels/toolbar.rs`

**Changes:**
- Reduce toolbar to: [Tool Icon] [Brush Style Dropdown] [Size: ____] [Opacity: ____]
- Move Hardness, Tolerance, Feather, Blur Radius to the Properties/Tool Settings panel
- Keep brush tip icon row only when a brush tool is active
- Make the toolbar narrower and less cluttered

---

### 4. Add Layer Styles panel tab alongside History

**Problem:** egui has a tabbed right panel with "Layer Styles" / "History" / "AI Assistant" tabs. Iced has no Layer Styles panel.

**Files:**
- `hcie-iced-app/crates/hcie-iced-gui/src/panels/layer_styles.rs` (new)
- `hcie-iced-app/crates/hcie-iced-gui/src/dock/state.rs` (add `PaneType::LayerStyles`)
- `hcie-iced-app/crates/hcie-iced-gui/src/dock/view.rs` (wire panel)

**Changes:**
- Create a minimal Layer Styles panel that lists common effects: Drop Shadow, Inner Shadow, Outer Glow, Inner Glow, Bevel & Emboss, Satin, Color Overlay, Gradient Overlay, Pattern Overlay, Stroke
- Each effect has a checkbox to enable and an expandable settings section
- Wire to existing `LayerStyle*` messages
- This is a display-only first pass; detailed per-effect parameter editing can follow

---

### 5. Widen the right column for Color Palette prominence

**Problem:** Color Palette is squeezed at the bottom of the right column in Iced. In egui, it's prominent with a large color wheel occupying the top-right area.

**Files:**
- `hcie-iced-app/crates/hcie-iced-gui/src/dock/state.rs` (adjust default layout ratios)
- `hcie-iced-app/crates/hcie-iced-gui/src/dock/sizing.rs` (adjust minimum sizes)

**Changes:**
- Swap the default right-column layout: put ColorPicker on top (with more space) and Layers below
- Adjust the right_col1 ratio from 0.5 to ~0.6 (more space for ColorPicker)
- Ensure ColorPicker minimum height is at least 400px
- Remove Properties/History from the right column entirely (move to auto-hide or tabbed)

---

### 6. Darken theme panel backgrounds for consistency

**Problem:** Iced panels use slightly lighter/warmer backgrounds than egui's `#353535`. The overall look feels less polished.

**Files:**
- `hcie-iced-app/crates/iced-panel-adapter/src/theme.rs`

**Changes:**
- Darken `bg_panel` in all themes by ~5% to match egui's darker panel backgrounds
- Ensure `border_low` is subtle (~0.2 opacity) for clean panel separation
- Verify `bg_active` provides enough contrast for selected items
- Do NOT change accent colors; only adjust background/border tones

---

### 7. Add document tab bar with proper styling

**Problem:** egui shows a document tab bar ("Untitled") above the canvas with a clear active tab style. Iced has a tab bar but it needs polish.

**Files:**
- `hcie-iced-app/crates/hcie-iced-gui/src/dock/view.rs` (document tab bar)

**Changes:**
- Style the active tab with a bottom accent border (matching egui)
- Add a `+` button for new document at the right end of the tab bar
- Ensure the tab bar uses `bg_panel` background, not `bg_active`

---

## Validation Plan

1. `cargo check -p hcie-iced-gui`
2. `cargo test -p hcie-iced-gui`
3. Screenshot comparison after changes:
   - F12 full viewport screenshot
   - Compare right-column layout: ColorPicker should be prominent on top
   - Filters panel should show categorized collapsible groups
   - Layer panel should have no debug text, should show action buttons
   - Toolbar should be simplified (3-4 items, not 7+)
   - Theme colors should be consistently darker