agent: windows — apply brand tokens and preferences to secondary windows
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,29 +4,22 @@
|
|||||||
import { listen } from "@tauri-apps/api/event";
|
import { listen } from "@tauri-apps/api/event";
|
||||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||||
import { settings } from "$lib/stores/page.svelte.js";
|
import { settings } from "$lib/stores/page.svelte.js";
|
||||||
|
import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
|
||||||
|
import Titlebar from "$lib/components/Titlebar.svelte";
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
let glowing = $state(false);
|
let glowing = $state(false);
|
||||||
let unlistenFocus = null;
|
let unlistenFocus = null;
|
||||||
let quickAddEl = $state(null);
|
|
||||||
|
|
||||||
// Theme application (float window has its own DOM)
|
const prefs = getPreferences();
|
||||||
|
|
||||||
|
// Theme — sync legacy settings to preferences store (same as main layout)
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const theme = settings.theme;
|
const legacyTheme = settings.theme;
|
||||||
if (theme === "Light") {
|
const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
|
||||||
document.documentElement.classList.add("light");
|
if (prefs.theme !== mapped) {
|
||||||
return;
|
updatePreferences({ theme: mapped });
|
||||||
}
|
}
|
||||||
if (theme === "Dark") {
|
|
||||||
document.documentElement.classList.remove("light");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// System mode
|
|
||||||
const mq = window.matchMedia("(prefers-color-scheme: light)");
|
|
||||||
const apply = () => document.documentElement.classList.toggle("light", mq.matches);
|
|
||||||
apply();
|
|
||||||
mq.addEventListener("change", apply);
|
|
||||||
return () => mq.removeEventListener("change", apply);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Listen for settings changes from main window
|
// Listen for settings changes from main window
|
||||||
@@ -67,5 +60,6 @@
|
|||||||
<svelte:window onkeydown={handleKeydown} />
|
<svelte:window onkeydown={handleKeydown} />
|
||||||
|
|
||||||
<div class="h-screen w-screen overflow-hidden grain rounded-lg border border-border shadow-xl animate-float-enter {glowing ? 'animate-glow-pulse' : ''}">
|
<div class="h-screen w-screen overflow-hidden grain rounded-lg border border-border shadow-xl animate-float-enter {glowing ? 'animate-glow-pulse' : ''}">
|
||||||
|
<Titlebar compact />
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,27 +1,22 @@
|
|||||||
<script>
|
<script>
|
||||||
import "../../app.css";
|
import "../../app.css";
|
||||||
import { onMount, onDestroy } from "svelte";
|
import { onDestroy } from "svelte";
|
||||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||||
import { settings } from "$lib/stores/page.svelte.js";
|
import { settings } from "$lib/stores/page.svelte.js";
|
||||||
|
import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
|
||||||
|
import Titlebar from "$lib/components/Titlebar.svelte";
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
// Theme application (viewer window has its own DOM)
|
const prefs = getPreferences();
|
||||||
|
|
||||||
|
// Theme — sync legacy settings to preferences store
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const theme = settings.theme;
|
const legacyTheme = settings.theme;
|
||||||
if (theme === "Light") {
|
const mapped = legacyTheme === "Light" ? "light" : legacyTheme === "Dark" ? "dark" : "system";
|
||||||
document.documentElement.classList.add("light");
|
if (prefs.theme !== mapped) {
|
||||||
return;
|
updatePreferences({ theme: mapped });
|
||||||
}
|
}
|
||||||
if (theme === "Dark") {
|
|
||||||
document.documentElement.classList.remove("light");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const mq = window.matchMedia("(prefers-color-scheme: light)");
|
|
||||||
const apply = () => document.documentElement.classList.toggle("light", mq.matches);
|
|
||||||
apply();
|
|
||||||
mq.addEventListener("change", apply);
|
|
||||||
return () => mq.removeEventListener("change", apply);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sync settings from main window
|
// Sync settings from main window
|
||||||
@@ -44,5 +39,6 @@
|
|||||||
<svelte:window onkeydown={handleKeydown} />
|
<svelte:window onkeydown={handleKeydown} />
|
||||||
|
|
||||||
<div class="h-screen w-screen overflow-hidden grain rounded-lg border border-border shadow-xl animate-float-enter">
|
<div class="h-screen w-screen overflow-hidden grain rounded-lg border border-border shadow-xl animate-float-enter">
|
||||||
|
<Titlebar compact />
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user