Expose project-wide history controls

src/frontend/components/project-version-history.tsx

@@ -7,15 +7,19 @@ import React, {
   useState,
 } from "react";
 import type {
+  ProjectHistoryStateDto,
   ProjectRevisionPageDto,
   ProjectRevisionSummaryDto,
   ProjectSnapshotMetadataDto,
 } from "../types";
 import {
   createNamedProjectSnapshot,
+  getProjectHistory,
   listProjectRevisions,
   listProjectSnapshots,
+  redoProjectCommand,
   restoreProjectSnapshot,
+  undoProjectCommand,
 } from "../utils/api";
 import {
   getProjectRevisionDescription,
@@ -26,7 +30,7 @@ import {
 interface ProjectVersionHistoryProps {
   projectId: string;
   currentRevision: number;
-  onRestoreComplete: () => void;
+  onProjectStateChange: () => void;
 }
 
 const revisionPageSize = 10;
@@ -34,8 +38,10 @@ const revisionPageSize = 10;
 export function ProjectVersionHistory({
   projectId,
   currentRevision,
-  onRestoreComplete,
+  onProjectStateChange,
 }: ProjectVersionHistoryProps) {
+  const [history, setHistory] =
+    useState<ProjectHistoryStateDto | null>(null);
   const [snapshots, setSnapshots] = useState<ProjectSnapshotMetadataDto[]>(
     []
   );
@@ -51,9 +57,26 @@ export function ProjectVersionHistory({
     useState<ProjectSnapshotMetadataDto | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [isHistoryLoading, setIsHistoryLoading] = useState(true);
   const [isBusy, setIsBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const loadHistory = useCallback(async () => {
+    setIsHistoryLoading(true);
+    try {
+      setHistory(await getProjectHistory(projectId));
+    } catch (loadError) {
+      setError(
+        getVersionHistoryError(
+          loadError,
+          "Rückgängig-Status konnte nicht geladen werden."
+        )
+      );
+    } finally {
+      setIsHistoryLoading(false);
+    }
+  }, [projectId]);
+
   const loadOverview = useCallback(async () => {
     setIsLoading(true);
     setError(null);
@@ -77,6 +100,10 @@ export function ProjectVersionHistory({
     }
   }, [projectId]);
 
+  useEffect(() => {
+    void loadHistory();
+  }, [currentRevision, loadHistory]);
+
   useEffect(() => {
     if (isOpen) {
       void loadOverview();
@@ -157,7 +184,7 @@ export function ProjectVersionHistory({
       );
       setRestoreCandidate(null);
       setIsBusy(false);
-      onRestoreComplete();
+      onProjectStateChange();
     } catch (restoreError) {
       setError(
         getVersionHistoryError(
@@ -170,6 +197,33 @@ export function ProjectVersionHistory({
     }
   }
 
+  async function handleHistoryCommand(direction: "undo" | "redo") {
+    setIsBusy(true);
+    setError(null);
+    try {
+      const result =
+        direction === "undo"
+          ? await undoProjectCommand(projectId, currentRevision)
+          : await redoProjectCommand(projectId, currentRevision);
+      setHistory(result.history);
+      onProjectStateChange();
+    } catch (historyError) {
+      setError(
+        getVersionHistoryError(
+          historyError,
+          direction === "undo"
+            ? "Die letzte Änderung konnte nicht rückgängig gemacht werden."
+            : "Die letzte Änderung konnte nicht wiederholt werden."
+        )
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  const historyIsCurrent =
+    history?.currentRevision === currentRevision;
+
   return (
     <section className="card shadow-sm">
       <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
@@ -178,6 +232,42 @@ export function ProjectVersionHistory({
           <span className="badge text-bg-secondary">
             Aktuelle Revision {currentRevision}
           </span>
+          <button
+            className="btn btn-sm btn-outline-secondary"
+            disabled={
+              isBusy ||
+              isHistoryLoading ||
+              !historyIsCurrent ||
+              !history?.undoDepth
+            }
+            onClick={() => void handleHistoryCommand("undo")}
+            title={
+              history?.undoDepth
+                ? `${history.undoDepth} Änderung(en) können rückgängig gemacht werden`
+                : "Keine Änderung zum Rückgängigmachen"
+            }
+            type="button"
+          >
+            Rückgängig
+          </button>
+          <button
+            className="btn btn-sm btn-outline-secondary"
+            disabled={
+              isBusy ||
+              isHistoryLoading ||
+              !historyIsCurrent ||
+              !history?.redoDepth
+            }
+            onClick={() => void handleHistoryCommand("redo")}
+            title={
+              history?.redoDepth
+                ? `${history.redoDepth} Änderung(en) können wiederholt werden`
+                : "Keine Änderung zum Wiederholen"
+            }
+            type="button"
+          >
+            Wiederholen
+          </button>
           <button
             aria-expanded={isOpen}
             className="btn btn-sm btn-outline-secondary"
@@ -188,6 +278,11 @@ export function ProjectVersionHistory({
           </button>
         </div>
       </div>
+      {error ? (
+        <div className="alert alert-warning m-3 mb-0" role="alert">
+          {error}
+        </div>
+      ) : null}
       {isOpen ? (
         <>
       <div className="card-body border-bottom">
@@ -237,12 +332,6 @@ export function ProjectVersionHistory({
         </form>
       </div>
 
-      {error ? (
-        <div className="alert alert-warning m-3 mb-0" role="alert">
-          {error}
-        </div>
-      ) : null}
-
       <div className="card-body border-bottom">
         <h2 className="h6">Gespeicherte Sicherungspunkte</h2>
         {isLoading ? (