fix(redesign): prevent theme FOUC and sidebar jump on hard reload

- app.html: inline blocking script resolves the theme from localStorage (or prefers-color-scheme) and sets data-theme on <html> before first paint, eliminating the dark→light transition users saw when the light theme was selected. - +layout.svelte: hydrate sidebar collapsed state and expanded nav groups synchronously in their $state initializers instead of inside onMount, so the sidebar no longer snaps from expanded→collapsed and groups no longer slide open after mount. - +layout.svelte: keep the global provider-filter row rendered while providersCache.fetchedAt === 0, so the row doesn't pop in mid-paint and push the nav down once the cache resolves.
2026-04-27 15:38:03 +03:00
parent 42af7a6551
commit b107b01a00
2 changed files with 48 additions and 12 deletions
@@ -5,6 +5,23 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>Notify Bridge</title>
+		<script>
+			// Resolve theme before first paint to avoid dark→light FOUC on hard reload.
+			(function () {
+				try {
+					var saved = localStorage.getItem('theme');
+					var resolved =
+						saved === 'light' || saved === 'dark'
+							? saved
+							: window.matchMedia('(prefers-color-scheme: dark)').matches
+								? 'dark'
+								: 'light';
+					document.documentElement.setAttribute('data-theme', resolved);
+				} catch (_) {
+					document.documentElement.setAttribute('data-theme', 'light');
+				}
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">