Settings: db-viewer redesign, theme/accent wiring, macOS overlay titlebar (#6)
* feat: settings back button returns to origin view (push/pop nav) * feat: redesign settings screen with db-viewer border styling * fix: settings sidebar — icon+text tabs, back at top, top border (PR feedback) * fix: tighten settings sidebar — back and tabs in one group * fix: settings header shows active tab name instead of duplicated title * fix: settings — accent back button, header shows active tab; fix App test * fix: tags settings — no create label, no card chrome (bg/border/padding) * feat: drag-and-drop tag reordering in settings tags tab * fix: general settings — remove section card chrome (bg/border/padding) * fix: merge Appearance and Interface into one settings section * fix: remove row separators between settings items within sections * fix: settings rows use gap spacing instead of per-row padding * feat: strip section cards from all settings tabs; delete SettingsSection * feat: apply theme and font size settings (appearance wiring) * feat: honor default folder setting on startup * feat: confirm_before_delete setting now skips delete confirmations * feat: default_ports setting prefills new connection forms * fix: light theme — text colors, native window chrome, ThemePicker preview * fix: sync window background color with theme so title bar follows light mode * fix: window-sync test uses microtask flush instead of vi.waitFor * fix: app root carries canvas bg so home-screen parent matches theme * fix: grant window set-theme/set-background-color permissions so title bar follows theme * fix: overlay title bar — webview paints under traffic lights, flat canvas color in both themes * fix: compact 28px overlay titlebar with visible bottom border * fix: in-flow titlebar strip (draggable via allowed permission); screens fill remaining height, no bottom clipping * fix: top border only on settings + db viewer pages, not the titlebar strip * fix: db viewer sidebar h-screen -> h-full (28px overflow clipped bottom icons) * fix: system theme resets window to OS before reading matchMedia (was polluted by forced window theme) * fix: theme switcher labels moved below previews for readability * feat: configurable accent color setting (circle palette in Appearance) * docs: update AGENTS.md + README for settings redesign, wired settings, accent color
This commit is contained in:
@@ -25,7 +25,7 @@ export function ConnectionFormShell({
|
||||
children,
|
||||
}: ConnectionFormShellProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-canvas">
|
||||
<div className="min-h-full bg-canvas">
|
||||
<div className="max-w-lg mx-auto p-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
||||
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { NewConnectionScreen } from "./NewConnectionScreen";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
|
||||
const { createConnection, notify, testConnection } = vi.hoisted(() => ({
|
||||
createConnection: vi.fn().mockResolvedValue({}),
|
||||
@@ -28,6 +29,39 @@ vi.mock("../../lib/commands", () => ({
|
||||
describe("NewConnectionScreen", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
useSettingsStore.setState({ settings: null, loading: false, error: null });
|
||||
});
|
||||
|
||||
it("prefills the port from the default_ports setting", async () => {
|
||||
const user = userEvent.setup();
|
||||
useSettingsStore.setState({
|
||||
settings: {
|
||||
confirm_before_delete: true,
|
||||
default_folder_id: null,
|
||||
theme: "dark",
|
||||
font_size: "medium",
|
||||
default_ports: { postgresql: 6543, mysql: 3306, sqlite: null, redis: 6379 },
|
||||
tag_order: null,
|
||||
table_refresh_rate: 30,
|
||||
table_page_size: 50,
|
||||
shortcuts: {},
|
||||
accent_color: "#2563EB",
|
||||
},
|
||||
});
|
||||
render(<NewConnectionScreen folders={[]} tags={[]} />);
|
||||
|
||||
await user.click(screen.getByText(/configure manually instead/i));
|
||||
|
||||
expect(screen.getByLabelText("Port")).toHaveValue(6543);
|
||||
});
|
||||
|
||||
it("falls back to 5432 when no default port is configured", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<NewConnectionScreen folders={[]} tags={[]} />);
|
||||
|
||||
await user.click(screen.getByText(/configure manually instead/i));
|
||||
|
||||
expect(screen.getByLabelText("Port")).toHaveValue(5432);
|
||||
});
|
||||
|
||||
it("switches to detailed mode and back", async () => {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useConnectionStore } from "../../stores/connectionStore";
|
||||
import { useNotificationStore } from "../../stores/notificationStore";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import { ConnectionFormShell } from "./ConnectionFormShell";
|
||||
import { SimpleConnectionForm } from "./SimpleConnectionForm";
|
||||
import { DetailedConnectionForm } from "./DetailedConnectionForm";
|
||||
@@ -26,6 +27,7 @@ interface NewConnectionScreenProps {
|
||||
|
||||
function createEmptyForm(
|
||||
defaultFolderId: string | null = null,
|
||||
defaultPorts?: Record<string, number | null>,
|
||||
): ConnectionFormData {
|
||||
return {
|
||||
name: "",
|
||||
@@ -35,7 +37,7 @@ function createEmptyForm(
|
||||
connection_string: "",
|
||||
db_type: "postgresql",
|
||||
host: "",
|
||||
port: 5432,
|
||||
port: defaultPorts?.postgresql ?? 5432,
|
||||
username: null,
|
||||
password: null,
|
||||
database: null,
|
||||
@@ -43,6 +45,12 @@ function createEmptyForm(
|
||||
};
|
||||
}
|
||||
|
||||
function getDefaultPort(dbType: string): number {
|
||||
return (
|
||||
useSettingsStore.getState().settings?.default_ports?.[dbType] ?? 5432
|
||||
);
|
||||
}
|
||||
|
||||
export function NewConnectionScreen({
|
||||
defaultFolderId = null,
|
||||
prefilledConnectionString = "",
|
||||
@@ -53,7 +61,10 @@ export function NewConnectionScreen({
|
||||
}: NewConnectionScreenProps) {
|
||||
const [mode, setMode] = useState<NewConnectionMode>("simple");
|
||||
const [form, setForm] = useState<ConnectionFormData>(() =>
|
||||
createEmptyForm(defaultFolderId),
|
||||
createEmptyForm(
|
||||
defaultFolderId,
|
||||
useSettingsStore.getState().settings?.default_ports,
|
||||
),
|
||||
);
|
||||
const [testLoading, setTestLoading] = useState(false);
|
||||
const [saveLoading, setSaveLoading] = useState(false);
|
||||
@@ -69,7 +80,7 @@ export function NewConnectionScreen({
|
||||
connection_string: value,
|
||||
db_type: parsed.db_type,
|
||||
host: parsed.host,
|
||||
port: parsed.port,
|
||||
port: parsed.port ?? getDefaultPort(parsed.db_type),
|
||||
username: parsed.username,
|
||||
password: parsed.password,
|
||||
database: parsed.database,
|
||||
|
||||
@@ -981,7 +981,7 @@ const onQueriesPanelResizeStart = useCallback(
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="h-screen bg-canvas flex border-t border-border">
|
||||
<div className="h-full bg-canvas flex border-t border-border">
|
||||
<DbViewerSidebar
|
||||
currentView={currentView}
|
||||
onNavigate={handleNavigate}
|
||||
|
||||
@@ -71,7 +71,7 @@ export function DbViewerSidebar({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-14 h-screen bg-canvas border-r border-border flex flex-col items-center py-3 gap-2 shrink-0">
|
||||
<div className="w-14 h-full bg-canvas border-r border-border flex flex-col items-center py-3 gap-2 shrink-0">
|
||||
<div className="flex flex-col gap-2 flex-1">
|
||||
{topItems.map(renderItem)}
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,7 @@ export function FolderTree({ folders, activeFolderId, onSelect }: FolderTreeProp
|
||||
ref={setDropRef}
|
||||
onClick={() => onSelect(folder.id)}
|
||||
className={`flex items-center gap-1 w-full text-left px-2 py-1 rounded text-sm ${
|
||||
isActive ? "bg-accent/20 text-white" : "text-white/70 hover:text-white"
|
||||
isActive ? "bg-accent/20 text-text" : "text-text-muted hover:text-text"
|
||||
} ${isOver ? "ring-1 ring-accent bg-accent/10" : ""}`}
|
||||
style={{ paddingLeft: `${depth * 12 + 8}px` }}
|
||||
>
|
||||
@@ -46,7 +46,7 @@ export function FolderTree({ folders, activeFolderId, onSelect }: FolderTreeProp
|
||||
ref={setRootRef}
|
||||
onClick={() => onSelect(null)}
|
||||
className={`flex items-center gap-1 w-full text-left px-2 py-1 rounded text-sm ${
|
||||
activeFolderId === null ? "bg-accent/20 text-white" : "text-white/70 hover:text-white"
|
||||
activeFolderId === null ? "bg-accent/20 text-text" : "text-text-muted hover:text-text"
|
||||
} ${isRootOver ? "ring-1 ring-accent bg-accent/10" : ""}`}
|
||||
>
|
||||
<ChevronRight size={14} /> All Connections
|
||||
|
||||
@@ -17,6 +17,7 @@ interface ActionRowProps {
|
||||
|
||||
export function ActionRow({ onImport, onExport, onNewFolder, onFilters: _onFilters, onDeleteSelected, visibleItemIds = [] }: ActionRowProps) {
|
||||
const setActiveView = useUiStore((s) => s.setActiveView);
|
||||
const openSettings = useUiStore((s) => s.openSettings);
|
||||
const selectedItemIds = useUiStore((s) => s.selectedItemIds);
|
||||
const selectAllItems = useUiStore((s) => s.selectAllItems);
|
||||
const clearSelection = useUiStore((s) => s.clearSelection);
|
||||
@@ -84,7 +85,7 @@ export function ActionRow({ onImport, onExport, onNewFolder, onFilters: _onFilte
|
||||
</div>
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<ImportExportMenu onImport={onImport ?? (() => {})} onExport={onExport ?? (() => {})} />
|
||||
<Button variant="ghost" className="text-xs" onClick={() => setActiveView("settings")}>
|
||||
<Button variant="ghost" className="text-xs" onClick={openSettings}>
|
||||
<SettingsIcon size={14} /> Settings
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,17 @@ import userEvent from "@testing-library/user-event";
|
||||
import { HomeScreen } from "./HomeScreen";
|
||||
import { useConnectionStore } from "../../stores/connectionStore";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import type { Connection, Folder } from "../../lib/types";
|
||||
|
||||
vi.mock("../../lib/commands", () => ({
|
||||
getConnections: vi.fn().mockResolvedValue([]),
|
||||
getFolders: vi.fn().mockResolvedValue([]),
|
||||
getTags: vi.fn().mockResolvedValue([]),
|
||||
getSettings: vi.fn().mockResolvedValue({}),
|
||||
deleteConnection: vi.fn().mockResolvedValue(undefined),
|
||||
deleteConnectionPassword: vi.fn().mockResolvedValue(undefined),
|
||||
deleteFolder: vi.fn().mockResolvedValue(undefined),
|
||||
}));
|
||||
|
||||
vi.mock("@tauri-apps/plugin-dialog", () => ({ open: vi.fn(), save: vi.fn() }));
|
||||
@@ -21,7 +26,11 @@ vi.mock("@tauri-apps/plugin-fs", () => ({
|
||||
describe("HomeScreen", () => {
|
||||
beforeEach(() => {
|
||||
useConnectionStore.setState({ connections: [], folders: [], tags: [], loading: false, error: null });
|
||||
useUiStore.setState({ searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeView: "home" });
|
||||
useUiStore.setState({ searchQuery: "", activeFolderId: null, activeTagIds: [], activeDbTypes: [], activeView: "home", selectedItemIds: [] });
|
||||
useSettingsStore.setState({ settings: null, loading: false, error: null });
|
||||
// SearchBar stores its debounce timer on window.__sb; clear any timer leaked
|
||||
// by a previous test (e.g. typing a URL) so it can't fire mid-test.
|
||||
window.clearTimeout((window as unknown as { __sb?: number }).__sb);
|
||||
});
|
||||
|
||||
it("renders SearchBar and ActionRow", () => {
|
||||
@@ -45,4 +54,117 @@ describe("HomeScreen", () => {
|
||||
expect(useUiStore.getState().prefilledConnectionString).toBe("postgresql://user:pass@localhost:5432/mydb");
|
||||
expect(useUiStore.getState().searchQuery).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
it("shows the confirmation dialog before bulk delete by default", async () => {
|
||||
const user = userEvent.setup();
|
||||
const conn = makeConnection("conn-1");
|
||||
useConnectionStore.setState({ connections: [conn] });
|
||||
useUiStore.setState({ selectedItemIds: ["conn-1"] });
|
||||
render(<HomeScreen />);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /1 selected/i }));
|
||||
await user.click(screen.getByRole("button", { name: /delete \(1\)/i }));
|
||||
|
||||
const { deleteConnection } = await import("../../lib/commands");
|
||||
expect(
|
||||
await screen.findByText(/are you sure you want to delete 1 item/i),
|
||||
).toBeInTheDocument();
|
||||
expect(deleteConnection).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("skips the confirmation and deletes selected connections when confirm_before_delete is false", async () => {
|
||||
const user = userEvent.setup();
|
||||
useSettingsStore.setState({
|
||||
settings: {
|
||||
...baseSettings(),
|
||||
confirm_before_delete: false,
|
||||
},
|
||||
});
|
||||
useConnectionStore.setState({ connections: [makeConnection("conn-1")] });
|
||||
useUiStore.setState({ selectedItemIds: ["conn-1"] });
|
||||
render(<HomeScreen />);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /1 selected/i }));
|
||||
await user.click(screen.getByRole("button", { name: /delete \(1\)/i }));
|
||||
|
||||
const { deleteConnection } = await import("../../lib/commands");
|
||||
expect(deleteConnection).toHaveBeenCalledWith("conn-1");
|
||||
expect(screen.queryByText(/are you sure you want to delete/i)).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId("animated-backdrop")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows the confirmation dialog before deleting a folder by default", async () => {
|
||||
const user = userEvent.setup();
|
||||
useConnectionStore.setState({ folders: [makeFolder("folder-1")] });
|
||||
useUiStore.setState({ activeFolderId: "folder-1" });
|
||||
render(<HomeScreen />);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /^delete$/i }));
|
||||
|
||||
expect(
|
||||
await screen.findByText(/are you sure you want to delete \"projects\"/i),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("skips the confirmation and deletes the folder when confirm_before_delete is false", async () => {
|
||||
const user = userEvent.setup();
|
||||
useSettingsStore.setState({
|
||||
settings: {
|
||||
...baseSettings(),
|
||||
confirm_before_delete: false,
|
||||
},
|
||||
});
|
||||
useConnectionStore.setState({ folders: [makeFolder("folder-1")] });
|
||||
useUiStore.setState({ activeFolderId: "folder-1" });
|
||||
render(<HomeScreen />);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /^delete$/i }));
|
||||
|
||||
const { deleteFolder } = await import("../../lib/commands");
|
||||
expect(deleteFolder).toHaveBeenCalledWith("folder-1");
|
||||
expect(screen.queryByText(/are you sure you want to delete/i)).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId("animated-backdrop")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
function makeConnection(id: string): Connection {
|
||||
return {
|
||||
id,
|
||||
name: "Local DB",
|
||||
db_type: "postgresql",
|
||||
host: "localhost",
|
||||
port: 5432,
|
||||
username: null,
|
||||
folder_id: null,
|
||||
keychain_ref: null,
|
||||
tag_ids: [],
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
}
|
||||
|
||||
function makeFolder(id: string): Folder {
|
||||
return {
|
||||
id,
|
||||
name: "Projects",
|
||||
parent_id: null,
|
||||
tag_ids: [],
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
}
|
||||
|
||||
function baseSettings() {
|
||||
return {
|
||||
confirm_before_delete: true,
|
||||
default_folder_id: null,
|
||||
theme: "dark" as const,
|
||||
font_size: "medium" as const,
|
||||
default_ports: { postgresql: 5432, mysql: 3306, redis: 6379, sqlite: null },
|
||||
tag_order: null,
|
||||
table_refresh_rate: 30,
|
||||
table_page_size: 50,
|
||||
shortcuts: {},
|
||||
accent_color: "#2563EB",
|
||||
};
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { DndContext, DragOverlay, closestCenter, type DragEndEvent } from "@dnd-kit/core";
|
||||
import { useConnectionStore } from "../../stores/connectionStore";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import { useFilteredConnections } from "../../hooks/useConnections";
|
||||
import { useSortedTags } from "../../hooks/useSortedTags";
|
||||
import { SearchBar } from "../search/SearchBar";
|
||||
@@ -32,6 +33,8 @@ export function HomeScreen() {
|
||||
const loadAll = useConnectionStore((s) => s.loadAll);
|
||||
const selectedItemIds = useUiStore((s) => s.selectedItemIds);
|
||||
const clearSelection = useUiStore((s) => s.clearSelection);
|
||||
const confirmBeforeDelete =
|
||||
useSettingsStore((s) => s.settings?.confirm_before_delete ?? true);
|
||||
const [folderDialogOpen, setFolderDialogOpen] = useState(false);
|
||||
const [editFolder, setEditFolder] = useState<Folder | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState<{
|
||||
@@ -146,7 +149,7 @@ export function HomeScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-6 bg-canvas select-none max-w-7xl mx-auto">
|
||||
<main className="min-h-full p-6 bg-canvas select-none max-w-7xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<SearchBar ref={searchRef} onDetectUrl={handleSearchUrl} />
|
||||
</div>
|
||||
@@ -161,7 +164,9 @@ export function HomeScreen() {
|
||||
await handleExport();
|
||||
}}
|
||||
onDeleteSelected={() =>
|
||||
setConfirmDelete({ type: "selected" })
|
||||
confirmBeforeDelete
|
||||
? setConfirmDelete({ type: "selected" })
|
||||
: executeDeleteSelected()
|
||||
}
|
||||
visibleItemIds={visibleItemIds}
|
||||
/>
|
||||
@@ -185,7 +190,9 @@ export function HomeScreen() {
|
||||
onOpenDbViewer={handleOpenDbViewer}
|
||||
onEditFolder={(f) => setEditFolder(f)}
|
||||
onDeleteFolder={(f) =>
|
||||
setConfirmDelete({ type: "folder", folder: f })
|
||||
confirmBeforeDelete
|
||||
? setConfirmDelete({ type: "folder", folder: f })
|
||||
: executeDeleteFolder(f)
|
||||
}
|
||||
/>
|
||||
<DragOverlay dropAnimation={null}>
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import { Input } from "../ui/Input";
|
||||
import { Toggle } from "../ui/Toggle";
|
||||
import { SettingsRow } from "../ui/SettingsRow";
|
||||
import { SettingsSection } from "../ui/SettingsSection";
|
||||
import type { DbType } from "../../lib/types";
|
||||
|
||||
const DB_TYPES: { id: DbType; label: string }[] = [
|
||||
@@ -31,39 +30,45 @@ export function AdvancedSettingsTab() {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSection title="Safety">
|
||||
<SettingsRow
|
||||
title="Confirm before delete"
|
||||
description="Show a confirmation dialog before deleting connections or folders."
|
||||
>
|
||||
<Toggle
|
||||
checked={settings.confirm_before_delete}
|
||||
onChange={(checked) =>
|
||||
updateSetting("confirm_before_delete", checked ? "true" : "false")
|
||||
}
|
||||
label="Confirm before delete"
|
||||
/>
|
||||
</SettingsRow>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Default ports">
|
||||
{DB_TYPES.map((db) => (
|
||||
<div className="space-y-6">
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Safety</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<SettingsRow
|
||||
key={db.id}
|
||||
title={db.label}
|
||||
description={`Default port for new ${db.label} connections.`}
|
||||
title="Confirm before delete"
|
||||
description="Show a confirmation dialog before deleting connections or folders."
|
||||
>
|
||||
<Input
|
||||
type="number"
|
||||
value={defaultPorts[db.id]?.toString() ?? ""}
|
||||
onChange={(value) => updatePort(db.id, value)}
|
||||
className="w-24"
|
||||
aria-label={`Default port for ${db.label}`}
|
||||
<Toggle
|
||||
checked={settings.confirm_before_delete}
|
||||
onChange={(checked) =>
|
||||
updateSetting("confirm_before_delete", checked ? "true" : "false")
|
||||
}
|
||||
label="Confirm before delete"
|
||||
/>
|
||||
</SettingsRow>
|
||||
))}
|
||||
</SettingsSection>
|
||||
</>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Default ports</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
{DB_TYPES.map((db) => (
|
||||
<SettingsRow
|
||||
key={db.id}
|
||||
title={db.label}
|
||||
description={`Default port for new ${db.label} connections.`}
|
||||
>
|
||||
<Input
|
||||
type="number"
|
||||
value={defaultPorts[db.id]?.toString() ?? ""}
|
||||
onChange={(value) => updatePort(db.id, value)}
|
||||
className="w-24"
|
||||
aria-label={`Default port for ${db.label}`}
|
||||
/>
|
||||
</SettingsRow>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,8 +2,8 @@ import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import { useConnectionStore } from "../../stores/connectionStore";
|
||||
import { Select } from "../ui/Select";
|
||||
import { ThemePicker } from "../ui/ThemePicker";
|
||||
import { AccentPicker } from "../ui/AccentPicker";
|
||||
import { SettingsRow } from "../ui/SettingsRow";
|
||||
import { SettingsSection } from "../ui/SettingsSection";
|
||||
import * as cmd from "../../lib/commands";
|
||||
import type { FontSize } from "../../lib/types";
|
||||
|
||||
@@ -50,80 +50,98 @@ export function GeneralSettingsTab() {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSection title="Appearance">
|
||||
<SettingsRow title="Theme" description="Choose your preferred appearance.">
|
||||
<ThemePicker
|
||||
value={settings.theme}
|
||||
onChange={(theme) => updateSetting("theme", theme)}
|
||||
/>
|
||||
</SettingsRow>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Interface">
|
||||
<SettingsRow title="Font size" description="Adjust the application font size.">
|
||||
<Select
|
||||
value={settings.font_size}
|
||||
onChange={(value) => updateSetting("font_size", value)}
|
||||
options={FONT_SIZE_OPTIONS}
|
||||
label="Font size"
|
||||
/>
|
||||
</SettingsRow>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Workspace">
|
||||
<SettingsRow
|
||||
title="Default folder"
|
||||
description="Select the folder to show on startup."
|
||||
>
|
||||
<Select
|
||||
value={settings.default_folder_id ?? ""}
|
||||
onChange={(value) => updateSetting("default_folder_id", value)}
|
||||
options={folderOptions}
|
||||
label="Default folder"
|
||||
/>
|
||||
</SettingsRow>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Table defaults">
|
||||
<SettingsRow
|
||||
title="Auto-refresh rate"
|
||||
description="How often tables auto-refresh by default."
|
||||
>
|
||||
<Select
|
||||
value={String(settings.table_refresh_rate ?? 0)}
|
||||
onChange={(value) => updateSetting("table_refresh_rate", value)}
|
||||
options={REFRESH_RATE_OPTIONS}
|
||||
label="Auto-refresh rate"
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
title="Rows per page"
|
||||
description="Default number of rows shown per page."
|
||||
>
|
||||
<Select
|
||||
value={String(settings.table_page_size ?? 50)}
|
||||
onChange={(value) => updateSetting("table_page_size", value)}
|
||||
options={PAGE_SIZE_OPTIONS}
|
||||
label="Rows per page"
|
||||
/>
|
||||
</SettingsRow>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Demo">
|
||||
<SettingsRow
|
||||
title="Re-add demo database"
|
||||
description="Re-create the demo SQLite connection if it was deleted."
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReAddDemo}
|
||||
className="rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-raised transition-colors"
|
||||
<div className="space-y-6">
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Appearance</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<SettingsRow title="Theme" description="Choose your preferred appearance.">
|
||||
<ThemePicker
|
||||
value={settings.theme}
|
||||
onChange={(theme) => updateSetting("theme", theme)}
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow title="Font size" description="Adjust the application font size.">
|
||||
<Select
|
||||
value={settings.font_size}
|
||||
onChange={(value) => updateSetting("font_size", value)}
|
||||
options={FONT_SIZE_OPTIONS}
|
||||
label="Font size"
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
title="Accent color"
|
||||
description="Used for buttons, active states, and highlights."
|
||||
>
|
||||
Re-add demo
|
||||
</button>
|
||||
</SettingsRow>
|
||||
</SettingsSection>
|
||||
</>
|
||||
<AccentPicker
|
||||
value={settings.accent_color}
|
||||
onChange={(color) => updateSetting("accent_color", color)}
|
||||
/>
|
||||
</SettingsRow>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Workspace</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<SettingsRow
|
||||
title="Default folder"
|
||||
description="Select the folder to show on startup."
|
||||
>
|
||||
<Select
|
||||
value={settings.default_folder_id ?? ""}
|
||||
onChange={(value) => updateSetting("default_folder_id", value)}
|
||||
options={folderOptions}
|
||||
label="Default folder"
|
||||
/>
|
||||
</SettingsRow>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Table defaults</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<SettingsRow
|
||||
title="Auto-refresh rate"
|
||||
description="How often tables auto-refresh by default."
|
||||
>
|
||||
<Select
|
||||
value={String(settings.table_refresh_rate ?? 0)}
|
||||
onChange={(value) => updateSetting("table_refresh_rate", value)}
|
||||
options={REFRESH_RATE_OPTIONS}
|
||||
label="Auto-refresh rate"
|
||||
/>
|
||||
</SettingsRow>
|
||||
<SettingsRow
|
||||
title="Rows per page"
|
||||
description="Default number of rows shown per page."
|
||||
>
|
||||
<Select
|
||||
value={String(settings.table_page_size ?? 50)}
|
||||
onChange={(value) => updateSetting("table_page_size", value)}
|
||||
options={PAGE_SIZE_OPTIONS}
|
||||
label="Rows per page"
|
||||
/>
|
||||
</SettingsRow>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Demo</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<SettingsRow
|
||||
title="Re-add demo database"
|
||||
description="Re-create the demo SQLite connection if it was deleted."
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReAddDemo}
|
||||
className="rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-raised transition-colors"
|
||||
>
|
||||
Re-add demo
|
||||
</button>
|
||||
</SettingsRow>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { SettingsPage } from "./SettingsPage";
|
||||
import { GeneralSettingsTab } from "./GeneralSettingsTab";
|
||||
import { TagsSettingsTab } from "./TagsSettingsTab";
|
||||
import { TagsSettingsTab, reorderTagIds } from "./TagsSettingsTab";
|
||||
import { AdvancedSettingsTab } from "./AdvancedSettingsTab";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import { useConnectionStore } from "../../stores/connectionStore";
|
||||
@@ -29,6 +29,10 @@ vi.mock("../../lib/commands", () => ({
|
||||
confirm_before_delete: true,
|
||||
default_ports: { postgresql: 5432, mysql: 3306, sqlite: null, redis: 6379 },
|
||||
tag_order: null,
|
||||
table_refresh_rate: 0,
|
||||
table_page_size: 50,
|
||||
shortcuts: {},
|
||||
accent_color: "#2563EB",
|
||||
}),
|
||||
updateSetting: vi.fn().mockResolvedValue(undefined),
|
||||
getConnections: vi.fn().mockResolvedValue([]),
|
||||
@@ -63,6 +67,7 @@ const baseSettings = {
|
||||
table_refresh_rate: 0,
|
||||
table_page_size: 50,
|
||||
shortcuts: {} as Record<string, string>,
|
||||
accent_color: "#2563EB",
|
||||
};
|
||||
|
||||
describe("SettingsPage", () => {
|
||||
@@ -83,12 +88,12 @@ describe("SettingsPage", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("renders settings header with back button and title", async () => {
|
||||
it("renders settings header with back button and active tab title", async () => {
|
||||
render(<SettingsPage />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("heading", { name: /settings/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("heading", { name: /general/i })).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText(/back/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /back/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders all five sidebar tabs with proper ARIA roles", async () => {
|
||||
@@ -131,7 +136,6 @@ describe("SettingsPage", () => {
|
||||
expect(screen.getByRole("tab", { name: /tags/i })).toBeInTheDocument();
|
||||
});
|
||||
await user.click(screen.getByRole("tab", { name: /tags/i }));
|
||||
expect(screen.getByText(/create tag/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/manage tags/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole("tab", { name: /tags/i })).toHaveAttribute("aria-selected", "true");
|
||||
expect(screen.getByRole("tabpanel")).toHaveAttribute("aria-labelledby", "settings-tab-tags");
|
||||
@@ -196,6 +200,17 @@ describe("GeneralSettingsTab", () => {
|
||||
expect(screen.getByLabelText(/font size/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/default folder/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the accent color picker and persists a selection", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<GeneralSettingsTab />);
|
||||
const accentGroup = screen.getByRole("radiogroup", { name: /accent color/i });
|
||||
expect(accentGroup).toBeInTheDocument();
|
||||
await user.click(screen.getByRole("radio", { name: /accent #22c55e/i }));
|
||||
await waitFor(() => {
|
||||
expect(commands.updateSetting).toHaveBeenCalledWith("accent_color", "#22C55E");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("TagsSettingsTab", () => {
|
||||
@@ -224,6 +239,22 @@ describe("TagsSettingsTab", () => {
|
||||
const moveDownButtons = screen.getAllByRole("button", { name: /move tag down/i });
|
||||
expect(moveDownButtons.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
it("renders a drag handle for each tag", () => {
|
||||
render(<TagsSettingsTab />);
|
||||
expect(screen.getAllByRole("button", { name: /drag to reorder/i })).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("reorderTagIds moves the active id to the over id position", () => {
|
||||
expect(reorderTagIds(["a", "b", "c"], "a", "c")).toEqual(["b", "c", "a"]);
|
||||
expect(reorderTagIds(["a", "b", "c"], "b", "a")).toEqual(["b", "a", "c"]);
|
||||
});
|
||||
|
||||
it("reorderTagIds leaves the order unchanged for same or unknown ids", () => {
|
||||
expect(reorderTagIds(["a", "b", "c"], "a", "a")).toEqual(["a", "b", "c"]);
|
||||
expect(reorderTagIds(["a", "b", "c"], "a", "zzz")).toEqual(["a", "b", "c"]);
|
||||
expect(reorderTagIds(["a", "b", "c"], "zzz", "c")).toEqual(["a", "b", "c"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("AdvancedSettingsTab", () => {
|
||||
|
||||
@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
import { Button } from "../ui/Button";
|
||||
import { SettingsSection } from "../ui/SettingsSection";
|
||||
import { GeneralSettingsTab } from "./GeneralSettingsTab";
|
||||
import { TagsSettingsTab } from "./TagsSettingsTab";
|
||||
import { ShortcutsSettingsTab } from "./ShortcutsSettingsTab";
|
||||
@@ -35,7 +33,7 @@ const TABS: TabDefinition[] = [
|
||||
];
|
||||
|
||||
export function SettingsPage() {
|
||||
const setActiveView = useUiStore((s) => s.setActiveView);
|
||||
const closeSettings = useUiStore((s) => s.closeSettings);
|
||||
const { load } = useSettingsStore();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<SettingsTab>("general");
|
||||
@@ -45,11 +43,12 @@ export function SettingsPage() {
|
||||
}, [load]);
|
||||
|
||||
const renderEditor = () => (
|
||||
<SettingsSection title="Editor">
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Editor</h2>
|
||||
<div className="py-8 text-center text-sm text-text-muted">
|
||||
Editor settings are coming soon.
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</section>
|
||||
);
|
||||
|
||||
const renderTabContent = () => {
|
||||
@@ -68,70 +67,75 @@ export function SettingsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-canvas">
|
||||
<div className="flex gap-6 px-6 py-6">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-48 shrink-0 space-y-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setActiveView("home")}
|
||||
className="w-full justify-start gap-1 px-3 py-2 mb-4"
|
||||
<div className="h-full bg-canvas flex border-t border-border overflow-hidden">
|
||||
{/* Left sidebar — icon + text, Back at top */}
|
||||
<div className="w-48 h-full bg-canvas border-r border-border flex flex-col py-3 shrink-0">
|
||||
<div className="flex flex-col gap-1 px-2 flex-1">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Back"
|
||||
onClick={closeSettings}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition-colors cursor-pointer bg-accent text-white hover:bg-accent-hover focus:outline-none focus:ring-2 focus:ring-accent/50"
|
||||
>
|
||||
<ChevronLeft size={16} /> Back
|
||||
</Button>
|
||||
|
||||
</button>
|
||||
<nav
|
||||
className="space-y-1"
|
||||
role="tablist"
|
||||
aria-label="Settings sections"
|
||||
className="flex flex-col gap-1"
|
||||
>
|
||||
{TABS.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
id={`settings-tab-${tab.id}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
aria-controls="settings-tabpanel"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition-colors cursor-pointer ${
|
||||
isActive
|
||||
? "bg-surface-raised text-text"
|
||||
: "text-text-muted hover:text-text hover:bg-surface-raised"
|
||||
}`}
|
||||
>
|
||||
<Icon size={16} />
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 min-w-0 pt-1">
|
||||
<h1 className="font-heading text-xl text-text mb-6">
|
||||
Settings
|
||||
</h1>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
id="settings-tabpanel"
|
||||
role="tabpanel"
|
||||
aria-labelledby={`settings-tab-${activeTab}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{renderTabContent()}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</main>
|
||||
{TABS.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
id={`settings-tab-${tab.id}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
aria-controls="settings-tabpanel"
|
||||
aria-label={tab.label}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/50 ${
|
||||
isActive
|
||||
? "text-accent"
|
||||
: "text-text-muted hover:text-text hover:bg-surface-raised"
|
||||
}`}
|
||||
>
|
||||
<Icon size={16} />
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
<header className="px-3 pt-3 pb-3 border-b border-border shrink-0 flex items-center gap-3">
|
||||
<h1 className="font-heading text-lg text-text">
|
||||
{TABS.find((t) => t.id === activeTab)?.label}
|
||||
</h1>
|
||||
</header>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-4 py-4">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
id="settings-tabpanel"
|
||||
role="tabpanel"
|
||||
aria-labelledby={`settings-tab-${activeTab}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{renderTabContent()}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Pencil } from "lucide-react";
|
||||
import { SettingsSection } from "../ui/SettingsSection";
|
||||
import { useSettingsStore } from "../../stores/settingsStore";
|
||||
|
||||
type ShortcutDef = {
|
||||
@@ -100,12 +99,15 @@ export function ShortcutsSettingsTab() {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSection title="Customizable Shortcuts">
|
||||
<div className="space-y-6">
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">
|
||||
Customizable Shortcuts
|
||||
</h2>
|
||||
<p className="text-xs text-text-muted mb-3">
|
||||
Click the pencil icon to record a new key combination. Click the shortcut to reset to default.
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
{SHORTCUTS.map((s) => {
|
||||
const custom = customShortcuts[s.id];
|
||||
const isRecording = recording === s.id;
|
||||
@@ -148,13 +150,14 @@ export function ShortcutsSettingsTab() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</section>
|
||||
|
||||
<SettingsSection title="System Shortcuts">
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">System Shortcuts</h2>
|
||||
<p className="text-xs text-text-muted mb-3">
|
||||
These shortcuts are standard across all applications and cannot be changed.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
{STATIC_SHORTCUTS.map((s) => (
|
||||
<div key={s.description} className="flex items-center justify-between py-1">
|
||||
<span className="text-sm text-text">{s.description}</span>
|
||||
@@ -166,7 +169,7 @@ export function ShortcutsSettingsTab() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,35 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
PointerSensor,
|
||||
KeyboardSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
SortableContext,
|
||||
useSortable,
|
||||
arrayMove,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { useConnectionStore } from "../../stores/connectionStore";
|
||||
import { useNotificationStore } from "../../stores/notificationStore";
|
||||
import { useSortedTags } from "../../hooks/useSortedTags";
|
||||
import { Button } from "../ui/Button";
|
||||
import { Input } from "../ui/Input";
|
||||
import { SettingsSection } from "../ui/SettingsSection";
|
||||
import { Plus, Trash2, Check, X, ChevronUp, ChevronDown } from "lucide-react";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
Check,
|
||||
X,
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
GripVertical,
|
||||
} from "lucide-react";
|
||||
import type { Tag } from "../../lib/types";
|
||||
|
||||
const TAG_COLORS = [
|
||||
@@ -21,6 +45,155 @@ const TAG_COLORS = [
|
||||
"#78716c",
|
||||
];
|
||||
|
||||
/** Move `activeId` to `overId`'s position. Returns `order` unchanged if the
|
||||
* ids are equal, or either id is missing. */
|
||||
export function reorderTagIds(order: string[], activeId: string, overId: string): string[] {
|
||||
const from = order.indexOf(activeId);
|
||||
const to = order.indexOf(overId);
|
||||
if (activeId === overId || from === -1 || to === -1) return order;
|
||||
return arrayMove(order, from, to);
|
||||
}
|
||||
|
||||
interface SortableTagRowProps {
|
||||
tag: Tag;
|
||||
index: number;
|
||||
count: number;
|
||||
editingId: string | null;
|
||||
editName: string;
|
||||
editColor: string;
|
||||
onEditNameChange: (value: string) => void;
|
||||
onEditColorChange: (color: string) => void;
|
||||
onStartEdit: (tag: Tag) => void;
|
||||
onCancelEdit: () => void;
|
||||
onUpdateTag: (id: string) => void;
|
||||
onDeleteTag: (id: string, name: string) => void;
|
||||
onMoveTag: (index: number, direction: "up" | "down") => void;
|
||||
}
|
||||
|
||||
function SortableTagRow({
|
||||
tag,
|
||||
index,
|
||||
count,
|
||||
editingId,
|
||||
editName,
|
||||
editColor,
|
||||
onEditNameChange,
|
||||
onEditColorChange,
|
||||
onStartEdit,
|
||||
onCancelEdit,
|
||||
onUpdateTag,
|
||||
onDeleteTag,
|
||||
onMoveTag,
|
||||
}: SortableTagRowProps) {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
setActivatorNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: tag.id });
|
||||
|
||||
const isEditing = editingId === tag.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{ transform: CSS.Transform.toString(transform), transition }}
|
||||
className={`bg-surface-raised border border-border rounded-xl p-3 flex items-center gap-3 relative ${
|
||||
isDragging ? "opacity-50 z-10 ring-1 ring-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
ref={setActivatorNodeRef}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
type="button"
|
||||
aria-label={`Drag to reorder ${tag.name}`}
|
||||
className="cursor-grab active:cursor-grabbing touch-none text-text-muted hover:text-text transition-colors shrink-0"
|
||||
>
|
||||
<GripVertical size={14} />
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col gap-0.5 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onMoveTag(index, "up")}
|
||||
disabled={index === 0}
|
||||
className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
|
||||
aria-label="Move tag up"
|
||||
>
|
||||
<ChevronUp size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onMoveTag(index, "down")}
|
||||
disabled={index === count - 1}
|
||||
className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
|
||||
aria-label="Move tag down"
|
||||
>
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Input
|
||||
value={editName}
|
||||
onChange={onEditNameChange}
|
||||
className="flex-1"
|
||||
aria-label="Edit tag name"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
{TAG_COLORS.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => onEditColorChange(color)}
|
||||
className={`w-5 h-5 rounded-full border-2 transition-all cursor-pointer ${
|
||||
editColor === color ? "border-text scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
aria-label={`Select color ${color}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button onClick={() => onUpdateTag(tag.id)}>
|
||||
<Check size={14} />
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={onCancelEdit}>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="w-4 h-4 rounded-full shrink-0"
|
||||
style={{ backgroundColor: tag.color }}
|
||||
/>
|
||||
<span className="text-sm text-text flex-1">{tag.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-xs"
|
||||
onClick={() => onStartEdit(tag)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDeleteTag(tag.id, tag.name)}
|
||||
className="text-text-muted hover:text-red-400 transition-colors cursor-pointer"
|
||||
aria-label={`Delete tag ${tag.name}`}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TagsSettingsTab() {
|
||||
const tags = useSortedTags();
|
||||
const tagOrder = useConnectionStore((s) => s.tagOrder);
|
||||
@@ -36,6 +209,11 @@ export function TagsSettingsTab() {
|
||||
const [editName, setEditName] = useState("");
|
||||
const [editColor, setEditColor] = useState("");
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
|
||||
);
|
||||
|
||||
const handleCreateTag = async () => {
|
||||
const trimmed = newName.trim();
|
||||
if (!trimmed) {
|
||||
@@ -87,6 +265,14 @@ export function TagsSettingsTab() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const currentOrder = tagOrder.length === tags.length ? tagOrder : tags.map((t) => t.id);
|
||||
const newOrder = reorderTagIds(currentOrder, String(active.id), String(over.id));
|
||||
setTagOrder(newOrder).catch((e) => notify(`Failed to reorder tags: ${e}`, "error"));
|
||||
};
|
||||
|
||||
const startEdit = (tag: Tag) => {
|
||||
setEditingId(tag.id);
|
||||
setEditName(tag.name);
|
||||
@@ -94,130 +280,76 @@ export function TagsSettingsTab() {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSection title="Create tag">
|
||||
<div className="py-4 flex items-center gap-3">
|
||||
<Input
|
||||
placeholder="Tag name"
|
||||
value={newName}
|
||||
onChange={setNewName}
|
||||
className="flex-1"
|
||||
aria-label="New tag name"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
{TAG_COLORS.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => setNewColor(color)}
|
||||
className={`w-6 h-6 rounded-full border-2 transition-all cursor-pointer ${
|
||||
newColor === color ? "border-text scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
aria-label={`Select color ${color}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button onClick={handleCreateTag}>
|
||||
<Plus size={14} /> Add
|
||||
</Button>
|
||||
<div className="space-y-6">
|
||||
{/* Create — no section label */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Input
|
||||
placeholder="Tag name"
|
||||
value={newName}
|
||||
onChange={setNewName}
|
||||
className="flex-1"
|
||||
aria-label="New tag name"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
{TAG_COLORS.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => setNewColor(color)}
|
||||
className={`w-6 h-6 rounded-full border-2 transition-all cursor-pointer ${
|
||||
newColor === color ? "border-text scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
aria-label={`Select color ${color}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SettingsSection>
|
||||
<Button onClick={handleCreateTag}>
|
||||
<Plus size={14} /> Add
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<SettingsSection title="Manage tags">
|
||||
{/* Manage tags — plain section, no card */}
|
||||
<section>
|
||||
<h2 className="text-sm font-medium text-text mb-3">Manage tags</h2>
|
||||
{tags.length === 0 ? (
|
||||
<div className="text-center py-12 text-text-muted text-sm">
|
||||
No tags yet. Create one above.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 py-2">
|
||||
{tags.map((tag, index) => {
|
||||
const isEditing = editingId === tag.id;
|
||||
return (
|
||||
<div
|
||||
key={tag.id}
|
||||
className="bg-surface-raised border border-border rounded-xl p-3 flex items-center gap-3"
|
||||
>
|
||||
<div className="flex flex-col gap-0.5 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleMoveTag(index, "up")}
|
||||
disabled={index === 0}
|
||||
className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
|
||||
aria-label="Move tag up"
|
||||
>
|
||||
<ChevronUp size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleMoveTag(index, "down")}
|
||||
disabled={index === tags.length - 1}
|
||||
className="text-text-muted hover:text-text disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
|
||||
aria-label="Move tag down"
|
||||
>
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Input
|
||||
value={editName}
|
||||
onChange={setEditName}
|
||||
className="flex-1"
|
||||
aria-label="Edit tag name"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
{TAG_COLORS.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => setEditColor(color)}
|
||||
className={`w-5 h-5 rounded-full border-2 transition-all cursor-pointer ${
|
||||
editColor === color ? "border-text scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
aria-label={`Select color ${color}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button onClick={() => handleUpdateTag(tag.id)}>
|
||||
<Check size={14} />
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => setEditingId(null)}>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="w-4 h-4 rounded-full shrink-0"
|
||||
style={{ backgroundColor: tag.color }}
|
||||
/>
|
||||
<span className="text-sm text-text flex-1">{tag.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-xs"
|
||||
onClick={() => startEdit(tag)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDeleteTag(tag.id, tag.name)}
|
||||
className="text-text-muted hover:text-red-400 transition-colors cursor-pointer"
|
||||
aria-label={`Delete tag ${tag.name}`}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={tags.map((t) => t.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{tags.map((tag, index) => (
|
||||
<SortableTagRow
|
||||
key={tag.id}
|
||||
tag={tag}
|
||||
index={index}
|
||||
count={tags.length}
|
||||
editingId={editingId}
|
||||
editName={editName}
|
||||
editColor={editColor}
|
||||
onEditNameChange={setEditName}
|
||||
onEditColorChange={setEditColor}
|
||||
onStartEdit={startEdit}
|
||||
onCancelEdit={() => setEditingId(null)}
|
||||
onUpdateTag={handleUpdateTag}
|
||||
onDeleteTag={handleDeleteTag}
|
||||
onMoveTag={handleMoveTag}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</SettingsSection>
|
||||
</>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,7 @@ export function TagFilterDropdown() {
|
||||
const tags = useSortedTags();
|
||||
const activeTagIds = useUiStore((s) => s.activeTagIds);
|
||||
const toggleTag = useUiStore((s) => s.toggleTag);
|
||||
const setActiveView = useUiStore((s) => s.setActiveView);
|
||||
const openSettings = useUiStore((s) => s.openSettings);
|
||||
|
||||
const activeCount = activeTagIds.length;
|
||||
const hasActiveFilters = activeCount > 0;
|
||||
@@ -26,7 +26,7 @@ export function TagFilterDropdown() {
|
||||
}, [open]);
|
||||
|
||||
const handleManageTags = () => {
|
||||
setActiveView("settings");
|
||||
openSettings();
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
const ACCENT_PRESETS = [
|
||||
"#2563EB",
|
||||
"#3B82F6",
|
||||
"#06B6D4",
|
||||
"#22C55E",
|
||||
"#F59E0B",
|
||||
"#EF4444",
|
||||
"#EC4899",
|
||||
"#D946EF",
|
||||
"#8B5CF6",
|
||||
"#64748B",
|
||||
];
|
||||
|
||||
interface AccentPickerProps {
|
||||
value: string;
|
||||
onChange: (color: string) => void;
|
||||
}
|
||||
|
||||
export function AccentPicker({ value, onChange }: AccentPickerProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5" role="radiogroup" aria-label="Accent color">
|
||||
{ACCENT_PRESETS.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={value.toLowerCase() === color.toLowerCase()}
|
||||
aria-label={`Accent ${color}`}
|
||||
onClick={() => onChange(color)}
|
||||
className={`w-6 h-6 rounded-full border-2 transition-all cursor-pointer ${
|
||||
value.toLowerCase() === color.toLowerCase()
|
||||
? "border-text scale-110"
|
||||
: "border-transparent hover:border-border-hover"
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -13,30 +13,4 @@ describe("SettingsRow", () => {
|
||||
expect(screen.getByText("Adjust text size.")).toBeInTheDocument();
|
||||
expect(screen.getByText("Control")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("has a bottom border by default", () => {
|
||||
const { container } = render(
|
||||
<SettingsRow title="Item">
|
||||
<span />
|
||||
</SettingsRow>
|
||||
);
|
||||
expect(container.firstChild).toHaveClass("border-b");
|
||||
});
|
||||
|
||||
it("removes the bottom border on the last row", () => {
|
||||
const { container } = render(
|
||||
<>
|
||||
<SettingsRow title="First">
|
||||
<span />
|
||||
</SettingsRow>
|
||||
<SettingsRow title="Last">
|
||||
<span />
|
||||
</SettingsRow>
|
||||
</>
|
||||
);
|
||||
const rows = container.querySelectorAll(".border-b");
|
||||
expect(rows).toHaveLength(2);
|
||||
const lastRow = rows[rows.length - 1];
|
||||
expect(lastRow).toHaveClass("last:border-b-0");
|
||||
});
|
||||
});
|
||||
@@ -8,7 +8,7 @@ interface SettingsRowProps {
|
||||
|
||||
export function SettingsRow({ title, description, children }: SettingsRowProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-6 py-4 border-b border-border last:border-b-0">
|
||||
<div className="flex items-center justify-between gap-6">
|
||||
<div className="min-w-0 overflow-hidden">
|
||||
<div className="text-sm font-medium text-text truncate">{title}</div>
|
||||
{description && (
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { SettingsSection } from "./SettingsSection";
|
||||
|
||||
describe("SettingsSection", () => {
|
||||
it("renders the title and children", () => {
|
||||
render(
|
||||
<SettingsSection title="Appearance">
|
||||
<div>Content</div>
|
||||
</SettingsSection>
|
||||
);
|
||||
expect(screen.getByText("Appearance")).toBeInTheDocument();
|
||||
expect(screen.getByText("Content")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("uses the surface background on the inner card", () => {
|
||||
const { container } = render(
|
||||
<SettingsSection title="Appearance">
|
||||
<div />
|
||||
</SettingsSection>
|
||||
);
|
||||
const card = container.querySelector(".bg-surface");
|
||||
expect(card).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface SettingsSectionProps {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function SettingsSection({ title, children }: SettingsSectionProps) {
|
||||
return (
|
||||
<section className="mb-8">
|
||||
<h2 className="text-sm font-medium text-text mb-1">{title}</h2>
|
||||
<div className="bg-surface border border-border rounded-xl px-4 overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -5,37 +5,124 @@ interface ThemePickerProps {
|
||||
onChange: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const THEMES: { value: Theme; label: string; previewClass: string }[] = [
|
||||
{ value: "light", label: "Light", previewClass: "bg-zinc-100" },
|
||||
{ value: "dark", label: "Dark", previewClass: "bg-surface" },
|
||||
{ value: "system", label: "System", previewClass: "bg-gradient-to-br from-zinc-100 to-surface" },
|
||||
interface PreviewPalette {
|
||||
canvas: string;
|
||||
surface: string;
|
||||
sidebar: string;
|
||||
text: string;
|
||||
textMuted: string;
|
||||
accent: string;
|
||||
}
|
||||
|
||||
// Miniature app-window mock per theme, using the real theme palette hexes.
|
||||
const PREVIEWS: Record<Theme, PreviewPalette> = {
|
||||
light: {
|
||||
canvas: "#FAFAFA",
|
||||
surface: "#FFFFFF",
|
||||
sidebar: "#E4E4E7",
|
||||
text: "#18181B",
|
||||
textMuted: "#71717A",
|
||||
accent: "#2563EB",
|
||||
},
|
||||
dark: {
|
||||
canvas: "#0A0A0B",
|
||||
surface: "#18181B",
|
||||
sidebar: "#27272A",
|
||||
text: "#FAFAFA",
|
||||
textMuted: "#A1A1AA",
|
||||
accent: "#2563EB",
|
||||
},
|
||||
// "system" renders the dark palette with a light right half to signal it follows the OS.
|
||||
system: {
|
||||
canvas: "#0A0A0B",
|
||||
surface: "#18181B",
|
||||
sidebar: "#27272A",
|
||||
text: "#FAFAFA",
|
||||
textMuted: "#A1A1AA",
|
||||
accent: "#2563EB",
|
||||
},
|
||||
};
|
||||
|
||||
const THEMES: { value: Theme; label: string }[] = [
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
{ value: "system", label: "System" },
|
||||
];
|
||||
|
||||
function WindowMock({ preview }: { preview: PreviewPalette }) {
|
||||
return (
|
||||
<div aria-hidden="true" className="absolute inset-0" style={{ background: preview.canvas }}>
|
||||
{/* Top bar strip with traffic-light dots */}
|
||||
<div
|
||||
className="h-3 flex items-center px-1 gap-0.5"
|
||||
style={{
|
||||
background: preview.surface,
|
||||
borderBottom: "1px solid color-mix(in srgb, currentColor 10%, transparent)",
|
||||
}}
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full" style={{ background: preview.accent }} />
|
||||
<span className="w-1 h-1 rounded-full" style={{ background: preview.textMuted }} />
|
||||
<span className="w-1 h-1 rounded-full" style={{ background: preview.textMuted }} />
|
||||
</div>
|
||||
{/* Left sidebar strip */}
|
||||
<div className="absolute left-0 top-3 bottom-0 w-2.5" style={{ background: preview.sidebar }} />
|
||||
{/* Content lines */}
|
||||
<div className="absolute left-4 right-1 top-4 space-y-0.5">
|
||||
<div className="h-0.5 rounded" style={{ background: preview.text }} />
|
||||
<div className="h-0.5 rounded w-2/3" style={{ background: preview.textMuted }} />
|
||||
<div className="h-0.5 rounded w-1/2" style={{ background: preview.textMuted }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ThemePicker({ value, onChange }: ThemePickerProps) {
|
||||
return (
|
||||
<div className="flex gap-3" role="radiogroup" aria-label="Theme">
|
||||
{THEMES.map((theme) => (
|
||||
<button
|
||||
key={theme.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={value === theme.value}
|
||||
aria-label={theme.label}
|
||||
onClick={() => onChange(theme.value)}
|
||||
className={`group relative w-20 h-14 rounded-lg border-2 overflow-hidden transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas ${
|
||||
value === theme.value
|
||||
? "border-accent"
|
||||
: "border-border hover:border-border-hover"
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 ${theme.previewClass}`} />
|
||||
<div className="absolute top-1 left-1 right-1 h-2 rounded bg-black/10" />
|
||||
<div className="absolute bottom-1 left-1 right-2 h-1 rounded bg-black/5" />
|
||||
<span className="absolute bottom-1 right-1 text-[9px] font-medium text-text-muted opacity-70 group-hover:opacity-100">
|
||||
{theme.label}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
<div className="flex gap-4" role="radiogroup" aria-label="Theme">
|
||||
{THEMES.map((theme) => {
|
||||
const preview = PREVIEWS[theme.value];
|
||||
return (
|
||||
<div key={theme.value} className="flex flex-col items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={value === theme.value}
|
||||
aria-label={theme.label}
|
||||
onClick={() => onChange(theme.value)}
|
||||
className={`relative w-[76px] h-[52px] rounded-md border-2 overflow-hidden transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas ${
|
||||
value === theme.value
|
||||
? "border-accent"
|
||||
: "border-border hover:border-border-hover"
|
||||
}`}
|
||||
>
|
||||
<WindowMock preview={preview} />
|
||||
{/* System: overlay a light right half so the preview reads "follows the OS" */}
|
||||
{theme.value === "system" && (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute right-0 top-0 bottom-0 w-1/2 border-l"
|
||||
style={{ background: PREVIEWS.light.canvas, borderColor: PREVIEWS.dark.sidebar }}
|
||||
>
|
||||
<div
|
||||
className="h-3 flex items-center px-1 gap-0.5"
|
||||
style={{
|
||||
background: PREVIEWS.light.surface,
|
||||
borderBottom: "1px solid color-mix(in srgb, currentColor 10%, transparent)",
|
||||
}}
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full" style={{ background: PREVIEWS.light.accent }} />
|
||||
<span className="w-1 h-1 rounded-full" style={{ background: PREVIEWS.light.textMuted }} />
|
||||
<span className="w-1 h-1 rounded-full" style={{ background: PREVIEWS.light.textMuted }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
<span className="text-xs font-medium text-text-muted">
|
||||
{theme.label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user