From f565cfc67049ad42d2b5227c8d03a11f466a85fe Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Thu, 19 Mar 2026 06:27:42 +0000
Subject: [PATCH] Unifisert ContextHeader: innstillinger, fargevelger, slett,
 tema-modul
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ContextHeader brukes nå på både personlig flate og samlinger
- Ny theme.ts: ThemeConfig med hue+saturation per farge, presets
  (Standard, Hav, Skog, Solnedgang, Lavendel, Monokrom)
- Fargevelger med hue-stripe (regnbue) + saturation-slider + swatch
  per farge (bakgrunn, overflate, aksent)
- Slett arbeidsflate med bekreftelsesdialog og innholdstelling
- Kontekst-velger: grupper, rename, ny, slett — fungerer overalt
- +page.svelte forenklet: ~500 linjer CSS fjernet, bruker ContextHeader

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/ContextHeader.svelte   | 831 ++++++++++------
 frontend/src/lib/workspace/theme.ts           | 171 ++++
 frontend/src/routes/+page.svelte              | 884 +-----------------
 3 files changed, 746 insertions(+), 1140 deletions(-)
 create mode 100644 frontend/src/lib/workspace/theme.ts

diff --git a/frontend/src/lib/components/ContextHeader.svelte b/frontend/src/lib/components/ContextHeader.svelte
index 4746402..dfaf69f 100644
--- a/frontend/src/lib/components/ContextHeader.svelte
+++ b/frontend/src/lib/components/ContextHeader.svelte
@@ -1,63 +1,78 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import { signOut } from '@auth/sveltekit/client';
 	import { connectionState, nodeStore, edgeStore, nodeAccessStore, nodeVisibility } from '$lib/realtime';
 	import type { Node } from '$lib/realtime';
 	import { getRankedNodeIds, recordVisit } from '$lib/workspace/recency.js';
-	import { TRAIT_PANEL_INFO, getPanelInfo } from '$lib/workspace/types.js';
+	import { TRAIT_PANEL_INFO } from '$lib/workspace/types.js';
+	import { updateNode, createNode, createEdge, deleteNode } from '$lib/api';
+	import {
+		type ThemeConfig,
+		DEFAULT_THEME,
+		THEME_PRESETS,
+		applyTheme,
+		themeColorCSS,
+	} from '$lib/workspace/theme.js';
 
 	interface Props {
-		/** Current collection node ID */
-		collectionId: string;
-		/** Current collection node (if loaded) */
-		collectionNode: Node | undefined;
+		/** Collection ID (undefined = personal workspace) */
+		collectionId?: string;
+		/** Collection node (if loaded) */
+		collectionNode?: Node | undefined;
 		/** Current user's node ID */
 		userId: string | undefined;
+		/** Access token for API calls */
+		accessToken?: string | undefined;
 		/** Whether WebSocket is connected */
 		connected: boolean;
 		/** Active trait names on this collection */
-		traitNames: string[];
+		traitNames?: string[];
 		/** Callback to toggle trait admin panel */
-		onToggleTraitAdmin: () => void;
+		onToggleTraitAdmin?: () => void;
 		/** Whether trait admin is currently shown */
-		showTraitAdmin: boolean;
+		showTraitAdmin?: boolean;
 		/** Callback to add a panel/trait to the workspace */
 		onAddPanel: (trait: string) => void;
-		/** Traits already visible on the workspace (to grey out in tool menu) */
+		/** Traits already visible on the workspace */
 		activeTraits: string[];
+		/** Current theme config */
+		theme?: ThemeConfig;
+		/** Callback when theme changes */
+		onThemeChange?: (theme: ThemeConfig) => void;
 	}
 
 	let {
 		collectionId,
 		collectionNode,
 		userId,
+		accessToken,
 		connected,
-		traitNames,
+		traitNames = [],
 		onToggleTraitAdmin,
-		showTraitAdmin,
+		showTraitAdmin = false,
 		onAddPanel,
 		activeTraits,
+		theme = DEFAULT_THEME,
+		onThemeChange,
 	}: Props = $props();
 
+	const isPersonalWorkspace = $derived(!collectionId);
+
 	// =========================================================================
-	// Context selector (dropdown)
+	// Context selector
 	// =========================================================================
 
 	let selectorOpen = $state(false);
 	let searchQuery = $state('');
 	let searchInput = $state<HTMLInputElement | undefined>(undefined);
 
-	// Record visit when collection changes
 	$effect(() => {
-		if (collectionId) {
-			recordVisit(collectionId);
-		}
+		if (collectionId) recordVisit(collectionId);
 	});
 
-	/** All collection nodes the user can access, ranked by recency/frequency */
 	const collectionNodes = $derived.by((): Node[] => {
 		if (!connected || !userId) return [];
-
-		// Gather all accessible node IDs
 		const accessibleIds = new Set<string>();
 		for (const edge of edgeStore.bySource(userId)) {
 			if (!edge.system) accessibleIds.add(edge.targetId);
@@ -65,8 +80,6 @@
 		for (const id of nodeAccessStore.objectsForSubject(userId)) {
 			accessibleIds.add(id);
 		}
-
-		// Filter to collection nodes
 		const collections: Node[] = [];
 		for (const id of accessibleIds) {
 			const node = nodeStore.get(id);
@@ -74,61 +87,137 @@
 				collections.push(node);
 			}
 		}
-
-		// Sort by recency ranking
 		const ranked = getRankedNodeIds();
 		const rankMap = new Map(ranked.map((id, i) => [id, i]));
-
 		collections.sort((a, b) => {
 			const ra = rankMap.get(a.id) ?? 999;
 			const rb = rankMap.get(b.id) ?? 999;
 			if (ra !== rb) return ra - rb;
-			// Fallback: alphabetical
 			return (a.title ?? '').localeCompare(b.title ?? '');
 		});
-
 		return collections;
 	});
 
-	/** Filtered by search query */
 	const filteredCollections = $derived.by(() => {
 		if (!searchQuery.trim()) return collectionNodes;
 		const q = searchQuery.toLowerCase().trim();
-		return collectionNodes.filter(n =>
-			(n.title ?? '').toLowerCase().includes(q)
-		);
+		return collectionNodes.filter(n => (n.title ?? '').toLowerCase().includes(q));
 	});
 
+	const myCollections = $derived(filteredCollections.filter(n => n.createdBy === userId));
+	const sharedCollections = $derived(filteredCollections.filter(n => n.createdBy !== userId));
+
+	// --- Rename ---
+	let renamingId = $state<string | undefined>(undefined);
+	let renameValue = $state('');
+
+	function startRename(node: Node) {
+		renamingId = node.id;
+		renameValue = node.title || '';
+		requestAnimationFrame(() => {
+			const input = document.querySelector('.context-selector-rename-input') as HTMLInputElement;
+			input?.focus();
+			input?.select();
+		});
+	}
+
+	async function commitRename() {
+		if (!renamingId || !accessToken) return;
+		const id = renamingId;
+		renamingId = undefined;
+		if (renameValue.trim()) {
+			try {
+				await updateNode(accessToken, { node_id: id, title: renameValue.trim() });
+			} catch (e) {
+				console.error('Feil ved omdøping:', e);
+			}
+		}
+	}
+
+	function handleRenameKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') { e.preventDefault(); commitRename(); }
+		if (e.key === 'Escape') { renamingId = undefined; }
+	}
+
+	// --- Create new ---
+	let isCreatingWorkspace = $state(false);
+
+	async function createNewWorkspace() {
+		if (!accessToken || !userId || isCreatingWorkspace) return;
+		isCreatingWorkspace = true;
+		selectorOpen = false;
+		try {
+			const { node_id } = await createNode(accessToken, {
+				node_kind: 'collection',
+				title: 'Ny arbeidsflate',
+				visibility: 'hidden',
+				metadata: {
+					traits: { chat: {}, editor: {}, kanban: {}, calendar: {} },
+				},
+			});
+			await createEdge(accessToken, {
+				source_id: userId,
+				target_id: node_id,
+				edge_type: 'owner',
+			});
+			goto(`/collection/${node_id}`);
+		} catch (e) {
+			console.error('Feil ved oppretting av arbeidsflate:', e);
+		} finally {
+			isCreatingWorkspace = false;
+		}
+	}
+
+	// --- Delete ---
+	let deletingId = $state<string | undefined>(undefined);
+	let deleteChildCount = $state(0);
+
+	function startDelete(node: Node) {
+		deletingId = node.id;
+		// Count child nodes
+		let count = 0;
+		for (const edge of edgeStore.byTarget(node.id)) {
+			if (edge.edgeType === 'belongs_to') count++;
+		}
+		deleteChildCount = count;
+	}
+
+	async function confirmDelete() {
+		if (!deletingId || !accessToken) return;
+		const id = deletingId;
+		deletingId = undefined;
+		selectorOpen = false;
+		try {
+			await deleteNode(accessToken, id);
+			if (collectionId === id) goto('/');
+		} catch (e) {
+			console.error('Feil ved sletting:', e);
+		}
+	}
+
 	function toggleSelector() {
 		selectorOpen = !selectorOpen;
 		toolMenuOpen = false;
+		settingsOpen = false;
 		if (selectorOpen) {
 			searchQuery = '';
-			// Focus search input after DOM update
+			renamingId = undefined;
+			deletingId = undefined;
 			requestAnimationFrame(() => searchInput?.focus());
 		}
 	}
 
 	function selectCollection(id: string) {
 		selectorOpen = false;
-		if (id !== collectionId) {
-			goto(`/collection/${id}`);
-		}
-	}
-
-	function handleSelectorKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			selectorOpen = false;
-		}
+		if (id !== collectionId) goto(`/collection/${id}`);
 	}
 
 	// =========================================================================
-	// Tool menu (add panels)
+	// Tool menu
 	// =========================================================================
 
 	let toolMenuOpen = $state(false);
 
-	/** Available traits that can be added as panels */
 	const availableTools = $derived.by(() => {
 		return Object.entries(TRAIT_PANEL_INFO).map(([key, info]) => ({
 			key,
@@ -140,6 +229,7 @@
 	function toggleToolMenu() {
 		toolMenuOpen = !toolMenuOpen;
 		selectorOpen = false;
+		settingsOpen = false;
 	}
 
 	function addTool(trait: string) {
@@ -148,27 +238,60 @@
 	}
 
 	// =========================================================================
-	// Click outside to close
+	// Settings menu (theme + sign out)
+	// =========================================================================
+
+	let settingsOpen = $state(false);
+
+	function toggleSettings() {
+		settingsOpen = !settingsOpen;
+		selectorOpen = false;
+		toolMenuOpen = false;
+	}
+
+	function setThemeColor(channel: 'bg' | 'surface' | 'accent', prop: 'hue' | 'saturation', value: number) {
+		const newTheme = {
+			...theme,
+			[channel]: { ...theme[channel], [prop]: value },
+		};
+		applyTheme(newTheme);
+		onThemeChange?.(newTheme);
+	}
+
+	function applyPreset(preset: ThemeConfig) {
+		applyTheme(preset);
+		onThemeChange?.(preset);
+	}
+
+	// =========================================================================
+	// Click outside
 	// =========================================================================
 
 	function handleClickOutside(e: MouseEvent) {
 		const target = e.target as HTMLElement;
-		if (selectorOpen && !target.closest('.context-selector')) {
+		if (selectorOpen && !target.closest('.context-selector')) selectorOpen = false;
+		if (toolMenuOpen && !target.closest('.tool-menu')) toolMenuOpen = false;
+		if (settingsOpen && !target.closest('.settings-menu')) settingsOpen = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
 			selectorOpen = false;
-		}
-		if (toolMenuOpen && !target.closest('.tool-menu')) {
 			toolMenuOpen = false;
+			settingsOpen = false;
 		}
 	}
 </script>
 
-<svelte:window onclick={handleClickOutside} onkeydown={handleSelectorKeydown} />
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
 <header class="context-header">
 	<div class="context-header-inner">
 		<!-- Left: Back + Context selector -->
 		<div class="context-header-left">
-			<a href="/" class="context-back" title="Tilbake til arbeidsflaten">&larr;</a>
+			{#if !isPersonalWorkspace}
+				<a href="/" class="context-back" title="Tilbake til arbeidsflaten">&larr;</a>
+			{/if}
 
 			<div class="context-selector">
 				<button
@@ -177,7 +300,7 @@
 					title="Bytt kontekst"
 				>
 					<span class="context-selector-title">
-						{collectionNode?.title || 'Samling'}
+						{isPersonalWorkspace ? 'Min arbeidsflate' : (collectionNode?.title || 'Arbeidsflate')}
 					</span>
 					<span class="context-selector-chevron" class:open={selectorOpen}>&#9662;</span>
 				</button>
@@ -189,43 +312,117 @@
 								bind:this={searchInput}
 								bind:value={searchQuery}
 								type="text"
-								placeholder="Søk samlinger..."
+								placeholder="Søk arbeidsflater..."
 								class="context-selector-search-input"
 								onclick={(e) => e.stopPropagation()}
 							/>
 						</div>
 						<div class="context-selector-list">
+							<!-- Min arbeidsflate (alltid øverst når ikke søker) -->
 							{#if !searchQuery.trim()}
 								<button
 									class="context-selector-item"
+									class:current={isPersonalWorkspace}
 									onclick={() => { selectorOpen = false; goto('/'); }}
 								>
 									<span class="context-selector-item-title">Min arbeidsflate</span>
-								</button>
-							{/if}
-							{#each filteredCollections as node (node.id)}
-								<button
-									class="context-selector-item"
-									class:current={node.id === collectionId}
-									onclick={() => selectCollection(node.id)}
-								>
-									<span class="context-selector-item-title">{node.title || 'Uten tittel'}</span>
-									{#if node.id === collectionId}
+									{#if isPersonalWorkspace}
 										<span class="context-selector-item-check">&#10003;</span>
 									{/if}
 								</button>
-							{:else}
-								<div class="context-selector-empty">
-									{searchQuery ? 'Ingen treff' : 'Ingen samlinger'}
-								</div>
-							{/each}
+							{/if}
+
+							<!-- Mine flater -->
+							{#if myCollections.length > 0}
+								<div class="context-selector-group-label">Mine flater</div>
+								{#each myCollections as node (node.id)}
+									{#if deletingId === node.id}
+										<div class="context-selector-delete-confirm">
+											<p class="delete-confirm-text">
+												Slett «{node.title || 'Uten tittel'}»?
+												{#if deleteChildCount > 0}
+													<br/><span class="delete-confirm-count">{deleteChildCount} noder tilhører denne flaten.</span>
+												{/if}
+											</p>
+											<div class="delete-confirm-actions">
+												<button class="delete-confirm-btn delete-confirm-cancel" onclick={() => { deletingId = undefined; }}>Avbryt</button>
+												<button class="delete-confirm-btn delete-confirm-yes" onclick={confirmDelete}>Slett</button>
+											</div>
+										</div>
+									{:else}
+										<div class="context-selector-item-row">
+											{#if renamingId === node.id}
+												<input
+													class="context-selector-rename-input"
+													bind:value={renameValue}
+													onblur={commitRename}
+													onkeydown={handleRenameKeydown}
+													onclick={(e) => e.stopPropagation()}
+												/>
+											{:else}
+												<button
+													class="context-selector-item"
+													class:current={node.id === collectionId}
+													onclick={() => selectCollection(node.id)}
+												>
+													<span class="context-selector-item-title">{node.title || 'Uten tittel'}</span>
+													{#if node.id === collectionId}
+														<span class="context-selector-item-check">&#10003;</span>
+													{/if}
+												</button>
+												<button
+													class="context-selector-action-btn"
+													onclick={(e) => { e.stopPropagation(); startRename(node); }}
+													title="Gi nytt navn"
+												>✏️</button>
+												<button
+													class="context-selector-action-btn context-selector-delete-btn"
+													onclick={(e) => { e.stopPropagation(); startDelete(node); }}
+													title="Slett"
+												>🗑️</button>
+											{/if}
+										</div>
+									{/if}
+								{/each}
+							{/if}
+
+							<!-- Delte flater -->
+							{#if sharedCollections.length > 0}
+								<div class="context-selector-group-label">Delte flater</div>
+								{#each sharedCollections as node (node.id)}
+									<button
+										class="context-selector-item"
+										class:current={node.id === collectionId}
+										onclick={() => selectCollection(node.id)}
+									>
+										<span class="context-selector-item-title">{node.title || 'Uten tittel'}</span>
+										{#if node.id === collectionId}
+											<span class="context-selector-item-check">&#10003;</span>
+										{/if}
+									</button>
+								{/each}
+							{/if}
+
+							{#if myCollections.length === 0 && sharedCollections.length === 0 && searchQuery.trim()}
+								<div class="context-selector-empty">Ingen treff</div>
+							{/if}
+						</div>
+
+						<div class="context-selector-footer">
+							<button
+								class="context-selector-new-btn"
+								onclick={createNewWorkspace}
+								disabled={isCreatingWorkspace}
+							>
+								+ Ny arbeidsflate
+							</button>
 						</div>
 					</div>
 				{/if}
 			</div>
 		</div>
 
-		<!-- Right: Tool menu + status + traits -->
+		<!-- Right: Tool menu + traits + status + settings -->
 		<div class="context-header-right">
 			<div class="tool-menu">
 				<button
@@ -258,13 +455,7 @@
 				{/if}
 			</div>
 
-			{#if connected}
-				<span class="context-status context-status-ok" title="Tilkoblet sanntid">&#9679;</span>
-			{:else}
-				<span class="context-status" title="{connectionState.current}">&#9679;</span>
-			{/if}
-
-			{#if connected && collectionNode}
+			{#if traitNames.length > 0 && onToggleTraitAdmin}
 				<button
 					onclick={onToggleTraitAdmin}
 					class="context-btn {showTraitAdmin ? 'context-btn-active' : ''}"
@@ -273,22 +464,98 @@
 					Traits
 				</button>
 			{/if}
+
+			{#if connected}
+				<span class="context-status context-status-ok" title="Tilkoblet sanntid">&#9679;</span>
+			{:else}
+				<span class="context-status" title="{connectionState.current}">&#9679;</span>
+			{/if}
+
+			<div class="settings-menu">
+				<button
+					class="context-btn settings-trigger"
+					onclick={toggleSettings}
+					title="Innstillinger"
+				>&#9881;</button>
+
+				{#if settingsOpen}
+					<div class="settings-dropdown">
+						<!-- Presets -->
+						<div class="settings-title">Tema</div>
+						<div class="settings-presets">
+							{#each THEME_PRESETS as preset (preset.name)}
+								<button
+									class="settings-preset"
+									title={preset.name}
+									onclick={() => applyPreset(preset.theme)}
+								>
+									<span
+										class="settings-preset-swatch"
+										style:background={themeColorCSS(preset.theme.accent, 60)}
+									></span>
+									<span class="settings-preset-label">{preset.name}</span>
+								</button>
+							{/each}
+						</div>
+
+						<!-- Per-color sliders -->
+						<div class="settings-color-group">
+							<div class="settings-color-label">Bakgrunn</div>
+							<div class="settings-color-row">
+								<input type="range" class="settings-hue-slider" min="0" max="360"
+									value={theme.bg.hue}
+									oninput={(e) => setThemeColor('bg', 'hue', +e.currentTarget.value)} />
+								<input type="range" class="settings-sat-slider" min="0" max="30"
+									value={theme.bg.saturation}
+									oninput={(e) => setThemeColor('bg', 'saturation', +e.currentTarget.value)} />
+								<span class="settings-color-swatch" style:background={themeColorCSS(theme.bg, 12)}></span>
+							</div>
+						</div>
+						<div class="settings-color-group">
+							<div class="settings-color-label">Overflate</div>
+							<div class="settings-color-row">
+								<input type="range" class="settings-hue-slider" min="0" max="360"
+									value={theme.surface.hue}
+									oninput={(e) => setThemeColor('surface', 'hue', +e.currentTarget.value)} />
+								<input type="range" class="settings-sat-slider" min="0" max="30"
+									value={theme.surface.saturation}
+									oninput={(e) => setThemeColor('surface', 'saturation', +e.currentTarget.value)} />
+								<span class="settings-color-swatch" style:background={themeColorCSS(theme.surface, 20)}></span>
+							</div>
+						</div>
+						<div class="settings-color-group">
+							<div class="settings-color-label">Aksent</div>
+							<div class="settings-color-row">
+								<input type="range" class="settings-hue-slider" min="0" max="360"
+									value={theme.accent.hue}
+									oninput={(e) => setThemeColor('accent', 'hue', +e.currentTarget.value)} />
+								<input type="range" class="settings-sat-slider" min="0" max="100"
+									value={theme.accent.saturation}
+									oninput={(e) => setThemeColor('accent', 'saturation', +e.currentTarget.value)} />
+								<span class="settings-color-swatch" style:background={themeColorCSS(theme.accent, 60)}></span>
+							</div>
+						</div>
+
+						<div class="settings-divider"></div>
+						{#if $page.data.session?.user}
+							<div class="settings-user">{$page.data.session.user.name}</div>
+						{/if}
+						<button class="settings-signout" onclick={() => signOut()}>Logg ut</button>
+					</div>
+				{/if}
+			</div>
 		</div>
 	</div>
 </header>
 
 <style>
-	/* ================================================================= */
-	/* Context Header                                                    */
-	/* ================================================================= */
 	.context-header {
-		border-bottom: 1px solid #2a2a2e;
-		background: #1c1c20;
+		border-bottom: 1px solid var(--color-border, #2a2a2e);
+		background: var(--color-surface, #1c1c20);
 		flex-shrink: 0;
 		z-index: 30;
 		position: relative;
 	}
-
 	.context-header-inner {
 		display: flex;
 		align-items: center;
@@ -297,7 +564,6 @@
 		max-width: 100%;
 		min-height: 44px;
 	}
-
 	.context-header-left {
 		display: flex;
 		align-items: center;
@@ -305,7 +571,6 @@
 		min-width: 0;
 		flex: 1;
 	}
-
 	.context-header-right {
 		display: flex;
 		align-items: center;
@@ -313,30 +578,19 @@
 		flex-shrink: 0;
 	}
 
-	/* ================================================================= */
-	/* Back button                                                       */
-	/* ================================================================= */
+	/* Back button */
 	.context-back {
 		font-size: 16px;
-		color: #5a5a66;
+		color: var(--color-text-dim, #5a5a66);
 		text-decoration: none;
 		flex-shrink: 0;
 		padding: 4px;
 		line-height: 1;
 	}
+	.context-back:hover { color: var(--color-text-muted, #8a8a96); }
 
-	.context-back:hover {
-		color: #4b5563;
-	}
-
-	/* ================================================================= */
-	/* Context Selector (dropdown)                                       */
-	/* ================================================================= */
-	.context-selector {
-		position: relative;
-		min-width: 0;
-	}
-
+	/* Context selector */
+	.context-selector { position: relative; min-width: 0; }
 	.context-selector-trigger {
 		display: flex;
 		align-items: center;
@@ -348,75 +602,45 @@
 		cursor: pointer;
 		font-size: 15px;
 		font-weight: 600;
-		color: #e8e8ec;
+		color: var(--color-text, #e8e8ec);
 		max-width: 300px;
 		transition: background 0.12s, border-color 0.12s;
 	}
-
 	.context-selector-trigger:hover {
-		background: #242428;
-		border-color: #e5e7eb;
+		background: var(--color-surface-hover, #242428);
+		border-color: var(--color-border-hover, #3a3a3e);
 	}
+	.context-selector-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.context-selector-chevron { font-size: 10px; color: var(--color-text-dim, #5a5a66); transition: transform 0.15s; flex-shrink: 0; }
+	.context-selector-chevron.open { transform: rotate(180deg); }
 
-	.context-selector-title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.context-selector-chevron {
-		font-size: 10px;
-		color: #5a5a66;
-		transition: transform 0.15s;
-		flex-shrink: 0;
-	}
-
-	.context-selector-chevron.open {
-		transform: rotate(180deg);
-	}
-
-	/* ================================================================= */
-	/* Dropdown                                                          */
-	/* ================================================================= */
+	/* Dropdown */
 	.context-selector-dropdown {
 		position: absolute;
 		top: calc(100% + 4px);
 		left: 0;
-		min-width: 260px;
-		max-width: 360px;
-		background: #1c1c20;
-		border: 1px solid #2a2a2e;
+		min-width: 280px;
+		max-width: 380px;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
 		z-index: 50;
 		overflow: hidden;
 	}
-
-	.context-selector-search {
-		padding: 8px;
-		border-bottom: 1px solid #f3f4f6;
-	}
-
+	.context-selector-search { padding: 8px; border-bottom: 1px solid var(--color-border, #2a2a2e); }
 	.context-selector-search-input {
 		width: 100%;
 		padding: 6px 10px;
-		border: 1px solid #2a2a2e;
+		border: 1px solid var(--color-border, #2a2a2e) !important;
 		border-radius: 6px;
 		font-size: 13px;
 		outline: none;
-		background: #141416;
-	}
-
-	.context-selector-search-input:focus {
-		border-color: #4f46e5;
-		background: #1c1c20;
-	}
-
-	.context-selector-list {
-		max-height: 280px;
-		overflow-y: auto;
-		padding: 4px;
+		background: var(--color-bg, #141416) !important;
+		color: var(--color-text, #e8e8ec) !important;
 	}
+	.context-selector-search-input:focus { border-color: var(--color-accent, #6366f1) !important; }
+	.context-selector-list { max-height: 320px; overflow-y: auto; padding: 4px; }
 
 	.context-selector-item {
 		display: flex;
@@ -429,181 +653,216 @@
 		background: transparent;
 		cursor: pointer;
 		font-size: 13px;
-		color: #8a8a96;
+		color: var(--color-text-muted, #8a8a96);
 		text-align: left;
 		transition: background 0.1s;
 	}
+	.context-selector-item:hover { background: var(--color-surface-hover, #242428); }
+	.context-selector-item.current { background: rgba(99, 102, 241, 0.1); color: var(--color-accent, #6366f1); font-weight: 500; }
+	.context-selector-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.context-selector-item-check { color: var(--color-accent, #6366f1); font-size: 12px; flex-shrink: 0; margin-left: 8px; }
+	.context-selector-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--color-text-dim, #5a5a66); }
 
-	.context-selector-item:hover {
-		background: #242428;
+	/* Groups */
+	.context-selector-group-label {
+		padding: 8px 10px 4px;
+		font-size: 10px;
+		font-weight: 600;
+		color: var(--color-text-dim, #5a5a66);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
 	}
+	.context-selector-item-row { display: flex; align-items: center; gap: 2px; }
+	.context-selector-item-row .context-selector-item { flex: 1; min-width: 0; }
 
-	.context-selector-item.current {
-		background: #eef2ff;
-		color: #4f46e5;
-		font-weight: 500;
-	}
-
-	.context-selector-item-title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.context-selector-item-check {
-		color: #4f46e5;
-		font-size: 12px;
+	/* Action buttons (rename, delete) */
+	.context-selector-action-btn {
 		flex-shrink: 0;
-		margin-left: 8px;
+		padding: 4px 4px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		font-size: 11px;
+		opacity: 0;
+		transition: opacity 0.1s;
+		border-radius: 4px;
+	}
+	.context-selector-item-row:hover .context-selector-action-btn { opacity: 0.5; }
+	.context-selector-action-btn:hover { opacity: 1 !important; background: var(--color-surface-hover, #242428); }
+	.context-selector-delete-btn:hover { background: rgba(239, 68, 68, 0.15); }
+
+	/* Rename input */
+	.context-selector-rename-input {
+		flex: 1;
+		padding: 6px 10px;
+		border: 1px solid var(--color-accent, #6366f1) !important;
+		border-radius: 6px;
+		font-size: 13px;
+		outline: none;
+		background: var(--color-bg, #141416) !important;
+		color: var(--color-text, #e8e8ec) !important;
+		margin: 2px 4px;
 	}
 
-	.context-selector-empty {
-		padding: 16px;
-		text-align: center;
+	/* Delete confirmation */
+	.context-selector-delete-confirm {
+		padding: 8px 10px;
+		border-radius: 6px;
+		background: rgba(239, 68, 68, 0.08);
+		margin: 2px 0;
+	}
+	.delete-confirm-text { font-size: 12px; color: var(--color-text-muted, #8a8a96); line-height: 1.4; }
+	.delete-confirm-count { color: var(--color-warning, #f59e0b); }
+	.delete-confirm-actions { display: flex; gap: 6px; margin-top: 6px; }
+	.delete-confirm-btn {
+		padding: 4px 10px;
+		border: none;
+		border-radius: 4px;
 		font-size: 12px;
-		color: #5a5a66;
+		cursor: pointer;
 	}
+	.delete-confirm-cancel { background: var(--color-surface-hover, #242428); color: var(--color-text-muted, #8a8a96); }
+	.delete-confirm-cancel:hover { background: var(--color-border, #2a2a2e); }
+	.delete-confirm-yes { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+	.delete-confirm-yes:hover { background: rgba(239, 68, 68, 0.35); }
 
-	/* ================================================================= */
-	/* Tool Menu                                                         */
-	/* ================================================================= */
-	.tool-menu {
-		position: relative;
-	}
-
-	.tool-menu-trigger {
-		font-weight: 500;
+	/* Footer */
+	.context-selector-footer { border-top: 1px solid var(--color-border, #2a2a2e); padding: 6px; }
+	.context-selector-new-btn {
+		width: 100%;
+		padding: 8px 10px;
+		border: 1px dashed var(--color-border, #2a2a2e);
+		border-radius: 6px;
+		background: transparent;
+		cursor: pointer;
+		font-size: 13px;
+		color: var(--color-text-dim, #5a5a66);
+		transition: border-color 0.1s, color 0.1s;
 	}
+	.context-selector-new-btn:hover:not(:disabled) { border-color: var(--color-accent, #6366f1); color: var(--color-text-muted, #8a8a96); }
+	.context-selector-new-btn:disabled { opacity: 0.5; cursor: default; }
 
+	/* Tool Menu */
+	.tool-menu { position: relative; }
+	.tool-menu-trigger { font-weight: 500; }
 	.tool-menu-dropdown {
 		position: absolute;
 		top: calc(100% + 4px);
 		right: 0;
 		min-width: 200px;
-		background: #1c1c20;
-		border: 1px solid #2a2a2e;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
 		z-index: 50;
 		overflow: hidden;
 		padding: 4px;
 	}
-
-	.tool-menu-title {
-		padding: 6px 10px 4px;
-		font-size: 11px;
-		font-weight: 600;
-		color: #5a5a66;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
+	.tool-menu-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; color: var(--color-text-dim, #5a5a66); text-transform: uppercase; letter-spacing: 0.05em; }
 	.tool-menu-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 7px 10px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		font-size: 13px;
-		color: #8a8a96;
-		text-align: left;
-		transition: background 0.1s;
+		display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
+		border: none; border-radius: 6px; background: transparent; cursor: pointer;
+		font-size: 13px; color: var(--color-text-muted, #8a8a96); text-align: left; transition: background 0.1s;
 	}
+	.tool-menu-item:hover:not(:disabled) { background: var(--color-surface-hover, #242428); }
+	.tool-menu-item:disabled { cursor: default; opacity: 0.5; }
+	.tool-menu-item-active { color: var(--color-text-dim, #5a5a66); }
+	.tool-menu-item-icon { font-size: 15px; flex-shrink: 0; }
+	.tool-menu-item-label { flex: 1; }
+	.tool-menu-item-badge { font-size: 10px; color: var(--color-text-dim, #5a5a66); background: var(--color-surface-hover, #242428); padding: 1px 6px; border-radius: 4px; }
 
-	.tool-menu-item:hover:not(:disabled) {
-		background: #242428;
-	}
+	/* Status */
+	.context-status { font-size: 8px; color: #d1d5db; }
+	.context-status-ok { color: #16a34a; }
 
-	.tool-menu-item:disabled {
-		cursor: default;
-		opacity: 0.5;
-	}
-
-	.tool-menu-item-active {
-		color: #5a5a66;
-	}
-
-	.tool-menu-item-icon {
-		font-size: 15px;
-		flex-shrink: 0;
-	}
-
-	.tool-menu-item-label {
-		flex: 1;
-	}
-
-	.tool-menu-item-badge {
-		font-size: 10px;
-		color: #5a5a66;
-		background: #242428;
-		padding: 1px 6px;
-		border-radius: 4px;
-	}
-
-	/* ================================================================= */
-	/* Status indicator                                                  */
-	/* ================================================================= */
-	.context-status {
-		font-size: 8px;
-		color: #d1d5db;
-	}
-
-	.context-status-ok {
-		color: #16a34a;
-	}
-
-	/* ================================================================= */
-	/* Shared button style                                               */
-	/* ================================================================= */
+	/* Shared button */
 	.context-btn {
-		padding: 4px 10px;
-		border: none;
-		border-radius: 6px;
-		font-size: 12px;
-		font-weight: 500;
+		padding: 4px 10px; border: none; border-radius: 6px; font-size: 12px; font-weight: 500;
+		cursor: pointer; background: var(--color-surface-hover, #242428); color: var(--color-text-muted, #8a8a96); transition: background 0.12s;
+	}
+	.context-btn:hover { background: var(--color-border, #3a3a3e); color: var(--color-text, #e8e8ec); }
+	.context-btn-active { background: var(--color-accent, #6366f1); color: white; }
+	.context-btn-active:hover { background: var(--color-accent-hover, #7577f5); }
+
+	/* Settings menu */
+	.settings-menu { position: relative; }
+	.settings-trigger { font-size: 14px; }
+	.settings-dropdown {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		min-width: 260px;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
+		border-radius: 8px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+		z-index: 50;
+		padding: 12px;
+	}
+	.settings-title { font-size: 11px; font-weight: 600; color: var(--color-text-dim, #5a5a66); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
+
+	/* Presets */
+	.settings-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
+	.settings-preset {
+		display: flex; align-items: center; gap: 4px; padding: 3px 8px;
+		border: 1px solid var(--color-border, #2a2a2e); border-radius: 4px; background: transparent;
+		cursor: pointer; font-size: 11px; color: var(--color-text-muted, #8a8a96); transition: border-color 0.1s;
+	}
+	.settings-preset:hover { border-color: var(--color-accent, #6366f1); }
+	.settings-preset-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+	.settings-preset-label { white-space: nowrap; }
+
+	/* Per-color controls */
+	.settings-color-group { margin-bottom: 8px; }
+	.settings-color-label { font-size: 11px; color: var(--color-text-dim, #5a5a66); margin-bottom: 3px; }
+	.settings-color-row { display: flex; align-items: center; gap: 6px; }
+	.settings-color-swatch { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; border: 1px solid var(--color-border, #2a2a2e); }
+
+	.settings-hue-slider, .settings-sat-slider {
+		flex: 1;
+		height: 6px;
+		-webkit-appearance: none;
+		appearance: none;
+		border: none !important;
+		border-radius: 3px;
+		outline: none;
+		padding: 0 !important;
 		cursor: pointer;
-		background: #242428;
-		color: #4b5563;
-		transition: background 0.12s;
+	}
+	.settings-hue-slider {
+		background: linear-gradient(to right,
+			hsl(0,80%,50%), hsl(60,80%,50%), hsl(120,80%,50%),
+			hsl(180,80%,50%), hsl(240,80%,50%), hsl(300,80%,50%), hsl(360,80%,50%)
+		) !important;
+	}
+	.settings-sat-slider {
+		background: linear-gradient(to right,
+			hsl(0,0%,40%), hsl(0,50%,50%)
+		) !important;
+	}
+	.settings-hue-slider::-webkit-slider-thumb,
+	.settings-sat-slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		width: 14px; height: 14px; border-radius: 50%;
+		background: white; border: 2px solid rgba(0,0,0,0.3); cursor: pointer;
+		box-shadow: 0 1px 3px rgba(0,0,0,0.3);
 	}
 
-	.context-btn:hover {
-		background: #e5e7eb;
+	.settings-divider { height: 1px; background: var(--color-border, #2a2a2e); margin: 10px 0; }
+	.settings-user { font-size: 13px; color: var(--color-text-muted, #8a8a96); padding: 4px 0 8px; }
+	.settings-signout {
+		width: 100%; padding: 6px 10px; border: none; border-radius: 6px;
+		background: transparent; cursor: pointer; font-size: 13px;
+		color: var(--color-text-muted, #8a8a96); text-align: left; transition: background 0.1s;
 	}
+	.settings-signout:hover { background: var(--color-surface-hover, #242428); color: var(--color-text, #e8e8ec); }
 
-	.context-btn-active {
-		background: #4f46e5;
-		color: white;
-	}
-
-	/* ================================================================= */
-	/* Responsive                                                        */
-	/* ================================================================= */
+	/* Responsive */
 	@media (max-width: 768px) {
-		.context-header-inner {
-			padding: 6px 12px;
-		}
-
-		.context-selector-trigger {
-			font-size: 14px;
-			max-width: 200px;
-		}
-
-		.context-selector-dropdown {
-			min-width: 220px;
-			max-width: calc(100vw - 24px);
-		}
-
-		.tool-menu-dropdown {
-			max-width: calc(100vw - 24px);
-		}
-
-		.context-header-right {
-			gap: 6px;
-		}
+		.context-header-inner { padding: 6px 12px; }
+		.context-selector-trigger { font-size: 14px; max-width: 200px; }
+		.context-selector-dropdown { min-width: 240px; max-width: calc(100vw - 24px); }
+		.tool-menu-dropdown, .settings-dropdown { max-width: calc(100vw - 24px); }
+		.context-header-right { gap: 6px; }
 	}
 </style>
diff --git a/frontend/src/lib/workspace/theme.ts b/frontend/src/lib/workspace/theme.ts
new file mode 100644
index 0000000..3689537
--- /dev/null
+++ b/frontend/src/lib/workspace/theme.ts
@@ -0,0 +1,171 @@
+/**
+ * Shared theme logic for Synops workspace.
+ *
+ * Each workspace/collection can have its own theme stored in
+ * metadata.preferences.theme. Themes use HSL color model for
+ * background, surface, and accent colors.
+ *
+ * Three-layer inheritance:
+ * 1. Flate-spesifikt (lagret i nodens metadata)
+ * 2. Personlig default (fra "Min arbeidsflate")
+ * 3. Plattform-default (DEFAULT_THEME)
+ */
+
+/** Color definition: hue + saturation. Lightness is derived per use. */
+export interface ThemeColor {
+	hue: number;        // 0-360
+	saturation: number; // 0-100
+}
+
+/** Full theme configuration */
+export interface ThemeConfig {
+	bg: ThemeColor;
+	surface: ThemeColor;
+	accent: ThemeColor;
+}
+
+/** Platform default — neutral dark with indigo accent */
+export const DEFAULT_THEME: ThemeConfig = {
+	bg:      { hue: 0,   saturation: 0 },
+	surface: { hue: 0,   saturation: 0 },
+	accent:  { hue: 239, saturation: 70 },
+};
+
+/** Named theme presets */
+export interface ThemePreset {
+	name: string;
+	theme: ThemeConfig;
+}
+
+export const THEME_PRESETS: ThemePreset[] = [
+	{
+		name: 'Standard',
+		theme: DEFAULT_THEME,
+	},
+	{
+		name: 'Hav',
+		theme: {
+			bg:      { hue: 210, saturation: 15 },
+			surface: { hue: 210, saturation: 12 },
+			accent:  { hue: 200, saturation: 75 },
+		},
+	},
+	{
+		name: 'Skog',
+		theme: {
+			bg:      { hue: 150, saturation: 12 },
+			surface: { hue: 150, saturation: 10 },
+			accent:  { hue: 142, saturation: 65 },
+		},
+	},
+	{
+		name: 'Solnedgang',
+		theme: {
+			bg:      { hue: 15,  saturation: 12 },
+			surface: { hue: 15,  saturation: 10 },
+			accent:  { hue: 25,  saturation: 80 },
+		},
+	},
+	{
+		name: 'Lavendel',
+		theme: {
+			bg:      { hue: 270, saturation: 10 },
+			surface: { hue: 270, saturation: 8 },
+			accent:  { hue: 280, saturation: 65 },
+		},
+	},
+	{
+		name: 'Monokrom',
+		theme: {
+			bg:      { hue: 0, saturation: 0 },
+			surface: { hue: 0, saturation: 0 },
+			accent:  { hue: 0, saturation: 0 },
+		},
+	},
+];
+
+function hsl(hue: number, sat: number, light: number): string {
+	return `hsl(${hue}, ${sat}%, ${light}%)`;
+}
+
+function hsla(hue: number, sat: number, light: number, alpha: number): string {
+	return `hsla(${hue}, ${sat}%, ${light}%, ${alpha})`;
+}
+
+/** Apply theme to :root CSS custom properties */
+export function applyTheme(config: ThemeConfig): void {
+	if (typeof document === 'undefined') return;
+	const root = document.documentElement;
+
+	const { bg, surface, accent } = config;
+
+	// Background: very dark, slight tint
+	root.style.setProperty('--color-bg', hsl(bg.hue, bg.saturation, 4));
+
+	// Surface: slightly lighter
+	root.style.setProperty('--color-surface', hsl(surface.hue, surface.saturation, 12));
+	root.style.setProperty('--color-surface-hover', hsl(surface.hue, Math.max(0, surface.saturation - 2), 15));
+
+	// Border: derived from surface
+	root.style.setProperty('--color-border', hsl(surface.hue, Math.max(0, surface.saturation - 3), 18));
+	root.style.setProperty('--color-border-hover', hsl(surface.hue, Math.max(0, surface.saturation - 3), 24));
+
+	// Accent
+	root.style.setProperty('--color-accent', hsl(accent.hue, accent.saturation, 60));
+	root.style.setProperty('--color-accent-hover', hsl(accent.hue, accent.saturation, 65));
+	root.style.setProperty('--color-accent-glow', hsla(accent.hue, accent.saturation, 60, 0.15));
+}
+
+/** Reset theme to platform defaults (remove inline styles) */
+export function resetTheme(): void {
+	if (typeof document === 'undefined') return;
+	const root = document.documentElement;
+	const props = [
+		'--color-bg', '--color-surface', '--color-surface-hover',
+		'--color-border', '--color-border-hover',
+		'--color-accent', '--color-accent-hover', '--color-accent-glow',
+	];
+	for (const prop of props) {
+		root.style.removeProperty(prop);
+	}
+}
+
+/**
+ * Load theme from node metadata. Backward compatible with old format
+ * ({ hueBg, hueSurface, hueAccent }) and new format ({ bg, surface, accent }).
+ */
+export function loadThemeFromMetadata(meta: Record<string, unknown>): ThemeConfig | null {
+	const prefs = meta.preferences as Record<string, unknown> | undefined;
+	const theme = prefs?.theme as Record<string, unknown> | undefined;
+	if (!theme) return null;
+
+	// New format
+	if (theme.bg && typeof theme.bg === 'object') {
+		return theme as unknown as ThemeConfig;
+	}
+
+	// Old format: { hueBg, hueSurface, hueAccent }
+	if (typeof theme.hueBg === 'number' || typeof theme.hueAccent === 'number') {
+		return {
+			bg:      { hue: (theme.hueBg as number) ?? 0,      saturation: (theme.hueBg as number) ? 10 : 0 },
+			surface: { hue: (theme.hueSurface as number) ?? 0,  saturation: (theme.hueSurface as number) ? 8 : 0 },
+			accent:  { hue: (theme.hueAccent as number) ?? 239, saturation: 70 },
+		};
+	}
+
+	return null;
+}
+
+/** Serialize theme for storage in node metadata */
+export function themeToMetadata(config: ThemeConfig): Record<string, unknown> {
+	return {
+		bg: config.bg,
+		surface: config.surface,
+		accent: config.accent,
+	};
+}
+
+/** Get a CSS color string for a theme color at a given lightness */
+export function themeColorCSS(color: ThemeColor, lightness: number): string {
+	return hsl(color.hue, color.saturation, lightness);
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 2f0b359..b243ced 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
 	import { connectionState, nodeStore, edgeStore, nodeAccessStore, nodeVisibility } from '$lib/realtime';
 	import type { Node } from '$lib/realtime';
-	import { fetchMyWorkspace, updateNode, createNode, createEdge } from '$lib/api';
-	import { signOut } from '@auth/sveltekit/client';
+	import { fetchMyWorkspace, updateNode } from '$lib/api';
+	import ContextHeader from '$lib/components/ContextHeader.svelte';
+	import {
+		type ThemeConfig,
+		DEFAULT_THEME,
+		applyTheme,
+		loadThemeFromMetadata,
+		themeToMetadata,
+	} from '$lib/workspace/theme.js';
 
 	// Canvas + BlockShell
 	import Canvas from '$lib/components/canvas/Canvas.svelte';
@@ -20,9 +26,6 @@
 		PANEL_HEADER_HEIGHT,
 	} from '$lib/workspace/types.js';
 
-	// Recency tracking for context selector
-	import { getRankedNodeIds } from '$lib/workspace/recency.js';
-
 	// Trait components (reuse from collection page)
 	import EditorTrait from '$lib/components/traits/EditorTrait.svelte';
 	import ChatTrait from '$lib/components/traits/ChatTrait.svelte';
@@ -73,10 +76,9 @@
 				} else if (!layoutInitialized) {
 					layoutInitialized = true;
 				}
-				// Load theme preferences
+				// Load preferences
 				if (res.metadata) {
-					loadThemeFromMetadata(res.metadata as Record<string, unknown>);
-					// Load saved camera position
+					loadThemeFromMeta(res.metadata as Record<string, unknown>);
 					const meta = res.metadata as Record<string, unknown>;
 					const cam = meta.camera as Camera | undefined;
 					if (cam && typeof cam.x === 'number') {
@@ -156,7 +158,7 @@
 						gridEnabled,
 						preferences: {
 							...(currentMeta.preferences ?? {}),
-							theme: { hueBg: themeHueBg, hueSurface: themeHueSurface, hueAccent: themeHueAccent },
+							theme: themeToMetadata(currentTheme),
 						},
 					},
 				});
@@ -234,188 +236,21 @@
 	const activeLayoutTraits = $derived(layout.panels.map(p => p.trait));
 
 	// =========================================================================
-	// Context selector (navigate to collections)
+	// Theme
 	// =========================================================================
 
-	let selectorOpen = $state(false);
-	let searchQuery = $state('');
-	let searchInput = $state<HTMLInputElement | undefined>(undefined);
+	let currentTheme = $state<ThemeConfig>(DEFAULT_THEME);
 
-	const collectionNodes = $derived.by((): Node[] => {
-		if (!connected || !nodeId) return [];
-		const accessibleIds = new Set<string>();
-		for (const edge of edgeStore.bySource(nodeId)) {
-			if (!edge.system) accessibleIds.add(edge.targetId);
-		}
-		for (const id of nodeAccessStore.objectsForSubject(nodeId)) {
-			accessibleIds.add(id);
-		}
-		const collections: Node[] = [];
-		for (const id of accessibleIds) {
-			const node = nodeStore.get(id);
-			if (node && node.nodeKind === 'collection' && nodeVisibility(node, nodeId) !== 'hidden') {
-				collections.push(node);
-			}
-		}
-		const ranked = getRankedNodeIds();
-		const rankMap = new Map(ranked.map((id, i) => [id, i]));
-		collections.sort((a, b) => {
-			const ra = rankMap.get(a.id) ?? 999;
-			const rb = rankMap.get(b.id) ?? 999;
-			if (ra !== rb) return ra - rb;
-			return (a.title ?? '').localeCompare(b.title ?? '');
-		});
-		return collections;
-	});
-
-	const filteredCollections = $derived.by(() => {
-		if (!searchQuery.trim()) return collectionNodes;
-		const q = searchQuery.toLowerCase().trim();
-		return collectionNodes.filter(n => (n.title ?? '').toLowerCase().includes(q));
-	});
-
-	const myCollections = $derived(filteredCollections.filter(n => n.createdBy === nodeId));
-	const sharedCollections = $derived(filteredCollections.filter(n => n.createdBy !== nodeId));
-
-	let renamingId = $state<string | undefined>(undefined);
-	let renameValue = $state('');
-
-	function startRename(node: Node) {
-		renamingId = node.id;
-		renameValue = node.title || '';
-	}
-
-	async function commitRename() {
-		if (!renamingId || !accessToken) return;
-		const id = renamingId;
-		renamingId = undefined;
-		if (renameValue.trim()) {
-			try {
-				await updateNode(accessToken, { node_id: id, title: renameValue.trim() });
-			} catch (e) {
-				console.error('Feil ved omdøping:', e);
-			}
-		}
-	}
-
-	function handleRenameKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter') { e.preventDefault(); commitRename(); }
-		if (e.key === 'Escape') { renamingId = undefined; }
-	}
-
-	let isCreatingWorkspace = $state(false);
-
-	async function createNewWorkspace() {
-		if (!accessToken || !nodeId || isCreatingWorkspace) return;
-		isCreatingWorkspace = true;
-		selectorOpen = false;
-		try {
-			const { node_id } = await createNode(accessToken, {
-				node_kind: 'collection',
-				title: 'Ny arbeidsflate',
-				visibility: 'hidden',
-				metadata: {
-					traits: {
-						chat: {},
-						editor: {},
-						kanban: {},
-						calendar: {},
-					}
-				},
-			});
-			await createEdge(accessToken, {
-				source_id: nodeId,
-				target_id: node_id,
-				edge_type: 'owner',
-			});
-			goto(`/collection/${node_id}`);
-		} catch (e) {
-			console.error('Feil ved oppretting av arbeidsflate:', e);
-		} finally {
-			isCreatingWorkspace = false;
-		}
-	}
-
-	function toggleSelector() {
-		selectorOpen = !selectorOpen;
-		toolMenuOpen = false;
-		settingsOpen = false;
-		if (selectorOpen) {
-			searchQuery = '';
-			renamingId = undefined;
-			requestAnimationFrame(() => searchInput?.focus());
-		}
-	}
-
-	function selectCollection(id: string) {
-		selectorOpen = false;
-		goto(`/collection/${id}`);
-	}
-
-	// =========================================================================
-	// Tool menu
-	// =========================================================================
-
-	let toolMenuOpen = $state(false);
-
-	const availableTools = $derived.by(() => {
-		return Object.entries(TRAIT_PANEL_INFO).map(([key, info]) => ({
-			key,
-			...info,
-			active: activeLayoutTraits.includes(key),
-		}));
-	});
-
-	function toggleToolMenu() {
-		toolMenuOpen = !toolMenuOpen;
-		selectorOpen = false;
-		settingsOpen = false;
-	}
-
-	function addTool(trait: string) {
-		handleAddPanel(trait);
-		toolMenuOpen = false;
-	}
-
-	// =========================================================================
-	// Settings menu (theme + sign out)
-	// =========================================================================
-
-	let settingsOpen = $state(false);
-	let themeHueBg = $state(0);
-	let themeHueSurface = $state(0);
-	let themeHueAccent = $state(240);  // default indigo ≈ 240
-
-	function toggleSettings() {
-		settingsOpen = !settingsOpen;
-		selectorOpen = false;
-		toolMenuOpen = false;
-	}
-
-	function hslColor(hue: number, sat: number, light: number): string {
-		return `hsl(${hue}, ${sat}%, ${light}%)`;
-	}
-
-	function applyTheme() {
-		const root = document.documentElement;
-		root.style.setProperty('--color-bg', hslColor(themeHueBg, themeHueBg ? 10 : 0, 4));
-		root.style.setProperty('--color-surface', hslColor(themeHueSurface, themeHueSurface ? 8 : 0, 12));
-		root.style.setProperty('--color-surface-hover', hslColor(themeHueSurface, themeHueSurface ? 6 : 0, 15));
-		root.style.setProperty('--color-border', hslColor(themeHueSurface, themeHueSurface ? 5 : 0, 18));
-		root.style.setProperty('--color-accent', hslColor(themeHueAccent, 70, 60));
-		root.style.setProperty('--color-accent-hover', hslColor(themeHueAccent, 70, 65));
-		root.style.setProperty('--color-accent-glow', `hsla(${themeHueAccent}, 70%, 60%, 0.15)`);
+	function handleThemeChange(newTheme: ThemeConfig) {
+		currentTheme = newTheme;
 		persistMetadata();
 	}
 
-	function loadThemeFromMetadata(meta: Record<string, unknown>) {
-		const prefs = meta.preferences as Record<string, unknown> | undefined;
-		const theme = prefs?.theme as Record<string, number> | undefined;
-		if (theme) {
-			themeHueBg = theme.hueBg ?? 0;
-			themeHueSurface = theme.hueSurface ?? 0;
-			themeHueAccent = theme.hueAccent ?? 240;
-			applyTheme();
+	function loadThemeFromMeta(meta: Record<string, unknown>) {
+		const loaded = loadThemeFromMetadata(meta);
+		if (loaded) {
+			currentTheme = loaded;
+			applyTheme(loaded);
 		}
 	}
 
@@ -443,27 +278,6 @@
 	// Click outside
 	// =========================================================================
 
-	function handleClickOutside(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (selectorOpen && !target.closest('.context-selector')) {
-			selectorOpen = false;
-		}
-		if (toolMenuOpen && !target.closest('.tool-menu')) {
-			toolMenuOpen = false;
-		}
-		if (settingsOpen && !target.closest('.settings-menu')) {
-			settingsOpen = false;
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			selectorOpen = false;
-			toolMenuOpen = false;
-			settingsOpen = false;
-		}
-	}
-
 	/** Trait components that have dedicated implementations */
 	const knownTraits = new Set([
 		'editor', 'chat', 'kanban', 'podcast', 'publishing',
@@ -524,173 +338,16 @@
 	}
 </script>
 
-<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
-
 <div class="workspace-page">
-	<!-- Header -->
-	<header class="context-header">
-		<div class="context-header-inner">
-			<div class="context-header-left">
-				<div class="context-selector">
-					<button
-						class="context-selector-trigger"
-						onclick={toggleSelector}
-						title="Bytt kontekst"
-					>
-						<span class="context-selector-title">Min arbeidsflate</span>
-						<span class="context-selector-chevron" class:open={selectorOpen}>&#9662;</span>
-					</button>
-
-					{#if selectorOpen}
-						<div class="context-selector-dropdown">
-							<div class="context-selector-search">
-								<input
-									bind:this={searchInput}
-									bind:value={searchQuery}
-									type="text"
-									placeholder="Søk arbeidsflater..."
-									class="context-selector-search-input"
-									onclick={(e) => e.stopPropagation()}
-								/>
-							</div>
-							<div class="context-selector-list">
-								{#if myCollections.length > 0}
-									<div class="context-selector-group-label">Mine flater</div>
-									{#each myCollections as node (node.id)}
-										<div class="context-selector-item-row">
-											{#if renamingId === node.id}
-												<input
-													class="context-selector-rename-input"
-													bind:value={renameValue}
-													onblur={commitRename}
-													onkeydown={handleRenameKeydown}
-													onclick={(e) => e.stopPropagation()}
-												/>
-											{:else}
-												<button
-													class="context-selector-item"
-													onclick={() => selectCollection(node.id)}
-												>
-													<span class="context-selector-item-title">{node.title || 'Uten tittel'}</span>
-												</button>
-												<button
-													class="context-selector-rename-btn"
-													onclick={(e) => { e.stopPropagation(); startRename(node); }}
-													title="Gi nytt navn"
-												>✏️</button>
-											{/if}
-										</div>
-									{/each}
-								{/if}
-								{#if sharedCollections.length > 0}
-									<div class="context-selector-group-label">Delte flater</div>
-									{#each sharedCollections as node (node.id)}
-										<button
-											class="context-selector-item"
-											onclick={() => selectCollection(node.id)}
-										>
-											<span class="context-selector-item-title">{node.title || 'Uten tittel'}</span>
-										</button>
-									{/each}
-								{/if}
-								{#if myCollections.length === 0 && sharedCollections.length === 0}
-									<div class="context-selector-empty">
-										{searchQuery ? 'Ingen treff' : 'Ingen arbeidsflater'}
-									</div>
-								{/if}
-							</div>
-							<div class="context-selector-footer">
-								<button
-									class="context-selector-new-btn"
-									onclick={createNewWorkspace}
-									disabled={isCreatingWorkspace}
-								>
-									+ Ny arbeidsflate
-								</button>
-							</div>
-						</div>
-					{/if}
-				</div>
-			</div>
-
-			<div class="context-header-right">
-				<div class="tool-menu">
-					<button
-						class="context-btn tool-menu-trigger"
-						onclick={toggleToolMenu}
-						title="Legg til verktøy-panel"
-					>
-						+ Verktøy
-					</button>
-
-					{#if toolMenuOpen}
-						<div class="tool-menu-dropdown">
-							<div class="tool-menu-title">Legg til panel</div>
-							{#each availableTools as tool (tool.key)}
-								<button
-									class="tool-menu-item"
-									class:tool-menu-item-active={tool.active}
-									onclick={() => addTool(tool.key)}
-									disabled={tool.active}
-									title={tool.active ? 'Allerede på flaten' : `Legg til ${tool.title}`}
-								>
-									<span class="tool-menu-item-icon">{tool.icon}</span>
-									<span class="tool-menu-item-label">{tool.title}</span>
-									{#if tool.active}
-										<span class="tool-menu-item-badge">aktiv</span>
-									{/if}
-								</button>
-							{/each}
-						</div>
-					{/if}
-				</div>
-
-				{#if connected}
-					<span class="context-status context-status-ok" title="Tilkoblet sanntid">&#9679;</span>
-				{:else}
-					<span class="context-status" title="{connectionState.current}">&#9679;</span>
-				{/if}
-
-				<div class="settings-menu">
-					<button
-						class="context-btn settings-trigger"
-						onclick={toggleSettings}
-						title="Innstillinger"
-					>
-						&#9881;
-					</button>
-
-					{#if settingsOpen}
-						<div class="settings-dropdown">
-							<div class="settings-title">Tema</div>
-							<label class="settings-slider">
-								<span class="settings-slider-label">Bakgrunn</span>
-								<input type="range" min="0" max="360" bind:value={themeHueBg} oninput={applyTheme} />
-							</label>
-							<label class="settings-slider">
-								<span class="settings-slider-label">Overflate</span>
-								<input type="range" min="0" max="360" bind:value={themeHueSurface} oninput={applyTheme} />
-							</label>
-							<label class="settings-slider">
-								<span class="settings-slider-label">Aksent</span>
-								<input type="range" min="0" max="360" bind:value={themeHueAccent} oninput={applyTheme} />
-							</label>
-							<div class="settings-divider"></div>
-							{#if $page.data.session?.user}
-								<div class="settings-user">{$page.data.session.user.name}</div>
-							{/if}
-							<button
-								class="settings-signout"
-								onclick={() => signOut()}
-							>
-								Logg ut
-							</button>
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</header>
+	<ContextHeader
+		userId={nodeId}
+		accessToken={accessToken}
+		{connected}
+		onAddPanel={handleAddPanel}
+		activeTraits={activeLayoutTraits}
+		theme={currentTheme}
+		onThemeChange={handleThemeChange}
+	/>
 
 	<!-- Main content -->
 	{#if workspaceLoading}
@@ -862,281 +519,6 @@
 		background: var(--color-bg, #0a0a0b);
 	}
 
-	/* ================================================================= */
-	/* Context header (inline — personal workspace variant)              */
-	/* ================================================================= */
-	.context-header {
-		border-bottom: 1px solid var(--color-border, #2a2a2e);
-		background: var(--color-surface, #1c1c20);
-		flex-shrink: 0;
-		z-index: 30;
-		position: relative;
-	}
-
-	.context-header-inner {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 6px 16px;
-		max-width: 100%;
-		min-height: 44px;
-	}
-
-	.context-header-left {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		min-width: 0;
-		flex: 1;
-	}
-
-	.context-header-right {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		flex-shrink: 0;
-	}
-
-	.context-back {
-		font-size: 16px;
-		color: #5a5a66;
-		text-decoration: none;
-		flex-shrink: 0;
-		padding: 4px;
-		line-height: 1;
-	}
-
-	.context-back:hover {
-		color: #4b5563;
-	}
-
-	/* ================================================================= */
-	/* Context Selector                                                  */
-	/* ================================================================= */
-	.context-selector {
-		position: relative;
-		min-width: 0;
-	}
-
-	.context-selector-trigger {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		padding: 4px 10px;
-		border: 1px solid transparent;
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		font-size: 15px;
-		font-weight: 600;
-		color: #e8e8ec;
-		max-width: 300px;
-		transition: background 0.12s, border-color 0.12s;
-	}
-
-	.context-selector-trigger:hover {
-		background: var(--color-surface-hover, #242428);
-		border-color: #e5e7eb;
-	}
-
-	.context-selector-title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.context-selector-chevron {
-		font-size: 10px;
-		color: #5a5a66;
-		transition: transform 0.15s;
-		flex-shrink: 0;
-	}
-
-	.context-selector-chevron.open {
-		transform: rotate(180deg);
-	}
-
-	.context-selector-dropdown {
-		position: absolute;
-		top: calc(100% + 4px);
-		left: 0;
-		min-width: 260px;
-		max-width: 360px;
-		background: var(--color-surface, #1c1c20);
-		border: 1px solid var(--color-border, #2a2a2e);
-		border-radius: 8px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-		z-index: 50;
-		overflow: hidden;
-	}
-
-	.context-selector-search {
-		padding: 8px;
-		border-bottom: 1px solid #f3f4f6;
-	}
-
-	.context-selector-search-input {
-		width: 100%;
-		padding: 6px 10px;
-		border: 1px solid var(--color-border, #2a2a2e);
-		border-radius: 6px;
-		font-size: 13px;
-		outline: none;
-		background: var(--color-bg, #141416);
-	}
-
-	.context-selector-search-input:focus {
-		border-color: var(--color-accent, #4f46e5);
-		background: var(--color-surface, #1c1c20);
-	}
-
-	.context-selector-list {
-		max-height: 280px;
-		overflow-y: auto;
-		padding: 4px;
-	}
-
-	.context-selector-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		padding: 8px 10px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		font-size: 13px;
-		color: #8a8a96;
-		text-align: left;
-		transition: background 0.1s;
-	}
-
-	.context-selector-item:hover {
-		background: var(--color-surface-hover, #242428);
-	}
-
-	.context-selector-item-title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.context-selector-empty {
-		padding: 16px;
-		text-align: center;
-		font-size: 12px;
-		color: #5a5a66;
-	}
-
-	/* ================================================================= */
-	/* Tool Menu                                                         */
-	/* ================================================================= */
-	.tool-menu {
-		position: relative;
-	}
-
-	.tool-menu-trigger {
-		font-weight: 500;
-	}
-
-	.tool-menu-dropdown {
-		position: absolute;
-		top: calc(100% + 4px);
-		right: 0;
-		min-width: 200px;
-		background: var(--color-surface, #1c1c20);
-		border: 1px solid var(--color-border, #2a2a2e);
-		border-radius: 8px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-		z-index: 50;
-		overflow: hidden;
-		padding: 4px;
-	}
-
-	.tool-menu-title {
-		padding: 6px 10px 4px;
-		font-size: 11px;
-		font-weight: 600;
-		color: #5a5a66;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	.tool-menu-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 7px 10px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		font-size: 13px;
-		color: #8a8a96;
-		text-align: left;
-		transition: background 0.1s;
-	}
-
-	.tool-menu-item:hover:not(:disabled) {
-		background: var(--color-surface-hover, #242428);
-	}
-
-	.tool-menu-item:disabled {
-		cursor: default;
-		opacity: 0.5;
-	}
-
-	.tool-menu-item-active {
-		color: #5a5a66;
-	}
-
-	.tool-menu-item-icon {
-		font-size: 15px;
-		flex-shrink: 0;
-	}
-
-	.tool-menu-item-label {
-		flex: 1;
-	}
-
-	.tool-menu-item-badge {
-		font-size: 10px;
-		color: #5a5a66;
-		background: var(--color-surface-hover, #242428);
-		padding: 1px 6px;
-		border-radius: 4px;
-	}
-
-	/* ================================================================= */
-	/* Status + buttons                                                  */
-	/* ================================================================= */
-	.context-status {
-		font-size: 8px;
-		color: #d1d5db;
-	}
-
-	.context-status-ok {
-		color: #16a34a;
-	}
-
-	.context-btn {
-		padding: 4px 10px;
-		border: none;
-		border-radius: 6px;
-		font-size: 12px;
-		font-weight: 500;
-		cursor: pointer;
-		background: var(--color-surface-hover, #242428);
-		color: #4b5563;
-		transition: background 0.12s;
-	}
-
-	.context-btn:hover {
-		background: #e5e7eb;
-	}
-
 	/* ================================================================= */
 	/* Messages                                                          */
 	/* ================================================================= */
@@ -1285,216 +667,10 @@
 		min-height: 100%;
 	}
 
-	/* ================================================================= */
-	/* Context selector — groups, rename, new                            */
-	/* ================================================================= */
-	.context-selector-group-label {
-		padding: 8px 10px 4px;
-		font-size: 10px;
-		font-weight: 600;
-		color: #5a5a66;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	.context-selector-item-row {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-
-	.context-selector-item-row .context-selector-item {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.context-selector-rename-btn {
-		flex-shrink: 0;
-		padding: 4px 6px;
-		border: none;
-		background: transparent;
-		cursor: pointer;
-		font-size: 12px;
-		opacity: 0;
-		transition: opacity 0.1s;
-		border-radius: 4px;
-	}
-
-	.context-selector-item-row:hover .context-selector-rename-btn {
-		opacity: 0.6;
-	}
-
-	.context-selector-rename-btn:hover {
-		opacity: 1 !important;
-		background: var(--color-surface-hover, #242428);
-	}
-
-	.context-selector-rename-input {
-		flex: 1;
-		padding: 6px 10px;
-		border: 1px solid #6366f1 !important;
-		border-radius: 6px;
-		font-size: 13px;
-		outline: none;
-		background: #141416 !important;
-		color: #e8e8ec !important;
-		margin: 2px 4px;
-	}
-
-	.context-selector-footer {
-		border-top: 1px solid var(--color-border, #2a2a2e);
-		padding: 6px;
-	}
-
-	.context-selector-new-btn {
-		width: 100%;
-		padding: 8px 10px;
-		border: 1px dashed var(--color-border, #2a2a2e);
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		font-size: 13px;
-		color: #5a5a66;
-		transition: border-color 0.1s, color 0.1s;
-	}
-
-	.context-selector-new-btn:hover:not(:disabled) {
-		border-color: var(--color-accent, #6366f1);
-		color: #8a8a96;
-	}
-
-	.context-selector-new-btn:disabled {
-		opacity: 0.5;
-		cursor: default;
-	}
-
-	/* ================================================================= */
-	/* Settings menu                                                     */
-	/* ================================================================= */
-	.settings-menu {
-		position: relative;
-	}
-
-	.settings-trigger {
-		font-size: 14px;
-	}
-
-	.settings-dropdown {
-		position: absolute;
-		top: calc(100% + 4px);
-		right: 0;
-		min-width: 220px;
-		background: var(--color-surface, #1c1c20);
-		background: var(--color-surface, #1c1c20);
-		border: 1px solid var(--color-border, #2a2a2e);
-		border: 1px solid var(--color-border, #2a2a2e);
-		border-radius: 8px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-		z-index: 50;
-		padding: 12px;
-	}
-
-	.settings-title {
-		font-size: 11px;
-		font-weight: 600;
-		color: #5a5a66;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin-bottom: 8px;
-	}
-
-	.settings-slider {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 6px;
-		cursor: pointer;
-	}
-
-	.settings-slider-label {
-		font-size: 12px;
-		color: #8a8a96;
-		min-width: 65px;
-	}
-
-	.settings-slider input[type="range"] {
-		flex: 1;
-		height: 4px;
-		-webkit-appearance: none;
-		appearance: none;
-		background: #2a2a2e !important;
-		border: none !important;
-		border-radius: 2px;
-		outline: none;
-		padding: 0 !important;
-	}
-
-	.settings-slider input[type="range"]::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		width: 14px;
-		height: 14px;
-		border-radius: 50%;
-		background: var(--color-accent, #6366f1);
-		cursor: pointer;
-	}
-
-	.settings-divider {
-		height: 1px;
-		background: #2a2a2e;
-		margin: 10px 0;
-	}
-
-	.settings-user {
-		font-size: 13px;
-		color: #8a8a96;
-		padding: 4px 0 8px;
-	}
-
-	.settings-signout {
-		width: 100%;
-		padding: 6px 10px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		font-size: 13px;
-		color: #8a8a96;
-		text-align: left;
-		transition: background 0.1s;
-	}
-
-	.settings-signout:hover {
-		background: var(--color-surface-hover, #242428);
-		color: #e8e8ec;
-	}
-
 	/* ================================================================= */
 	/* Responsive                                                        */
 	/* ================================================================= */
 	@media (max-width: 768px) {
-		.context-header-inner {
-			padding: 6px 12px;
-		}
-
-		.context-selector-trigger {
-			font-size: 14px;
-			max-width: 200px;
-		}
-
-		.context-selector-dropdown {
-			min-width: 220px;
-			max-width: calc(100vw - 24px);
-		}
-
-		.tool-menu-dropdown,
-		.settings-dropdown {
-			max-width: calc(100vw - 24px);
-		}
-
-		.context-header-right {
-			gap: 6px;
-		}
-
 		.workspace-empty-tools {
 			gap: 6px;
 		}