From 589324f6f900f5c8aa9a015e2c9e296aaabff370 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sat, 11 Apr 2026 13:56:07 +0200
Subject: [PATCH] Refactor toolbar buttons in App.tsx

---
 src/app/App.tsx | 157 ++----------------------------------------------
 1 file changed, 4 insertions(+), 153 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 4311a7ae..27d08e12 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -7253,20 +7253,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
               }}
             />
           </label>
-        </div>
-
-        <div className="toolbar__actions">
           <div className="toolbar__group">
-            <button
-              className="toolbar__button toolbar__button--accent"
-              type="button"
-              data-testid="outliner-add-button"
-              aria-haspopup="menu"
-              aria-expanded={addMenuPosition !== null}
-              onClick={handleOpenAddMenuFromButton}
-            >
-              Add
-            </button>
             <button
               className="toolbar__button"
               type="button"
@@ -7283,144 +7270,6 @@ export function App({ store, initialStatusMessage }: AppProps) {
             >
               Load Project
             </button>
-          </div>
-
-          <div
-            className="toolbar__group"
-            role="group"
-            aria-label="Viewport layout mode"
-          >
-            {VIEWPORT_LAYOUT_MODES.map((mode) => (
-              <button
-                key={mode}
-                className={`toolbar__button toolbar__button--compact ${editorState.viewportLayoutMode === mode ? "toolbar__button--active" : ""}`}
-                type="button"
-                data-testid={`viewport-layout-${mode}`}
-                aria-pressed={editorState.viewportLayoutMode === mode}
-                onClick={() => handleSetViewportLayoutMode(mode)}
-              >
-                {getViewportLayoutModeLabel(mode)}
-              </button>
-            ))}
-          </div>
-
-          <div
-            className="toolbar__group"
-            role="group"
-            aria-label="Transform operations"
-          >
-            <button
-              className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "translate" ? "toolbar__button--active" : ""}`}
-              type="button"
-              data-testid="transform-translate-button"
-              aria-pressed={
-                transformSession.kind === "active" &&
-                transformSession.operation === "translate"
-              }
-              disabled={
-                editorState.toolMode !== "select" || !canTranslateSelectedTarget
-              }
-              onClick={() => beginTransformOperation("translate", "toolbar")}
-            >
-              Move ({getTransformOperationShortcut("translate")})
-            </button>
-            <button
-              className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "rotate" ? "toolbar__button--active" : ""}`}
-              type="button"
-              data-testid="transform-rotate-button"
-              aria-pressed={
-                transformSession.kind === "active" &&
-                transformSession.operation === "rotate"
-              }
-              disabled={
-                editorState.toolMode !== "select" || !canRotateSelectedTarget
-              }
-              onClick={() => beginTransformOperation("rotate", "toolbar")}
-            >
-              Rotate ({getTransformOperationShortcut("rotate")})
-            </button>
-            <button
-              className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "scale" ? "toolbar__button--active" : ""}`}
-              type="button"
-              data-testid="transform-scale-button"
-              aria-pressed={
-                transformSession.kind === "active" &&
-                transformSession.operation === "scale"
-              }
-              disabled={
-                editorState.toolMode !== "select" || !canScaleSelectedTarget
-              }
-              onClick={() => beginTransformOperation("scale", "toolbar")}
-            >
-              Scale ({getTransformOperationShortcut("scale")})
-            </button>
-          </div>
-
-          <div
-            className="toolbar__group"
-            role="group"
-            aria-label="Whitebox selection mode"
-          >
-            {WHITEBOX_SELECTION_MODES.map((mode) => (
-              <button
-                key={mode}
-                className={`toolbar__button toolbar__button--compact ${whiteboxSelectionMode === mode ? "toolbar__button--active" : ""}`}
-                type="button"
-                data-testid={`whitebox-selection-mode-${mode}`}
-                aria-pressed={whiteboxSelectionMode === mode}
-                onClick={() => handleWhiteboxSelectionModeChange(mode)}
-              >
-                {getWhiteboxSelectionModeLabel(mode)}
-              </button>
-            ))}
-          </div>
-
-          <div
-            className="toolbar__group"
-            role="group"
-            aria-label="Whitebox snap settings"
-          >
-            <button
-              className={`toolbar__button ${viewportGridVisible ? "toolbar__button--active" : ""}`}
-              type="button"
-              data-testid="viewport-grid-toggle"
-              aria-pressed={viewportGridVisible}
-              onClick={handleViewportGridToggle}
-            >
-              {viewportGridVisible ? "Grid On" : "Grid Off"}
-            </button>
-            <button
-              className={`toolbar__button ${whiteboxSnapEnabled ? "toolbar__button--active" : ""}`}
-              type="button"
-              data-testid="whitebox-snap-toggle"
-              aria-pressed={whiteboxSnapEnabled}
-              onClick={handleWhiteboxSnapToggle}
-            >
-              {whiteboxSnapEnabled ? "Grid Snap On" : "Grid Snap Off"}
-            </button>
-            <label className="toolbar__inline-field">
-              <span className="label">Step</span>
-              <input
-                data-testid="whitebox-snap-step"
-                className="text-input toolbar__inline-input"
-                type="number"
-                min="0.01"
-                step="0.1"
-                value={whiteboxSnapStepDraft}
-                onChange={(event) =>
-                  setWhiteboxSnapStepDraft(event.currentTarget.value)
-                }
-                onBlur={handleWhiteboxSnapStepBlur}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    handleWhiteboxSnapStepBlur();
-                  }
-                }}
-              />
-            </label>
-          </div>
-
-          <div className="toolbar__group">
             <button
               className={`toolbar__button toolbar__button--accent ${blockingDiagnostics.length > 0 ? "toolbar__button--warn" : ""}`}
               type="button"
@@ -7435,16 +7284,18 @@ export function App({ store, initialStatusMessage }: AppProps) {
             <button
               className="toolbar__button"
               type="button"
+              data-testid="toolbar-undo-button"
               disabled={!editorState.canUndo}
-              onClick={() => store.undo()}
+              onClick={handleUndo}
             >
               Undo
             </button>
             <button
               className="toolbar__button"
               type="button"
+              data-testid="toolbar-redo-button"
               disabled={!editorState.canRedo}
-              onClick={() => store.redo()}
+              onClick={handleRedo}
             >
               Redo
             </button>