refactor(editor): enhance sidebar UI and card registration in SettingsEditor

- Updated the sidebar UI in EditorCardRegistry to improve visibility and theming consistency using ThemeManager.
- Refactored SettingsEditor to register multiple settings cards, enhancing modularity and organization of settings.
- Improved the layout and interaction of category tabs, ensuring a more intuitive user experience.

Benefits:
- Streamlines the settings management process, leading to a more organized and efficient user interface.
- Enhances maintainability by clearly defining card registration and visibility logic within the editor framework.
This commit is contained in:
scawful
2025-10-15 14:20:08 -04:00
parent f5a54b8f01
commit 1ef0419de0
4 changed files with 197 additions and 65 deletions

View File

@@ -478,44 +478,88 @@ void EditorCardRegistry::DrawSidebar(size_t session_id,
return;
}
// Sidebar window
ImGui::SetNextWindowSize(ImVec2(GetSidebarWidth() + 220, 0), ImGuiCond_Always);
ImGui::SetNextWindowPos(ImVec2(0, ImGui::GetFrameHeightWithSpacing()), ImGuiCond_Always);
// Use ThemeManager for consistent theming
const auto& theme = gui::ThemeManager::Get().GetCurrentTheme();
const float sidebar_width = GetSidebarWidth();
ImGui::Begin("##CardSidebar", nullptr,
ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoResize |
ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoCollapse);
// Fixed sidebar window on the left edge of screen (VSCode style)
ImGui::SetNextWindowPos(ImVec2(0, ImGui::GetFrameHeight())); // Below menu bar
ImGui::SetNextWindowSize(ImVec2(sidebar_width + 220, -1)); // Full height below menu
// Draw category tabs on the left
ImGui::BeginChild("CategoryTabs", ImVec2(GetSidebarWidth(), 0), true);
ImGuiWindowFlags sidebar_flags =
ImGuiWindowFlags_NoTitleBar |
ImGuiWindowFlags_NoResize |
ImGuiWindowFlags_NoMove |
ImGuiWindowFlags_NoCollapse |
ImGuiWindowFlags_NoDocking | // Don't allow docking over sidebar
ImGuiWindowFlags_NoScrollbar |
ImGuiWindowFlags_NoScrollWithMouse |
ImGuiWindowFlags_NoFocusOnAppearing | // Don't steal focus
ImGuiWindowFlags_NoNavFocus; // Don't participate in nav
for (const auto& cat : active_categories) {
bool is_active = (cat == category);
if (is_active) {
ImGui::PushStyleColor(ImGuiCol_Button, gui::GetPrimaryVec4());
}
// Make sidebar VERY visible - fully opaque dark background
ImVec4 sidebar_bg = ImVec4(0.18f, 0.18f, 0.20f, 1.0f); // Dark opaque gray
ImVec4 sidebar_border = ImVec4(0.4f, 0.4f, 0.45f, 1.0f); // Visible border
ImGui::PushStyleColor(ImGuiCol_WindowBg, sidebar_bg);
ImGui::PushStyleColor(ImGuiCol_Border, sidebar_border);
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(4.0f, 8.0f));
ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 6.0f));
ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 2.0f); // Thicker border
ImGui::Begin("##EditorCardSidebar", nullptr, sidebar_flags);
// Draw category tabs on the left (if multiple editors active)
if (active_categories.size() > 1) {
ImGui::BeginChild("CategoryTabs", ImVec2(sidebar_width, 0), false,
ImGuiWindowFlags_NoScrollbar);
if (ImGui::Button(cat.substr(0, 1).c_str(), ImVec2(GetSidebarWidth() - 8, 40))) {
if (on_category_switch) {
on_category_switch(cat);
ImVec4 accent = gui::ConvertColorToImVec4(theme.accent);
ImVec4 inactive = gui::ConvertColorToImVec4(theme.button);
for (const auto& cat : active_categories) {
bool is_current = (cat == category);
if (is_current) {
ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(accent.x, accent.y, accent.z, 0.8f));
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(accent.x, accent.y, accent.z, 1.0f));
} else {
ImGui::PushStyleColor(ImGuiCol_Button, inactive);
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, gui::ConvertColorToImVec4(theme.button_hovered));
}
// Use first letter as icon
std::string icon = cat.substr(0, 1);
if (ImGui::Button(icon.c_str(), ImVec2(sidebar_width - 8, 40))) {
if (on_category_switch) {
on_category_switch(cat);
}
}
ImGui::PopStyleColor(2);
if (ImGui::IsItemHovered()) {
ImGui::SetTooltip("%s", cat.c_str());
}
}
if (is_active) {
ImGui::PopStyleColor();
// Collapse button at bottom
ImGui::SetCursorPosY(ImGui::GetWindowHeight() - 50);
if (ImGui::Button(ICON_MD_CHEVRON_LEFT, ImVec2(sidebar_width - 8, 40))) {
if (on_collapse) {
on_collapse();
}
}
if (ImGui::IsItemHovered()) {
ImGui::SetTooltip("Hide Sidebar (Ctrl+B)");
}
if (ImGui::IsItemHovered()) {
ImGui::SetTooltip("%s", cat.c_str());
}
ImGui::EndChild();
ImGui::SameLine();
}
ImGui::EndChild();
ImGui::SameLine();
// Draw cards on the right
ImGui::BeginChild("Cards", ImVec2(0, 0), true);
// Draw cards list on the right
ImGui::BeginChild("CardsList", ImVec2(0, 0), false);
ImGui::Text("%s %s", ICON_MD_DASHBOARD, category.c_str());
ImGui::Separator();
@@ -527,6 +571,9 @@ void EditorCardRegistry::DrawSidebar(size_t session_id,
ImGui::EndChild();
ImGui::End();
ImGui::PopStyleVar(3);
ImGui::PopStyleColor(2);
}
// ============================================================================

View File

@@ -52,8 +52,8 @@ const std::unordered_map<EditorType, bool> EditorRegistry::kCardBasedEditors = {
{EditorType::kAssembly, true},
{EditorType::kEmulator, true},
{EditorType::kHex, true},
{EditorType::kAgent, true},
{EditorType::kSettings, true}
{EditorType::kAgent, false}, // Agent: Traditional UI
{EditorType::kSettings, true} // Settings: Now card-based for better organization
};
bool EditorRegistry::IsCardBasedEditor(EditorType type) {

View File

@@ -1,7 +1,8 @@
#include "app/editor/system/settings_editor.h"
#include "absl/status/status.h"
#include "app/editor/system/editor_card_registry.h"
#include "app/gui/app/editor_layout.h"
#include "app/gui/app/feature_flags_menu.h"
#include "app/gfx/debug/performance/performance_profiler.h"
#include "app/gui/core/style.h"
@@ -26,7 +27,62 @@ using ImGui::TableHeadersRow;
using ImGui::TableNextColumn;
using ImGui::TableSetupColumn;
void SettingsEditor::Initialize() {}
void SettingsEditor::Initialize() {
// Register cards with EditorCardRegistry (dependency injection)
if (!dependencies_.card_registry) return;
auto* card_registry = dependencies_.card_registry;
card_registry->RegisterCard({
.card_id = MakeCardId("settings.general"),
.display_name = "General Settings",
.icon = ICON_MD_SETTINGS,
.category = "System",
.priority = 10
});
card_registry->RegisterCard({
.card_id = MakeCardId("settings.appearance"),
.display_name = "Appearance",
.icon = ICON_MD_PALETTE,
.category = "System",
.priority = 20
});
card_registry->RegisterCard({
.card_id = MakeCardId("settings.editor_behavior"),
.display_name = "Editor Behavior",
.icon = ICON_MD_TUNE,
.category = "System",
.priority = 30
});
card_registry->RegisterCard({
.card_id = MakeCardId("settings.performance"),
.display_name = "Performance",
.icon = ICON_MD_SPEED,
.category = "System",
.priority = 40
});
card_registry->RegisterCard({
.card_id = MakeCardId("settings.ai_agent"),
.display_name = "AI Agent",
.icon = ICON_MD_SMART_TOY,
.category = "System",
.priority = 50
});
card_registry->RegisterCard({
.card_id = MakeCardId("settings.shortcuts"),
.display_name = "Keyboard Shortcuts",
.icon = ICON_MD_KEYBOARD,
.category = "System",
.priority = 60
});
// Show general settings by default
card_registry->ShowCard(MakeCardId("settings.general"));
}
absl::Status SettingsEditor::Load() {
gfx::ScopedTimer timer("SettingsEditor::Load");
@@ -34,36 +90,69 @@ absl::Status SettingsEditor::Load() {
}
absl::Status SettingsEditor::Update() {
if (BeginTabBar("Settings", ImGuiTabBarFlags_None)) {
if (BeginTabItem(ICON_MD_SETTINGS " General")) {
if (!dependencies_.card_registry) return absl::OkStatus();
auto* card_registry = dependencies_.card_registry;
// General Settings Card
if (card_registry->IsCardVisible(MakeCardId("settings.general"))) {
static gui::EditorCard general_card("General Settings", ICON_MD_SETTINGS);
general_card.SetDefaultSize(600, 500);
if (general_card.Begin()) {
DrawGeneralSettings();
EndTabItem();
}
if (BeginTabItem(ICON_MD_FONT_DOWNLOAD " Font Manager")) {
gui::DrawFontManager();
EndTabItem();
}
if (BeginTabItem(ICON_MD_KEYBOARD " Keyboard Shortcuts")) {
DrawKeyboardShortcuts();
EndTabItem();
}
if (BeginTabItem(ICON_MD_PALETTE " Themes")) {
general_card.End();
}
// Appearance Card (Themes + Font Manager combined)
if (card_registry->IsCardVisible(MakeCardId("settings.appearance"))) {
static gui::EditorCard appearance_card("Appearance", ICON_MD_PALETTE);
appearance_card.SetDefaultSize(600, 600);
if (appearance_card.Begin()) {
DrawThemeSettings();
EndTabItem();
ImGui::Separator();
gui::DrawFontManager();
}
if (BeginTabItem(ICON_MD_TUNE " Editor Behavior")) {
appearance_card.End();
}
// Editor Behavior Card
if (card_registry->IsCardVisible(MakeCardId("settings.editor_behavior"))) {
static gui::EditorCard behavior_card("Editor Behavior", ICON_MD_TUNE);
behavior_card.SetDefaultSize(600, 500);
if (behavior_card.Begin()) {
DrawEditorBehavior();
EndTabItem();
}
if (BeginTabItem(ICON_MD_SPEED " Performance")) {
behavior_card.End();
}
// Performance Card
if (card_registry->IsCardVisible(MakeCardId("settings.performance"))) {
static gui::EditorCard perf_card("Performance", ICON_MD_SPEED);
perf_card.SetDefaultSize(600, 450);
if (perf_card.Begin()) {
DrawPerformanceSettings();
EndTabItem();
}
if (BeginTabItem(ICON_MD_SMART_TOY " AI Agent")) {
perf_card.End();
}
// AI Agent Settings Card
if (card_registry->IsCardVisible(MakeCardId("settings.ai_agent"))) {
static gui::EditorCard ai_card("AI Agent", ICON_MD_SMART_TOY);
ai_card.SetDefaultSize(600, 550);
if (ai_card.Begin()) {
DrawAIAgentSettings();
EndTabItem();
}
EndTabBar();
ai_card.End();
}
// Keyboard Shortcuts Card
if (card_registry->IsCardVisible(MakeCardId("settings.shortcuts"))) {
static gui::EditorCard shortcuts_card("Keyboard Shortcuts", ICON_MD_KEYBOARD);
shortcuts_card.SetDefaultSize(700, 600);
if (shortcuts_card.Begin()) {
DrawKeyboardShortcuts();
}
shortcuts_card.End();
}
return absl::OkStatus();

View File

@@ -102,21 +102,17 @@ UICoordinator::UICoordinator(
void UICoordinator::DrawAllUI() {
// Note: Theme styling is applied by ThemeManager, not here
// This is called from EditorManager::Update() - don't call menu bar stuff here
// Draw all UI components in order
DrawMenuBarExtras();
DrawContextSensitiveCardControl();
DrawCommandPalette(); // NEW: Moved from EditorManager
DrawSessionSwitcher();
DrawSessionManager();
DrawSessionRenameDialog();
DrawLayoutPresets();
DrawWelcomeScreen();
DrawProjectHelp();
DrawWindowManagementUI();
// Draw all popups
DrawAllPopups();
// Draw UI windows and dialogs
DrawCommandPalette(); // Ctrl+Shift+P
DrawSessionSwitcher(); // Ctrl+Tab popup
DrawSessionManager(); // Session management window
DrawSessionRenameDialog(); // Rename popup
DrawLayoutPresets(); // Layout preset dialogs
DrawWelcomeScreen(); // Welcome screen
DrawProjectHelp(); // Project help
DrawWindowManagementUI(); // Window management
}
void UICoordinator::DrawMenuBarExtras() {