autosave overlay drafts after debounce

src/App.svelte

@@ -89,11 +89,25 @@
   let overlayDisabledDesign = 'transparent';
   let overlayError = '';
   let overlayBusy = false;
+  let overlaySavedSignature = '';
+  let overlayAutosaveAttemptedSignature = '';
+  let overlayAutosaveTimer: number | undefined;
   let oauthScopes: Record<'streamer' | 'bot', { connected: boolean; missing_scopes: string[]; reauthorization_required: boolean }> = {
     streamer: { connected: false, missing_scopes: [], reauthorization_required: false },
     bot: { connected: false, missing_scopes: [], reauthorization_required: false },
   };
 
+  $: if (authenticated && selectedOverlayId && overlayName && !overlayBusy) {
+    const signature = overlayDraftSignature();
+    if (signature !== overlaySavedSignature && signature !== overlayAutosaveAttemptedSignature && !overlayAutosaveTimer) {
+      overlayAutosaveAttemptedSignature = signature;
+      overlayAutosaveTimer = window.setTimeout(() => {
+        overlayAutosaveTimer = undefined;
+        void saveOverlay();
+      }, 1000);
+    }
+  }
+
   async function checkServer() {
     connectionState = 'CONNECTING';
     const retryDelays = [0, 3000, 10000, 15000, 30000];
@@ -696,9 +710,19 @@
     overlayJavascript = overlay.draft_javascript;
     overlayEnabled = overlay.enabled;
     overlayDisabledDesign = overlay.disabled_design;
+    overlaySavedSignature = overlayDraftSignature();
+    overlayAutosaveAttemptedSignature = overlaySavedSignature;
+  }
+
+  function overlayDraftSignature() {
+    return JSON.stringify({ overlayName, overlaySlug, overlayHtml, overlayCss, overlayJavascript, overlayEnabled, overlayDisabledDesign });
   }
 
   async function createOverlay() {
+    if (overlayAutosaveTimer) window.clearTimeout(overlayAutosaveTimer);
+    overlayAutosaveTimer = undefined;
+    overlaySavedSignature = '';
+    overlayAutosaveAttemptedSignature = '';
     selectedOverlayId = '';
     overlayName = 'New Overlay';
     overlaySlug = `overlay-${Date.now()}`;