feat(EditorApp, History): implement undo/redo functionality and enhance session state management

- Added history management using Zustand for undo and redo actions.
- Integrated keyboard shortcuts (Ctrl+Z for undo, Ctrl+Shift+Z for redo) in EditorApp.
- Updated HoldInspector, MainCanvas, SidebarHoldsSection, and SidebarWallsSection to record history on relevant actions.
- Localized undo and redo labels in multiple languages.

Author: eloiberlinger1

frontend/src/features/editor/EditorApp.tsx

@@ -6,6 +6,7 @@ import { posthog } from "@/shared/analytics/posthog";
 
 import useWallSessionQuery from "./utils/WallSessionQuery";
 import { usePlacementStore } from "./store";
+import { useHistoryStore } from "./history";
 import type { SessionHoldInstance } from "./store";
 import { useHandleLoadSession } from "./utils/HandleLoadSession";
 
@@ -33,6 +34,8 @@ function EditorApp() {
   const setColoredTexture = usePlacementStore((s) => s.setColoredTexture);
   const setHasUnsavedChanges = usePlacementStore((s) => s.setHasUnsavedChanges);
   const hasUnsavedChanges = usePlacementStore((s) => s.hasUnsavedChanges);
+  const canUndo = useHistoryStore((s) => s.past.length > 0);
+  const canRedo = useHistoryStore((s) => s.future.length > 0);
 
   const { data, isLoading, error, isError } = useQuery({
     queryKey: ["wallsession", wallId],
@@ -53,9 +56,34 @@ function EditorApp() {
       setHoldColors({});
       setColoredTexture(true);
       setHasUnsavedChanges(false);
+      useHistoryStore.getState().clear();
     }
   }, [wallId, setObjects, setWallColors, setHoldColors, setColoredTexture, setHasUnsavedChanges]);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable)
+      ) {
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          useHistoryStore.getState().redo();
+        } else {
+          useHistoryStore.getState().undo();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   useEffect(() => {
     if (session_data?.id && wallModels.length > 0 && !sessionOpenedRef.current) {
       sessionOpenedRef.current = true;
@@ -132,6 +160,31 @@ function EditorApp() {
             <div className="w-fit max-w-full rounded-xl bg-surface-low/90 p-2 shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-md">
               <FileManager session_data={session_data} />
             </div>
+            <div className="flex w-fit gap-1 self-start rounded-xl bg-surface-low/90 p-1 shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-md">
+              {([
+                { id: "undo", icon: "undo", label: t("editor.undo"), hint: "Ctrl+Z", enabled: canUndo, action: () => useHistoryStore.getState().undo() },
+                { id: "redo", icon: "redo", label: t("editor.redo"), hint: "Ctrl+Shift+Z", enabled: canRedo, action: () => useHistoryStore.getState().redo() },
+              ]).map((tool) => (
+                <div key={tool.id} className="group relative">
+                  <button
+                    disabled={!tool.enabled}
+                    onClick={tool.action}
+                    className={`w-10 h-10 flex shrink-0 items-center justify-center rounded-lg transition-all ${
+                      tool.enabled
+                        ? "text-on-surface-variant hover:text-on-surface hover:bg-surface-high active:scale-95 cursor-pointer"
+                        : "text-on-surface-variant opacity-40 cursor-not-allowed"
+                    }`}
+                  >
+                    <span className="material-symbols-outlined">{tool.icon}</span>
+                  </button>
+                  <div className="absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded-lg bg-surface-high px-2.5 py-1.5 text-xs text-on-surface-variant opacity-0 shadow-[0_4px_16px_0_rgba(0,0,0,0.4)] transition-opacity group-hover:opacity-100 pointer-events-none">
+                    <span className="font-medium text-on-surface">{tool.label}</span>
+                    <span className="mx-1.5 opacity-40">·</span>
+                    {tool.hint}
+                  </div>
+                </div>
+              ))}
+            </div>
             <div className="flex w-fit flex-col gap-1 self-start rounded-xl bg-surface-low/90 p-1 shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-md">
               {transformTools.map((tool) => (
                 <div key={tool.id} className="group relative">

frontend/src/features/editor/components/HoldInspector.tsx

@@ -1,14 +1,17 @@
 import React, { useRef } from "react";
 import { usePlacementStore } from "../store";
+import { useHistoryStore } from "../history";
 import { useTranslation } from "react-i18next";
 import { posthog } from "@/shared/analytics/posthog";
 
 function RotationHandle({
   rotation,
   onRotate,
+  onRotateStart,
 }: {
   rotation: number;
   onRotate: (angle: number) => void;
+  onRotateStart?: () => void;
 }) {
   const radius = 24;
   const handleRadius = 18;
@@ -17,6 +20,7 @@ function RotationHandle({
   const handleY = radius + handleRadius * Math.sin(rotation - Math.PI / 2);
   const onPointerDown = (e: React.PointerEvent) => {
     e.preventDefault();
+    onRotateStart?.();
     window.addEventListener("pointermove", onPointerMove as EventListener);
     window.addEventListener("pointerup", onPointerUp as EventListener);
   };
@@ -139,6 +143,7 @@ const HoldInspector = () => {
               onRotate={(angle) =>
                 updateObject(selected.id, { customRotation: angle })
               }
+              onRotateStart={() => useHistoryStore.getState().record()}
             />
           </div>
         </div>
@@ -149,6 +154,7 @@ const HoldInspector = () => {
             className="flex-1 inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-red-700 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors"
             onClick={() => {
               posthog.capture('hold removed', { hold_name: selected.name, hold_id: selected.id });
+              useHistoryStore.getState().record();
               removeObject(selected.id);
             }}
           >
@@ -206,6 +212,7 @@ const HoldInspector = () => {
                         onRotate={(angle) =>
                           updateObject(child.id, { customRotation: angle })
                         }
+                        onRotateStart={() => useHistoryStore.getState().record()}
                       />
                     </div>
 
@@ -214,6 +221,7 @@ const HoldInspector = () => {
                       title="Delete child hold"
                       onClick={() => {
                         posthog.capture('hold removed', { hold_name: child.name, hold_id: child.id, is_child: true });
+                        useHistoryStore.getState().record();
                         removeObject(child.id);
                       }}
                     >

frontend/src/features/editor/components/MainCanvas.tsx

@@ -2,6 +2,7 @@ import { Canvas, useThree } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
 import { Suspense } from "react";
 import { useDragStore, usePlacementStore } from "../store";
+import { useHistoryStore } from "../history";
 import ModelViewer from "./ModelViewer";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import * as THREE from "three";
@@ -112,6 +113,10 @@ function DragPreview() {
           holdName = match ? match[1] : model.url;
         }
         const newId = model.id || uuidv4();
+        // Re-drags (model.id set) are already recorded at drag start, before removeObject
+        if (!model.id) {
+          useHistoryStore.getState().record();
+        }
         addObject({
           id: newId,
           type: model.type,
@@ -298,6 +303,7 @@ function PlacedObjects({
           pointerDownHoldIdRef.current = obj.id;
           dragTimer = window.setTimeout(() => {
             dragStarted = true;
+            useHistoryStore.getState().record();
             removeObject(obj.id);
             startDrag({
               type: obj.type,

frontend/src/features/editor/components/SidebarHoldsSection.tsx

@@ -7,6 +7,7 @@ import {
   useCallback,
 } from "react";
 import { useDragStore, usePlacementStore } from "../store";
+import { useHistoryStore } from "../history";
 import type { HoldModel, SessionData } from "../store";
 import Hold360, { HoldScrollContext } from "../stubs/Hold360";
 import React from "react";
@@ -218,7 +219,10 @@ const SidebarHoldsSection = forwardRef<
           {userColors.map((color: string) => (
             <button
               key={color}
-              onClick={() => setHoldColor(hold.file, color)}
+              onClick={() => {
+                useHistoryStore.getState().record();
+                setHoldColor(hold.file, color);
+              }}
               className={`w-4 h-4 border border-ghost-border cursor-pointer ${
                 holdColors[hold.file] === color
                   ? "ring-2 ring-offset-1 ring-mint ring-offset-surface-low"

frontend/src/features/editor/components/SidebarWallsSection.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import type { ChangeEvent } from "react";
 import { useDragStore, usePlacementStore } from "../store";
+import { useHistoryStore } from "../history";
 import { useTranslation } from "react-i18next";
 
 type WallModel = { name: string; file: string; orientation?: "y-up" | "z-up" };
@@ -110,6 +111,7 @@ const SidebarWallsSection = ({ wallModels }: { wallModels: WallModel[] }) => {
               <input
                 type="color"
                 value={wallColors[wall.file] || "#d9c4ff"}
+                onFocus={() => useHistoryStore.getState().record()}
                 onChange={(e) => setWallColor(wall.file, e.target.value)}
                 className="w-6 h-6 border border-gray-300 cursor-pointer shadow-sm"
                 title={`Pick color for ${wall.name}`}

frontend/src/features/editor/history.ts

@@ -0,0 +1,87 @@
+import { create } from "zustand";
+import { usePlacementStore } from "./store";
+import type { PlacedObject } from "./store";
+
+interface Snapshot {
+  objects: PlacedObject[];
+  wallColors: Record<string, string>;
+  holdColors: Record<string, string>;
+}
+
+interface HistoryState {
+  past: Snapshot[];
+  future: Snapshot[];
+  record: () => void;
+  undo: () => void;
+  redo: () => void;
+  clear: () => void;
+}
+
+const MAX_HISTORY = 50;
+
+function currentSnapshot(): Snapshot {
+  const { objects, wallColors, holdColors } = usePlacementStore.getState();
+  return { objects, wallColors, holdColors };
+}
+
+function restore(snapshot: Snapshot) {
+  const { selectedObjId } = usePlacementStore.getState();
+  const selectionStillExists =
+    selectedObjId !== null &&
+    snapshot.objects.some((obj) => obj.id === selectedObjId);
+  usePlacementStore.setState({
+    objects: snapshot.objects,
+    wallColors: snapshot.wallColors,
+    holdColors: snapshot.holdColors,
+    selectedObjId: selectionStillExists ? selectedObjId : null,
+    hasUnsavedChanges: true,
+  });
+}
+
+function sameSnapshot(a: Snapshot, b: Snapshot) {
+  return (
+    a.objects === b.objects &&
+    a.wallColors === b.wallColors &&
+    a.holdColors === b.holdColors
+  );
+}
+
+export const useHistoryStore = create<HistoryState>((set, get) => ({
+  past: [],
+  future: [],
+
+  record: () => {
+    const snapshot = currentSnapshot();
+    const { past } = get();
+    const top = past[past.length - 1];
+    if (top && sameSnapshot(top, snapshot)) return;
+    set({
+      past: [...past, snapshot].slice(-MAX_HISTORY),
+      future: [],
+    });
+  },
+
+  undo: () => {
+    const { past, future } = get();
+    const previous = past[past.length - 1];
+    if (!previous) return;
+    set({
+      past: past.slice(0, -1),
+      future: [...future, currentSnapshot()],
+    });
+    restore(previous);
+  },
+
+  redo: () => {
+    const { past, future } = get();
+    const next = future[future.length - 1];
+    if (!next) return;
+    set({
+      past: [...past, currentSnapshot()],
+      future: future.slice(0, -1),
+    });
+    restore(next);
+  },
+
+  clear: () => set({ past: [], future: [] }),
+}));

frontend/src/locales/cn.json

@@ -28,6 +28,8 @@
       "stats_forks_label": "分叉"
     },
     "editor": {
+      "undo": "撤销",
+      "redo": "重做",
       "loading_session": "正在加载岩壁会话...",
       "error_session": "加载岩壁会话出错",
       "unsaved_warning": "您有未保存的更改。确定要离开吗？",

frontend/src/locales/de.json

@@ -28,6 +28,8 @@
       "stats_forks_label": "Forks"
     },
     "editor": {
+      "undo": "Rückgängig",
+      "redo": "Wiederholen",
       "loading_session": "Wandsession wird geladen...",
       "error_session": "Fehler beim Laden der Wandsession",
       "unsaved_warning": "Du hast ungespeicherte Änderungen. Möchtest du wirklich die Seite verlassen?",

frontend/src/locales/en.json

@@ -28,6 +28,8 @@
       "stats_forks_label": "Forks"
     },
     "editor": {
+      "undo": "Undo",
+      "redo": "Redo",
       "loading_session": "Loading wall session...",
       "error_session": "Error loading wall session",
       "unsaved_warning": "You have unsaved changes. Are you sure you want to leave?",

frontend/src/locales/fr.json

@@ -28,6 +28,8 @@
       "stats_forks_label": "Forks"
     },
     "editor": {
+      "undo": "Annuler",
+      "redo": "Rétablir",
       "loading_session": "Chargement de la session mur...",
       "error_session": "Erreur de chargement de la session",
       "unsaved_warning": "Vous avez des modifications non sauvegardées. Voulez-vous vraiment quitter ?",