Feat: Add collapsible shell

Frontend/src/components/shell/AppShell/AppShell.module.scss

@@ -23,6 +23,14 @@
   background: var(--color-surface);
 }
 
+.bodyRailCollapsed {
+  --rail-width: 0rem;
+}
+
+.bodySidebarCollapsed {
+  --sidebar-width: 0rem;
+}
+
 .railColumn {
   min-height: 0;
   display: flex;
@@ -97,7 +105,7 @@
   position: absolute;
   bottom: var(--space-3);
   left: calc(var(--space-1) + (var(--rail-width) * 0.1));
-  width: calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2));
+  width: max(12rem, calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2)));
   right: auto;
   z-index: calc(var(--z-modal) + 1);
   pointer-events: none;
@@ -112,6 +120,14 @@
     --rail-width: 5rem;
     --sidebar-width: 17.25rem;
   }
+
+  .bodyRailCollapsed {
+    --rail-width: 0rem;
+  }
+
+  .bodySidebarCollapsed {
+    --sidebar-width: 0rem;
+  }
 }
 
 @include respond-down(tablet) {
@@ -119,6 +135,58 @@
     --rail-width: 4.5rem;
     --sidebar-width: 13.25rem;
   }
+
+  .bodyRailCollapsed {
+    --rail-width: 0rem;
+  }
+
+  .bodySidebarCollapsed {
+    --sidebar-width: 0rem;
+  }
+}
+
+.bodyRailCollapsed .railColumn {
+  overflow: hidden;
+}
+
+.bodySidebarCollapsed .railColumn {
+  --rail-dock-clearance: 0rem;
+}
+
+.bodySidebarCollapsed:not(.bodyRailCollapsed) .railColumn {
+  --rail-bottom-offset: var(--space-3);
+}
+
+.bodySidebarCollapsed .sidebarColumn {
+  --sidebar-dock-clearance: 0rem;
+  display: none;
+  overflow: hidden;
+  border-left-width: 0;
+  border-top-width: 0;
+}
+
+.bodySidebarCollapsed .workspaceRegion {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.bodySidebarCollapsed .workspaceMain {
+  border-left-color: transparent;
+}
+
+.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceMain {
+  border-top-width: 1px;
+  border-top-color: var(--shell-frame-border);
+  border-left-color: var(--shell-frame-border);
+  border-top-left-radius: var(--shell-top-left-radius);
+  box-shadow: none;
+}
+
+.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceRegion::before {
+  display: none;
+}
+
+.bodySidebarCollapsed .sidebarDock {
+  display: none;
 }
 
 @include respond-down(mobile) {

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>