feat: add Reset UI section in settings (force refresh + full reset app)
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user