rework error alerts

src/views/Approve.svelte

@@ -11,7 +11,7 @@
     // Extra 50ms so the window can finish disappearing before the redraw
     const rehideDelay = Math.min(5000, $appState.config.rehide_ms + 50);
 
-    let error, alert;
+    let alert;
     let success = false;
     async function sendResponse() {
         try {
@@ -20,14 +20,14 @@
             window.setTimeout(cleanupRequest, rehideDelay);
         }
         catch (e) {
-            if (error) {
-                alert.shake();
-            }
-            error = e;
+            // reset to null so that we go back to asking for approval
+            $appState.currentRequest.response = null;
+            // setTimeout forces this to not happen until the alert has been rendered
+            window.setTimeout(() => alert.setError(e), 0);
         }
     }
 
-    async function handleResponse() {
+    async function handleResponseCollected() {
         if (
             $appState.sessionStatus === 'unlocked'
             || $appState.currentRequest.response.approval === 'Denied'
@@ -41,20 +41,17 @@
 {#if success}
     <!-- if we have successfully sent a response, show it -->
     <ShowResponse />
-{:else if !$appState.currentRequest?.response || error}
-    <!-- if there's no response, or if there was an error sending it, ask for response -->
+{:else if !$appState.currentRequest?.response}
+    <!-- if a response hasn't been collected, ask for it -->
     <div class="flex flex-col space-y-4 p-4 m-auto max-w-xl h-screen items-center justify-center">
-        {#if error}
-            <ErrorAlert bind:this={alert}>
-                {error.msg}
-                <svelte:fragment slot="buttons">
-                    <button class="btn btn-sm btn-alert-error" on:click={cleanupRequest}>Cancel</button>
-                    <button class="btn btn-sm btn-alert-error" on:click={sendResponse}>Retry</button>
-                </svelte:fragment>
-            </ErrorAlert>
-        {/if}
+        <ErrorAlert bind:this={alert}>
+            <svelte:fragment slot="buttons">
+                <button class="btn btn-sm btn-alert-error" on:click={cleanupRequest}>Cancel</button>
+                <button class="btn btn-sm btn-alert-error" on:click={sendResponse}>Retry</button>
+            </svelte:fragment>
+        </ErrorAlert>
 
-        <CollectResponse  on:response={handleResponse} />
+        <CollectResponse  on:response={handleResponseCollected} />
     </div>
 {:else if $appState.sessionStatus === 'locked'}
     <!-- if session is locked and we do have a response, we must be waiting for unlock -->