feat(ui): Appearance settings — dark/light/system mode and named themes; fix Add lane silently doing nothing (#42)
- Settings → Appearance: mode Dark / Light / System (follows the OS live) and a named theme remembered per mode — dark: Default, Darcula, Apple Dark; light: Default, Apple Light, IntelliJ Light, Canvas. Each theme is a CSS-variable override block keyed by `data-theme` on <html>; the sidebar quick toggle gains System and swaps between the two remembered themes. - An inline boot script in index.html applies the stored mode and theme before first paint, so a reload no longer flashes the default colours. - Diff +/- rows are easier to tell apart on every theme: a /20 status tint, a 3px status bar and a bold coloured marker; the changed-span emphasis no longer vanishes on light themes. - #42: the Add-lane modal (Repo mode / "Current branch") asks POST /api/lanes/ensure with `exact: true`. Without it a folder nested inside an existing lane resolved to that parent lane with created:false, so the modal closed and no new card appeared. When the folder really already has a lane, the modal now says which one instead of closing. Closes #42
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
/**
|
||||
* @file useTheme.test.ts
|
||||
* @description Tests for useTheme — the dark/light mode hook.
|
||||
* @description Tests for useTheme — the dark/light/system mode and per-mode named-theme hook.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeEach, afterEach } from "vitest";
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
||||
import { renderHook, act } from "@testing-library/react";
|
||||
import { useTheme } from "../useTheme";
|
||||
|
||||
@@ -12,9 +12,12 @@ describe("useTheme", () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
document.documentElement.classList.remove("dark");
|
||||
document.documentElement.removeAttribute("data-theme");
|
||||
document.documentElement.removeAttribute("data-mode");
|
||||
});
|
||||
afterEach(() => {
|
||||
document.documentElement.classList.remove("dark");
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it("defaults to dark when localStorage is empty", () => {
|
||||
@@ -46,4 +49,165 @@ describe("useTheme", () => {
|
||||
expect(result.current.theme).toBe("dark");
|
||||
expect(document.documentElement.classList.contains("dark")).toBe(true);
|
||||
});
|
||||
|
||||
it("system mode follows prefers-color-scheme, live", () => {
|
||||
let dark = true;
|
||||
const listeners = new Set<() => void>();
|
||||
vi.stubGlobal("matchMedia", (query: string) => ({
|
||||
get matches() {
|
||||
return dark;
|
||||
},
|
||||
media: query,
|
||||
addEventListener: (_: string, fn: () => void) => listeners.add(fn),
|
||||
removeEventListener: (_: string, fn: () => void) => listeners.delete(fn),
|
||||
}));
|
||||
const { result } = renderHook(() => useTheme());
|
||||
act(() => result.current.setMode("system"));
|
||||
expect(result.current.mode).toBe("system");
|
||||
expect(result.current.theme).toBe("dark");
|
||||
expect(localStorage.getItem("theme")).toBe("system");
|
||||
act(() => {
|
||||
dark = false;
|
||||
listeners.forEach((fn) => fn());
|
||||
});
|
||||
expect(result.current.theme).toBe("light");
|
||||
expect(document.documentElement.classList.contains("dark")).toBe(false);
|
||||
expect(document.documentElement.dataset.mode).toBe("light");
|
||||
});
|
||||
|
||||
it("system mode without matchMedia falls back to dark", () => {
|
||||
vi.stubGlobal("matchMedia", undefined);
|
||||
localStorage.setItem("theme", "system");
|
||||
const { result } = renderHook(() => useTheme());
|
||||
expect(result.current.theme).toBe("dark");
|
||||
});
|
||||
|
||||
it("each mode remembers its own named theme", () => {
|
||||
const { result } = renderHook(() => useTheme());
|
||||
act(() => result.current.setThemeFor("dark", "darcula"));
|
||||
act(() => result.current.setThemeFor("light", "canvas"));
|
||||
expect(document.documentElement.dataset.theme).toBe("darcula");
|
||||
expect(localStorage.getItem("agenthub.theme.dark")).toBe("darcula");
|
||||
act(() => result.current.toggleTheme());
|
||||
expect(result.current.theme).toBe("light");
|
||||
expect(document.documentElement.dataset.theme).toBe("canvas");
|
||||
expect(result.current.themeFor).toEqual({ dark: "darcula", light: "canvas" });
|
||||
});
|
||||
|
||||
it("the default theme carries no data-theme attribute", () => {
|
||||
const { result } = renderHook(() => useTheme());
|
||||
act(() => result.current.setThemeFor("dark", "darcula"));
|
||||
act(() => result.current.setThemeFor("dark", "default"));
|
||||
expect(document.documentElement.hasAttribute("data-theme")).toBe(false);
|
||||
});
|
||||
|
||||
it("an unknown stored theme id falls back to default", () => {
|
||||
localStorage.setItem("agenthub.theme.dark", "no-such-theme");
|
||||
const { result } = renderHook(() => useTheme());
|
||||
expect(result.current.themeFor.dark).toBe("default");
|
||||
expect(document.documentElement.hasAttribute("data-theme")).toBe(false);
|
||||
});
|
||||
|
||||
it("a light theme id is never applied in dark mode", () => {
|
||||
const { result } = renderHook(() => useTheme());
|
||||
act(() => result.current.setThemeFor("dark", "canvas"));
|
||||
expect(result.current.themeFor.dark).toBe("default");
|
||||
expect(document.documentElement.hasAttribute("data-theme")).toBe(false);
|
||||
});
|
||||
|
||||
it("two hook instances stay in sync", () => {
|
||||
const a = renderHook(() => useTheme());
|
||||
const b = renderHook(() => useTheme());
|
||||
act(() => a.result.current.setTheme("light"));
|
||||
act(() => a.result.current.setThemeFor("light", "apple-light"));
|
||||
expect(b.result.current.theme).toBe("light");
|
||||
expect(b.result.current.themeFor.light).toBe("apple-light");
|
||||
});
|
||||
|
||||
it("another tab's storage write updates a mounted hook", () => {
|
||||
const { result } = renderHook(() => useTheme());
|
||||
expect(result.current.theme).toBe("dark");
|
||||
act(() => {
|
||||
localStorage.setItem("theme", "light");
|
||||
localStorage.setItem("agenthub.theme.light", "canvas");
|
||||
window.dispatchEvent(new StorageEvent("storage", { key: "theme" }));
|
||||
});
|
||||
expect(result.current.theme).toBe("light");
|
||||
expect(document.documentElement.dataset.theme).toBe("canvas");
|
||||
expect(document.documentElement.dataset.mode).toBe("light");
|
||||
});
|
||||
|
||||
it("disabled storage (throwing) falls back to dark/default and setters do not crash", () => {
|
||||
const get = vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
|
||||
throw new Error("SecurityError");
|
||||
});
|
||||
const set = vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
|
||||
throw new Error("QuotaExceededError");
|
||||
});
|
||||
try {
|
||||
const { result } = renderHook(() => useTheme());
|
||||
expect(result.current.theme).toBe("dark");
|
||||
expect(result.current.mode).toBe("dark");
|
||||
expect(result.current.themeFor).toEqual({ dark: "default", light: "default" });
|
||||
expect(() => act(() => result.current.setMode("light"))).not.toThrow();
|
||||
expect(() => act(() => result.current.setThemeFor("dark", "darcula"))).not.toThrow();
|
||||
expect(() => act(() => result.current.toggleTheme())).not.toThrow();
|
||||
expect(result.current.theme).toBe("dark");
|
||||
} finally {
|
||||
get.mockRestore();
|
||||
set.mockRestore();
|
||||
}
|
||||
});
|
||||
|
||||
it("setThemeFor with an unknown id keeps the previous pick", () => {
|
||||
const { result } = renderHook(() => useTheme());
|
||||
act(() => result.current.setThemeFor("dark", "darcula"));
|
||||
act(() => result.current.setThemeFor("dark", "no-such-theme"));
|
||||
act(() => result.current.setThemeFor("light", ""));
|
||||
expect(result.current.themeFor).toEqual({ dark: "darcula", light: "default" });
|
||||
expect(localStorage.getItem("agenthub.theme.dark")).toBe("darcula");
|
||||
expect(localStorage.getItem("agenthub.theme.light")).toBeNull();
|
||||
expect(document.documentElement.dataset.theme).toBe("darcula");
|
||||
});
|
||||
|
||||
it("an unknown stored mode falls back to dark", () => {
|
||||
localStorage.setItem("theme", "blue");
|
||||
const { result } = renderHook(() => useTheme());
|
||||
expect(result.current.mode).toBe("dark");
|
||||
expect(result.current.theme).toBe("dark");
|
||||
expect(document.documentElement.dataset.mode).toBe("dark");
|
||||
});
|
||||
|
||||
it.each([
|
||||
[true, "light"],
|
||||
[false, "dark"],
|
||||
])("toggle from system (OS dark=%s) sets the explicit opposite: %s", (osDark, expected) => {
|
||||
vi.stubGlobal("matchMedia", (query: string) => ({
|
||||
matches: osDark,
|
||||
media: query,
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
}));
|
||||
localStorage.setItem("theme", "system");
|
||||
const { result } = renderHook(() => useTheme());
|
||||
expect(result.current.mode).toBe("system");
|
||||
act(() => result.current.toggleTheme());
|
||||
expect(result.current.mode).toBe(expected);
|
||||
expect(result.current.theme).toBe(expected);
|
||||
expect(localStorage.getItem("theme")).toBe(expected);
|
||||
});
|
||||
|
||||
it("unmount removes the matchMedia listener", () => {
|
||||
const listeners = new Set<() => void>();
|
||||
vi.stubGlobal("matchMedia", (query: string) => ({
|
||||
matches: true,
|
||||
media: query,
|
||||
addEventListener: (_: string, fn: () => void) => listeners.add(fn),
|
||||
removeEventListener: (_: string, fn: () => void) => listeners.delete(fn),
|
||||
}));
|
||||
const { unmount } = renderHook(() => useTheme());
|
||||
expect(listeners.size).toBeGreaterThan(0);
|
||||
unmount();
|
||||
expect(listeners.size).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,60 +1,135 @@
|
||||
/**
|
||||
* @file useTheme.ts
|
||||
* @description Dark/light mode state, backed by `localStorage` and the `dark`
|
||||
* class on `<html>` that Tailwind's `darkMode: "class"` reads. Default is
|
||||
* dark; there is no `prefers-color-scheme` fallback.
|
||||
* @description Appearance state: a mode (`dark` | `light` | `system`) plus one
|
||||
* named theme remembered PER mode, all backed by `localStorage`. Applies the
|
||||
* `dark` class Tailwind's `darkMode: "class"` reads, `data-mode`, and a
|
||||
* `data-theme` attribute (absent for `default`) on `<html>`; the palettes
|
||||
* themselves are CSS-variable blocks in `index.css`. State is never cached in
|
||||
* the module — every instance reads storage + `matchMedia` through
|
||||
* `useSyncExternalStore`, so the Sidebar and Settings can never disagree, and
|
||||
* another tab's change arrives through the `storage` event.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
|
||||
|
||||
export type Theme = "dark" | "light";
|
||||
export type ThemeMode = Theme | "system";
|
||||
|
||||
const STORAGE_KEY = "theme";
|
||||
/** Named themes per mode, in picker order. `default` is the stock palette. */
|
||||
export const THEMES = {
|
||||
dark: ["default", "darcula", "apple-dark"],
|
||||
light: ["default", "apple-light", "intellij-light", "canvas"],
|
||||
} as const satisfies Record<Theme, readonly string[]>;
|
||||
|
||||
function readStoredTheme(): Theme {
|
||||
const MODE_KEY = "theme";
|
||||
const themeKey = (mode: Theme) => `agenthub.theme.${mode}`;
|
||||
const CHANGE_EVENT = "agenthub-theme";
|
||||
const SYSTEM_QUERY = "(prefers-color-scheme: dark)";
|
||||
|
||||
function read(key: string): string | null {
|
||||
try {
|
||||
return localStorage.getItem(STORAGE_KEY) === "light" ? "light" : "dark";
|
||||
return localStorage.getItem(key);
|
||||
} catch {
|
||||
return "dark";
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeStoredTheme(theme: Theme): void {
|
||||
function write(key: string, value: string): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, theme);
|
||||
localStorage.setItem(key, value);
|
||||
} catch {
|
||||
/* ignore quota / disabled storage */
|
||||
}
|
||||
window.dispatchEvent(new Event(CHANGE_EVENT));
|
||||
}
|
||||
|
||||
function applyTheme(theme: Theme): void {
|
||||
document.documentElement.classList.toggle("dark", theme === "dark");
|
||||
function systemQuery(): MediaQueryList | undefined {
|
||||
return typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_QUERY) : undefined;
|
||||
}
|
||||
|
||||
function readMode(): ThemeMode {
|
||||
const v = read(MODE_KEY);
|
||||
return v === "light" || v === "system" ? v : "dark";
|
||||
}
|
||||
|
||||
function readThemeFor(mode: Theme): string {
|
||||
const v = read(themeKey(mode));
|
||||
return v && (THEMES[mode] as readonly string[]).includes(v) ? v : "default";
|
||||
}
|
||||
|
||||
// A primitive snapshot: stable by value, so useSyncExternalStore never loops.
|
||||
function getSnapshot(): string {
|
||||
const mode = readMode();
|
||||
const resolved: Theme =
|
||||
mode === "system" ? (systemQuery()?.matches === false ? "light" : "dark") : mode;
|
||||
return [mode, resolved, readThemeFor("dark"), readThemeFor("light")].join("|");
|
||||
}
|
||||
|
||||
function subscribe(onChange: () => void): () => void {
|
||||
const mq = systemQuery();
|
||||
window.addEventListener(CHANGE_EVENT, onChange);
|
||||
window.addEventListener("storage", onChange);
|
||||
mq?.addEventListener?.("change", onChange);
|
||||
return () => {
|
||||
window.removeEventListener(CHANGE_EVENT, onChange);
|
||||
window.removeEventListener("storage", onChange);
|
||||
mq?.removeEventListener?.("change", onChange);
|
||||
};
|
||||
}
|
||||
|
||||
function apply(resolved: Theme, name: string): void {
|
||||
const root = document.documentElement;
|
||||
root.classList.toggle("dark", resolved === "dark");
|
||||
root.dataset.mode = resolved;
|
||||
if (name === "default") root.removeAttribute("data-theme");
|
||||
else root.dataset.theme = name;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read/write the dashboard's active color theme.
|
||||
* @returns the current theme, a setter for an explicit value, and a toggle.
|
||||
* Read/write the dashboard's appearance.
|
||||
* @returns `theme` — the RESOLVED mode (`system` already answered); `mode` — what
|
||||
* the user picked; `themeFor` — the named theme each mode remembers; setters
|
||||
* for each, and `toggleTheme`, which sets the explicit opposite of `theme`.
|
||||
*/
|
||||
export function useTheme(): {
|
||||
theme: Theme;
|
||||
mode: ThemeMode;
|
||||
themeFor: Record<Theme, string>;
|
||||
setTheme: (theme: Theme) => void;
|
||||
setMode: (mode: ThemeMode) => void;
|
||||
setThemeFor: (mode: Theme, name: string) => void;
|
||||
toggleTheme: () => void;
|
||||
} {
|
||||
const [theme, setThemeState] = useState<Theme>(() => readStoredTheme());
|
||||
const [mode, resolved, dark, light] = useSyncExternalStore(subscribe, getSnapshot).split("|") as [
|
||||
ThemeMode,
|
||||
Theme,
|
||||
string,
|
||||
string,
|
||||
];
|
||||
const active = resolved === "dark" ? dark : light;
|
||||
|
||||
useEffect(() => {
|
||||
applyTheme(theme);
|
||||
}, [theme]);
|
||||
useLayoutEffect(() => {
|
||||
apply(resolved, active);
|
||||
}, [resolved, active]);
|
||||
|
||||
const setTheme = useCallback((next: Theme) => {
|
||||
writeStoredTheme(next);
|
||||
setThemeState(next);
|
||||
const setMode = useCallback((next: ThemeMode) => write(MODE_KEY, next), []);
|
||||
|
||||
const setThemeFor = useCallback((forMode: Theme, name: string) => {
|
||||
if ((THEMES[forMode] as readonly string[]).includes(name)) write(themeKey(forMode), name);
|
||||
}, []);
|
||||
|
||||
const toggleTheme = useCallback(() => {
|
||||
setTheme(theme === "dark" ? "light" : "dark");
|
||||
}, [theme, setTheme]);
|
||||
setMode(resolved === "dark" ? "light" : "dark");
|
||||
}, [resolved, setMode]);
|
||||
|
||||
return { theme, setTheme, toggleTheme };
|
||||
return {
|
||||
theme: resolved,
|
||||
mode,
|
||||
themeFor: { dark, light },
|
||||
setTheme: setMode,
|
||||
setMode,
|
||||
setThemeFor,
|
||||
toggleTheme,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user