Renamr Scaffold
03390b43f1
Requested directly: "lets add some themeing into it now, perhaps under the configuration, have white/black, and some more colors." There was no existing app-wide Settings/Configuration surface - every prior setting lived in its own panel-specific modal (Fetch Data Settings, subtitle provider settings) - so this adds the app's first one: a palette-icon button in the sidebar footer opens a new Settings modal with a 2x2 grid of theme swatches. Four themes: Aurora (the existing dark teal/green look, unchanged, stays the default), Light (a clean white/black theme - the literal "white/black" ask), Ocean (a cool blue-toned dark variant), and Sunset (a warm amber-toned dark variant) - the "some more colors" part. Picking one applies instantly via a `data-theme` attribute on <html> and persists through new get_theme/save_theme commands (added to settings.rs/lib.rs alongside delivery 25's movie-naming- scheme fix), applied on every future launch by a boot-time effect in App.tsx so it takes effect even if Settings is never reopened. theme.css's variable set was expanded to cover every place a color was previously hardcoded outside the existing --dock/--surface/etc. variables, so the whole app actually re-themes instead of leaving dark boxes behind on the Light theme: button resting/hover/active shades, the Load-files popup background, the primary button's hover tint, the header's gradient stops, and five levels of white-tint row/button hover highlights (RenamePanel.css/Header.css) all moved to new variables (--btn-bg*, --popup-bg, --accent-hover, --header- grad-a/b, --tint-02/03/05/06/16) with theme-specific values - the light theme in particular needed dark tints instead of white ones for hover states to stay visible on a white background. Verified with a new Playwright script covering: default theme on a fresh install, the Settings modal listing all 4 themes with the right one marked selected, clicking a theme applying it immediately (actual computed background color and CSS variable checked, not just the data-theme attribute) and saving it, and a previously-saved theme applying on boot before Settings is ever opened. Screenshots taken of all 4 themes across the main view and the Naming Scheme editor (whose buttons/popups were part of the hardcoded-color cleanup) to confirm visually. All prior verification suites (47 checks across naming-scheme/match-fetch/hash-files/movie-scheme), `cargo test --workspace` (162 tests), and `npm run build` still pass clean.
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { useState } from "react";
|
|
import { EpisodesIcon, FilterIcon, ListIcon, PaletteIcon, RenameIcon, SfvIcon, SubtitlesIcon } from "./Icons";
|
|
import SettingsModal from "./SettingsModal";
|
|
|
|
export interface PanelDef {
|
|
id: string;
|
|
name: string;
|
|
icon: () => JSX.Element;
|
|
}
|
|
|
|
// Same panel set, same order, as the original's PanelBuilder.defaultSequence().
|
|
export const PANELS: PanelDef[] = [
|
|
{ id: "rename", name: "Rename", icon: RenameIcon },
|
|
{ id: "episodes", name: "Episodes", icon: EpisodesIcon },
|
|
{ id: "subtitles", name: "Subtitles", icon: SubtitlesIcon },
|
|
{ id: "sfv", name: "SFV", icon: SfvIcon },
|
|
{ id: "filter", name: "Filter", icon: FilterIcon },
|
|
{ id: "list", name: "List", icon: ListIcon },
|
|
];
|
|
|
|
const APP_VERSION = "0.1.0";
|
|
|
|
export default function Sidebar({
|
|
selected,
|
|
onSelect,
|
|
}: {
|
|
selected: string;
|
|
onSelect: (id: string) => void;
|
|
}) {
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="sidebar">
|
|
<ul className="sidebar-list">
|
|
{PANELS.map((panel) => {
|
|
const Icon = panel.icon;
|
|
const isSelected = panel.id === selected;
|
|
return (
|
|
<li key={panel.id}>
|
|
<button
|
|
className={`sidebar-item${isSelected ? " selected" : ""}`}
|
|
onClick={() => onSelect(panel.id)}
|
|
>
|
|
{isSelected && <span className="sidebar-item-accent" />}
|
|
<Icon />
|
|
<span>{panel.name}</span>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<div className="sidebar-footer">
|
|
<button
|
|
className="sidebar-settings-button"
|
|
title="Settings (theme)"
|
|
onClick={() => setSettingsOpen(true)}
|
|
>
|
|
<PaletteIcon />
|
|
</button>
|
|
<span className="sidebar-wordmark">Aurora Curator</span>
|
|
<span className="sidebar-version">v{APP_VERSION}</span>
|
|
</div>
|
|
|
|
<SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
|
</nav>
|
|
);
|
|
}
|