55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import './styles/tokens.css';
|
|
import './styles/layout.css';
|
|
|
|
import { registerSW } from 'virtual:pwa-register';
|
|
import { el } from './lib/dom.js';
|
|
import { initRouter } from './router.js';
|
|
import { Nav } from './components/Nav.js';
|
|
import { settings, applyTheme } from './store/settings.js';
|
|
|
|
applyTheme();
|
|
settings.subscribe(() => applyTheme());
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', () => applyTheme());
|
|
|
|
const app = document.getElementById('app');
|
|
app.replaceChildren();
|
|
|
|
const viewHost = el('main', { id: 'view', class: 'view-host' });
|
|
app.append(Nav(), viewHost);
|
|
|
|
initRouter(viewHost);
|
|
|
|
// --- Service worker: prompt to refresh rather than silently swapping ------
|
|
const updateSW = registerSW({
|
|
onNeedRefresh() {
|
|
showToast('A new version is available.', 'Reload', () => updateSW(true));
|
|
},
|
|
onOfflineReady() {
|
|
showToast('Ready to use offline.', 'Dismiss');
|
|
},
|
|
});
|
|
|
|
function showToast(message, actionLabel, onAction) {
|
|
const toast = el(
|
|
'div',
|
|
{ class: 'toast', role: 'status' },
|
|
el('span', {}, message),
|
|
el(
|
|
'button',
|
|
{
|
|
class: 'toast__action',
|
|
type: 'button',
|
|
onclick: () => {
|
|
toast.remove();
|
|
onAction?.();
|
|
},
|
|
},
|
|
actionLabel,
|
|
),
|
|
);
|
|
document.body.append(toast);
|
|
if (!onAction) setTimeout(() => toast.remove(), 5000);
|
|
}
|