From 041fc6a974205c94992fd4f1b95bb32d99d4ba7b Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Wed, 1 Jul 2026 01:18:45 +0800
Subject: [PATCH] feat: add Reset UI section in settings (force refresh + full
 reset app)

---
 frontend/app.js | 65 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/frontend/app.js b/frontend/app.js
index 093f9af..c70d6aa 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1528,6 +1528,28 @@ async function renderSettings() {
         <button id="importBackupBtn" class="btn">Import backup</button>
         <input id="backupFileInput" type="file" accept=".json" style="display:none" />
       </div>
+    </div>
+
+    <div class="set-group">
+      <div class="set-group-title">Reset</div>
+      <div class="set-row">
+        <span>
+          Force refresh UI
+          <small>Re-fetches the app shell and assets, bypassing the browser cache, then reloads.</small>
+        </span>
+        <div class="set-actions" style="margin:0">
+          <button id="refreshUiBtn" class="btn">Refresh UI</button>
+        </div>
+      </div>
+      <div class="set-row">
+        <span>
+          Reset app
+          <small>Clears all local storage, unregisters the service worker, and deletes every cache. You will need to reload after.</small>
+        </span>
+        <div class="set-actions" style="margin:0">
+          <button id="resetAppBtn" class="btn danger">Reset app</button>
+        </div>
+      </div>
     </div>`;
 
   c.appendChild(wrap);
@@ -1633,6 +1655,49 @@ async function renderSettings() {
   $('backupNowBtn').addEventListener('click', () => doAutoBackup());
   $('importBackupBtn').addEventListener('click', () => $('backupFileInput').click());
   $('backupFileInput').addEventListener('change', importBackup);
+
+  // ---- Reset ----
+  $('refreshUiBtn').addEventListener('click', async () => {
+    const btn = $('refreshUiBtn');
+    btn.disabled = true;
+    btn.textContent = 'Refreshing…';
+    try {
+      await Promise.all([
+        fetch('/', { cache: 'reload' }),
+        fetch('/app.js', { cache: 'reload' }),
+        fetch('/app.css', { cache: 'reload' }),
+      ]);
+    } catch { /* network hiccup — reload anyway */ }
+    location.reload();
+  });
+
+  $('resetAppBtn').addEventListener('click', () => {
+    showModal(
+      'Reset app?',
+      (() => { const p = document.createElement('p'); p.textContent = 'This clears all local data and caches. The page will reload.'; return p; })(),
+      [
+        { label: 'Cancel', onClick: closeModal },
+        {
+          label: 'Reset', danger: true, onClick: async () => {
+            closeModal();
+            try {
+              localStorage.clear();
+              sessionStorage.clear();
+              if ('serviceWorker' in navigator) {
+                const regs = await navigator.serviceWorker.getRegistrations();
+                await Promise.all(regs.map((r) => r.unregister()));
+              }
+              if ('caches' in window) {
+                const keys = await caches.keys();
+                await Promise.all(keys.map((k) => caches.delete(k)));
+              }
+            } catch { /* best effort — reload regardless */ }
+            window.location.href = '/';
+          },
+        },
+      ],
+    );
+  });
 }
 
 function renderCard(v, index, list) {