From 6449d27696188d0635c11bf366f930756241a4bd Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 24 Jun 2026 12:53:39 -0400
Subject: [PATCH] feat(fix-sw): add countdown timer and icon to Reload Now
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button now shows a live countdown (7→0s) so users can see exactly when
the auto-reload will fire, with a RefreshCw icon per button UX standard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/routes/testing/fix-sw/+page.svelte | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/routes/testing/fix-sw/+page.svelte b/src/routes/testing/fix-sw/+page.svelte
index 0e2190a2..2a988082 100644
--- a/src/routes/testing/fix-sw/+page.svelte
+++ b/src/routes/testing/fix-sw/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 import { onMount } from 'svelte';
+import { RefreshCw } from '@lucide/svelte';
 
 let status: string[] = $state([]);
 let done = $state(false);
 let has_error = $state(false);
+let countdown = $state(7);
 const origin = typeof window !== 'undefined' ? window.location.origin : '';
 
 function log(msg: string) {
@@ -128,11 +130,15 @@ async function nuke_everything() {
         log(`ERROR clearing sessionStorage: ${err.message}`);
     }
 
-    log('─── Reset complete. Reloading in 3 seconds... ───');
+    log('─── Reset complete. Reloading in 7 seconds... ───');
     done = true;
 
-    // Auto-reload after a short pause so the user can read the log
-    await new Promise((r) => setTimeout(r, 3000));
+    const tick = setInterval(() => {
+        countdown -= 1;
+        if (countdown <= 0) clearInterval(tick);
+    }, 1000);
+
+    await new Promise((r) => setTimeout(r, 7000));
     window.location.href = '/';
 }
 
@@ -179,9 +185,10 @@ onMount(() => {
                     : 'Reset complete! Reloading to home page...'}
             </p>
             <button
-                class="ml-auto rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+                class="ml-auto flex items-center gap-2 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
                 onclick={() => (window.location.href = '/')}>
-                Reload Now
+                <RefreshCw size={14} />
+                Reload Now ({countdown}s)
             </button>
         </div>
     {/if}