Redesign filter view

This commit is contained in:
2026-04-06 12:06:58 +02:00
parent 2b0601956f
commit 36f9f35b0b
5 changed files with 207 additions and 90 deletions

View File

@@ -8,7 +8,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Recipe">
<title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest?v=20260406-9">
<link rel="manifest" href="./manifest.webmanifest?v=20260406-27">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -279,7 +279,7 @@
}
#recipe-search-shell {
min-height: 2.75rem;
border-radius: 1.7rem;
border-radius: 1.5rem;
background: #3a3b38 !important;
border: 1px solid rgba(79, 81, 76, 0.95) !important;
box-shadow:
@@ -375,10 +375,13 @@
</script>
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
<div class="flex h-full items-center justify-center" style="background:#2d2e2b !important;">
<div class="text-[13px] font-medium" style="color:#b7ada1 !important;">Ładowanie...</div>
</div>
</div>
<script>
const APP_ASSET_VERSION = '20260406-9';
const APP_ASSET_VERSION = '20260406-29';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';
@@ -412,27 +415,73 @@
})();
</script>
<script type="module">
const appVersion = window.__APP_ASSET_VERSION__ || '20260406-9';
const appVersion = window.__APP_ASSET_VERSION__ || '20260406-29';
const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) {
const appContainer = document.getElementById('app-container');
if (!appContainer) return;
appContainer.innerHTML = `
<div class="flex h-full items-center justify-center px-6 text-center" style="background:#2d2e2b !important;">
<div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:#2f2f2d !important; border-color:#444442 !important;">
<p class="text-sm font-semibold" style="color:#f2efe8 !important;">Aplikacja nie wystartowała</p>
<p class="mt-2 text-xs leading-relaxed" style="color:#b7ada1 !important;">${message}</p>
<button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:#23221e !important; border-color:#787876 !important; color:#f2efe8 !important;">Odśwież</button>
</div>
</div>
`;
}
async function tryRecoveryReload() {
if (sessionStorage.getItem(recoveryKey)) return false;
sessionStorage.setItem(recoveryKey, '1');
try {
localStorage.removeItem(APP_VERSION_STORAGE_KEY);
if ('serviceWorker' in navigator) {
const registrations = await navigator.serviceWorker.getRegistrations().catch(() => []);
await Promise.all(registrations.map((registration) => registration.unregister().catch(() => false)));
}
if ('caches' in window) {
const cacheKeys = await caches.keys().catch(() => []);
await Promise.all(cacheKeys.map((key) => caches.delete(key).catch(() => false)));
}
} catch (_) {
/* Ignore recovery cleanup errors. */
}
const nextUrl = new URL(window.location.href);
nextUrl.searchParams.set(APP_VERSION_QUERY_KEY, appVersion);
nextUrl.searchParams.set('recover', Date.now().toString());
window.location.replace(nextUrl.toString());
return true;
}
try {
await window.__APP_BOOTSTRAP__;
} catch (_) {
/* Ignore bootstrap cache reset errors and continue loading the app. */
}
if ('serviceWorker' in navigator) {
try {
const registration = await navigator.serviceWorker.register(`./sw.js?v=${encodeURIComponent(appVersion)}`, {
scope: './',
updateViaCache: 'none',
});
registration.update().catch(() => {});
} catch (_) {
/* Ignore service worker registration failures. */
}
}
if ('serviceWorker' in navigator) {
try {
const registration = await navigator.serviceWorker.register(`./sw.js?v=${encodeURIComponent(appVersion)}`, {
scope: './',
updateViaCache: 'none',
});
registration.update().catch(() => {});
} catch (_) {
/* Ignore service worker registration failures. */
await import(`./js/app.js?v=${encodeURIComponent(appVersion)}`);
sessionStorage.removeItem(recoveryKey);
} catch (error) {
console.error('Bootstrap failed', error);
const reloading = await tryRecoveryReload();
if (!reloading) {
renderBootstrapError('Spróbuj odświeżyć aplikację. Jeśli to nie pomoże, otwórz ją ponownie z Safari.');
}
}
await import(`./js/app.js?v=${encodeURIComponent(appVersion)}`);
</script>
</body>
</html>