Feat: add route-backed settings pages

Frontend/package.json

@@ -17,6 +17,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@solidjs/router": "^0.16.1",
 		"@solidjs/start": "2.0.0-alpha.2",
 		"@solidjs/vite-plugin-nitro-2": "^0.1.0",
 		"lucide-solid": "^0.542.0",

Frontend/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@solidjs/router':
+        specifier: ^0.16.1
+        version: 0.16.1(solid-js@1.9.11)
       '@solidjs/start':
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(crossws@0.4.4(srvx@0.11.8))(vite@7.3.1(@types/node@25.9.3)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))
@@ -1210,6 +1213,11 @@ packages:
     peerDependencies:
       solid-js: '>=1.8.4'
 
+  '@solidjs/router@0.16.1':
+    resolution: {integrity: sha512-IhyjedgC6LRpw/8CPGGI89FrV+r0xTHzOl2c4CRyzYQ1bLepJxbVI1LLKvsavMWY5TRBRacV7hAeOhuTXkjiqg==}
+    peerDependencies:
+      solid-js: ^1.8.6
+
   '@solidjs/start@2.0.0-alpha.2':
     resolution: {integrity: sha512-z56ATi3P07q8F5Io2I+RQrwjyWZtFZzpXN/J+8scf/gqrAW83LtgRkZFZjJaGH7i9WrHP+ep9F+ZiJ2gDHVBcw==}
     engines: {node: '>=22'}
@@ -4485,6 +4493,10 @@ snapshots:
     dependencies:
       solid-js: 1.9.11
 
+  '@solidjs/router@0.16.1(solid-js@1.9.11)':
+    dependencies:
+      solid-js: 1.9.11
+
   '@solidjs/start@2.0.0-alpha.2(crossws@0.4.4(srvx@0.11.8))(vite@7.3.1(@types/node@25.9.3)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))':
     dependencies:
       '@babel/core': 7.29.0

Frontend/src/app.tsx

@@ -1,12 +1,17 @@
 // Path: Frontend/src/app.tsx
 
-import type { JSX } from "solid-js";
-import { AppShell } from "./components/app-shell/AppShell/AppShell";
+import { Suspense, type JSX } from "solid-js";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
 import "./styles/main.scss";
 import "./styles/user-overrides.scss";
 
 const App = (): JSX.Element => {
-	return <AppShell />;
+	return (
+		<Router root={(props): JSX.Element => <Suspense>{props.children}</Suspense>}>
+			<FileRoutes />
+		</Router>
+	);
 };
 
 export default App;

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

@@ -95,6 +95,8 @@
   min-width: 0;
   min-height: 0;
   position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
   z-index: 1;
   border-top: 1px solid var(--shell-frame-border);
@@ -103,6 +105,14 @@
   border-top-right-radius: 0;
 }
 
+.workspaceContent {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
 .mobileWorkspaceView {
   min-width: 0;
   min-height: 0;

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

@@ -1,10 +1,11 @@
 // Path: Frontend/src/components/app-shell/AppShell/AppShell.tsx
 
+import { useLocation } from "@solidjs/router";
 import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
 import { getDocumentTheme, setTheme, type Theme } from "../../../helper/themeRuntime";
 import { BootstrapWizard } from "../../bootstrap/BootstrapWizard/BootstrapWizard";
-import { WorkspaceHome } from "../../workspace-home/WorkspaceHome";
 import { AppShellDataProvider, useAppShellData } from "../data/app-shell.context";
+import { getWorkspaceBreadcrumbSegments } from "../data/workspace-routes";
 import { LeftRail } from "../../workspace-navigation/LeftRail/LeftRail";
 import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
 import { MobileWorkspaceBrowser } from "../../workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser";
@@ -19,7 +20,7 @@ import styles from "./AppShell.module.scss";
 type MobileWorkspaceView = "notifications" | "profile" | null;
 const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
 
-const AppShellContent = (): JSX.Element => {
+const AppShellContent = (props: { children: JSX.Element }): JSX.Element => {
 	const [themeState, setThemeState] = createSignal<Theme>("light");
 	const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
 	const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
@@ -27,6 +28,7 @@ const AppShellContent = (): JSX.Element => {
 	const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
 	const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
 	const appShellData = useAppShellData();
+	const location = useLocation();
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
@@ -82,7 +84,15 @@ const AppShellContent = (): JSX.Element => {
 		setActiveMobileWorkspaceView(null);
 	};
 
-	const workspaceBreadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
+	const workspaceBreadcrumb = (): string =>
+		[
+			appShellData.activeServer().name,
+			...getWorkspaceBreadcrumbSegments(location.pathname, {
+				activeProjectName: appShellData.activeProject().name,
+				activeDepartmentName: appShellData.activeDepartment().name,
+				activeTeamName: appShellData.activeDepartment().teamName,
+			}),
+		].join(" / ");
 
 	return (
 		<div class={styles.shell} data-ui="app-shell" data-app-shell-status={appShellData.status()}>
@@ -136,7 +146,9 @@ const AppShellContent = (): JSX.Element => {
 											setIsSidebarCollapsed((collapsed) => !collapsed);
 										}}
 									/>
-									<WorkspaceHome />
+									<div class={styles.workspaceContent} data-slot="workspace-content">
+										{props.children}
+									</div>
 								</>
 							}
 						>
@@ -175,10 +187,10 @@ const AppShellContent = (): JSX.Element => {
 	);
 };
 
-export const AppShell = (): JSX.Element => {
+export const AppShell = (props: { children: JSX.Element }): JSX.Element => {
 	return (
 		<AppShellDataProvider>
-			<AppShellContent />
+			<AppShellContent>{props.children}</AppShellContent>
 		</AppShellDataProvider>
 	);
 };

Frontend/src/components/app-shell/ServerDock/ServerDock.tsx

@@ -1,13 +1,22 @@
 // Path: Frontend/src/components/app-shell/ServerDock/ServerDock.tsx
 
 import { For, Show, type JSX } from "solid-js";
+import { useNavigate } from "@solidjs/router";
 import { useAppShellData } from "../data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../data/workspace-routes";
 import styles from "./ServerDock.module.scss";
 
 export const ServerDock = (): JSX.Element => {
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeServer = () => appShellData.activeServer();
 
+	const handleAction = (actionId: string): void => {
+		if (actionId === "settings" || actionId === "server") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+	};
+
 	return (
 		<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer().kind}>
 			<div class={styles.identity} data-slot="server-dock-identity">
@@ -35,7 +44,15 @@ export const ServerDock = (): JSX.Element => {
 							const Icon = item.icon;
 
 							return (
-								<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
+								<button
+									type="button"
+									class={styles.action}
+									aria-label={item.label}
+									title={item.label}
+									data-slot="server-dock-action"
+									data-action-id={item.id}
+									onClick={() => handleAction(item.id)}
+								>
 									<Icon size={16} strokeWidth={2} />
 									<span class={styles.actionLabel}>{item.label}</span>
 								</button>

Frontend/src/components/app-shell/data/shell.types.ts

@@ -103,10 +103,12 @@ export type SidebarItem = {
 
 export type WorkspaceStaticKind = "workspace" | "home" | "settings";
 
+export type WorkspaceStaticSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
+
 export type WorkspaceItemTypeId = string;
 
 export type WorkspaceStaticItem = SidebarItem & {
-	contextKind: WorkspaceStaticKind;
+	contextKind: WorkspaceStaticSurfaceKind;
 };
 
 export type WorkspaceFolderNode = {

Frontend/src/components/app-shell/data/workspace-routes.ts

@@ -0,0 +1,79 @@
+// Path: Frontend/src/components/app-shell/data/workspace-routes.ts
+
+import type { WorkspaceStaticKind } from "./shell.types";
+
+export type WorkspaceSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
+export type SettingsSectionKind = "account" | "workspace" | "server" | "theme" | "security" | "members";
+
+export type WorkspaceBreadcrumbContext = {
+	activeProjectName: string;
+	activeDepartmentName: string;
+	activeTeamName?: string;
+};
+
+const workspaceSurfaceRoutes: Record<WorkspaceSurfaceKind, string> = {
+	home: "/workspace/home",
+	settings: "/settings",
+};
+
+export const getWorkspaceSurfaceRoute = (surface: WorkspaceSurfaceKind): string => workspaceSurfaceRoutes[surface];
+
+const settingsSectionRoutes: Record<SettingsSectionKind, string> = {
+	account: "/settings/account",
+	workspace: "/settings/workspace",
+	server: "/settings/server",
+	theme: "/settings/theme",
+	security: "/settings/security",
+	members: "/settings/members",
+};
+
+export const getSettingsSectionRoute = (section: SettingsSectionKind): string => settingsSectionRoutes[section];
+
+export const getWorkspaceSurfaceFromPathname = (pathname: string): WorkspaceSurfaceKind => {
+	if (pathname.startsWith(workspaceSurfaceRoutes.settings) || pathname.startsWith("/workspace/settings")) {
+		return "settings";
+	}
+
+	return "home";
+};
+
+export const getWorkspaceSurfaceBreadcrumbLabel = (pathname: string): string => {
+	const surface = getWorkspaceSurfaceFromPathname(pathname);
+	return surface === "settings" ? "Settings" : "Home";
+};
+
+const getSettingsSectionFromPathname = (pathname: string): SettingsSectionKind | null => {
+	const matchedEntry = (Object.entries(settingsSectionRoutes) as Array<[SettingsSectionKind, string]>).find(([, route]) => pathname.startsWith(route));
+
+	return matchedEntry?.[0] ?? null;
+};
+
+export const getWorkspaceBreadcrumbSegments = (
+	pathname: string,
+	context: WorkspaceBreadcrumbContext,
+): string[] => {
+	const settingsSection = getSettingsSectionFromPathname(pathname);
+
+	if (pathname === workspaceSurfaceRoutes.settings || pathname === "/workspace/settings") {
+		return ["Settings"];
+	}
+
+	if (settingsSection) {
+		switch (settingsSection) {
+			case "account":
+				return ["Users", "Settings"];
+			case "workspace":
+				return [context.activeProjectName, "Settings"];
+			case "server":
+				return ["Settings"];
+			case "theme":
+				return ["Personal", "Settings"];
+			case "security":
+				return ["Users", "Settings"];
+			case "members":
+				return [context.activeTeamName || context.activeDepartmentName || "Members", "Users"];
+		}
+	}
+
+	return [context.activeProjectName, getWorkspaceSurfaceBreadcrumbLabel(pathname)];
+};

Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.module.scss

@@ -0,0 +1,86 @@
+// Path: Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.module.scss
+
+.viewport {
+	width: 100%;
+	max-width: min(72rem, 100%);
+	min-height: 100%;
+	padding: var(--space-5) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-6);
+	align-content: start;
+}
+
+.hero,
+.panel {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	background: var(--color-surface-raised);
+	box-shadow: var(--shadow-sm);
+	padding: var(--space-6);
+	display: grid;
+	gap: var(--space-2);
+}
+
+.hero {
+	border-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
+	box-shadow:
+		0 10px 24px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+.backLink {
+	width: fit-content;
+	text-decoration: none;
+	color: color-mix(in srgb, var(--color-accent) 34%, var(--color-text-primary));
+	@include text-label;
+}
+
+.backLink:hover {
+	text-decoration: underline;
+}
+
+.title,
+.panelTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	line-height: 1.02;
+	letter-spacing: -0.02em;
+}
+
+.panelTitle {
+	@include text-title;
+	line-height: 1.12;
+}
+
+.description,
+.focusList {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.focusList {
+	padding-left: 1.1rem;
+	display: grid;
+	gap: 0.35rem;
+}
+
+.focusList li::marker {
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-secondary));
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
+	}
+
+	.hero,
+	.panel {
+		padding: var(--space-4);
+	}
+}

Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.tsx

@@ -0,0 +1,32 @@
+// Path: Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.tsx
+
+import { A } from "@solidjs/router";
+import { For, type JSX } from "solid-js";
+import styles from "./SettingsDetailPage.module.scss";
+
+type SettingsDetailPageProps = {
+	title: string;
+	description: string;
+	focus: readonly string[];
+};
+
+export const SettingsDetailPage = (props: SettingsDetailPageProps): JSX.Element => {
+	return (
+		<main class={styles.viewport}>
+			<section class={styles.hero}>
+				<A class={styles.backLink} href="/settings">
+					Back to Settings
+				</A>
+				<h1 class={styles.title}>{props.title}</h1>
+				<p class={styles.description}>{props.description}</p>
+			</section>
+
+			<section class={styles.panel}>
+				<h2 class={styles.panelTitle}>Focus areas</h2>
+				<ul class={styles.focusList}>
+					<For each={props.focus}>{(item) => <li>{item}</li>}</For>
+				</ul>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.module.scss

@@ -0,0 +1,229 @@
+// Path: Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.module.scss
+
+.viewport {
+	--settings-page-max-width: min(88rem, 100%);
+
+	min-height: 100%;
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-6);
+	padding-top: var(--space-5);
+	padding-right: var(--space-6);
+	padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
+	padding-left: var(--space-6);
+	align-content: start;
+}
+
+.hero {
+	display: grid;
+	gap: var(--space-4);
+	width: 100%;
+	max-width: var(--settings-page-max-width);
+	padding-inline: var(--space-6);
+	box-sizing: border-box;
+}
+
+.heroCopy,
+.card {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	box-shadow: var(--shadow-sm);
+}
+
+.heroCopy {
+	padding: var(--space-6);
+	display: grid;
+	gap: var(--space-2);
+	position: relative;
+	background: var(--color-surface-raised);
+	border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border-subtle));
+	box-shadow:
+		0 12px 28px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+	.eyebrow,
+	.sectionEyebrow {
+		margin: 0;
+		color: color-mix(in srgb, var(--color-accent) 42%, var(--color-text-tertiary));
+	@include text-label;
+}
+
+.title,
+.sectionTitle,
+.cardTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	max-width: 13ch;
+	text-wrap: balance;
+	letter-spacing: -0.025em;
+	line-height: 1.02;
+}
+
+	.description,
+	.sectionDescription,
+	.cardDescription,
+	.focusList {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.focusList {
+	padding-left: 1.1rem;
+	display: grid;
+	gap: 0.45rem;
+}
+
+.sectionStack {
+	width: 100%;
+	max-width: var(--settings-page-max-width);
+	display: grid;
+	gap: var(--space-5);
+	padding-inline: var(--space-6);
+	box-sizing: border-box;
+}
+
+.section {
+	display: grid;
+	gap: var(--space-4);
+}
+
+.sectionHeader {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.sectionTitle {
+	@include text-title;
+}
+
+.cardGrid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--space-4);
+}
+
+.card {
+	padding: var(--space-5);
+	display: grid;
+	gap: var(--space-3);
+	align-items: start;
+	text-decoration: none;
+	color: inherit;
+	position: relative;
+	background: var(--color-surface-raised);
+	transition:
+		transform 120ms ease,
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card::before {
+	content: none;
+}
+
+.card::after {
+	content: none;
+}
+
+.card:hover {
+	transform: translateY(-1px);
+	border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-md);
+}
+
+.card:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--color-accent) 54%, transparent);
+	outline-offset: 2px;
+	border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border-strong));
+	box-shadow: var(--shadow-md);
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	position: relative;
+	z-index: 1;
+}
+
+.cardIconWrap {
+	width: 2.75rem;
+	height: 2.75rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-lg);
+	background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, transparent), color-mix(in srgb, var(--color-accent-soft) 22%, transparent));
+	color: var(--color-text-primary);
+	border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border-subtle));
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+		0 6px 14px color-mix(in srgb, var(--color-accent) 7%, transparent);
+}
+
+.cardBody {
+	display: grid;
+	gap: var(--space-2);
+	position: relative;
+	z-index: 1;
+}
+
+.cardTitle {
+	@include text-title;
+	line-height: 1.1;
+}
+
+.focusList li::marker {
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-secondary));
+}
+
+.card:nth-child(2n) .cardIconWrap {
+	background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 14%, transparent), color-mix(in srgb, var(--color-accent-soft) 22%, transparent));
+	border-color: color-mix(in srgb, #8b5cf6 16%, var(--color-border-subtle));
+}
+
+.card:nth-child(3n) .cardIconWrap {
+	background: linear-gradient(180deg, color-mix(in srgb, #06b6d4 12%, transparent), color-mix(in srgb, var(--color-accent) 18%, transparent));
+	border-color: color-mix(in srgb, #06b6d4 14%, var(--color-border-subtle));
+}
+
+@media (max-width: 64rem) {
+	.cardGrid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding-top: var(--space-4);
+		padding-right: var(--space-4);
+		padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
+		padding-left: var(--space-4);
+	}
+
+	.hero,
+	.sectionStack {
+		padding-inline: var(--space-4);
+	}
+
+	.heroCopy,
+	.card {
+		padding: var(--space-4);
+	}
+
+	.cardHeader {
+		align-items: flex-start;
+	}
+
+	.title {
+		max-width: none;
+	}
+}

Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.tsx

@@ -0,0 +1,95 @@
+// Path: Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.tsx
+
+import { A } from "@solidjs/router";
+import { For, type JSX } from "solid-js";
+import { Bell, Home, Moon, Shield, Settings, User } from "../../../lib/icons";
+import { getSettingsSectionRoute } from "../../app-shell/data/workspace-routes";
+import styles from "./SettingsWorkspace.module.scss";
+
+const sections = [
+	{
+		title: "Account Settings",
+		description: "Profile, identity, and account preferences for the active user.",
+		icon: User,
+		href: getSettingsSectionRoute("account"),
+		focus: ["Profile", "Notifications", "Personal defaults"],
+	},
+	{
+		title: "Workspace Settings",
+		description: "Core workspace behavior mapped to the project-level `settings.cbor` surface.",
+		icon: Home,
+		href: getSettingsSectionRoute("workspace"),
+		focus: ["Navigation defaults", "Workspace behavior", "Content rules"],
+	},
+	{
+		title: "Server Settings",
+		description: "Organization and server-wide controls that should live above individual workspaces.",
+		icon: Settings,
+		href: getSettingsSectionRoute("server"),
+		focus: ["Server identity", "Policies", "Operational defaults"],
+	},
+	{
+		title: "Theme Settings",
+		description: "Theme preferences and presentation settings that should eventually map cleanly to POSIX-backed configuration.",
+		icon: Moon,
+		href: getSettingsSectionRoute("theme"),
+		focus: ["Theme preset", "Density", "Visual preferences"],
+	},
+	{
+		title: "Security Settings",
+		description: "Authentication, sessions, and access hardening for users and organizations.",
+		icon: Shield,
+		href: getSettingsSectionRoute("security"),
+		focus: ["Sessions", "Access controls", "Recovery"],
+	},
+	{
+		title: "Members & Roles",
+		description: "People, invitations, and organization-level permission management.",
+		icon: Bell,
+		href: getSettingsSectionRoute("members"),
+		focus: ["Members", "Roles", "Invitations"],
+	},
+] as const;
+
+export const SettingsWorkspace = (): JSX.Element => {
+	return (
+		<main class={styles.viewport} data-ui="workspace-settings-page">
+			<section class={styles.hero}>
+				<div class={styles.heroCopy}>
+					<h1 class={styles.title}>Settings</h1>
+				</div>
+			</section>
+
+			<section class={styles.sectionStack}>
+				<section class={styles.section}>
+					<div class={styles.cardGrid}>
+						<For each={sections}>
+							{(section) => {
+								const Icon = section.icon;
+
+								return (
+									<A class={styles.card} href={section.href}>
+										<div class={styles.cardHeader}>
+											<div class={styles.cardIconWrap}>
+												<Icon size={18} strokeWidth={2} />
+											</div>
+										</div>
+
+										<div class={styles.cardBody}>
+											<h3 class={styles.cardTitle}>{section.title}</h3>
+											<p class={styles.cardDescription}>{section.description}</p>
+
+											<ul class={styles.focusList}>
+												<For each={section.focus}>{(focus) => <li>{focus}</li>}</For>
+											</ul>
+										</div>
+									</A>
+								);
+							}}
+						</For>
+					</div>
+				</section>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/top-bar/TopBar/ProfileMenu.tsx

@@ -1,6 +1,8 @@
+import { useNavigate } from "@solidjs/router";
 import { For, type JSX } from "solid-js";
 import { User } from "../../../lib/icons";
 import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import { profileMenuSections } from "../../app-shell/data/shell.data";
 import styles from "./ProfileMenu.module.scss";
 
@@ -14,8 +16,17 @@ type ProfileMenuProps = {
 export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 	const variant = props.variant ?? "popover";
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeUserProfile = () => appShellData.activeUserProfile();
 
+	const handleSelect = (actionId: string): void => {
+		if (actionId === "account-settings" || actionId === "security" || actionId === "theme-preferences") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+
+		props.onSelect();
+	};
+
 	return (
 		<div
 			id={props.id}
@@ -61,11 +72,11 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 											[styles.item]: true,
 											[styles.itemDanger]: item.tone === "danger",
 										}}
-										data-slot="profile-action"
-										data-action-id={item.id}
-										data-tone={item.tone ?? "default"}
-										onClick={props.onSelect}
-										>
+									data-slot="profile-action"
+									data-action-id={item.id}
+									data-tone={item.tone ?? "default"}
+									onClick={() => handleSelect(item.id)}
+									>
 											<span class={styles.itemIcon} aria-hidden="true">
 												<Icon size={16} strokeWidth={2} />
 											</span>

Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.parts.tsx

@@ -1,8 +1,10 @@
 // Path: Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.parts.tsx
 
+import { useLocation, useNavigate } from "@solidjs/router";
 import { For, Show, type JSX } from "solid-js";
 import { ChevronRight } from "../../../lib/icons";
 import { createLongPressGesture } from "../../../helper/createLongPressGesture";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceTreeTarget,
@@ -72,8 +74,12 @@ export const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
 export const WorkspaceStaticRow = (props: {
 	item: WorkspaceStaticItem;
 	onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
+	onSelect: VoidFunction;
 }): JSX.Element => {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const target = createWorkspaceStaticTarget(props.item);
+	const isActive = (): boolean => location.pathname === getWorkspaceSurfaceRoute(props.item.contextKind);
 	const longPress = createLongPressGesture({
 		onLongPress: () => {
 			props.onOpenActionSheet(target);
@@ -84,16 +90,20 @@ export const WorkspaceStaticRow = (props: {
 		<li
 			class={styles.treeListItem}
 			data-slot="mobile-workspace-static-item"
-			data-target-kind={target.kind}
-			onContextMenu={(event): void => {
-				event.preventDefault();
-				props.onOpenActionSheet(target);
-			}}
-			{...longPress}
-		>
-			<StaticRow item={props.item} />
-		</li>
-	);
+				data-target-kind={target.kind}
+				onContextMenu={(event): void => {
+					event.preventDefault();
+					props.onOpenActionSheet(target);
+				}}
+				onClick={(): void => {
+					navigate(getWorkspaceSurfaceRoute(props.item.contextKind));
+					props.onSelect();
+				}}
+				{...longPress}
+			>
+				<StaticRow item={{ ...props.item, active: isActive() }} />
+			</li>
+		);
 };
 
 export const WorkspaceTreeBranch = (props: {

Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx

@@ -72,12 +72,14 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
 					<div class={styles.sheetBody} data-slot="mobile-workspace-body">
 						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="workspace">
 							<span class={styles.sectionLabel}>Workspace</span>
-							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
-								<For each={workspaceStaticItems}>
-									{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
-								</For>
-							</ul>
-						</section>
+						<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
+							<For each={workspaceStaticItems}>
+								{(item): JSX.Element => (
+									<WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} onSelect={props.onClose} />
+								)}
+							</For>
+						</ul>
+					</section>
 
 						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="items">
 							<span class={styles.sectionLabel}>Items</span>

Frontend/src/components/workspace-navigation/WorkspaceSidebar/WorkspaceSidebar.parts.tsx

@@ -1,7 +1,9 @@
 // Path: Frontend/src/components/workspace-navigation/WorkspaceSidebar/WorkspaceSidebar.parts.tsx
 
+import { useLocation, useNavigate } from "@solidjs/router";
 import { For, Show, type JSX } from "solid-js";
 import { ChevronRight, Folder } from "../../../lib/icons";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceTreeTarget,
@@ -66,8 +68,11 @@ export const WorkspaceHomeEntry = (props: {
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
 }): JSX.Element => {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const Icon = props.item.icon;
 	const target = createWorkspaceStaticTarget(props.item);
+	const isActive = (): boolean => location.pathname === getWorkspaceSurfaceRoute(props.item.contextKind);
 
 	return (
 		<li>
@@ -75,14 +80,17 @@ export const WorkspaceHomeEntry = (props: {
 				type="button"
 				classList={{
 					[styles.navItem]: true,
-					[styles.navItemActive]: !!props.item.active,
+					[styles.navItemActive]: isActive(),
 				}}
-				aria-current={props.item.active ? "page" : undefined}
+				aria-current={isActive() ? "page" : undefined}
 				aria-label={props.item.label}
 				title={props.item.label}
 				data-slot="workspace-static-item"
 				data-target-kind={target.kind}
-				data-active={props.item.active ? "true" : "false"}
+				data-active={isActive() ? "true" : "false"}
+				onClick={(): void => {
+					navigate(getWorkspaceSurfaceRoute(props.item.contextKind));
+				}}
 				onContextMenu={(event): void => {
 					event.stopPropagation();
 					props.onOpenContextMenu(event, target);

Frontend/src/routes/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const IndexRoute = (): JSX.Element => {
+	return <Navigate href="/workspace/home" />;
+};
+
+export default IndexRoute;

Frontend/src/routes/settings.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+import { AppShell } from "../components/app-shell/AppShell/AppShell";
+
+const SettingsLayoutRoute = (props: RouteSectionProps) => {
+	return <AppShell>{props.children}</AppShell>;
+};
+
+export default SettingsLayoutRoute;

Frontend/src/routes/settings/account.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/account.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsAccountRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Account Settings"
+			description="Manage the active user account, profile details, notifications, and personal defaults."
+			focus={["Profile", "Notifications", "Personal defaults"]}
+		/>
+	);
+};
+
+export default SettingsAccountRoute;

Frontend/src/routes/settings/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings/index.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsWorkspace } from "../../components/settings/SettingsWorkspace/SettingsWorkspace";
+
+const SettingsIndexRoute = (): JSX.Element => {
+	return <SettingsWorkspace />;
+};
+
+export default SettingsIndexRoute;

Frontend/src/routes/settings/members.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/members.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsMembersRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Members & Roles"
+			description="Manage people, invitations, roles, and permission assignments across the organization structure."
+			focus={["Members", "Roles", "Invitations"]}
+		/>
+	);
+};
+
+export default SettingsMembersRoute;

Frontend/src/routes/settings/security.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/security.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsSecurityRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Security Settings"
+			description="Review sessions, access controls, and account recovery settings for users and organizations."
+			focus={["Sessions", "Access controls", "Recovery"]}
+		/>
+	);
+};
+
+export default SettingsSecurityRoute;

Frontend/src/routes/settings/server.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/server.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsServerRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Server Settings"
+			description="Manage server-wide controls, identity, and policy defaults that apply across workspaces."
+			focus={["Server identity", "Policies", "Operational defaults"]}
+		/>
+	);
+};
+
+export default SettingsServerRoute;

Frontend/src/routes/settings/theme.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/theme.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsThemeRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Theme Settings"
+			description="Choose the visual presentation, density, and theming preferences for the current user."
+			focus={["Theme preset", "Density", "Visual preferences"]}
+		/>
+	);
+};
+
+export default SettingsThemeRoute;

Frontend/src/routes/settings/workspace.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/workspace.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsWorkspaceRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Workspace Settings"
+			description="Control workspace-level behavior, structure defaults, and the way content behaves inside this workspace."
+			focus={["Navigation defaults", "Workspace behavior", "Content rules"]}
+		/>
+	);
+};
+
+export default SettingsWorkspaceRoute;

Frontend/src/routes/workspace.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+import { AppShell } from "../components/app-shell/AppShell/AppShell";
+
+const WorkspaceLayout = (props: RouteSectionProps) => {
+	return <AppShell>{props.children}</AppShell>;
+};
+
+export default WorkspaceLayout;

Frontend/src/routes/workspace/home.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/home.tsx
+
+import { type JSX } from "solid-js";
+import { WorkspaceHome } from "../../components/workspace-home/WorkspaceHome";
+
+const WorkspaceHomeRoute = (): JSX.Element => {
+	return <WorkspaceHome />;
+};
+
+export default WorkspaceHomeRoute;

Frontend/src/routes/workspace/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceIndexRoute = (): JSX.Element => {
+	return <Navigate href="/workspace/home" />;
+};
+
+export default WorkspaceIndexRoute;

Frontend/src/routes/workspace/settings.tsx

@@ -0,0 +1,9 @@
+// Path: Frontend/src/routes/workspace/settings.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+
+const WorkspaceSettingsLayoutRoute = (props: RouteSectionProps) => {
+	return props.children;
+};
+
+export default WorkspaceSettingsLayoutRoute;

Frontend/src/routes/workspace/settings/account.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/account.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsAccountRoute = (): JSX.Element => {
+	return <Navigate href="/settings/account" />;
+};
+
+export default WorkspaceSettingsAccountRoute;

Frontend/src/routes/workspace/settings/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsIndexRoute = (): JSX.Element => {
+	return <Navigate href="/settings" />;
+};
+
+export default WorkspaceSettingsIndexRoute;

Frontend/src/routes/workspace/settings/members.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/members.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsMembersRoute = (): JSX.Element => {
+	return <Navigate href="/settings/members" />;
+};
+
+export default WorkspaceSettingsMembersRoute;

Frontend/src/routes/workspace/settings/security.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/security.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsSecurityRoute = (): JSX.Element => {
+	return <Navigate href="/settings/security" />;
+};
+
+export default WorkspaceSettingsSecurityRoute;

Frontend/src/routes/workspace/settings/server.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/server.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsServerRoute = (): JSX.Element => {
+	return <Navigate href="/settings/server" />;
+};
+
+export default WorkspaceSettingsServerRoute;

Frontend/src/routes/workspace/settings/theme.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/theme.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsThemeRoute = (): JSX.Element => {
+	return <Navigate href="/settings/theme" />;
+};
+
+export default WorkspaceSettingsThemeRoute;

Frontend/src/routes/workspace/settings/workspace.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/workspace.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsWorkspaceRoute = (): JSX.Element => {
+	return <Navigate href="/settings/workspace" />;
+};
+
+export default WorkspaceSettingsWorkspaceRoute;