feat: implement document actions for managing artboards, zoom, and history; update UI components to utilize new actions

view/paletteItems.tsx

@@ -1,4 +1,4 @@
-import { ArrowDown, ArrowUp, CornersOut, Cursor, DownloadSimple, DropHalf, Eraser, Eye, EyeSlash, FolderOpen, FolderPlus, Hand, Lock, LockOpen, MagicWand, Minus, PaintBrush, Plus, Sparkle, Stack, Trash } from "@phosphor-icons/react";
+import { ArrowCounterClockwise, ArrowDown, ArrowUp, CornersOut, Cursor, DownloadSimple, DropHalf, Eraser, Eye, EyeSlash, FolderOpen, FolderPlus, Hand, Lock, LockOpen, MagicWand, Minus, PaintBrush, Plus, Sparkle, Stack, Trash } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import { commandIds } from "@commands/ids";
 import type { Artboard } from "@core/artboard";
@@ -7,7 +7,7 @@ import type { GenerationCompareMode, GenerationState, SelectionState, ViewportSt
 import type { AppStore } from "@editor/store";
 import { availableToolIds, type GenerateMode, type ToolId, type ToolState } from "@editor/tools";
 import type { DocumentReadIndex, IndexedLayerInfo } from "@editor/document-indexes";
-import { downloadArtboardPng } from "@operations/export/downloadArtboard";
+import type { DocumentActions } from "@app/document-actions";
 import { addArtboard, addEmptyLayer, addGroupLayer, deleteSelection, groupLayers, moveLayer } from "@operations/document/layerActions";
 import { labelForTool } from "./toolLabels";
 
@@ -31,6 +31,7 @@ export function createPaletteItems(options: {
   openGenerate: () => void;
   openLayers: () => void;
   closeLayers: () => void;
+  documentActions: DocumentActions;
 }): PaletteItem[] {
   const {
     document,
@@ -50,6 +51,7 @@ export function createPaletteItems(options: {
     openGenerate,
     openLayers,
     closeLayers,
+    documentActions,
   } = options;
   const hasCandidates = generation.candidates.length > 0;
   const items: PaletteItem[] = [];
@@ -85,12 +87,30 @@ export function createPaletteItems(options: {
       disabled: !activeArtboard,
       icon: <DownloadSimple size={20} />,
       run: () => {
-        if (activeArtboard) void downloadArtboardPng(activeArtboard, document.assets);
+        if (activeArtboard) void documentActions.exportArtboard(activeArtboard.id);
       },
     },
   );
 
   items.push(
+    {
+      id: "undo",
+      section: "Edit",
+      title: "Undo",
+      subtitle: "Cmd/Ctrl+Z",
+      disabled: !documentActions.canUndo(),
+      icon: <ArrowCounterClockwise size={20} />,
+      run: documentActions.undo,
+    },
+    {
+      id: "redo",
+      section: "Edit",
+      title: "Redo",
+      subtitle: "Cmd/Ctrl+Shift+Z",
+      disabled: !documentActions.canRedo(),
+      icon: <ArrowCounterClockwise size={20} className="scale-x-[-1]" />,
+      run: documentActions.redo,
+    },
     {
       id: layersOpen ? "close-layers" : "open-layers",
       section: "Layers",
@@ -271,7 +291,7 @@ export function createPaletteItems(options: {
       title: "Zoom in",
       subtitle: `${Math.round(viewport.zoom * 100)}%`,
       icon: <Plus size={20} />,
-      run: () => dispatch(commandIds.viewportSetZoom, { zoom: viewport.zoom * 1.2 }),
+      run: () => documentActions.zoomBy(1.2),
     },
     {
       id: "zoom-out",
@@ -279,14 +299,14 @@ export function createPaletteItems(options: {
       title: "Zoom out",
       subtitle: `${Math.round(viewport.zoom * 100)}%`,
       icon: <Minus size={20} />,
-      run: () => dispatch(commandIds.viewportSetZoom, { zoom: viewport.zoom / 1.2 }),
+      run: () => documentActions.zoomBy(1 / 1.2),
     },
     {
       id: "zoom-100",
       section: "Zoom",
       title: "Zoom to 100%",
       icon: <CornersOut size={20} />,
-      run: () => dispatch(commandIds.viewportSetZoom, { zoom: 1 }),
+      run: () => documentActions.zoomTo(1),
     },
     {
       id: "fit-artboard",
@@ -295,34 +315,7 @@ export function createPaletteItems(options: {
       subtitle: activeArtboard?.name,
       disabled: !activeArtboard,
       icon: <CornersOut size={20} />,
-      run: () => dispatch(commandIds.viewportFitArtboard, undefined),
-    },
-  );
-
-  items.push(
-    {
-      id: "debug-reset-viewport",
-      section: "Debug",
-      title: "Reset viewport",
-      icon: <CornersOut size={20} />,
-      run: () => dispatch(commandIds.viewportReset, undefined),
-    },
-    {
-      id: "debug-clear-selection",
-      section: "Debug",
-      title: "Clear selection",
-      subtitle: selection.layerIds.length > 0 || selection.artboardId ? undefined : "Nothing selected",
-      disabled: selection.layerIds.length === 0 && !selection.artboardId,
-      icon: <Cursor size={20} />,
-      run: () => dispatch(commandIds.selectionClear, undefined),
-    },
-    {
-      id: "debug-clear-candidates",
-      section: "Debug",
-      title: "Clear generation state",
-      disabled: !hasCandidates,
-      icon: <Trash size={20} />,
-      run: () => dispatch(commandIds.generationClearCandidates, undefined),
+      run: () => documentActions.fitArtboard(activeArtboard?.id),
     },
   );