Rebuild UI as a faithful recreation of the original Aurora-themed layout: sidebar panel nav, two-pane rename list, live naming-scheme preview

2026-08-29 01:55:54 +00:00
parent e01852f292
commit 87e150f31b
14 changed files with 914 additions and 145 deletions
@@ -0,0 +1,55 @@
+import { EpisodesIcon, FilterIcon, ListIcon, RenameIcon, SfvIcon, SubtitlesIcon } from "./Icons";
+
+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;
+}) {
+  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">
+        <span className="sidebar-wordmark">Renamr</span>
+        <span className="sidebar-version">v{APP_VERSION}</span>
+      </div>
+    </nav>
+  );
+}