g2mt
64 lines
2.0 KiB
Svelte
64 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import Router from "svelte-spa-router";
|
|
import Header from "./components/Header.svelte";
|
|
import LogViewer from "./routes/LogViewer.svelte";
|
|
import Models from "./routes/Models.svelte";
|
|
import Activity from "./routes/Activity.svelte";
|
|
import Performance from "./routes/Performance.svelte";
|
|
import Playground from "./routes/Playground.svelte";
|
|
import PlaygroundStub from "./routes/PlaygroundStub.svelte";
|
|
import { enableAPIEvents, checkPerformanceEnabled } from "./stores/api";
|
|
import { initScreenWidth, initSystemThemeListener, isDarkMode, appTitle, connectionState } from "./stores/theme";
|
|
import { currentRoute } from "./stores/route";
|
|
|
|
const routes = {
|
|
"/": PlaygroundStub,
|
|
"/models": Models,
|
|
"/logs": LogViewer,
|
|
"/activity": Activity,
|
|
"/performance": Performance,
|
|
"*": PlaygroundStub,
|
|
};
|
|
|
|
function handleRouteLoaded(event: { detail: { route: string | RegExp } }) {
|
|
const route = event.detail.route;
|
|
currentRoute.set(typeof route === "string" ? route : "/");
|
|
}
|
|
|
|
$effect(() => {
|
|
document.documentElement.setAttribute("data-theme", $isDarkMode ? "dark" : "light");
|
|
});
|
|
|
|
$effect(() => {
|
|
const icon = $connectionState === "connecting" ? "\u{1F7E1}" : $connectionState === "connected" ? "\u{1F7E2}" : "\u{1F534}";
|
|
document.title = `${icon} ${$appTitle}`;
|
|
});
|
|
|
|
onMount(() => {
|
|
const cleanupScreenWidth = initScreenWidth();
|
|
const cleanupSystemTheme = initSystemThemeListener();
|
|
enableAPIEvents(true);
|
|
checkPerformanceEnabled();
|
|
|
|
return () => {
|
|
cleanupScreenWidth();
|
|
cleanupSystemTheme();
|
|
enableAPIEvents(false);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col h-screen">
|
|
<Header />
|
|
|
|
<main class="flex-1 overflow-auto p-4">
|
|
<div class="h-full" class:hidden={$currentRoute !== "/"}>
|
|
<Playground />
|
|
</div>
|
|
<div class="h-full" class:hidden={$currentRoute === "/"}>
|
|
<Router {routes} on:routeLoaded={handleRouteLoaded} />
|
|
</div>
|
|
</main>
|
|
</div>
|