Feat: Hydrate shell from app state

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

@@ -3,6 +3,7 @@
 import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
 import { getDocumentTheme, setTheme, type Theme } from "../../../theme/runtime";
 import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
+import { AppShellDataProvider, useAppShellData } from "../data/app-shell.context";
 import { LeftRail } from "../LeftRail/LeftRail";
 import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
 import { MobileWorkspaceBrowser } from "../MobileWorkspaceBrowser/MobileWorkspaceBrowser";
@@ -16,13 +17,14 @@ import styles from "./AppShell.module.scss";
 type MobileWorkspaceView = "notifications" | "profile" | null;
 const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
 
-export const AppShell = (): JSX.Element => {
+const AppShellContent = (): JSX.Element => {
 	const [themeState, setThemeState] = createSignal<Theme>("light");
 	const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
 	const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
 	const [isMobileViewport, setIsMobileViewport] = createSignal(false);
 	const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
 	const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
+	const appShellData = useAppShellData();
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
@@ -79,7 +81,7 @@ export const AppShell = (): JSX.Element => {
 	};
 
 	return (
-		<div class={styles.shell} data-ui="app-shell">
+		<div class={styles.shell} data-ui="app-shell" data-app-shell-status={appShellData.status()}>
 			<TopBar
 				theme={themeState()}
 				onToggleTheme={toggleTheme}
@@ -163,3 +165,11 @@ export const AppShell = (): JSX.Element => {
 		</div>
 	);
 };
+
+export const AppShell = (): JSX.Element => {
+	return (
+		<AppShellDataProvider>
+			<AppShellContent />
+		</AppShellDataProvider>
+	);
+};