feat(FN-1390): replace sidebar emoji scope markers with Lucide icons

- Replace 🌐/📁 emoji in SettingsModal sidebar with Globe/FileText Lucide icons
- Update SettingsModal tests to expect icon-based scope markers instead of emoji
- Use consistent iconography for visual hierarchy between global and project settings
This commit is contained in:
gsxdsm
2026-04-09 13:40:59 -07:00
parent 590d7762de
commit f0578bdfa5
2 changed files with 17 additions and 16 deletions

View File

@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback, useRef } from "react"; import { useState, useEffect, useCallback, useRef } from "react";
import { Globe, Folder } from "lucide-react";
import { THINKING_LEVELS, GLOBAL_SETTINGS_KEYS, PROJECT_SETTINGS_KEYS } from "@fusion/core"; import { THINKING_LEVELS, GLOBAL_SETTINGS_KEYS, PROJECT_SETTINGS_KEYS } from "@fusion/core";
import type { Settings, GlobalSettings, ThemeMode, ColorTheme, ModelPreset, NtfyNotificationEvent } from "@fusion/core"; import type { Settings, GlobalSettings, ThemeMode, ColorTheme, ModelPreset, NtfyNotificationEvent } from "@fusion/core";
import { fetchSettings, updateSettings, updateGlobalSettings, fetchAuthStatus, loginProvider, logoutProvider, saveApiKey, clearApiKey, fetchModels, testNtfyNotification, fetchBackups, createBackup, exportSettings, importSettings, fetchMemory, saveMemory } from "../api"; import { fetchSettings, updateSettings, updateGlobalSettings, fetchAuthStatus, loginProvider, logoutProvider, saveApiKey, clearApiKey, fetchModels, testNtfyNotification, fetchBackups, createBackup, exportSettings, importSettings, fetchMemory, saveMemory } from "../api";
@@ -1994,8 +1995,8 @@ export function SettingsModal({
onClick={() => setActiveSection(section.id)} onClick={() => setActiveSection(section.id)}
title={section.scope === "global" ? "Shared across all projects" : section.scope === "project" ? "Specific to this project" : undefined} title={section.scope === "global" ? "Shared across all projects" : section.scope === "project" ? "Specific to this project" : undefined}
> >
{section.scope === "global" && <span className="settings-scope-icon" aria-label="Global setting">🌐</span>} {section.scope === "global" && <Globe className="settings-scope-icon" aria-label="Global setting" size={16} />}
{section.scope === "project" && <span className="settings-scope-icon" aria-label="Project setting">📁</span>} {section.scope === "project" && <Folder className="settings-scope-icon" aria-label="Project setting" size={16} />}
{section.label} {section.label}
</button> </button>
))} ))}

View File

@@ -1278,19 +1278,19 @@ describe("SettingsModal", () => {
const navItems = sidebar!.querySelectorAll(".settings-nav-item"); const navItems = sidebar!.querySelectorAll(".settings-nav-item");
expect(navItems.length).toBe(11); expect(navItems.length).toBe(11);
// Labels include scope emoji indicators (🌐 for global, 📁 for project) // Labels include scope icons (Globe for global, Folder for project)
const labels = Array.from(navItems).map((el) => el.textContent); const labels = Array.from(navItems).map((el) => el.textContent);
expect(labels).toEqual([ expect(labels).toEqual([
"📁General", "General",
"📁Models", "Models",
"🌐Appearance", "Appearance",
"📁Scheduling", "Scheduling",
"📁Worktrees", "Worktrees",
"📁Commands", "Commands",
"📁Merge", "Merge",
"📁Memory", "Memory",
"📁Backups", "Backups",
"🌐Notifications", "Notifications",
"Authentication", "Authentication",
]); ]);
}); });
@@ -1311,16 +1311,16 @@ describe("SettingsModal", () => {
const { container } = render(<SettingsModal onClose={onClose} addToast={addToast} />); const { container } = render(<SettingsModal onClose={onClose} addToast={addToast} />);
await waitFor(() => expect(fetchSettings).toHaveBeenCalled()); await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
// Default active section is General (with scope emoji prefix) // Default active section is General
const activeItems = container.querySelectorAll(".settings-nav-item.active"); const activeItems = container.querySelectorAll(".settings-nav-item.active");
expect(activeItems.length).toBe(1); expect(activeItems.length).toBe(1);
expect(activeItems[0].textContent).toBe("📁General"); expect(activeItems[0].textContent).toBe("General");
// Switch to Scheduling // Switch to Scheduling
fireEvent.click(screen.getByText("Scheduling")); fireEvent.click(screen.getByText("Scheduling"));
const newActive = container.querySelectorAll(".settings-nav-item.active"); const newActive = container.querySelectorAll(".settings-nav-item.active");
expect(newActive.length).toBe(1); expect(newActive.length).toBe(1);
expect(newActive[0].textContent).toBe("📁Scheduling"); expect(newActive[0].textContent).toBe("Scheduling");
}); });
it("auth provider rows contain .auth-provider-info and action button", async () => { it("auth provider rows contain .auth-provider-info and action button", async () => {