Files
yaze/docs/internal/archive/completed_features/sidebar-vscode-refactor.md

52 lines
2.3 KiB
Markdown

# 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.