Feat: Frontend app shell

Frontend/src/components/shell/AppShell/AppShell.tsx

@@ -0,0 +1,50 @@
+// Path: Frontend/src/components/shell/AppShell/AppShell.tsx
+
+import { createSignal, onMount, type JSX } from "solid-js";
+import { getDocumentTheme, setTheme, type Theme } from "../../../helpers/theme";
+import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
+import { LeftRail } from "../LeftRail/LeftRail";
+import { ProfileDock } from "../ProfileDock/ProfileDock";
+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}>
+				<div class={styles.railColumn}>
+					<LeftRail />
+				</div>
+
+				<div class={styles.workspaceRegion}>
+					<div class={styles.sidebarColumn}>
+						<WorkspaceSidebar />
+
+						<div class={styles.sidebarDock}>
+							<ProfileDock />
+						</div>
+					</div>
+
+					<div class={styles.workspaceMain}>
+						<WorkspaceHome />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};