Feat: Add collapsible shell

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

@@ -5,6 +5,10 @@
   --project-drawer-bottom: calc(var(--sidebar-dock-clearance) + var(--project-drawer-gap));
 }
 
+.rootCompact {
+  justify-items: center;
+}
+
 .trigger {
   width: 100%;
   min-width: 0;
@@ -39,6 +43,29 @@
   box-shadow: var(--shadow-soft);
 }
 
+.triggerCompact {
+  width: var(--control-size-xl);
+  min-height: var(--control-size-xl);
+  grid-template-columns: auto;
+  justify-items: center;
+  gap: 0.15rem;
+  padding: var(--space-2) 0;
+  border-radius: var(--radius-xl);
+}
+
+.triggerCompact .triggerLead {
+  width: var(--control-size-md);
+  height: var(--control-size-md);
+}
+
+.triggerCompact .triggerIcon {
+  transform: rotate(0deg);
+}
+
+.triggerCompact .triggerIconOpen {
+  transform: rotate(180deg);
+}
+
 .triggerLead {
   width: var(--control-size-md);
   height: var(--control-size-md);
@@ -99,6 +126,13 @@
   pointer-events: auto;
 }
 
+.rootCompact .scrim,
+.rootCompact .drawer {
+  left: 0;
+  right: auto;
+  width: min(18rem, calc(100vw - 6rem));
+}
+
 .drawer {
   position: absolute;
   inset: calc(var(--project-drawer-top) + var(--project-drawer-gap)) var(--space-4)

Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx

@@ -6,6 +6,7 @@ import { activeProject, projectItems } from "../data/shell.data";
 import styles from "./ProjectSelector.module.scss";
 
 type ProjectSelectorProps = {
+	compact?: boolean;
 	isOpen: boolean;
 	onToggle: () => void;
 	onClose: () => void;
@@ -68,7 +69,10 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 
 	return (
 		<div
-			class={styles.root}
+			classList={{
+				[styles.root]: true,
+				[styles.rootCompact]: !!props.compact,
+			}}
 			style={{
 				"--project-drawer-top": `${drawerTop()}px`,
 			}}
@@ -79,20 +83,23 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 				ref={triggerRef}
 				classList={{
 					[styles.trigger]: true,
+					[styles.triggerCompact]: !!props.compact,
 					[styles.triggerOpen]: props.isOpen,
 				}}
-				aria-label="Open project drawer"
+				aria-label={`Open left workspace sidebar menu for ${selectedProject().name}`}
 				aria-expanded={props.isOpen}
-				title="Open project drawer"
+				title={selectedProject().name}
 				onClick={toggleOpen}
 			>
 				<span class={styles.triggerLead} aria-hidden="true">
 					<Folder size={18} strokeWidth={2} />
 				</span>
-				<span class={styles.triggerCopy}>
-					<span class={styles.eyebrow}>Projects</span>
-					<span class={styles.value}>{selectedProject().name}</span>
-				</span>
+				{!props.compact ? (
+					<span class={styles.triggerCopy}>
+						<span class={styles.eyebrow}>Projects</span>
+						<span class={styles.value}>{selectedProject().name}</span>
+					</span>
+				) : null}
 				<ChevronDown
 					classList={{
 						[styles.triggerIcon]: true,