Feat: Add collapsible shell

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

@@ -11,6 +11,8 @@ import styles from "./AppShell.module.scss";
 
 export const AppShell = (): JSX.Element => {
 	const [themeState, setThemeState] = createSignal<Theme>("light");
+	const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
+	const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
@@ -27,20 +29,37 @@ export const AppShell = (): JSX.Element => {
 		<div class={styles.shell}>
 			<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
 
-			<div class={styles.body}>
+			<div
+				classList={{
+					[styles.body]: true,
+					[styles.bodyRailCollapsed]: isRailCollapsed(),
+					[styles.bodySidebarCollapsed]: isSidebarCollapsed(),
+				}}
+			>
 				{/* Left server rail */}
 				<div class={styles.railColumn}>
-					<LeftRail />
+					<LeftRail collapsed={isRailCollapsed()} />
 				</div>
 
 				{/* Sidebar + main workspace frame */}
 				<div class={styles.workspaceRegion}>
 					<div class={styles.sidebarColumn}>
-						<WorkspaceSidebar />
+						<WorkspaceSidebar
+							collapsed={isSidebarCollapsed()}
+							railCollapsed={isRailCollapsed()}
+							onToggleRailCollapse={(): void => {
+								setIsRailCollapsed((collapsed) => !collapsed);
+							}}
+						/>
 					</div>
 
 					<div class={styles.workspaceMain}>
-						<WorkspaceHome />
+						<WorkspaceHome
+							sidebarCollapsed={isSidebarCollapsed()}
+							onToggleSidebarCollapse={(): void => {
+								setIsSidebarCollapsed((collapsed) => !collapsed);
+							}}
+						/>
 					</div>
 				</div>