UI updates and preroll buffer to 8 frames

ui/src/components/StackPresetToolbar.jsx

@@ -11,73 +11,73 @@ export function StackPresetToolbar({
     <div className="panel stack-panel">
       <div className="panel__header stack-panel__header">
         <div>
-          <h2>Stack Presets</h2>
+          <h3>Stack presets</h3>
           <p className="muted">Save or recall the current layer chain.</p>
         </div>
         <button type="button" className="stack-panel__reload" onClick={() => postJson("/api/reload", {})}>
-          Reload Shader
+          Reload shader
         </button>
       </div>
 
       <div className="stack-panel__grid">
-      <div className="toolbar__group">
-        <label htmlFor="preset-name">Save Stack</label>
-        <div className="toolbar__inline">
-          <input
-            id="preset-name"
-            type="text"
-            placeholder="Preset name"
-            value={presetName}
-            onChange={(event) => onPresetNameChange(event.target.value)}
-          />
-          <button
-            type="button"
-            disabled={!presetName.trim()}
-            onClick={() => {
-              const trimmedName = presetName.trim();
-              if (!trimmedName) {
-                return;
-              }
-              postJson("/api/stack-presets/save", { presetName: trimmedName });
-              onSelectedPresetNameChange(
-                trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
-              );
-            }}
-          >
-            Save
-          </button>
+        <div className="toolbar__group">
+          <label htmlFor="preset-name">Save stack</label>
+          <div className="toolbar__inline">
+            <input
+              id="preset-name"
+              type="text"
+              placeholder="Preset name"
+              value={presetName}
+              onChange={(event) => onPresetNameChange(event.target.value)}
+            />
+            <button
+              type="button"
+              disabled={!presetName.trim()}
+              onClick={() => {
+                const trimmedName = presetName.trim();
+                if (!trimmedName) {
+                  return;
+                }
+                postJson("/api/stack-presets/save", { presetName: trimmedName });
+                onSelectedPresetNameChange(
+                  trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
+                );
+              }}
+            >
+              Save
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div className="toolbar__group">
-        <label htmlFor="preset-select">Recall Stack</label>
-        <div className="toolbar__inline">
-          <select
-            id="preset-select"
-            value={selectedPresetName}
-            onChange={(event) => onSelectedPresetNameChange(event.target.value)}
-          >
-            {stackPresets.length === 0 ? <option value="">No presets</option> : null}
-            {stackPresets.map((preset) => (
-              <option key={preset} value={preset}>
-                {preset}
-              </option>
-            ))}
-          </select>
-          <button
-            type="button"
-            disabled={!selectedPresetName}
-            onClick={() => {
-              if (selectedPresetName) {
-                postJson("/api/stack-presets/load", { presetName: selectedPresetName });
-              }
-            }}
-          >
-            Recall
-          </button>
+        <div className="toolbar__group">
+          <label htmlFor="preset-select">Recall stack</label>
+          <div className="toolbar__inline">
+            <select
+              id="preset-select"
+              value={selectedPresetName}
+              onChange={(event) => onSelectedPresetNameChange(event.target.value)}
+            >
+              {stackPresets.length === 0 ? <option value="">No presets</option> : null}
+              {stackPresets.map((preset) => (
+                <option key={preset} value={preset}>
+                  {preset}
+                </option>
+              ))}
+            </select>
+            <button
+              type="button"
+              disabled={!selectedPresetName}
+              onClick={() => {
+                if (selectedPresetName) {
+                  postJson("/api/stack-presets/load", { presetName: selectedPresetName });
+                }
+              }}
+            >
+              Recall
+            </button>
+          </div>
         </div>
       </div>
-      </div>
     </div>
   );
 }