patrick/chitai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mount ModeWatcher and Toaster at the root layout

Browse Source 
The reader and login pages use +layout@ breakouts to escape the (root)
shell, so anything mounted in (root)/+layout.svelte never reaches them.
ModeWatcher was mounted there and duplicated in login/+layout@.svelte,
which left the reader's theme toggle inert: it flipped the store but
nothing wrote .dark onto <html>.

Mount both once at the top-level +layout.svelte instead, which every
route inherits regardless of breakouts.
This commit is contained in:
patrick
2026-08-11 21:46:50 -04:00
parent 2aba90f910
commit 49f94f9ee1
3 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(root)/+layout.svelte
-4
View File
@@ -11,9 +11,7 @@
import { setThemeState } from '$lib/theme/theme.svelte'; import { setThemeState } from '$lib/theme/theme.svelte';
import type { ThemeConfig } from '$lib/theme/presets'; import type { ThemeConfig } from '$lib/theme/presets';
import { ModeWatcher } from 'mode-watcher';
import { untrack, type Snippet } from 'svelte'; import { untrack, type Snippet } from 'svelte';
import { Toaster } from 'svelte-sonner';
let { let {
data, data,
@@ -40,8 +38,6 @@
}); });
</script> </script>
<Toaster />
<ModeWatcher />
<div class="[--header-height:calc(--spacing(14))]"> <div class="[--header-height:calc(--spacing(14))]">
<Sidebar.Provider class="flex flex-col"> <Sidebar.Provider class="flex flex-col">
frontend/src/routes/+layout.svelte
+10
View File
@@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import favicon from '$lib/assets/favicon.svg'; import favicon from '$lib/assets/favicon.svg';
import { ModeWatcher } from 'mode-watcher';
import { Toaster } from 'svelte-sonner';
let { children } = $props(); let { children } = $props();
</script> </script>
@@ -9,6 +11,14 @@
<link rel="icon" href={favicon} /> <link rel="icon" href={favicon} />
</svelte:head> </svelte:head>
<!--
Mounted here rather than per layout: the reader and login use +layout@ to
break out of (root), so anything mounted there never reaches them. The theme
toggle in the reader did nothing because ModeWatcher was not running.
-->
<Toaster />
<ModeWatcher />
<div class="flex h-screen min-h-screen flex-col"> <div class="flex h-screen min-h-screen flex-col">
<!-- Main Content Area --> <!-- Main Content Area -->
<main class="flex-1"> <main class="flex-1">
frontend/src/routes/login/+layout@.svelte
-4
View File
@@ -1,8 +1,6 @@
<script lang="ts"> <script lang="ts">
import '../../app.css'; import '../../app.css';
import favicon from '$lib/assets/favicon.svg'; import favicon from '$lib/assets/favicon.svg';
import { Toaster } from 'svelte-sonner';
import { ModeWatcher } from 'mode-watcher';
import ThemeToggle from '$lib/components/layout/theme-toggle.svelte'; import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';
let { children } = $props(); let { children } = $props();
@@ -12,8 +10,6 @@
<link rel="icon" href={favicon} /> <link rel="icon" href={favicon} />
</svelte:head> </svelte:head>
<Toaster />
<ModeWatcher />
<div class="flex h-screen min-h-screen flex-col"> <div class="flex h-screen min-h-screen flex-col">
<!-- Header --> <!-- Header -->