Files
Work/Frontend/src/components/shell/AppShell/AppShell.tsx
2026-06-16 13:11:14 +01:00

55 lines
1.5 KiB
TypeScript

// Path: Frontend/src/components/shell/AppShell/AppShell.tsx
import { createSignal, onMount, type JSX } from "solid-js";
import { getDocumentTheme, setTheme, type Theme } from "../../../theme/runtime";
import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
import { LeftRail } from "../LeftRail/LeftRail";
import { ServerDock } from "../ServerDock/ServerDock";
import { TopBar } from "../TopBar/TopBar";
import { WorkspaceSidebar } from "../WorkspaceSidebar/WorkspaceSidebar";
import styles from "./AppShell.module.scss";
export const AppShell = (): JSX.Element => {
const [themeState, setThemeState] = createSignal<Theme>("light");
onMount((): void => {
setThemeState(getDocumentTheme());
});
const toggleTheme = (): void => {
const next: Theme = themeState() === "dark" ? "light" : "dark";
setTheme(next);
setThemeState(next);
};
return (
<div class={styles.shell}>
<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
<div class={styles.body}>
{/* Left server rail */}
<div class={styles.railColumn}>
<LeftRail />
</div>
{/* Sidebar + main workspace frame */}
<div class={styles.workspaceRegion}>
<div class={styles.sidebarColumn}>
<WorkspaceSidebar />
</div>
<div class={styles.workspaceMain}>
<WorkspaceHome />
</div>
</div>
{/* Floating server dock overlay */}
<div class={styles.sidebarDock}>
<ServerDock />
</div>
</div>
</div>
);
};