initial commit

2026-05-09 12:34:45 -04:00
commit 97fabc2c17
49 changed files with 4856 additions and 0 deletions
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, Library } from "../api/client";
+
+export default function SettingsPage() {
+  const qc = useQueryClient();
+  const { data: libraries = [] } = useQuery<Library[]>({
+    queryKey: ["libraries"],
+    queryFn: api.libraries.list,
+  });
+
+  const [name, setName] = useState("");
+  const [path, setPath] = useState("");
+  const [error, setError] = useState("");
+
+  const addMutation = useMutation({
+    mutationFn: () => api.libraries.create(name, path),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["libraries"] });
+      setName("");
+      setPath("");
+      setError("");
+    },
+    onError: (e: Error) => setError(e.message),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => api.libraries.delete(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["libraries"] }),
+  });
+
+  return (
+    <div style={{ padding: "2rem", maxWidth: 600 }}>
+      <h1>Settings</h1>
+      <h2>Libraries</h2>
+
+      <form
+        onSubmit={(e) => { e.preventDefault(); addMutation.mutate(); }}
+        style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 24 }}
+      >
+        <input
+          placeholder="Library name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+        />
+        <input
+          placeholder="/path/to/directory"
+          value={path}
+          onChange={(e) => setPath(e.target.value)}
+          required
+        />
+        {error && <p style={{ color: "red", margin: 0 }}>{error}</p>}
+        <button type="submit" disabled={addMutation.isPending}>
+          {addMutation.isPending ? "Adding…" : "Add Library"}
+        </button>
+      </form>
+
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {libraries.map((lib) => (
+          <li
+            key={lib.id}
+            style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #eee" }}
+          >
+            <div>
+              <strong>{lib.name}</strong>
+              <div style={{ fontSize: 12, color: "#666" }}>{lib.path}</div>
+            </div>
+            <button
+              onClick={() => deleteMutation.mutate(lib.id)}
+              disabled={deleteMutation.isPending}
+              style={{ color: "red" }}
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}