phantom/hcie-rust-v3.05
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity
Files
325bd0d8e8bc9c9c509cba800a9a572384c2b36a
hcie-rust-v3.05/.kilo/plans/1784456713003-iced-gui-visual-polish-plan.md
T
phantom 325bd0d8e8 GOOD feat: add Layer Styles panel and enhance filter categories 
- Introduced a new Layer Styles panel that displays effects with toggle checkboxes for quick enable/disable functionality.
- Updated the filters panel to support collapsible filter categories, allowing users to expand or collapse categories.
- Enhanced the application state to manage expanded filter categories using a HashMap.
- Modified the layout and sizing of various panels to accommodate the new Layer Styles panel.
- Updated theme colors for better visual consistency across the application.
- Improved the toolbar to streamline brush size and opacity controls.
2026-07-20 21:23:04 +03:00

7.6 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink