feat(frontend): add frontend option to change name

frontend/src/pages/DatasetEdit.tsx

@@ -0,0 +1,161 @@
+import StatsStyling from "../styles/stats_styling";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useMemo, useState, type FormEvent } from "react";
+import axios from "axios";
+
+const API_BASE_URL = import.meta.env.VITE_BACKEND_URL;
+const styles = StatsStyling;
+
+type DatasetInfoResponse = {
+  id: number;
+  name: string;
+  created_at: string;
+};
+
+const DatasetEditPage = () => {
+  const navigate = useNavigate();
+  const { datasetId } = useParams<{ datasetId: string }>();
+  const parsedDatasetId = useMemo(() => Number(datasetId), [datasetId]);
+  const [statusMessage, setStatusMessage] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const [datasetName, setDatasetName] = useState("");
+
+  useEffect(() => {
+    if (!Number.isInteger(parsedDatasetId) || parsedDatasetId <= 0) {
+      setHasError(true);
+      setStatusMessage("Invalid dataset id.");
+      setLoading(false);
+      return;
+    }
+
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      setHasError(true);
+      setStatusMessage("You must be signed in to edit datasets.");
+      setLoading(false);
+      return;
+    }
+
+    axios
+      .get<DatasetInfoResponse>(`${API_BASE_URL}/dataset/${parsedDatasetId}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+      .then((response) => {
+        setDatasetName(response.data.name || "");
+      })
+      .catch((error: unknown) => {
+        setHasError(true);
+        if (axios.isAxiosError(error)) {
+          setStatusMessage(String(error.response?.data?.error || error.message));
+        } else {
+          setStatusMessage("Could not get dataset info.");
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [parsedDatasetId]);
+
+  const saveDatasetName = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const trimmedName = datasetName.trim();
+    if (!trimmedName) {
+      setHasError(true);
+      setStatusMessage("Please enter a valid dataset name.");
+      return;
+    }
+
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      setHasError(true);
+      setStatusMessage("You must be signed in to save changes.");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      setHasError(false);
+      setStatusMessage("");
+
+      await axios.patch(
+        `${API_BASE_URL}/dataset/${parsedDatasetId}`,
+        { name: trimmedName },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+
+      navigate("/datasets", { replace: true });
+    } catch (error: unknown) {
+      setHasError(true);
+      if (axios.isAxiosError(error)) {
+        setStatusMessage(String(error.response?.data?.error || error.message || "Save failed."));
+      } else {
+        setStatusMessage("Save failed due to an unexpected error.");
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div style={styles.page}>
+      <div style={styles.containerNarrow}>
+        <div style={{ ...styles.card, ...styles.headerBar }}>
+          <div>
+            <h1 style={styles.sectionHeaderTitle}>Edit Dataset</h1>
+            <p style={styles.sectionHeaderSubtitle}>Update the dataset name shown in your datasets list.</p>
+          </div>
+        </div>
+
+        <form
+          onSubmit={saveDatasetName}
+          style={{ ...styles.card, marginTop: 14, display: "grid", gap: 12 }}
+        >
+          <label
+            htmlFor="dataset-name"
+            style={{ fontSize: 13, color: "#374151", fontWeight: 600 }}
+          >
+            Dataset name
+          </label>
+
+          <input
+            id="dataset-name"
+            style={{ ...styles.input, ...styles.inputFullWidth }}
+            type="text"
+            placeholder="Example: Cork Discussions - Jan 2026"
+            value={datasetName}
+            onChange={(event) => setDatasetName(event.target.value)}
+            disabled={loading || isSaving}
+          />
+
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+            <button
+              type="button"
+              style={styles.buttonSecondary}
+              onClick={() => navigate("/datasets")}
+              disabled={isSaving}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              style={{ ...styles.buttonPrimary, opacity: loading || isSaving ? 0.75 : 1 }}
+              disabled={loading || isSaving}
+            >
+              {isSaving ? "Saving..." : "Save"}
+            </button>
+
+            {loading
+            ? "Loading dataset details..."
+            : statusMessage}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default DatasetEditPage;