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>