Merge branch 'Features/Frontend/CollapsibleShell'

.gitignore

@@ -25,5 +25,3 @@ pnpm-debug.log*
 # Go build output
 tmp/
 bin/
-
-.cgcignore

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

@@ -8,10 +8,8 @@
 }
 
 .body {
-  --shell-dock-clearance: calc(var(--space-12) + var(--space-12) + var(--space-8));
   --rail-width: 4.75rem;
   --sidebar-width: 16.75rem;
-  --mobile-bottom-nav-clearance: 0rem;
   --shell-top-left-radius: calc(var(--radius-xl) + var(--space-1));
   --shell-frame-border: color-mix(in srgb, var(--color-border-strong) 44%, transparent);
   --shell-divider-border: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
@@ -103,16 +101,6 @@
   border-top-right-radius: 0;
 }
 
-.mobileWorkspaceView {
-  min-width: 0;
-  min-height: 0;
-  height: 100%;
-  display: grid;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: var(--workspace-panel-surface);
-}
-
 .sidebarDock {
   position: absolute;
   bottom: var(--space-3);
@@ -203,46 +191,17 @@
 
 @include respond-down(mobile) {
   .body {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: 4.5rem minmax(0, 1fr);
-    --rail-width: 0rem;
+    --rail-width: 4.5rem;
-    --sidebar-width: 0rem;
-    --mobile-bottom-nav-clearance: calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
   }
 
   .railColumn {
-    display: none;
+    position: sticky;
+    top: 0;
   }
 
-  .workspaceRegion {
+  .workspaceRegion,
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    border-top-left-radius: 0;
-  }
-
-  .workspaceRegion::before {
-    background: var(--workspace-panel-surface);
-    border-left-width: 0;
-    border-right-width: 0;
-    border-top-left-radius: 0;
-  }
-
-  .sidebarColumn,
   .sidebarDock {
     display: none;
   }
-
-  .workspaceMain {
-    border-left-width: 0;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    box-sizing: border-box;
-    padding-bottom: var(--mobile-bottom-nav-clearance);
-  }
-
-  .mobileWorkspaceView {
-    height: 100%;
-    max-height: none;
-    padding-bottom: 0;
-    background: var(--workspace-panel-surface);
-  }
 }

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

@@ -1,52 +1,21 @@
 // Path: Frontend/src/components/shell/AppShell/AppShell.tsx
 
-import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
+import { createSignal, onMount, type JSX } from "solid-js";
 import { getDocumentTheme, setTheme, type Theme } from "../../../theme/runtime";
 import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
 import { LeftRail } from "../LeftRail/LeftRail";
-import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
-import { MobileWorkspaceBrowser } from "../MobileWorkspaceBrowser/MobileWorkspaceBrowser";
 import { ServerDock } from "../ServerDock/ServerDock";
-import { NotificationsMenu } from "../TopBar/NotificationsMenu";
-import { ProfileMenu } from "../TopBar/ProfileMenu";
 import { TopBar } from "../TopBar/TopBar";
 import { WorkspaceSidebar } from "../WorkspaceSidebar/WorkspaceSidebar";
 import styles from "./AppShell.module.scss";
 
-type MobileWorkspaceView = "notifications" | "profile" | null;
-const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
-
 export const AppShell = (): 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);
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
-
-		if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-			return;
-		}
-
-		const mediaQuery = window.matchMedia(MOBILE_VIEWPORT_QUERY);
-		const syncMobileViewport = (): void => {
-			setIsMobileViewport(mediaQuery.matches);
-
-			if (!mediaQuery.matches) {
-				setIsMobileWorkspaceBrowserOpen(false);
-				setActiveMobileWorkspaceView(null);
-			}
-		};
-
-		syncMobileViewport();
-		mediaQuery.addEventListener("change", syncMobileViewport);
-
-		onCleanup(() => {
-			mediaQuery.removeEventListener("change", syncMobileViewport);
-		});
 	});
 
 	const toggleTheme = (): void => {
@@ -56,39 +25,9 @@ export const AppShell = (): JSX.Element => {
 		setThemeState(next);
 	};
 
-	const openMobileWorkspaceView = (view: Exclude<MobileWorkspaceView, null>): void => {
-		setIsMobileWorkspaceBrowserOpen(false);
-		setActiveMobileWorkspaceView((current) => (current === view ? null : view));
-	};
-
-	const toggleMobileWorkspaceBrowser = (): void => {
-		setActiveMobileWorkspaceView(null);
-		setIsMobileWorkspaceBrowserOpen((open) => !open);
-	};
-
-	const toggleMobileNotifications = (): void => {
-		openMobileWorkspaceView("notifications");
-	};
-
-	const toggleMobileProfile = (): void => {
-		openMobileWorkspaceView("profile");
-	};
-
-	const closeMobileWorkspaceView = (): void => {
-		setActiveMobileWorkspaceView(null);
-	};
-
 	return (
 		<div class={styles.shell}>
-			<TopBar
+			<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
-				theme={themeState()}
-				onToggleTheme={toggleTheme}
-				isMobileViewport={isMobileViewport()}
-				isNotificationsOpen={activeMobileWorkspaceView() === "notifications"}
-				isProfileOpen={activeMobileWorkspaceView() === "profile"}
-				onToggleNotifications={toggleMobileNotifications}
-				onToggleProfile={toggleMobileProfile}
-			/>
 
 			<div
 				classList={{
@@ -115,27 +54,12 @@ export const AppShell = (): JSX.Element => {
 					</div>
 
 					<div class={styles.workspaceMain}>
-						{/* On mobile, top-bar menus become full workspace views instead of popovers. */}
-						<Show
-							when={isMobileViewport() && activeMobileWorkspaceView() !== null}
-							fallback={
 						<WorkspaceHome
 							sidebarCollapsed={isSidebarCollapsed()}
 							onToggleSidebarCollapse={(): void => {
 								setIsSidebarCollapsed((collapsed) => !collapsed);
 							}}
 						/>
-							}
-						>
-							<div class={styles.mobileWorkspaceView}>
-								<Show when={activeMobileWorkspaceView() === "notifications"}>
-									<NotificationsMenu id="mobile-workspace-notifications" onSelect={closeMobileWorkspaceView} variant="workspace" />
-								</Show>
-								<Show when={activeMobileWorkspaceView() === "profile"}>
-									<ProfileMenu id="mobile-workspace-profile" onSelect={closeMobileWorkspaceView} variant="workspace" />
-								</Show>
-							</div>
-						</Show>
 					</div>
 				</div>
 
@@ -144,19 +68,6 @@ export const AppShell = (): JSX.Element => {
 					<ServerDock />
 				</div>
 			</div>
-
-			<MobileBottomNav
-				isBrowseOpen={isMobileWorkspaceBrowserOpen()}
-				onBrowseToggle={(): void => {
-					toggleMobileWorkspaceBrowser();
-				}}
-			/>
-			<MobileWorkspaceBrowser
-				open={isMobileWorkspaceBrowserOpen()}
-				onClose={(): void => {
-					setIsMobileWorkspaceBrowserOpen(false);
-				}}
-			/>
 		</div>
 	);
 };

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

@@ -7,7 +7,7 @@
   min-width: 0;
   padding: 0;
   display: inline-flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: flex-start;
   gap: var(--space-2);
   border: 0;
@@ -43,25 +43,14 @@
   box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
 }
 
-.copy {
-  min-width: 0;
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--space-1);
-}
-
 .value {
   @include text-title;
   color: var(--color-text);
   font-weight: var(--font-weight-title);
-  line-height: 1;
 }
 
 .meta {
-  @include text-caption;
   color: var(--color-text-muted);
-  line-height: 1;
-  padding-left: var(--space-1);
 }
 
 .icon {
@@ -91,7 +80,7 @@
 
 .menuSection {
   display: grid;
-  gap: calc(var(--space-1) / 2);
+  gap: 0.15rem;
 }
 
 .menuSectionLabel {
@@ -182,39 +171,14 @@
 }
 
 .submenuIndicator {
-  width: calc(var(--space-1) + (var(--space-1) / 2));
+  width: 0.35rem;
-  height: calc(var(--space-1) + (var(--space-1) / 2));
+  height: 0.35rem;
   flex: 0 0 auto;
   border-radius: 999px;
   background: var(--color-accent-soft);
 }
 
 @include respond-down(mobile) {
-  .selector {
-    align-items: flex-end;
-    gap: var(--space-1);
-  }
-
-  .copy {
-    gap: var(--space-2);
-  }
-
-  .value {
-    line-height: 0.95;
-  }
-
-  .meta {
-    font-size: 0.68rem;
-    line-height: 1;
-    letter-spacing: 0.01em;
-    padding-bottom: calc(var(--space-1) / 2);
-  }
-
-  .icon {
-    align-self: flex-end;
-    margin-bottom: calc(var(--space-1) / 2);
-  }
-
   .menu {
     min-width: min(16rem, calc(100vw - (var(--space-4) * 2)));
   }

Frontend/src/components/shell/DepartmentSelector/DepartmentSelector.tsx

@@ -53,10 +53,8 @@ export const DepartmentSelector = (): JSX.Element => {
 				aria-expanded={isOpen()}
 				onClick={() => setIsOpen((open) => !open)}
 			>
-				<span class={styles.copy}>
 				<strong class={styles.value}>{selectedDepartment().name}</strong>
-					<span class={styles.meta}>{selectedTeamName()}</span>
+				<span class={styles.meta}>{selectedTeamName()} team</span>
-				</span>
 
 				<ChevronDown classList={{ [styles.icon]: true, [styles.iconOpen]: isOpen() }} size={16} strokeWidth={2} />
 			</button>

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

@@ -1,5 +1,6 @@
 .rail {
   --rail-workspace-size: var(--control-size-lg);
+  --rail-action-size: var(--control-size-md);
   position: relative;
   z-index: 3;
   flex: 1;
@@ -8,19 +9,21 @@
   flex-direction: column;
   align-items: center;
   gap: var(--space-3);
-  padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--rail-dock-clearance, var(--shell-dock-clearance)));
+  padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--rail-dock-clearance, 8rem));
   overflow: visible;
 }
 
 .railCollapsed {
   --rail-workspace-size: calc(var(--control-size-md) + 0.1rem);
+  --rail-action-size: calc(var(--control-size-md) + 0.1rem);
   justify-content: flex-start;
   gap: 0;
   padding-top: var(--space-4);
   padding-inline: var(--space-1);
 }
 
-.topCluster {
+.topCluster,
+.bottomCluster {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -28,6 +31,11 @@
   gap: var(--space-2);
 }
 
+.bottomCluster {
+  margin-top: auto;
+  margin-bottom: var(--rail-bottom-offset, 0rem);
+}
+
 .topCluster {
   gap: var(--space-3);
 }
@@ -36,7 +44,8 @@
   gap: var(--space-3);
 }
 
-.railCollapsed .topCluster {
+.railCollapsed .topCluster,
+.railCollapsed .bottomCluster {
   align-items: center;
 }
 
@@ -182,3 +191,20 @@
   border-radius: var(--radius-md);
   box-shadow: none;
 }
+
+.addButton {
+  width: var(--rail-action-size);
+  height: var(--rail-action-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-text-muted);
+
+  &:hover {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+  }
+}

Frontend/src/components/shell/LeftRail/LeftRail.tsx

@@ -1,6 +1,7 @@
 // Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
 
 import { For, Show, type JSX } from "solid-js";
+import { Plus } from "../../../lib/icons";
 import { railItems, type RailItem } from "../data/shell.data";
 import styles from "./LeftRail.module.scss";
 
@@ -76,6 +77,14 @@ export const LeftRail = (props: LeftRailProps): JSX.Element => {
 					</For>
 				</div>
 			</Show>
+
+			<Show when={!props.collapsed}>
+				<div class={styles.bottomCluster}>
+					<button type="button" class={styles.addButton} aria-label="Create server" title="Create server">
+						<Plus size={16} strokeWidth={2} />
+					</button>
+				</div>
+			</Show>
 		</aside>
 	);
 };

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

@@ -1,108 +0,0 @@
-.mobileNav {
-  display: none;
-}
-
-@include respond-down(mobile) {
-  .mobileNav {
-    --mobile-nav-button-gap: var(--space-1);
-    --mobile-nav-button-padding-inline: var(--space-2);
-    --mobile-nav-button-padding-top: calc(var(--space-2) + (var(--space-1) / 2));
-    --mobile-nav-button-padding-bottom: var(--space-2);
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: grid;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
-    background:
-      linear-gradient(to top, color-mix(in srgb, var(--color-canvas) 98%, transparent), color-mix(in srgb, var(--color-canvas) 92%, transparent));
-    border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 40%, transparent);
-    backdrop-filter: blur(var(--blur-overlay));
-    z-index: var(--z-sticky);
-  }
-
-  .contextBar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    min-width: 0;
-    color: var(--color-text-muted);
-  }
-
-  .contextServer,
-  .contextProject {
-    @include text-caption;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .contextServer {
-    max-width: 45vw;
-  }
-
-  .contextProject {
-    max-width: 30vw;
-  }
-
-  .contextDivider {
-    @include text-caption;
-    color: var(--color-text-subtle);
-  }
-
-	.navGrid {
-	  display: grid;
-	  grid-template-columns: repeat(3, minmax(0, 1fr));
-	  gap: var(--space-2);
-	}
-
-  .navButton {
-    min-width: 0;
-    display: grid;
-    justify-items: center;
-    gap: var(--mobile-nav-button-gap);
-    padding: var(--mobile-nav-button-padding-top) var(--mobile-nav-button-padding-inline) var(--mobile-nav-button-padding-bottom);
-    border: 1px solid transparent;
-    border-radius: var(--radius-xl);
-    background: transparent;
-    color: var(--color-text-muted);
-    transition:
-      background 160ms var(--easing-standard),
-      color 160ms var(--easing-standard),
-      border-color 160ms var(--easing-standard),
-      transform 180ms var(--easing-standard);
-  }
-
-  .navButton:hover,
-  .navButton:focus-visible {
-    color: var(--color-text);
-    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
-    border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
-  }
-
-  .navButton:active {
-    transform: translateY(calc(var(--space-1) / 2));
-  }
-
-  .navButtonActive {
-    color: var(--color-text);
-    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
-    border-color: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
-    box-shadow: var(--shadow-soft);
-  }
-
-  .iconWrap {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .label {
-    @include text-caption;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}

Frontend/src/components/shell/MobileBottomNav/MobileBottomNav.tsx

@@ -1,63 +0,0 @@
-// Path: Frontend/src/components/shell/MobileBottomNav/MobileBottomNav.tsx
-
-import { For, type JSX } from "solid-js";
-import { activeProject, activeServer, mobileBottomNavItems, type MobileBottomNavItem } from "../data/shell.data";
-import styles from "./MobileBottomNav.module.scss";
-
-type MobileBottomNavProps = {
-	isBrowseOpen: boolean;
-	onBrowseToggle: VoidFunction;
-};
-
-const MobileNavEntry = (props: {
-	item: MobileBottomNavItem;
-	isActive: boolean;
-	onSelect?: VoidFunction;
-}): JSX.Element => {
-	const Icon = props.item.icon;
-
-	return (
-		<button
-			type="button"
-			onClick={() => props.onSelect?.()}
-			classList={{
-				[styles.navButton]: true,
-				[styles.navButtonActive]: props.isActive,
-			}}
-			aria-current={props.isActive ? "page" : undefined}
-			aria-expanded={props.item.id === "browse" ? props.isActive : undefined}
-			aria-label={props.item.label}
-			title={props.item.label}
-		>
-			<span class={styles.iconWrap} aria-hidden="true">
-				<Icon size={18} strokeWidth={2} />
-			</span>
-
-			<span class={styles.label}>{props.item.label}</span>
-		</button>
-	);
-};
-
-export const MobileBottomNav = (props: MobileBottomNavProps): JSX.Element => {
-	return (
-		<nav class={styles.mobileNav} aria-label="Mobile workspace navigation">
-			<div class={styles.contextBar}>
-				<span class={styles.contextServer}>{activeServer.name}</span>
-				<span class={styles.contextDivider}>/</span>
-				<span class={styles.contextProject}>{activeProject.name}</span>
-			</div>
-
-			<div class={styles.navGrid}>
-				<For each={mobileBottomNavItems}>
-					{(item): JSX.Element => (
-						<MobileNavEntry
-							item={item}
-							isActive={item.id === "browse" ? props.isBrowseOpen : (item.active ?? false) && !props.isBrowseOpen}
-							onSelect={item.id === "browse" ? props.onBrowseToggle : undefined}
-						/>
-					)}
-				</For>
-			</div>
-		</nav>
-	);
-};

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

@@ -1,168 +0,0 @@
-.browserLayer {
-  display: none;
-}
-
-@include respond-down(mobile) {
-  .browserLayer {
-    position: fixed;
-    inset: 0;
-    display: grid;
-    z-index: calc(var(--z-popover, 20) + 2);
-    background: color-mix(in srgb, var(--color-canvas) 96%, black 4%);
-  }
-
-	.sheet {
-    min-height: 100dvh;
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 84%, transparent) 0%, transparent 8rem),
-      color-mix(in srgb, var(--color-canvas) 97%, black 3%);
-    overflow: clip;
-  }
-
-  .sheetHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-3);
-    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
-    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
-  }
-
-  .brandBlock {
-    min-width: 0;
-    display: grid;
-    gap: var(--space-1);
-  }
-
-  .sectionLabel {
-    @include text-caption;
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
-  .brandEyebrow {
-    @include text-caption;
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-  }
-
-  .brandTitle {
-    @include text-title;
-    color: var(--color-text);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .brandContext {
-    @include text-caption;
-    color: var(--color-text-subtle);
-  }
-
-  .closeButton {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--control-size-md);
-    height: var(--control-size-md);
-    padding: 0;
-    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-    color: var(--color-text-subtle);
-  }
-
-  .sheetBody {
-    min-height: 0;
-    display: grid;
-    gap: var(--space-5);
-    padding: var(--space-5) var(--space-5) calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
-    overflow: auto;
-  }
-
-  .sectionBlock {
-    display: grid;
-    gap: var(--space-2);
-  }
-
-  .treeList,
-  .treeListItem {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .treeList {
-    display: grid;
-    gap: 0;
-    border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
-  }
-
-  .treeListNested {
-    display: grid;
-    gap: 0;
-  }
-
-  .treeRow {
-    min-width: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-3);
-    min-height: calc(var(--control-size-lg) + var(--space-3));
-    padding: var(--space-4) var(--space-2) var(--space-4) calc(var(--space-2) + (var(--tree-depth, 0) * var(--space-4)));
-    border: 0;
-    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
-    border-radius: 0;
-    background: transparent;
-    color: var(--color-text);
-    text-align: left;
-  }
-
-  .treeRowActive {
-    color: var(--color-text);
-    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
-  }
-
-  .treeRowBranch {
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .treeRowLead,
-  .treeRowTrail {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-  }
-
-  .treeRowTrail {
-    flex: 0 0 auto;
-    color: var(--color-text-muted);
-  }
-
-  .treeLabel {
-    @include text-label;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .treeMeta {
-    @include text-caption;
-    min-width: 1rem;
-    text-align: right;
-  }
-
-  .treeChevron {
-    color: var(--color-text-subtle);
-  }
-
-  .treeListNested > .treeListItem > .treeRow {
-    min-height: calc(var(--control-size-lg) + var(--space-1));
-  }
-}

Frontend/src/components/shell/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx

@@ -1,112 +0,0 @@
-import { For, Show, type JSX } from "solid-js";
-import { ChevronRight, X } from "../../../lib/icons";
-import { activeProject, activeServer, workspaceStaticItems, workspaceTree, type SidebarItem, type WorkspaceTreeNode } from "../data/shell.data";
-import styles from "./MobileWorkspaceBrowser.module.scss";
-
-type MobileWorkspaceBrowserProps = {
-	open: boolean;
-	onClose: VoidFunction;
-};
-
-const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Element => {
-	const depth = props.depth ?? 0;
-	const Icon = props.node.icon;
-	const hasChildren = (props.node.children?.length ?? 0) > 0;
-
-	return (
-		<li class={styles.treeListItem}>
-			<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.node.active ?? false, [styles.treeRowBranch]: hasChildren }} type="button" style={{ "--tree-depth": `${depth}` }}>
-				<span class={styles.treeRowLead}>
-					<Icon size={16} strokeWidth={2} />
-					<span class={styles.treeLabel}>{props.node.label}</span>
-				</span>
-
-				<span class={styles.treeRowTrail}>
-					<Show when={props.node.meta}>
-						<span class={styles.treeMeta}>{props.node.meta}</span>
-					</Show>
-					<Show when={hasChildren}>
-						<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
-					</Show>
-				</span>
-			</button>
-
-			<Show when={hasChildren}>
-				<ul class={styles.treeListNested}>
-					<For each={props.node.children}>{(child): JSX.Element => <TreeRow node={child} depth={depth + 1} />}</For>
-				</ul>
-			</Show>
-		</li>
-	);
-};
-
-const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
-	const Icon = props.item.icon;
-
-	return (
-		<li class={styles.treeListItem}>
-			<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }}>
-				<span class={styles.treeRowLead}>
-					<Icon size={16} strokeWidth={2} />
-					<span class={styles.treeLabel}>{props.item.label}</span>
-				</span>
-				<span class={styles.treeRowTrail}>
-					<Show when={props.item.meta}>
-						<span class={styles.treeMeta}>{props.item.meta}</span>
-					</Show>
-					<ChevronRight size={14} strokeWidth={2} class={styles.treeChevron} />
-				</span>
-			</button>
-		</li>
-	);
-};
-
-export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.Element => {
-	const sectionNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) > 0);
-	const looseNodes = workspaceTree.filter((node) => (node.children?.length ?? 0) === 0);
-
-	return (
-		<Show when={props.open}>
-			<div class={styles.browserLayer}>
-				<section class={styles.sheet} aria-label="Mobile workspace browser">
-					<header class={styles.sheetHeader}>
-						<div class={styles.brandBlock}>
-							<span class={styles.brandEyebrow}>Moku Work</span>
-							<strong class={styles.brandTitle}>{activeProject.name}</strong>
-							<span class={styles.brandContext}>{activeServer.name}</span>
-						</div>
-
-						<button class={styles.closeButton} type="button" aria-label="Close workspace browser" onClick={props.onClose}>
-							<X size={18} strokeWidth={2} />
-						</button>
-					</header>
-
-					<div class={styles.sheetBody}>
-						<section class={styles.sectionBlock}>
-							<span class={styles.sectionLabel}>Workspace</span>
-							<ul class={styles.treeList}>
-								<For each={workspaceStaticItems}>{(item): JSX.Element => <StaticRow item={item} />}</For>
-							</ul>
-						</section>
-
-						<section class={styles.sectionBlock}>
-							<span class={styles.sectionLabel}>Items</span>
-							<ul class={styles.treeList}>
-								<For each={sectionNodes}>{(node): JSX.Element => <TreeRow node={node} />}</For>
-							</ul>
-						</section>
-
-						<Show when={looseNodes.length > 0}>
-							<section class={styles.sectionBlock}>
-								<span class={styles.sectionLabel}>More</span>
-								<ul class={styles.treeList}>
-									<For each={looseNodes}>{(node): JSX.Element => <TreeRow node={node} />}</For>
-								</ul>
-							</section>
-						</Show>
-					</div>
-				</section>
-			</div>
-		</Show>
-	);
-};

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

@@ -2,7 +2,7 @@
   display: grid;
   --project-drawer-gap: var(--space-3);
   --project-drawer-top: calc(var(--space-4) + var(--control-size-lg));
-  --project-drawer-bottom: calc(var(--sidebar-dock-clearance, var(--shell-dock-clearance)) + var(--project-drawer-gap));
+  --project-drawer-bottom: calc(var(--sidebar-dock-clearance) + var(--project-drawer-gap));
 }
 
 .rootCompact {

Frontend/src/components/shell/TopBar/NotificationsMenu.module.scss

@@ -7,34 +7,11 @@
 	gap: var(--space-3);
 	padding: var(--space-3);
 	border: 1px solid var(--color-border-strong);
-	border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
+	border-radius: calc(var(--radius-lg) + 0.1rem);
 	background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
-	box-shadow: var(--shadow-strong);
+	box-shadow: 0 18px 36px color-mix(in srgb, black 16%, transparent);
-	backdrop-filter: blur(var(--blur-overlay));
+	backdrop-filter: blur(18px);
-	z-index: var(--z-dropdown);
+	z-index: 30;
-}
-
-.menu.menuWorkspace {
-	position: static;
-	top: auto;
-	right: auto;
-	left: auto;
-	bottom: auto;
-	width: 100%;
-	max-width: none;
-	height: 100%;
-	min-height: 0;
-	display: grid;
-	grid-template-rows: auto minmax(0, 1fr) auto;
-	gap: var(--space-4);
-	padding: var(--space-4);
-	border: 0;
-	border-radius: 0;
-	background: transparent;
-	box-shadow: none;
-	backdrop-filter: none;
-	z-index: auto;
-	overflow: hidden;
 }
 
 .header,
@@ -53,7 +30,7 @@
 .headerCopy {
 	min-width: 0;
 	display: grid;
-	gap: calc(var(--space-1) / 2);
+	gap: 0.08rem;
 }
 
 .title {
@@ -148,7 +125,7 @@
 
 .list {
 	display: grid;
-	gap: var(--space-1);
+	gap: 0.3rem;
 }
 
 .item {
@@ -204,7 +181,7 @@
 .itemBody {
 	min-width: 0;
 	display: grid;
-	gap: calc(var(--space-1) / 2);
+	gap: 0.12rem;
 }
 
 .itemTitle {
@@ -213,7 +190,7 @@
 }
 
 .itemTime {
-	padding-top: calc(var(--space-1) / 4);
+	padding-top: 0.05rem;
 	white-space: nowrap;
 	color: var(--color-text-subtle);
 }
@@ -225,47 +202,26 @@
 	flex-wrap: wrap;
 }
 
-.menu.menuWorkspace .listWrap {
-	min-height: 0;
-	max-height: none;
-	height: 100%;
-	padding-right: 0;
-	margin-right: 0;
-}
-
-.menu.menuWorkspace .header,
-.menu.menuWorkspace .footer {
-	padding-left: 0;
-	padding-right: 0;
-}
-
 @include respond-down(mobile) {
-	.menu.menuWorkspace {
+	.menu {
-		height: 100%;
+		width: min(22rem, calc(100vw - (var(--space-3) * 2)));
-		min-height: 0;
-		padding: var(--space-5);
 	}
 
-	.menu.menuWorkspace .listWrap {
+	.item {
-		min-height: 0;
-		max-height: none;
-	}
-
-	.menu.menuWorkspace .item {
 		grid-template-columns: auto minmax(0, 1fr);
 	}
 
-	.menu.menuWorkspace .itemTime {
+	.itemTime {
 		grid-column: 2;
 		padding-top: 0;
 	}
 
-	.menu.menuWorkspace .footer {
+	.footer {
 		align-items: flex-start;
 		flex-direction: column;
 	}
 
-	.menu.menuWorkspace .footerAction {
+	.footerAction {
 		padding: var(--space-1) 0;
 	}
-}
+	}

Frontend/src/components/shell/TopBar/NotificationsMenu.tsx

@@ -5,9 +5,8 @@ import styles from "./NotificationsMenu.module.scss";
 
 type NotificationsMenuProps = {
 	id: string;
-	menuRef?: (element: HTMLDivElement) => void;
+	menuRef: (element: HTMLDivElement) => void;
 	onSelect: () => void;
-	variant?: "popover" | "workspace";
 };
 
 export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element => {
@@ -15,19 +14,9 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 	const earlierItems = notificationItems.filter((item) => !item.unread);
 	const hasNotifications = notificationItems.length > 0;
 	const isCaughtUp = unreadItems.length === 0 && hasNotifications;
-	const variant = props.variant ?? "popover";
 
 	return (
-		<div
+		<div id={props.id} class={styles.menu} role="menu" aria-label="Notifications" ref={props.menuRef}>
-			id={props.id}
-			classList={{
-				[styles.menu]: true,
-				[styles.menuWorkspace]: variant === "workspace",
-			}}
-			role="menu"
-			aria-label="Notifications"
-			ref={props.menuRef}
-		>
 			<div class={styles.header}>
 				<div class={styles.headerCopy}>
 					<strong class={styles.title}>Notifications</strong>

Frontend/src/components/shell/TopBar/NotificationsNav.tsx

@@ -1,38 +1,56 @@
-import { createUniqueId, Show, type JSX } from "solid-js";
+import { createEffect, createSignal, createUniqueId, onCleanup, type JSX } from "solid-js";
 import { NotificationsButton } from "./NotificationsButton";
 import { NotificationsMenu } from "./NotificationsMenu";
-import { createDesktopMenuController } from "./createDesktopMenuController";
 import styles from "./NotificationsNav.module.scss";
 
-type NotificationsNavProps = {
+export const NotificationsNav = (): JSX.Element => {
-	isMobileViewport: boolean;
+	const [isOpen, setIsOpen] = createSignal(false);
-	isMobileWorkspaceOpen: boolean;
-	onToggleMobileWorkspace: VoidFunction;
-};
-
-export const NotificationsNav = (props: NotificationsNavProps): JSX.Element => {
 	const menuId = createUniqueId();
+	let rootRef: HTMLDivElement | undefined;
+	let menuRef: HTMLDivElement | undefined;
+
+	const closeMenu = (): void => {
+		setIsOpen(false);
+	};
+
+	const toggleMenu = (): void => {
+		setIsOpen((open) => !open);
+	};
+
+	createEffect(() => {
+		if (!isOpen()) return;
+
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!rootRef) return;
+
+			const target = event.target;
+			if (target instanceof Node && !rootRef.contains(target)) {
+				closeMenu();
+			}
+		};
+
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				closeMenu();
+			}
+		};
+
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
+
+		onCleanup(() => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		});
+	});
 
 	return (
-		<Show
+		<div class={styles.root} ref={rootRef}>
-			when={props.isMobileViewport}
+			<NotificationsButton isOpen={isOpen()} menuId={menuId} onToggle={toggleMenu} />
-			fallback={<DesktopNotificationsNav />}
+			{isOpen() ? (
-		>
+				<NotificationsMenu id={menuId} menuRef={(element) => (menuRef = element)} onSelect={closeMenu} />
-			<div class={styles.root}>
+			) : null}
-				<NotificationsButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
-			</div>
-		</Show>
-	);
-};
-
-const DesktopNotificationsNav = (): JSX.Element => {
-	const controller = createDesktopMenuController();
-	const menuId = createUniqueId();
-
-	return (
-		<div class={styles.root} ref={controller.setRootRef}>
-			<NotificationsButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
-			{controller.isOpen() ? <NotificationsMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
 		</div>
 	);
 };

Frontend/src/components/shell/TopBar/ProfileMenu.module.scss

@@ -7,39 +7,11 @@
   gap: var(--space-3);
   padding: var(--space-3);
   border: 1px solid var(--color-border-strong);
-  border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
+  border-radius: calc(var(--radius-lg) + 0.1rem);
   background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
-  box-shadow: var(--shadow-strong);
+  box-shadow: 0 18px 36px color-mix(in srgb, black 16%, transparent);
-  backdrop-filter: blur(var(--blur-overlay));
+  backdrop-filter: blur(18px);
-  z-index: var(--z-dropdown);
+  z-index: 30;
-}
-
-.menu.menuWorkspace {
-  position: static;
-  top: auto;
-  right: auto;
-  left: auto;
-  bottom: auto;
-  width: 100%;
-  max-width: none;
-  height: 100%;
-  min-height: 0;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: var(--space-4);
-  padding: var(--space-4);
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  backdrop-filter: none;
-  z-index: auto;
-  overflow: hidden;
-}
-
-.sections {
-  display: grid;
-  gap: var(--space-3);
 }
 
 .summary {
@@ -99,7 +71,7 @@
 .summaryCopy {
   min-width: 0;
   display: grid;
-  gap: calc(var(--space-1) / 2);
+  gap: 0.08rem;
 }
 
 .name,
@@ -125,7 +97,7 @@
 
 .section {
   display: grid;
-  gap: var(--space-1);
+  gap: 0.2rem;
 }
 
 .section + .section {
@@ -136,7 +108,7 @@
 .item {
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--control-size-lg) + (var(--space-1) / 2));
+  min-height: 2.65rem;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
@@ -176,8 +148,8 @@
 }
 
 .itemIcon {
-  width: calc(var(--control-size-lg) - var(--space-2));
+  width: 1.9rem;
-  height: calc(var(--control-size-lg) - var(--space-2));
+  height: 1.9rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -186,15 +158,8 @@
   color: currentColor;
 }
 
-.menu.menuWorkspace .sections {
+@include respond-down(mobile) {
-  min-height: 0;
+  .menu {
-  height: 100%;
+    width: min(20rem, calc(100vw - (var(--space-3) * 2)));
-  align-content: start;
+  }
-  overflow-y: auto;
-}
-
-.menu.menuWorkspace .summary,
-.menu.menuWorkspace .sections {
-  padding-left: 0;
-  padding-right: 0;
 }

Frontend/src/components/shell/TopBar/ProfileMenu.tsx

@@ -5,25 +5,13 @@ import styles from "./ProfileMenu.module.scss";
 
 type ProfileMenuProps = {
 	id: string;
-	menuRef?: (element: HTMLDivElement) => void;
+	menuRef: (element: HTMLDivElement) => void;
 	onSelect: () => void;
-	variant?: "popover" | "workspace";
 };
 
 export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
-	const variant = props.variant ?? "popover";
-
 	return (
-		<div
+		<div id={props.id} class={styles.menu} role="menu" aria-label="Profile menu" ref={props.menuRef}>
-			id={props.id}
-			classList={{
-				[styles.menu]: true,
-				[styles.menuWorkspace]: variant === "workspace",
-			}}
-			role="menu"
-			aria-label="Profile menu"
-			ref={props.menuRef}
-		>
 			<div class={styles.summary}>
 				<div class={styles.avatar} aria-hidden="true">
 					<span class={styles.avatarRing} />
@@ -40,7 +28,6 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 				</div>
 			</div>
 
-			<div class={styles.sections}>
 			<For each={profileMenuSections}>
 				{(section): JSX.Element => (
 					<div class={styles.section}>
@@ -70,6 +57,5 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 				)}
 			</For>
 		</div>
-		</div>
 	);
 };

Frontend/src/components/shell/TopBar/TopBar.tsx

@@ -12,11 +12,6 @@ import styles from "./TopBar.module.scss";
 type TopBarProps = {
 	theme: Theme;
 	onToggleTheme: VoidFunction;
-	isMobileViewport: boolean;
-	isNotificationsOpen: boolean;
-	isProfileOpen: boolean;
-	onToggleNotifications: VoidFunction;
-	onToggleProfile: VoidFunction;
 };
 
 export const TopBar = (props: TopBarProps): JSX.Element => {
@@ -42,17 +37,9 @@ export const TopBar = (props: TopBarProps): JSX.Element => {
 					</For>
 				</div>
 
-				<NotificationsNav
+				<NotificationsNav />
-					isMobileViewport={props.isMobileViewport}
-					isMobileWorkspaceOpen={props.isNotificationsOpen}
-					onToggleMobileWorkspace={props.onToggleNotifications}
-				/>
 				<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
-				<UserNav
+				<UserNav />
-					isMobileViewport={props.isMobileViewport}
-					isMobileWorkspaceOpen={props.isProfileOpen}
-					onToggleMobileWorkspace={props.onToggleProfile}
-				/>
 			</div>
 		</header>
 	);

Frontend/src/components/shell/TopBar/UserNav.tsx

@@ -1,38 +1,54 @@
-import { createUniqueId, Show, type JSX } from "solid-js";
+import { createEffect, createSignal, createUniqueId, onCleanup, type JSX } from "solid-js";
 import { ProfileMenu } from "./ProfileMenu";
 import { UserNavButton } from "./UserNavButton";
-import { createDesktopMenuController } from "./createDesktopMenuController";
 import styles from "./UserNav.module.scss";
 
-type UserNavProps = {
+export const UserNav = (): JSX.Element => {
-	isMobileViewport: boolean;
+	const [isOpen, setIsOpen] = createSignal(false);
-	isMobileWorkspaceOpen: boolean;
-	onToggleMobileWorkspace: VoidFunction;
-};
-
-export const UserNav = (props: UserNavProps): JSX.Element => {
 	const menuId = createUniqueId();
+	let rootRef: HTMLDivElement | undefined;
+	let menuRef: HTMLDivElement | undefined;
+
+	const closeMenu = (): void => {
+		setIsOpen(false);
+	};
+
+	const toggleMenu = (): void => {
+		setIsOpen((open) => !open);
+	};
+
+	createEffect(() => {
+		if (!isOpen()) return;
+
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!rootRef) return;
+
+			const target = event.target;
+			if (target instanceof Node && !rootRef.contains(target)) {
+				closeMenu();
+			}
+		};
+
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				closeMenu();
+			}
+		};
+
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
+
+		onCleanup(() => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		});
+	});
 
 	return (
-		<Show
+		<div class={styles.root} ref={rootRef}>
-			when={props.isMobileViewport}
+			<UserNavButton isOpen={isOpen()} menuId={menuId} onToggle={toggleMenu} />
-			fallback={<DesktopUserNav />}
+			{isOpen() ? <ProfileMenu id={menuId} menuRef={(element) => (menuRef = element)} onSelect={closeMenu} /> : null}
-		>
-			<div class={styles.root}>
-				<UserNavButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
-			</div>
-		</Show>
-	);
-};
-
-const DesktopUserNav = (): JSX.Element => {
-	const controller = createDesktopMenuController();
-	const menuId = createUniqueId();
-
-	return (
-		<div class={styles.root} ref={controller.setRootRef}>
-			<UserNavButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
-			{controller.isOpen() ? <ProfileMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
 		</div>
 	);
 };

Frontend/src/components/shell/TopBar/createDesktopMenuController.ts

@@ -1,72 +0,0 @@
-import { createEffect, createSignal, onCleanup } from "solid-js";
-
-type DesktopMenuController = {
-	isOpen: () => boolean;
-	rootRef: HTMLDivElement | undefined;
-	menuRef: HTMLDivElement | undefined;
-	setRootRef: (element: HTMLDivElement) => void;
-	setMenuRef: (element: HTMLDivElement) => void;
-	closeMenu: VoidFunction;
-	toggleMenu: VoidFunction;
-};
-
-// Shared desktop popover behavior for top-bar menus.
-export const createDesktopMenuController = (): DesktopMenuController => {
-	const [isOpen, setIsOpen] = createSignal(false);
-	let rootRef: HTMLDivElement | undefined;
-	let menuRef: HTMLDivElement | undefined;
-
-	const closeMenu = (): void => {
-		setIsOpen(false);
-	};
-
-	const toggleMenu = (): void => {
-		setIsOpen((open) => !open);
-	};
-
-	createEffect(() => {
-		if (!isOpen()) return;
-
-		const handlePointerDown = (event: PointerEvent): void => {
-			if (!rootRef) return;
-
-			const target = event.target;
-			if (target instanceof Node && !rootRef.contains(target)) {
-				closeMenu();
-			}
-		};
-
-		const handleKeyDown = (event: KeyboardEvent): void => {
-			if (event.key === "Escape") {
-				closeMenu();
-			}
-		};
-
-		document.addEventListener("pointerdown", handlePointerDown);
-		document.addEventListener("keydown", handleKeyDown);
-		menuRef?.querySelector<HTMLButtonElement>("[role='menuitem']")?.focus();
-
-		onCleanup(() => {
-			document.removeEventListener("pointerdown", handlePointerDown);
-			document.removeEventListener("keydown", handleKeyDown);
-		});
-	});
-
-	return {
-		isOpen,
-		get rootRef() {
-			return rootRef;
-		},
-		get menuRef() {
-			return menuRef;
-		},
-		setRootRef: (element: HTMLDivElement): void => {
-			rootRef = element;
-		},
-		setMenuRef: (element: HTMLDivElement): void => {
-			menuRef = element;
-		},
-		closeMenu,
-		toggleMenu,
-	};
-};

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

@@ -19,7 +19,7 @@
 
 .headerActions {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-2);
   justify-items: stretch;
 }
@@ -91,7 +91,7 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: var(--space-1);
-	padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, var(--shell-dock-clearance)));
+  padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, 8rem));
   margin-right: calc(var(--space-1) * -1);
 }
 
@@ -107,22 +107,6 @@
   padding: 0;
 }
 
-.treeSectionLabel {
-  @include text-caption;
-  margin: var(--space-3) 0 var(--space-2);
-  padding: 0 var(--space-3);
-  color: var(--color-text-subtle);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.treeList {
-  list-style: none;
-  display: grid;
-  gap: var(--space-1);
-  padding: 0;
-}
-
 .navItem {
   width: 100%;
   min-width: 0;
@@ -137,45 +121,6 @@
   @include interactive-frame-hover(var(--color-surface-hover), transparent, var(--color-text));
 }
 
-.treeItem {
-  width: 100%;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: calc(var(--control-size-lg) - var(--space-2));
-  padding: var(--space-2) var(--space-3);
-  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-text-muted);
-  text-align: left;
-  transition:
-    background 160ms var(--easing-standard),
-    color 160ms var(--easing-standard),
-    border-color 160ms var(--easing-standard),
-    transform 180ms var(--easing-standard);
-}
-
-.treeItem:hover,
-.treeItem:focus-visible {
-  background: var(--color-surface-hover);
-  color: var(--color-text);
-}
-
-.treeItemFolder {
-  color: var(--color-text);
-}
-
-.treeItemActive {
-  border-color: var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
-}
-
 .navItemActive {
   border-color: var(--color-border);
   background: var(--color-surface);
@@ -204,7 +149,7 @@
 }
 
 .sidebarCollapsed .headerActions {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .sidebarCollapsed .headerControls {
@@ -230,9 +175,7 @@
 }
 
 .sidebarCollapsed .label,
-.sidebarCollapsed .itemMeta,
+.sidebarCollapsed .itemMeta {
-.sidebarCollapsed .treeSectionLabel,
-.sidebarCollapsed .treeList {
   display: none;
 }
 

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -3,7 +3,7 @@
 import { For, Show, createSignal, type JSX } from "solid-js";
 import { ChevronLeft, ChevronRight } from "../../../lib/icons";
 import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
-import { workspaceSidebarHeaderActions, workspaceStaticItems, workspaceTree, type SidebarItem, type WorkspaceTreeNode } from "../data/shell.data";
+import { serverSidebarItems, workspaceSidebarHeaderActions } from "../data/shell.data";
 import styles from "./WorkspaceSidebar.module.scss";
 
 type WorkspaceSidebarProps = {
@@ -12,72 +12,6 @@ type WorkspaceSidebarProps = {
 	onToggleRailCollapse: () => void;
 };
 
-const WorkspaceHomeEntry = (props: { item: SidebarItem }): JSX.Element => {
-	const Icon = props.item.icon;
-
-	return (
-		<li>
-			<button
-				type="button"
-				classList={{
-					[styles.navItem]: true,
-					[styles.navItemActive]: !!props.item.active,
-				}}
-				aria-current={props.item.active ? "page" : undefined}
-				aria-label={props.item.label}
-				title={props.item.label}
-			>
-				<Icon class={styles.icon} size={18} strokeWidth={2} />
-				<span class={styles.label}>{props.item.label}</span>
-				<Show when={props.item.meta}>
-					<span class={styles.itemMeta}>{props.item.meta}</span>
-				</Show>
-			</button>
-		</li>
-	);
-};
-
-const WorkspaceTreeBranch = (props: { nodes: readonly WorkspaceTreeNode[]; depth?: number }): JSX.Element => {
-	const depth = () => props.depth ?? 0;
-
-	return (
-		<ul class={styles.treeList} role="list">
-			<For each={props.nodes}>
-				{(node): JSX.Element => {
-					const Icon = node.icon;
-
-					return (
-						<li>
-							<button
-								type="button"
-								classList={{
-									[styles.treeItem]: true,
-									[styles.treeItemActive]: !!node.active,
-									[styles.treeItemFolder]: node.kind === "folder",
-								}}
-								style={{ "--tree-depth": String(depth()) }}
-								aria-current={node.active ? "page" : undefined}
-								aria-label={node.label}
-								title={node.label}
-							>
-								<Icon class={styles.icon} size={18} strokeWidth={2} />
-								<span class={styles.label}>{node.label}</span>
-								<Show when={node.meta}>
-									<span class={styles.itemMeta}>{node.meta}</span>
-								</Show>
-							</button>
-
-							<Show when={node.children?.length}>
-								<WorkspaceTreeBranch nodes={node.children ?? []} depth={depth() + 1} />
-							</Show>
-						</li>
-					);
-				}}
-			</For>
-		</ul>
-	);
-};
-
 export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 	const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
 	const railToggleLabel = (): string => (props.railCollapsed ? "Expand server rail" : "Collapse server rail");
@@ -144,18 +78,36 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 				}}
 			>
 				<Show when={!props.collapsed}>
-					<span class={styles.sectionLabel}>Workspace</span>
+					<span class={styles.sectionLabel}>Navigation</span>
 				</Show>
 				<div class={styles.navScroller}>
 					<ul class={styles.navList} role="list">
-						<For each={workspaceStaticItems}>{(item): JSX.Element => <WorkspaceHomeEntry item={item} />}</For>
+						<For each={serverSidebarItems}>
-					</ul>
+							{(item): JSX.Element => {
+								const Icon = item.icon;
 
-					<Show when={!props.collapsed}>
+								return (
-						<div class={styles.treeSectionLabel}>Items</div>
+									<li>
+										<button
+											type="button"
+											classList={{
+												[styles.navItem]: true,
+												[styles.navItemActive]: !!item.active,
+											}}
+											aria-label={item.label}
+											title={item.label}
+										>
+											<Icon class={styles.icon} size={18} strokeWidth={2} />
+											<span class={styles.label}>{item.label}</span>
+											<Show when={item.meta}>
+												<span class={styles.itemMeta}>{item.meta}</span>
 											</Show>
-
+										</button>
-					<WorkspaceTreeBranch nodes={workspaceTree} />
+									</li>
+								);
+							}}
+						</For>
+					</ul>
 				</div>
 			</div>
 		</aside>

Frontend/src/components/shell/data/shell.data.ts

@@ -4,12 +4,12 @@ import type { Component } from "solid-js";
 import {
 	Bell,
 	CircleHelp,
-	FileText,
 	Folder,
 	Home,
 	Keyboard,
 	LayoutGrid,
 	LogOut,
+	Plus,
 	Repeat,
 	Search,
 	Settings,
@@ -82,16 +82,6 @@ export type SidebarItem = {
 	meta?: string;
 };
 
-export type WorkspaceTreeNode = {
-	id: string;
-	label: string;
-	kind: "folder" | "board" | "doc";
-	icon: ShellIcon;
-	active?: boolean;
-	meta?: string;
-	children?: readonly WorkspaceTreeNode[];
-};
-
 export type SidebarHeaderAction = {
 	id: string;
 	label: string;
@@ -104,13 +94,6 @@ export type TopBarAction = {
 	icon: ShellIcon;
 };
 
-export type MobileBottomNavItem = {
-	id: string;
-	label: string;
-	icon: ShellIcon;
-	active?: boolean;
-};
-
 export type NotificationItem = {
 	id: string;
 	title: string;
@@ -189,55 +172,17 @@ export const departmentItems: readonly DepartmentItem[] = [
 ] as const;
 
 // Sidebar and topbar scaffold data
-// These static entries stay pinned in both desktop and mobile workspace navigation.
+export const serverSidebarItems: readonly SidebarItem[] = [
-export const workspaceStaticItems: readonly SidebarItem[] = [
 	{ id: "home", label: "Home", icon: Home, active: true },
-	{ id: "workspace-settings", label: "Settings", icon: Settings },
+	{ id: "boards", label: "Boards", icon: LayoutGrid, meta: "0" },
-] as const;
+	{ id: "docs", label: "Docs", icon: Folder, meta: "0" },
-
+	{ id: "settings", label: "Settings", icon: Settings },
-// Freeform workspace tree scaffold: folders, boards, and docs are first-class siblings.
-export const workspaceTree: readonly WorkspaceTreeNode[] = [
-	{
-		id: "product-workspace",
-		label: "Product",
-		kind: "folder",
-		icon: Folder,
-		children: [
-			{ id: "roadmap-board", label: "Roadmap", kind: "board", icon: LayoutGrid, active: true },
-			{ id: "launch-brief", label: "Launch Brief", kind: "doc", icon: FileText },
-			{
-				id: "research-folder",
-				label: "Research",
-				kind: "folder",
-				icon: Folder,
-				children: [
-					{ id: "interviews-doc", label: "Interviews", kind: "doc", icon: FileText },
-					{ id: "signals-board", label: "Signals", kind: "board", icon: LayoutGrid, meta: "2" },
-				],
-			},
-		],
-	},
-	{
-		id: "design-folder",
-		label: "Design",
-		kind: "folder",
-		icon: Folder,
-		children: [
-			{ id: "system-doc", label: "Design System", kind: "doc", icon: FileText },
-			{ id: "review-board", label: "Review Queue", kind: "board", icon: LayoutGrid },
-		],
-	},
-	{ id: "general-notes", label: "General Notes", kind: "doc", icon: FileText },
 ] as const;
 
 export const workspaceSidebarHeaderActions: readonly SidebarHeaderAction[] = [
+	{ id: "workspace-settings", label: "Workspace settings", icon: Settings },
 	{ id: "search-workspace", label: "Search workspace", icon: Search },
-] as const;
+	{ id: "create-board", label: "Create board", icon: Plus },
-
-export const mobileBottomNavItems: readonly MobileBottomNavItem[] = [
-	{ id: "home", label: "Home", icon: Home, active: true },
-	{ id: "search", label: "Search", icon: Search },
-	{ id: "browse", label: "Browse", icon: Folder },
 ] as const;
 
 export const topBarActions: readonly TopBarAction[] = [

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss

@@ -139,20 +139,23 @@
 @include respond-down(mobile) {
   .viewport {
     gap: var(--space-4);
-    padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
+    padding: var(--space-4);
   }
 
   .workspaceTopBar {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
 
-  .workspaceTopBarStart,
+  .workspaceTopBarEnd {
-  .workspaceTopBarEnd,
-  .workspaceCollapseButton {
     display: none;
   }
 
   .workspaceTopBarCenter {
     justify-content: flex-start;
   }
+
+	.workspaceCollapseButton {
+		width: calc(var(--control-size-md) - 0.5rem);
+		height: calc(var(--control-size-md) - 0.5rem);
+	}
 }

Frontend/src/lib/icons/index.ts

@@ -5,7 +5,6 @@ export { default as CircleHelp } from "lucide-solid/icons/circle-help";
 export { default as ChevronDown } from "lucide-solid/icons/chevron-down";
 export { default as ChevronLeft } from "lucide-solid/icons/chevron-left";
 export { default as ChevronRight } from "lucide-solid/icons/chevron-right";
-export { default as FileText } from "lucide-solid/icons/file-text";
 export { default as Folder } from "lucide-solid/icons/folder";
 export { default as Home } from "lucide-solid/icons/house";
 export { default as Keyboard } from "lucide-solid/icons/keyboard";
@@ -19,4 +18,3 @@ export { default as Settings } from "lucide-solid/icons/settings";
 export { default as Shield } from "lucide-solid/icons/shield";
 export { default as Sun } from "lucide-solid/icons/sun";
 export { default as User } from "lucide-solid/icons/user";
-export { default as X } from "lucide-solid/icons/x";