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:
@@ -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>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user