PNG writer

ui/src/components/StackPresetToolbar.jsx

@@ -1,4 +1,5 @@
-import { FolderOpen, RefreshCw, Save } from "lucide-react";
+import { Camera, FolderOpen, RefreshCw, Save } from "lucide-react";
+import { useState } from "react";
 
 import { postJson } from "../api/controlApi";
 
@@ -9,6 +10,17 @@ export function StackPresetToolbar({
   onPresetNameChange,
   onSelectedPresetNameChange,
 }) {
+  const [screenshotQueued, setScreenshotQueued] = useState(false);
+
+  async function requestScreenshot() {
+    setScreenshotQueued(true);
+    try {
+      await postJson("/api/screenshot", {});
+    } finally {
+      window.setTimeout(() => setScreenshotQueued(false), 1200);
+    }
+  }
+
   return (
     <div className="panel stack-panel">
       <div className="panel__header stack-panel__header">
@@ -16,14 +28,24 @@ export function StackPresetToolbar({
           <h3>Stack presets</h3>
           <p className="muted">Save or recall the current layer chain.</p>
         </div>
-        <button
-          type="button"
-          className="button-with-icon stack-panel__reload"
-          onClick={() => postJson("/api/reload", {})}
-        >
-          <RefreshCw size={16} strokeWidth={1.9} aria-hidden="true" />
-          <span>Reload shader</span>
-        </button>
+        <div className="stack-panel__actions">
+          <button
+            type="button"
+            className="button-with-icon stack-panel__screenshot"
+            onClick={requestScreenshot}
+          >
+            <Camera size={16} strokeWidth={1.9} aria-hidden="true" />
+            <span>{screenshotQueued ? "Queued" : "Screenshot"}</span>
+          </button>
+          <button
+            type="button"
+            className="button-with-icon stack-panel__reload"
+            onClick={() => postJson("/api/reload", {})}
+          >
+            <RefreshCw size={16} strokeWidth={1.9} aria-hidden="true" />
+            <span>Reload shader</span>
+          </button>
+        </div>
       </div>
 
       <div className="stack-panel__grid">

ui/src/styles.css

@@ -498,10 +498,21 @@ pre {
   align-content: start;
 }
 
+.stack-panel__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
 .stack-panel__reload {
   min-width: 8.75rem;
 }
 
+.stack-panel__screenshot {
+  min-width: 8.75rem;
+}
+
 .toolbar__group {
   display: grid;
   gap: 0.5rem;