From ea1c9c136434883df271a8c5346bf974fd17a2ce Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Mon, 20 Apr 2026 21:21:16 +0200
Subject: [PATCH] fix(spaces): Space-Switcher visible + styled like native
 PillNav pills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two problems made the switcher unusable inside the PillNav:

1. Menu was getting clipped — .pill-nav-container has overflow-x: auto,
   which hides any position: absolute child that extends past the bar.
   Switched to position: fixed with getBoundingClientRect coordinates
   (same pattern @mana/shared-ui PillDropdown uses). Menu now escapes
   the bar container cleanly and opens upward on the viewport.
2. Trigger and menu didn't match Pill design tokens. Rewrote the
   styles to mirror Pill.svelte: pill-shaped 36px height, box-shadow,
   hsl(var(--color-card)) background, hsl(var(--color-border)) border,
   active-state color-mix with --pill-primary-color, dark-mode variant.

Other polish:
- Replaced per-type colored backgrounds with a small type-dot + a
  proper type-label chip inside each menu row. Matches the tone of the
  type chips used elsewhere, and the chip adapts to dark mode.
- Full-viewport backdrop button captures click-outside at z=1500.
- Menu z=1501, create dialog z=1601 so the stack is well-ordered
  (PillNav=1000, menu=1501, dialog=1601).
- Chevron rotates on open (matches other PillDropdown affordances).
- Resize/scroll listeners reposition the menu while it's open so the
  anchoring survives layout changes.
- SpaceCreateDialog's backdrop + dialog z-index bumped from 200/201
  to 1600/1601 so it sits above the menu that spawned it.

0 errors across 7201 files.

Plan: docs/plans/spaces-foundation.md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../layout/SpaceCreateDialog.svelte           |  13 +-
 .../components/layout/SpaceSwitcher.svelte    | 518 +++++++++++++-----
 2 files changed, 374 insertions(+), 157 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/layout/SpaceCreateDialog.svelte b/apps/mana/apps/web/src/lib/components/layout/SpaceCreateDialog.svelte
index ecc5333c9..1c9d974ca 100644
--- a/apps/mana/apps/web/src/lib/components/layout/SpaceCreateDialog.svelte
+++ b/apps/mana/apps/web/src/lib/components/layout/SpaceCreateDialog.svelte
@@ -223,7 +223,9 @@
 		position: fixed;
 		inset: 0;
 		background: rgba(0, 0, 0, 0.4);
-		z-index: 200;
+		/* Above the PillNav (z=1000) and the SpaceSwitcher menu (z=1501)
+			 so opening the dialog cleanly covers the nav chrome. */
+		z-index: 1600;
 		border: 0;
 	}
 
@@ -235,11 +237,12 @@
 		width: min(540px, 92vw);
 		max-height: 86vh;
 		overflow-y: auto;
-		background: var(--color-surface-1, white);
-		color: var(--color-text, inherit);
-		border-radius: var(--radius-lg, 10px);
+		background: hsl(var(--color-card, 0 0% 100%));
+		color: hsl(var(--color-foreground, 0 0% 10%));
+		border: 1px solid hsl(var(--color-border, 0 0% 88%));
+		border-radius: 12px;
 		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
-		z-index: 201;
+		z-index: 1601;
 	}
 
 	form {
diff --git a/apps/mana/apps/web/src/lib/components/layout/SpaceSwitcher.svelte b/apps/mana/apps/web/src/lib/components/layout/SpaceSwitcher.svelte
index 49e16af5b..f03dd9df6 100644
--- a/apps/mana/apps/web/src/lib/components/layout/SpaceSwitcher.svelte
+++ b/apps/mana/apps/web/src/lib/components/layout/SpaceSwitcher.svelte
@@ -3,13 +3,14 @@
 	 * SpaceSwitcher — dropdown that shows the active Space and lets the
 	 * user switch to another one or create a new Space.
 	 *
-	 * Minimal and self-contained so it can be dropped anywhere in the
-	 * header without touching the PillNavigation's own config surface.
-	 * Uses plain <button> + absolute-positioned <div> for the dropdown
-	 * — sufficient for Phase 1; can migrate to a shared-ui Popover
-	 * primitive later if the pattern repeats.
+	 * Visual match to @mana/shared-ui Pill / PillDropdown so the trigger
+	 * reads as a native member of the PillNav row. The menu uses fixed
+	 * positioning with getBoundingClientRect coordinates so it escapes
+	 * the PillNav's overflow-x container (which would otherwise clip it).
+	 * A full-viewport backdrop handles click-outside.
 	 */
 
+	import { onDestroy } from 'svelte';
 	import { getActiveSpace, loadActiveSpace, type ActiveSpace } from '$lib/data/scope';
 	import { SPACE_TYPE_LABELS } from '@mana/shared-branding';
 	import { isSpaceType, isSpaceTier } from '@mana/shared-types';
@@ -29,13 +30,29 @@
 	let switching = $state(false);
 	let loadError = $state<string | null>(null);
 
+	let triggerEl: HTMLButtonElement | null = $state(null);
+	let menuPos = $state({ top: 0, left: 0, minWidth: 240 });
+
 	const active = $derived(getActiveSpace());
 
 	function typeLabel(type: ActiveSpace['type']): string {
 		return SPACE_TYPE_LABELS[locale][type];
 	}
 
+	function positionMenu() {
+		if (!triggerEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		// Open upward: the PillNav sits on viewport bottom; align menu's
+		// bottom edge to 8px above the trigger top.
+		menuPos = {
+			top: rect.top - 8,
+			left: rect.left,
+			minWidth: Math.max(240, rect.width),
+		};
+	}
+
 	async function openDropdown() {
+		positionMenu();
 		open = true;
 		loadingList = true;
 		loadError = null;
@@ -58,7 +75,7 @@
 					name: o.name,
 					tier,
 					type,
-					role: 'member', // real role comes via /get-active-member; not needed for display
+					role: 'member',
 				};
 			});
 		} catch (err) {
@@ -68,10 +85,14 @@
 		}
 	}
 
+	function closeDropdown() {
+		open = false;
+	}
+
 	async function switchTo(id: string) {
 		if (switching) return;
 		if (id === active?.id) {
-			open = false;
+			closeDropdown();
 			return;
 		}
 		switching = true;
@@ -84,10 +105,6 @@
 			});
 			if (!res.ok) throw new Error(`set-active failed: ${res.status}`);
 			await loadActiveSpace({ force: true });
-			// Full reload so every liveQuery re-evaluates against the new active
-			// space. A reactive-invalidation path would require each liveQuery
-			// to re-subscribe on spaceId change; revisit once the scope wrapper
-			// is used widely enough for that to matter.
 			if (typeof window !== 'undefined') window.location.reload();
 		} catch (err) {
 			loadError = err instanceof Error ? err.message : String(err);
@@ -97,219 +114,416 @@
 	}
 
 	function handleKey(e: KeyboardEvent) {
-		if (e.key === 'Escape') open = false;
+		if (e.key === 'Escape') closeDropdown();
 	}
+
+	function handleResize() {
+		if (open) positionMenu();
+	}
+
+	if (typeof window !== 'undefined') {
+		window.addEventListener('resize', handleResize);
+		window.addEventListener('scroll', handleResize, true);
+	}
+	onDestroy(() => {
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('resize', handleResize);
+			window.removeEventListener('scroll', handleResize, true);
+		}
+	});
 </script>
 
 <svelte:window onkeydown={handleKey} />
 
-<div class="space-switcher" class:open>
+<button
+	bind:this={triggerEl}
+	type="button"
+	class="pill pill-sm trigger"
+	class:active={open}
+	aria-haspopup="menu"
+	aria-expanded={open}
+	onclick={() => (open ? closeDropdown() : openDropdown())}
+>
+	<span class="name">{active?.name ?? '…'}</span>
+	{#if active}
+		<span class="type-dot" data-type={active.type} aria-hidden="true"></span>
+	{/if}
+	<svg class="chev" class:rotated={open} viewBox="0 0 24 24" aria-hidden="true">
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M19 9l-7 7-7-7"
+		/>
+	</svg>
+</button>
+
+{#if open}
 	<button
 		type="button"
-		class="trigger"
-		aria-haspopup="menu"
-		aria-expanded={open}
-		onclick={() => (open ? (open = false) : openDropdown())}
-	>
-		<span class="name">{active?.name ?? '…'}</span>
-		{#if active}
-			<span class="type-badge" data-type={active.type}>{typeLabel(active.type)}</span>
-		{/if}
-		<span class="chev" aria-hidden="true">▾</span>
-	</button>
+		class="backdrop"
+		aria-label="Menü schließen"
+		onclick={closeDropdown}
+		tabindex="-1"
+	></button>
 
-	{#if open}
-		<div class="dropdown" role="menu" aria-label={locale === 'de' ? 'Spaces' : 'Spaces'}>
-			{#if loadingList}
-				<div class="empty">{locale === 'de' ? 'Lädt …' : 'Loading …'}</div>
-			{:else if loadError}
-				<div class="error">{loadError}</div>
-			{:else if spaces.length === 0}
-				<div class="empty">
-					{locale === 'de' ? 'Keine Spaces' : 'No spaces'}
-				</div>
-			{:else}
-				{#each spaces as space (space.id)}
-					<button
-						type="button"
-						class="item"
-						class:active={space.id === active?.id}
-						aria-current={space.id === active?.id ? 'true' : undefined}
-						onclick={() => switchTo(space.id)}
-						disabled={switching}
-					>
-						<span class="item-name">{space.name}</span>
-						<span class="type-badge" data-type={space.type}>{typeLabel(space.type)}</span>
-					</button>
-				{/each}
-			{/if}
-			<hr />
-			{#if active && active.type !== 'personal'}
-				<a class="item manage" href="/spaces/members" onclick={() => (open = false)}>
-					{locale === 'de' ? 'Mitglieder verwalten …' : 'Manage members …'}
-				</a>
-			{/if}
-			<button
-				type="button"
-				class="item create"
-				onclick={() => {
-					open = false;
-					createOpen = true;
-				}}
-			>
-				+ {locale === 'de' ? 'Neuer Space' : 'New space'}
-			</button>
-		</div>
-	{/if}
-</div>
+	<div
+		class="menu"
+		role="menu"
+		aria-label={locale === 'de' ? 'Spaces' : 'Spaces'}
+		style="--menu-top: {menuPos.top}px; --menu-left: {menuPos.left}px; --menu-min-w: {menuPos.minWidth}px;"
+	>
+		{#if loadingList}
+			<div class="menu-empty">{locale === 'de' ? 'Lädt …' : 'Loading …'}</div>
+		{:else if loadError}
+			<div class="menu-error">{loadError}</div>
+		{:else if spaces.length === 0}
+			<div class="menu-empty">
+				{locale === 'de' ? 'Keine Spaces' : 'No spaces'}
+			</div>
+		{:else}
+			{#each spaces as space (space.id)}
+				<button
+					type="button"
+					class="menu-item"
+					class:is-active={space.id === active?.id}
+					aria-current={space.id === active?.id ? 'true' : undefined}
+					onclick={() => switchTo(space.id)}
+					disabled={switching}
+				>
+					<span class="type-dot" data-type={space.type} aria-hidden="true"></span>
+					<span class="item-name">{space.name}</span>
+					<span class="type-label" data-type={space.type}>{typeLabel(space.type)}</span>
+				</button>
+			{/each}
+		{/if}
+
+		<div class="menu-divider"></div>
+
+		{#if active && active.type !== 'personal'}
+			<a class="menu-item menu-link" href="/spaces/members" onclick={closeDropdown} role="menuitem">
+				<span class="icon-placeholder" aria-hidden="true">
+					<svg viewBox="0 0 24 24" width="16" height="16">
+						<path
+							fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M23 21v-2a4 4 0 00-3-3.87M9 11a4 4 0 100-8 4 4 0 000 8zm7 0a4 4 0 00-1-7.75"
+						/>
+					</svg>
+				</span>
+				<span class="item-name">
+					{locale === 'de' ? 'Mitglieder verwalten' : 'Manage members'}
+				</span>
+			</a>
+		{/if}
+
+		<button
+			type="button"
+			class="menu-item menu-create"
+			onclick={() => {
+				closeDropdown();
+				createOpen = true;
+			}}
+			role="menuitem"
+		>
+			<span class="icon-placeholder" aria-hidden="true">
+				<svg viewBox="0 0 24 24" width="16" height="16">
+					<path
+						fill="none"
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 5v14M5 12h14"
+					/>
+				</svg>
+			</span>
+			<span class="item-name">
+				{locale === 'de' ? 'Neuer Space' : 'New space'}
+			</span>
+		</button>
+	</div>
+{/if}
 
 <SpaceCreateDialog bind:open={createOpen} {locale} onClose={() => (createOpen = false)} />
 
 <style>
-	.space-switcher {
-		position: relative;
-		display: inline-block;
-	}
-
-	.trigger {
+	/* Trigger — mirrors @mana/shared-ui Pill (size sm) so it reads as a
+		 native member of the PillNav row. */
+	.pill {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.375rem;
-		padding: 0.25rem 0.5rem;
-		border-radius: 999px;
-		background: transparent;
-		border: 1px solid var(--color-border, hsl(0 0% 88%));
-		color: var(--color-text, inherit);
-		font-size: 0.8125rem;
+		padding: 0 0.75rem;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
 		cursor: pointer;
-		height: 32px;
-		transition: background-color 120ms ease;
+		flex-shrink: 0;
+		transition: all 0.15s ease;
+		border: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-card));
+		color: hsl(var(--color-foreground));
+		box-shadow:
+			0 1px 2px hsl(0 0% 0% / 0.05),
+			0 2px 6px hsl(0 0% 0% / 0.04);
 	}
 
-	.trigger:hover {
-		background: var(--color-surface-3, hsl(0 0% 96%));
+	.pill-sm {
+		height: 36px;
+	}
+
+	.pill:hover {
+		background: hsl(var(--color-surface-hover, var(--color-card)));
+		border-color: hsl(var(--color-border-strong, var(--color-border)));
+	}
+
+	.pill.active {
+		background: color-mix(
+			in srgb,
+			var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 20%,
+			white 80%
+		);
+		border-color: var(--pill-primary-color, var(--color-primary-500, rgba(248, 214, 43, 0.5)));
+		color: #1a1a1a;
+	}
+
+	:global(.dark) .pill.active {
+		background: color-mix(
+			in srgb,
+			var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 30%,
+			transparent 70%
+		);
+		color: hsl(var(--color-foreground));
 	}
 
 	.name {
-		font-weight: 500;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 7rem;
+		max-width: 8rem;
+	}
+
+	.type-dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: hsl(0 0% 60%);
+		flex-shrink: 0;
+	}
+
+	.type-dot[data-type='personal'] {
+		background: hsl(220 10% 55%);
+	}
+	.type-dot[data-type='brand'] {
+		background: hsl(260 60% 55%);
+	}
+	.type-dot[data-type='club'] {
+		background: hsl(160 55% 40%);
+	}
+	.type-dot[data-type='family'] {
+		background: hsl(30 75% 50%);
+	}
+	.type-dot[data-type='team'] {
+		background: hsl(210 60% 50%);
+	}
+	.type-dot[data-type='practice'] {
+		background: hsl(340 55% 50%);
 	}
 
 	.chev {
-		font-size: 0.75rem;
+		width: 14px;
+		height: 14px;
 		opacity: 0.6;
+		transition: transform 0.15s ease;
 	}
 
-	.type-badge {
-		font-size: 0.6875rem;
-		padding: 0.125rem 0.375rem;
-		border-radius: var(--radius-sm, 4px);
-		background: var(--color-surface-3, hsl(0 0% 92%));
-		color: var(--color-text-muted, hsl(0 0% 45%));
-		text-transform: uppercase;
-		letter-spacing: 0.02em;
+	.chev.rotated {
+		transform: rotate(180deg);
 	}
 
-	.type-badge[data-type='brand'] {
-		background: hsl(260 70% 94%);
-		color: hsl(260 60% 35%);
-	}
-	.type-badge[data-type='club'] {
-		background: hsl(160 50% 92%);
-		color: hsl(160 60% 28%);
-	}
-	.type-badge[data-type='family'] {
-		background: hsl(30 80% 92%);
-		color: hsl(30 60% 35%);
-	}
-	.type-badge[data-type='team'] {
-		background: hsl(210 60% 92%);
-		color: hsl(210 60% 32%);
-	}
-	.type-badge[data-type='practice'] {
-		background: hsl(340 50% 92%);
-		color: hsl(340 55% 38%);
+	/* Backdrop — full-viewport click-outside catcher. Transparent but
+		 blocks clicks from reaching elements under the menu. */
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		background: transparent;
+		border: 0;
+		z-index: 1500;
+		cursor: default;
 	}
 
-	.dropdown {
-		position: absolute;
-		/* Open upward because the switcher sits inside the bottom-fixed
-			 PillNav — a downward dropdown would land off-screen. */
-		bottom: calc(100% + 4px);
-		left: 0;
-		min-width: 14rem;
-		background: var(--color-surface-1, white);
-		border: 1px solid var(--color-border, hsl(0 0% 88%));
-		border-radius: var(--radius-md, 6px);
-		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-		padding: 0.25rem;
-		z-index: 50;
+	/* Menu — escapes PillNav's overflow-x container via position:fixed.
+		 transform: translateY(-100%) anchors the menu's bottom to
+		 --menu-top (the 8px-offset trigger top). */
+	.menu {
+		position: fixed;
+		top: var(--menu-top);
+		left: var(--menu-left);
+		transform: translateY(-100%);
+		min-width: var(--menu-min-w);
+		max-width: 320px;
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 12px;
+		box-shadow:
+			0 10px 30px hsl(0 0% 0% / 0.12),
+			0 4px 10px hsl(0 0% 0% / 0.06);
+		padding: 0.375rem;
+		z-index: 1501;
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
+		animation: menu-in 120ms ease-out;
 	}
 
-	.dropdown hr {
-		border: 0;
-		border-top: 1px solid var(--color-border, hsl(0 0% 88%));
+	@keyframes menu-in {
+		from {
+			opacity: 0;
+			transform: translateY(-100%) translateY(4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(-100%);
+		}
+	}
+
+	.menu-divider {
+		height: 1px;
+		background: hsl(var(--color-border));
 		margin: 0.25rem 0;
 	}
 
-	.item {
+	.menu-item {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
 		gap: 0.5rem;
 		padding: 0.5rem 0.625rem;
-		border-radius: var(--radius-sm, 4px);
+		border-radius: 8px;
 		background: transparent;
 		border: 0;
-		color: var(--color-text, inherit);
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
+		font-weight: 500;
 		text-align: left;
-		cursor: pointer;
 		text-decoration: none;
+		cursor: pointer;
+		transition: background-color 0.1s ease;
 	}
 
-	.item:hover:not(:disabled) {
-		background: var(--color-surface-2, hsl(0 0% 95%));
+	.menu-item:hover:not(:disabled) {
+		background: hsl(var(--color-surface-hover, var(--color-muted, 0 0% 96%)));
 	}
 
-	.item:disabled {
-		opacity: 0.6;
+	.menu-item:disabled {
+		opacity: 0.55;
 		cursor: not-allowed;
 	}
 
-	.item.active {
-		background: var(--color-surface-2, hsl(0 0% 95%));
-		font-weight: 600;
+	.menu-item.is-active {
+		background: color-mix(
+			in srgb,
+			var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 15%,
+			transparent 85%
+		);
 	}
 
 	.item-name {
+		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	.item.create {
-		color: var(--color-primary, hsl(230 80% 50%));
+	.type-label {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		padding: 2px 8px;
+		border-radius: 9999px;
+		background: hsl(var(--color-muted, 0 0% 94%));
+		color: hsl(var(--color-muted-foreground, 0 0% 40%));
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+		flex-shrink: 0;
 	}
 
-	.item.manage {
-		color: var(--color-text-muted, hsl(0 0% 45%));
+	.type-label[data-type='brand'] {
+		background: hsl(260 60% 95%);
+		color: hsl(260 55% 35%);
+	}
+	.type-label[data-type='club'] {
+		background: hsl(160 45% 93%);
+		color: hsl(160 55% 28%);
+	}
+	.type-label[data-type='family'] {
+		background: hsl(30 70% 93%);
+		color: hsl(30 55% 35%);
+	}
+	.type-label[data-type='team'] {
+		background: hsl(210 55% 93%);
+		color: hsl(210 55% 32%);
+	}
+	.type-label[data-type='practice'] {
+		background: hsl(340 50% 94%);
+		color: hsl(340 50% 38%);
 	}
 
-	.empty,
-	.error {
+	:global(.dark) .type-label {
+		background: hsl(var(--color-muted, 0 0% 20%));
+		color: hsl(var(--color-muted-foreground, 0 0% 75%));
+	}
+	:global(.dark) .type-label[data-type='brand'] {
+		background: hsl(260 40% 25%);
+		color: hsl(260 80% 85%);
+	}
+	:global(.dark) .type-label[data-type='club'] {
+		background: hsl(160 35% 20%);
+		color: hsl(160 70% 80%);
+	}
+	:global(.dark) .type-label[data-type='family'] {
+		background: hsl(30 40% 22%);
+		color: hsl(30 80% 82%);
+	}
+	:global(.dark) .type-label[data-type='team'] {
+		background: hsl(210 40% 22%);
+		color: hsl(210 70% 82%);
+	}
+	:global(.dark) .type-label[data-type='practice'] {
+		background: hsl(340 35% 23%);
+		color: hsl(340 65% 82%);
+	}
+
+	.icon-placeholder {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		color: hsl(var(--color-muted-foreground, 0 0% 45%));
+		flex-shrink: 0;
+	}
+
+	.menu-create {
+		color: hsl(var(--color-primary, var(--color-primary-500, 230 80% 50%)));
+	}
+
+	.menu-create .icon-placeholder {
+		color: inherit;
+	}
+
+	.menu-empty,
+	.menu-error {
 		padding: 0.5rem 0.625rem;
 		font-size: 0.8125rem;
-		color: var(--color-text-muted, hsl(0 0% 45%));
+		color: hsl(var(--color-muted-foreground, 0 0% 45%));
 	}
 
-	.error {
-		color: hsl(0 60% 45%);
+	.menu-error {
+		color: hsl(0 65% 50%);
 	}
 </style>