Sidebar Polish & VSCode Style - Implementation Summary

Date: 2025-11-27
Status: ✅ Complete
Build Status: ✅ Compiles successfully

Overview

Refactored the sidebar into a clean Activity Bar + Side Panel architecture (VSCode style), removing the awkward 16px strip and improving visual polish.

Key Improvements

1. Activity Bar Architecture

Dedicated Icon Strip (48px): Always visible on the left (unless toggled off).
Reactive Collapse Button: Added ICON_MD_CHEVRON_LEFT at the bottom of the strip.
Behavior:
- Click Icon → Toggle Panel (Expand/Collapse)
- Click Collapse → Hide Activity Bar (0px)
- Menu Bar Toggle → Restore Activity Bar

2. Visual Polish

Spacing: Adjusted padding and item spacing for a cleaner look.
Colors: Used GetSurfaceContainerHighVec4 for hover states to match the application theme.
Alignment: Centered icons, added spacers to push collapse button to the bottom.

3. Emulator Integration

Consistent Behavior: Emulator category is now treated like other tools.
No ROM State: If no ROM is loaded, the Emulator icon is grayed out (disabled), providing clear visual feedback that a ROM is required.
Tooltip: "Open ROM required" shown when hovering the disabled emulator icon.

4. Code Cleanup

Removed legacy DrawSidebar and DrawTreeSidebar methods.
Removed "16px strip" logic that caused layout issues.
Simplified GetLeftLayoutOffset logic in EditorManager.

User Guide

To Open Sidebar: Click the Hamburger icon in the Menu Bar (top left).
To Close Sidebar: Click the Chevron icon at the bottom of the Activity Bar.
To Expand Panel: Click any Category Icon.
To Collapse Panel: Click the active Category Icon again, or the "X" in the panel header.
No ROM? Categories are visible but grayed out. Load a ROM to enable them.

Files Modified

src/app/editor/system/editor_card_registry.h/cc (Core UI logic)
src/app/editor/editor_manager.h/cc (Layout coordination)
src/app/editor/system/user_settings.h/cc (State persistence)
src/app/editor/ui/ui_coordinator.cc (Menu bar responsiveness)

The editor now features a professional, standard IDE layout that respects user screen real estate and provides clear state feedback.

2.3 KiB Raw Blame History