feat: add Reset UI section in settings (force refresh + full reset app)

This commit is contained in:
Jonathan Sykes
2026-07-01 01:18:45 +08:00
parent 6738644d4b
commit 041fc6a974

View File

@@ -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) {