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

src/App.tsx

@@ -1,65 +1,22 @@
-import { useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/core";
-
-const APP_NAME = "Renamr";
-const APP_VERSION = "0.1.0";
-
-const DEFAULT_EXPRESSION = "{n} - {s00e00} - {t}";
-const DEFAULT_BINDINGS: Record<string, string> = {
-  n: "Example Show",
-  s00e00: "S01E01",
-  t: "Pilot",
-};
+import { useState } from "react";
+import Sidebar, { PANELS } from "./components/Sidebar";
+import Header from "./components/Header";
+import RenamePanel from "./components/RenamePanel";
+import PanelStub from "./components/PanelStub";
 
 export default function App() {
-  const [expression, setExpression] = useState(DEFAULT_EXPRESSION);
-  const [preview, setPreview] = useState<string>("");
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    invoke<string>("render_expression", { expression, bindings: DEFAULT_BINDINGS })
-      .then((result) => {
-        if (!cancelled) {
-          setPreview(result);
-          setError(null);
-        }
-      })
-      .catch((err) => {
-        if (!cancelled) {
-          setPreview("");
-          setError(String(err));
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [expression]);
+  const [selected, setSelected] = useState(PANELS[0].id);
+  const current = PANELS.find((p) => p.id === selected) ?? PANELS[0];
 
   return (
-    <main className="shell">
-      <header>
-        <h1>{APP_NAME}</h1>
-        <p className="tagline">A fast, cross-platform media renamer.</p>
-        <p className="version">v{APP_VERSION}</p>
-      </header>
-
-      <section className="panel">
-        <label htmlFor="expression">Naming scheme</label>
-        <input
-          id="expression"
-          value={expression}
-          onChange={(e) => setExpression(e.target.value)}
-          spellCheck={false}
-        />
-
-        <div className="preview">
-          <span className="preview-label">Preview</span>
-          {error ? <span className="preview-error">{error}</span> : <span className="preview-value">{preview}</span>}
+    <div className="app-shell">
+      <Sidebar selected={selected} onSelect={setSelected} />
+      <div className="main-column">
+        <Header title={current.name} />
+        <div className="main-content">
+          {selected === "rename" ? <RenamePanel /> : <PanelStub name={current.name} />}
         </div>
-      </section>
-    </main>
+      </div>
+    </div>
   );
 }