adjustments to control and stack saving

ui/src/components/StackPresetToolbar.jsx

@@ -11,6 +11,12 @@ export function StackPresetToolbar({
   onSelectedPresetNameChange,
 }) {
   const [screenshotQueued, setScreenshotQueued] = useState(false);
+  const trimmedPresetName = presetName.trim();
+  const normalizedPresetName = trimmedPresetName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  const willOverwrite = normalizedPresetName ? stackPresets.includes(normalizedPresetName) : false;
 
   async function requestScreenshot() {
     setScreenshotQueued(true);
@@ -61,23 +67,34 @@ export function StackPresetToolbar({
             />
             <button
               type="button"
-              className="button-with-icon"
-              disabled={!presetName.trim()}
-              onClick={() => {
-                const trimmedName = presetName.trim();
-                if (!trimmedName) {
+              className={`button-with-icon${willOverwrite ? " stack-panel__save--overwrite" : ""}`}
+              disabled={!trimmedPresetName}
+              onClick={async () => {
+                if (!trimmedPresetName) {
                   return;
                 }
-                postJson("/api/stack-presets/save", { presetName: trimmedName });
-                onSelectedPresetNameChange(
-                  trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
-                );
+                const response = await postJson("/api/stack-presets/save", { presetName: trimmedPresetName });
+                if (response?.ok) {
+                  onSelectedPresetNameChange(normalizedPresetName);
+                  onPresetNameChange("");
+                }
               }}
             >
               <Save size={16} strokeWidth={1.9} aria-hidden="true" />
-              <span>Save</span>
+              <span>{willOverwrite ? "Overwrite" : "Save"}</span>
             </button>
           </div>
+          {trimmedPresetName ? (
+            <p className="muted toolbar__status" role="status">
+              {willOverwrite
+                ? `This will overwrite the existing preset "${normalizedPresetName}".`
+                : `This will save as "${normalizedPresetName}".`}
+            </p>
+          ) : (
+            <p className="muted toolbar__status toolbar__status--placeholder" aria-hidden="true">
+              Preset status
+            </p>
+          )}
         </div>
 
         <div className="toolbar__group">
@@ -109,6 +126,9 @@ export function StackPresetToolbar({
               <span>Recall</span>
             </button>
           </div>
+          <p className="muted toolbar__status toolbar__status--placeholder" aria-hidden="true">
+            Preset status
+          </p>
         </div>
       </div>
     </div>

ui/src/styles.css

@@ -515,19 +515,46 @@ pre {
 
 .toolbar__group {
   display: grid;
+  grid-template-rows: auto auto auto;
+  align-content: start;
   gap: 0.5rem;
   min-width: 0;
 }
 
 .toolbar__inline {
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) 9.5rem;
   align-items: stretch;
   gap: 0.5rem;
 }
 
+.toolbar__inline input,
+.toolbar__inline select,
 .toolbar__inline button {
-  width: auto;
-  min-width: var(--button-min-width);
+  min-height: 3rem;
+}
+
+.toolbar__inline button {
+  width: 100%;
+  min-width: 9.5rem;
+}
+
+.stack-panel__save--overwrite {
+  background: #b42318;
+  border-color: #8f1d13;
+  color: #fff7f5;
+}
+
+.stack-panel__save--overwrite:hover:not(:disabled) {
+  background: #912018;
+}
+
+.toolbar__status {
+  min-height: 1.6rem;
+  margin: 0;
+}
+
+.toolbar__status--placeholder {
+  visibility: hidden;
 }
 
 .layer-stack {