From b03bbe132e30f55e4e9ba9d5358ec24eda64cab3 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 00:58:46 +0200
Subject: [PATCH] feat(shared-ui): unify bottom-stack bars with shared Pill
 component

- Extract Pill.svelte as the single visual primitive (44px, icon+label,
  active/primary/danger variants) used by PillDropdownBar and TagStrip.
  PillNav keeps its own internal .pill class (36px, icon-only-oriented).
- Extract phosphor-icon-map.ts to deduplicate the icon lookup tables
  that previously lived inline in PillDropdownBar.
- Unify bar slot heights in (app)/+layout.svelte: 56px PillNav,
  64px for tags / quickinput / tabbar / dropdown-bar. Remove debug
  outlines. Collapse bottom-stack gap so bars sit flush below PillNav.
- SceneAppBar wrapped in 64px slot, scene-pill/app-tab 40px to match.
- Enforce single-bar policy: opening one bar closes the others.
- QuickInputBar strip-down: remove leading CheckSquare icon and trailing
  nav-toggle snippet; bar is pure search input now.
- Move user-menu (last PillNav pill) to bar-mode with short content:
  Einstellungen, Light/Dark/System segmented, Theme, Logout.
- Swap tabs nav icon from Columns to Cards for better readability.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/workbench/SceneAppBar.svelte   | 144 +++++-----
 packages/shared-ui/src/navigation/Pill.svelte | 172 ++++++++++++
 .../src/navigation/PillDropdownBar.svelte     | 254 +++---------------
 .../shared-ui/src/navigation/TagStrip.svelte  | 209 ++++----------
 packages/shared-ui/src/navigation/index.ts    |   1 +
 .../src/navigation/phosphor-icon-map.ts       | 126 +++++++++
 .../shared-ui/src/quick-input/InputBar.svelte |  21 +-
 7 files changed, 467 insertions(+), 460 deletions(-)
 create mode 100644 packages/shared-ui/src/navigation/Pill.svelte
 create mode 100644 packages/shared-ui/src/navigation/phosphor-icon-map.ts

diff --git a/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte b/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte
index ca2fbea74..497d6c70d 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte
@@ -68,91 +68,101 @@
 	}
 </script>
 
-<div class="scene-app-bar">
-	{#each scenes as scene (scene.id)}
-		{@const isActive = scene.id === activeSceneId}
+<div class="scene-app-bar-wrapper">
+	<div class="scene-app-bar">
+		{#each scenes as scene (scene.id)}
+			{@const isActive = scene.id === activeSceneId}
 
-		{#if isActive && pages.length > 0}
-			<!-- Active scene + its app tabs wrapped in a visual group -->
-			<div class="scene-group">
+			{#if isActive && pages.length > 0}
+				<!-- Active scene + its app tabs wrapped in a visual group -->
+				<div class="scene-group">
+					<button
+						type="button"
+						class="scene-pill active"
+						onclick={() => onSceneSelect(scene.id)}
+						oncontextmenu={(e) => onSceneContextMenu(e, scene)}
+					>
+						<span class="scene-name">{scene.name}</span>
+						<span class="scene-count">{scene.openApps.length}</span>
+					</button>
+					<span class="group-sep"></span>
+					{#each pages as p (p.id)}
+						{@const AppIcon = p.icon}
+						<button
+							class="app-tab"
+							onclick={() => onAppClick(p.id)}
+							oncontextmenu={(e) => onAppContextMenu(e, p.id)}
+						>
+							{#if AppIcon}
+								<span class="app-icon" style="color: {p.color}">
+									<AppIcon size={12} weight="fill" />
+								</span>
+							{:else}
+								<span class="app-dot" style="background-color: {p.color}"></span>
+							{/if}
+							<span class="app-title">{p.title}</span>
+						</button>
+					{/each}
+					<button class="app-add" onclick={onAddApp} title="App hinzufügen">
+						<Plus size={12} />
+					</button>
+				</div>
+			{:else}
 				<button
 					type="button"
-					class="scene-pill active"
+					class="scene-pill"
+					class:active={isActive}
 					onclick={() => onSceneSelect(scene.id)}
 					oncontextmenu={(e) => onSceneContextMenu(e, scene)}
 				>
 					<span class="scene-name">{scene.name}</span>
 					<span class="scene-count">{scene.openApps.length}</span>
 				</button>
-				<span class="group-sep"></span>
-				{#each pages as p (p.id)}
-					{@const AppIcon = p.icon}
-					<button
-						class="app-tab"
-						onclick={() => onAppClick(p.id)}
-						oncontextmenu={(e) => onAppContextMenu(e, p.id)}
-					>
-						{#if AppIcon}
-							<span class="app-icon" style="color: {p.color}">
-								<AppIcon size={12} weight="fill" />
-							</span>
-						{:else}
-							<span class="app-dot" style="background-color: {p.color}"></span>
-						{/if}
-						<span class="app-title">{p.title}</span>
-					</button>
-				{/each}
-				<button class="app-add" onclick={onAddApp} title="App hinzufügen">
-					<Plus size={12} />
+			{/if}
+		{/each}
+
+		{#if creating}
+			<div class="inline-create">
+				<input
+					bind:this={inputEl}
+					class="inline-create-input"
+					type="text"
+					maxlength="40"
+					placeholder="Name…"
+					bind:value={newName}
+					onkeydown={handleInputKeydown}
+					onblur={submitCreate}
+				/>
+				<button class="inline-create-btn confirm" onclick={submitCreate} title="Erstellen">
+					<Check size={14} weight="bold" />
+				</button>
+				<button class="inline-create-btn cancel" onclick={cancelCreate} title="Abbrechen">
+					<X size={14} weight="bold" />
 				</button>
 			</div>
 		{:else}
-			<button
-				type="button"
-				class="scene-pill"
-				class:active={isActive}
-				onclick={() => onSceneSelect(scene.id)}
-				oncontextmenu={(e) => onSceneContextMenu(e, scene)}
-			>
-				<span class="scene-name">{scene.name}</span>
-				<span class="scene-count">{scene.openApps.length}</span>
+			<button type="button" class="scene-add" onclick={startCreate} title="Neue Szene">
+				<Plus size={14} />
 			</button>
 		{/if}
-	{/each}
-
-	{#if creating}
-		<div class="inline-create">
-			<input
-				bind:this={inputEl}
-				class="inline-create-input"
-				type="text"
-				maxlength="40"
-				placeholder="Name…"
-				bind:value={newName}
-				onkeydown={handleInputKeydown}
-				onblur={submitCreate}
-			/>
-			<button class="inline-create-btn confirm" onclick={submitCreate} title="Erstellen">
-				<Check size={14} weight="bold" />
-			</button>
-			<button class="inline-create-btn cancel" onclick={cancelCreate} title="Abbrechen">
-				<X size={14} weight="bold" />
-			</button>
-		</div>
-	{:else}
-		<button type="button" class="scene-add" onclick={startCreate} title="Neue Szene">
-			<Plus size={14} />
-		</button>
-	{/if}
+	</div>
 </div>
 
 <style>
+	.scene-app-bar-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		/* Bar slot (see bottomChromeHeight in (app)/+layout.svelte). */
+		height: 64px;
+	}
+
 	.scene-app-bar {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		gap: 0.25rem;
-		padding: 0.25rem 0.5rem;
+		padding: 0.125rem 0.5rem;
 		margin: 0 auto;
 		width: fit-content;
 		max-width: calc(100vw - 2rem);
@@ -174,7 +184,7 @@
 		background: hsl(var(--color-primary) / 0.1);
 		border: 1.5px solid hsl(var(--color-primary) / 0.25);
 		border-radius: 9999px;
-		padding: 0.1875rem;
+		padding: 0.125rem;
 	}
 
 	/* Scene pills */
@@ -188,7 +198,8 @@
 		color: hsl(var(--color-muted-foreground));
 		font-size: 0.9375rem;
 		font-weight: 500;
-		padding: 0.5rem 1rem;
+		padding: 0 0.875rem;
+		height: 40px;
 		border-radius: 9999px;
 		cursor: pointer;
 		transition: all 0.15s;
@@ -292,7 +303,8 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 0.25rem;
-		padding: 0.5rem 1rem;
+		padding: 0 0.875rem;
+		height: 40px;
 		border-radius: 9999px;
 		border: none;
 		background: transparent;
diff --git a/packages/shared-ui/src/navigation/Pill.svelte b/packages/shared-ui/src/navigation/Pill.svelte
new file mode 100644
index 000000000..4455be31b
--- /dev/null
+++ b/packages/shared-ui/src/navigation/Pill.svelte
@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { phosphorIcons } from './phosphor-icon-map';
+
+	interface Props {
+		/** Phosphor icon name (see phosphor-icon-map.ts). */
+		icon?: string;
+		/** URL to navigate to. If set, renders an <a>; otherwise a <button>. */
+		href?: string;
+		/** Display label. Use `iconOnly` to hide. */
+		label?: string;
+		/** Hide label (label is still used for aria-label/title). */
+		iconOnly?: boolean;
+		/** Active/selected state */
+		active?: boolean;
+		/** Primary accent (e.g. "Erstellen") */
+		primary?: boolean;
+		/** Destructive style (e.g. Logout) */
+		danger?: boolean;
+		/** Disabled state (button only) */
+		disabled?: boolean;
+		/** Click handler */
+		onclick?: (e: MouseEvent) => void;
+		/** Right-click handler */
+		oncontextmenu?: (e: MouseEvent) => void;
+		/** Tooltip */
+		title?: string;
+		/** Extra class names (e.g. drag-source marker) */
+		class?: string;
+		/** Custom content rendered before the label (e.g. colored tag dot). */
+		leading?: Snippet;
+		/** Custom content rendered after the label. */
+		trailing?: Snippet;
+	}
+
+	let {
+		icon,
+		href,
+		label,
+		iconOnly = false,
+		active = false,
+		primary = false,
+		danger = false,
+		disabled = false,
+		onclick,
+		oncontextmenu,
+		title,
+		class: className,
+		leading,
+		trailing,
+	}: Props = $props();
+
+	const IconComp = $derived(icon ? phosphorIcons[icon] : null);
+	const ariaLabel = $derived(iconOnly ? label : undefined);
+	const effectiveTitle = $derived(title ?? (iconOnly ? label : undefined));
+</script>
+
+{#snippet body()}
+	{#if leading}{@render leading()}{/if}
+	{#if IconComp}
+		<IconComp size={20} weight="bold" class="pill-icon" />
+	{/if}
+	{#if label && !iconOnly}
+		<span class="pill-label">{label}</span>
+	{/if}
+	{#if trailing}{@render trailing()}{/if}
+{/snippet}
+
+{#if href}
+	<a
+		{href}
+		class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
+			.filter(Boolean)
+			.join(' ')}
+		aria-label={ariaLabel}
+		title={effectiveTitle}
+		{onclick}
+		{oncontextmenu}
+	>
+		{@render body()}
+	</a>
+{:else}
+	<button
+		type="button"
+		class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
+			.filter(Boolean)
+			.join(' ')}
+		aria-label={ariaLabel}
+		title={effectiveTitle}
+		{disabled}
+		{onclick}
+		{oncontextmenu}
+	>
+		{@render body()}
+	</button>
+{/if}
+
+<style>
+	.pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0 0.875rem;
+		height: 44px;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		text-decoration: none;
+		cursor: pointer;
+		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);
+	}
+
+	.pill:hover:not(:disabled) {
+		background: hsl(var(--color-surface-hover, var(--color-card)));
+		border-color: hsl(var(--color-border-strong, var(--color-border)));
+		transform: translateY(-1px);
+	}
+
+	.pill:active:not(:disabled) {
+		transform: translateY(0);
+	}
+
+	.pill:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.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: var(--pill-primary-color, var(--color-primary-500, #f8d62b));
+	}
+
+	.pill.primary {
+		background: var(--pill-primary-color, var(--color-primary-500, #6366f1));
+		border-color: transparent;
+		color: white;
+	}
+
+	.pill.danger {
+		color: #dc2626;
+	}
+
+	:global(.dark) .pill.danger {
+		color: #ef4444;
+	}
+
+	.pill :global(.pill-label) {
+		font-weight: 500;
+	}
+</style>
diff --git a/packages/shared-ui/src/navigation/PillDropdownBar.svelte b/packages/shared-ui/src/navigation/PillDropdownBar.svelte
index 694f0766d..cce484ccd 100644
--- a/packages/shared-ui/src/navigation/PillDropdownBar.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdownBar.svelte
@@ -1,125 +1,7 @@
 <script lang="ts">
 	import type { PillDropdownItem } from './types';
-	import {
-		Archive,
-		Bell,
-		Buildings,
-		CalendarBlank,
-		CaretDown,
-		ChartBar,
-		ChatCircle,
-		Check,
-		CheckCircle,
-		CheckSquare,
-		Clock,
-		Cloud,
-		Columns,
-		Compass,
-		CreditCard,
-		File,
-		FileText,
-		Fire,
-		Folder,
-		Gear,
-		Gift,
-		Globe,
-		GridFour,
-		Heart,
-		House,
-		Key,
-		List,
-		MagnifyingGlass,
-		Microphone,
-		Moon,
-		MusicNote,
-		MusicNotes,
-		Palette,
-		Playlist,
-		Plus,
-		Question,
-		Robot,
-		Scales,
-		ShareFat,
-		ShareNetwork,
-		Shield,
-		SignOut,
-		Sparkle,
-		Spiral,
-		Sun,
-		Tag,
-		Target,
-		Timer,
-		Trash,
-		Tray,
-		Upload,
-		User,
-		Users,
-		Waveform,
-	} from '@mana/shared-icons';
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const phosphorIcons: Record<string, any> = {
-		home: House,
-		users: Users,
-		user: User,
-		tag: Tag,
-		heart: Heart,
-		settings: Gear,
-		chat: ChatCircle,
-		'help-circle': Question,
-		help: Question,
-		'share-2': ShareNetwork,
-		bell: Bell,
-		clock: Clock,
-		timer: Timer,
-		target: Target,
-		globe: Globe,
-		inbox: Tray,
-		check: Check,
-		checkCircle: CheckCircle,
-		'check-square': CheckSquare,
-		plus: Plus,
-		columns: Columns,
-		kanban: Columns,
-		mic: Microphone,
-		calendar: CalendarBlank,
-		folder: Folder,
-		archive: Archive,
-		upload: Upload,
-		music: MusicNote,
-		document: File,
-		chart: ChartBar,
-		'bar-chart-3': ChartBar,
-		search: MagnifyingGlass,
-		list: List,
-		compass: Compass,
-		moon: Moon,
-		sun: Sun,
-		logout: SignOut,
-		chevronDown: CaretDown,
-		menu: List,
-		fire: Fire,
-		grid: GridFour,
-		gridSmall: GridFour,
-		palette: Palette,
-		creditCard: CreditCard,
-		building: Buildings,
-		scale: Scales,
-		robot: Robot,
-		key: Key,
-		shield: Shield,
-		gift: Gift,
-		'music-notes': MusicNotes,
-		playlist: Playlist,
-		waveform: Waveform,
-		'file-text': FileText,
-		sparkle: Sparkle,
-		sparkles: Sparkle,
-		spiral: Spiral,
-		share: ShareFat,
-		trash: Trash,
-		cloud: Cloud,
-	};
+	import { phosphorIcons } from './phosphor-icon-map';
+	import Pill from './Pill.svelte';
 
 	interface Props {
 		/** Items to render as pills in the bar */
@@ -189,13 +71,7 @@
 <div class="dropdown-bar-wrapper" class:static={positioning === 'static'}>
 	<div class="dropdown-bar-container">
 		{#if label}
-			<div class="bar-label glass-pill">
-				{#if icon && phosphorIcons[icon]}
-					{@const IconComponent = phosphorIcons[icon]}
-					<IconComponent size={16} />
-				{/if}
-				<span>{label}</span>
-			</div>
+			<Pill {icon} {label} disabled class="bar-label" />
 		{/if}
 
 		{#each renderElements as el (el.id)}
@@ -233,7 +109,7 @@
 								</svg>
 							{:else if gi.icon && phosphorIcons[gi.icon]}
 								{@const GIcon = phosphorIcons[gi.icon]}
-								<GIcon size={16} class="segmented-icon" />
+								<GIcon size={20} weight="bold" class="segmented-icon" />
 							{/if}
 							{#if showLabels}
 								<span class="segmented-label">{gi.label}</span>
@@ -243,24 +119,22 @@
 				</div>
 			{:else}
 				{@const item = el.item}
-				<button
-					type="button"
-					class="bar-pill glass-pill"
-					class:active={item.active}
-					class:primary={item.primary}
-					class:danger={item.danger}
+				<Pill
+					icon={item.imageUrl ? undefined : item.icon}
+					label={item.label}
+					active={item.active}
+					primary={item.primary}
+					danger={item.danger}
 					disabled={item.disabled}
 					onclick={(e) => handleClick(item, e)}
 					title={item.label}
 				>
-					{#if item.imageUrl}
-						<img src={item.imageUrl} alt="" class="bar-img" />
-					{:else if item.icon && phosphorIcons[item.icon]}
-						{@const IconComponent = phosphorIcons[item.icon]}
-						<IconComponent size={16} />
-					{/if}
-					<span>{item.label}</span>
-				</button>
+					{#snippet leading()}
+						{#if item.imageUrl}
+							<img src={item.imageUrl} alt="" class="bar-img" />
+						{/if}
+					{/snippet}
+				</Pill>
 			{/if}
 		{/each}
 	</div>
@@ -271,7 +145,10 @@
 		display: flex;
 		flex-direction: column;
 		align-items: stretch;
+		justify-content: center;
 		pointer-events: none;
+		/* Matches tags/tabbar/quickinput slot (see bottomChromeHeight in (app)/+layout.svelte). */
+		height: 64px;
 	}
 
 	.dropdown-bar-wrapper.static {
@@ -287,7 +164,7 @@
 		max-width: 100%;
 		margin-left: auto;
 		margin-right: auto;
-		padding: 0.5rem 2rem;
+		padding: 0 2rem;
 		overflow-x: auto;
 		scrollbar-width: none;
 		-ms-overflow-style: none;
@@ -311,82 +188,12 @@
 		display: none;
 	}
 
-	.bar-pill {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.875rem;
-		border-radius: 9999px;
-		font-size: 0.8125rem;
-		font-weight: 500;
-		white-space: nowrap;
-		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-card));
-		color: hsl(var(--color-foreground));
-		cursor: pointer;
-		flex-shrink: 0;
-		transition: all 0.15s ease;
-		box-shadow:
-			0 1px 2px hsl(0 0% 0% / 0.05),
-			0 2px 6px hsl(0 0% 0% / 0.04);
-	}
-
-	.bar-pill:hover:not(:disabled) {
-		background: hsl(var(--color-surface-hover, var(--color-card)));
-		transform: translateY(-1px);
-	}
-
-	.bar-pill:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.bar-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) .bar-pill.active {
-		background: color-mix(
-			in srgb,
-			var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 30%,
-			transparent 70%
-		);
-		color: var(--pill-primary-color, var(--color-primary-500, #f8d62b));
-	}
-
-	.bar-pill.primary {
-		background: var(--pill-primary-color, var(--color-primary-500, #6366f1));
-		border-color: transparent;
-		color: white;
-	}
-
-	.bar-pill.danger {
-		color: #dc2626;
-	}
-
-	:global(.dark) .bar-pill.danger {
-		color: #ef4444;
-	}
-
-	.bar-label {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.875rem;
-		border-radius: 9999px;
-		font-size: 0.8125rem;
-		font-weight: 600;
-		white-space: nowrap;
-		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-muted, var(--color-card)));
-		color: hsl(var(--color-foreground));
-		flex-shrink: 0;
+	/* .bar-label override: muted background, non-interactive */
+	:global(.bar-label) {
+		opacity: 1 !important;
+		cursor: default !important;
+		background: hsl(var(--color-muted, var(--color-card))) !important;
+		font-weight: 600 !important;
 	}
 
 	.bar-divider {
@@ -423,6 +230,7 @@
 		align-items: center;
 		gap: 0.25rem;
 		padding: 0.25rem;
+		height: 44px;
 		border-radius: 9999px;
 		border: 1px solid hsl(var(--color-border));
 		background: hsl(var(--color-card));
@@ -436,7 +244,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0.375rem;
+		width: 34px;
+		height: 34px;
+		padding: 0;
 		border: none;
 		background: transparent;
 		border-radius: 9999px;
@@ -466,8 +276,8 @@
 	}
 
 	.segmented-btn :global(.segmented-icon) {
-		width: 1rem;
-		height: 1rem;
+		width: 1.25rem;
+		height: 1.25rem;
 	}
 
 	/* When the group shows labels, give the buttons more padding */
diff --git a/packages/shared-ui/src/navigation/TagStrip.svelte b/packages/shared-ui/src/navigation/TagStrip.svelte
index d34595459..7f5013747 100644
--- a/packages/shared-ui/src/navigation/TagStrip.svelte
+++ b/packages/shared-ui/src/navigation/TagStrip.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { Tag, Plus, X } from '@mana/shared-icons';
 	import { dragSource } from '../dnd/drag-source';
 	import { passiveDropZone } from '../dnd/passive-drop';
 	import type { DragPayload, DragType } from '../dnd/types';
+	import Pill from './Pill.svelte';
 
 	interface TagItem {
 		id: string;
@@ -73,38 +73,33 @@
 >
 	<div class="tag-strip-container">
 		<!-- Clear Filter Button (always rendered to prevent layout shift) -->
-		<button
-			class="clear-filter-pill glass-tag"
-			class:hidden={!hasSelectedTags}
-			onclick={() => onClear()}
-			title="Filter löschen"
-			disabled={!hasSelectedTags}
-		>
-			<X size={16} weight="bold" />
-			<span class="tag-name">Filter</span>
-		</button>
+		<div class:hidden={!hasSelectedTags} class="filter-slot">
+			<Pill
+				icon="x"
+				label="Filter"
+				danger
+				onclick={() => onClear()}
+				title="Filter löschen"
+				disabled={!hasSelectedTags}
+			/>
+		</div>
 
 		<!-- Tags verwalten Pill -->
-		<button
-			class="manage-pill glass-tag"
+		<Pill
+			icon="tag"
+			label="Tags verwalten"
 			onclick={() => goto(managementHref)}
 			title="Tags verwalten"
-		>
-			<Tag size={18} weight="bold" />
-			<span class="tag-name">Tags verwalten</span>
-		</button>
+		/>
 
 		{#if loading}
 			<div class="loading-state">Lädt...</div>
 		{:else if !hasTags}
-			<button class="empty-state glass-tag" onclick={() => goto(managementHref)}>
-				<span>Keine Tags vorhanden</span>
-				<span class="add-hint">+ Erstellen</span>
-			</button>
+			<Pill label="Keine Tags vorhanden — + Erstellen" onclick={() => goto(managementHref)} />
 		{:else}
 			{#each sortedTags as tag (tag.id)}
 				<button
-					class="tag-pill glass-tag"
+					class="tag-pill"
 					class:selected={isTagSelected(tag.id)}
 					onclick={() => onToggle(tag.id)}
 					title={tag.name}
@@ -127,14 +122,13 @@
 
 			<!-- Create Tag Button -->
 			{#if showCreateButton}
-				<button
-					class="create-pill glass-tag"
+				<Pill
+					icon="plus"
+					label="Neuer Tag"
+					primary
 					onclick={() => goto(resolvedCreateHref)}
 					title="Neuer Tag"
-				>
-					<Plus size={16} weight="bold" />
-					<span class="tag-name">Neuer Tag</span>
-				</button>
+				/>
 			{/if}
 		{/if}
 	</div>
@@ -156,8 +150,11 @@
 		display: flex;
 		flex-direction: column;
 		align-items: stretch;
+		justify-content: center;
 		pointer-events: none;
 		transition: bottom 0.2s ease;
+		/* Tight wrapper around 44px pills (see bottomChromeHeight in (app)/+layout.svelte). */
+		height: 64px;
 	}
 
 	/* When filter strip is also visible, stack above it */
@@ -168,14 +165,14 @@
 	.tag-strip-container {
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: 0.5rem;
 		background: transparent;
 		pointer-events: auto;
 		width: fit-content;
 		max-width: 100%;
 		margin-left: auto;
 		margin-right: auto;
-		padding: 0.5rem 2rem;
+		padding: 0;
 		overflow-x: auto;
 		scrollbar-width: none;
 		-ms-overflow-style: none;
@@ -200,20 +197,33 @@
 		display: none;
 	}
 
-	.tag-pill,
-	.manage-pill,
-	.create-pill,
-	.clear-filter-pill {
-		display: flex;
+	/* Tag pill — matches Pill base, with drag-source and colored dot. */
+	.tag-pill {
+		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
-		min-height: 44px;
+		gap: 0.375rem;
+		padding: 0 0.875rem;
+		height: 44px;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		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);
 		cursor: pointer;
 		flex-shrink: 0;
 		transition: all 0.15s ease;
 	}
 
-	/* Selected tag state */
+	.tag-pill:hover {
+		background: hsl(var(--color-surface-hover, var(--color-card)));
+		transform: translateY(-1px);
+	}
+
 	.tag-pill.selected {
 		background: var(--tag-color) !important;
 		border-color: var(--tag-color) !important;
@@ -227,107 +237,12 @@
 		color: white;
 	}
 
-	/* Clear filter pill */
-	.clear-filter-pill {
-		color: #ef4444;
-		background: rgba(239, 68, 68, 0.1) !important;
-		border-color: rgba(239, 68, 68, 0.3) !important;
-	}
-
-	.clear-filter-pill .tag-name {
-		color: #ef4444;
-		font-weight: 600;
-	}
-
-	:global(.dark) .clear-filter-pill {
-		color: #f87171;
-		background: rgba(239, 68, 68, 0.15) !important;
-		border-color: rgba(239, 68, 68, 0.3) !important;
-	}
-
-	:global(.dark) .clear-filter-pill .tag-name {
-		color: #f87171;
-	}
-
-	.clear-filter-pill:hover:not(.hidden) {
-		background: rgba(239, 68, 68, 0.2) !important;
-		border-color: rgba(239, 68, 68, 0.5) !important;
-	}
-
-	.clear-filter-pill.hidden {
+	.filter-slot.hidden {
 		visibility: hidden;
 		pointer-events: none;
 	}
 
-	/* Manage pill with neutral style */
-	.manage-pill {
-		color: #374151;
-	}
-
-	.manage-pill .tag-name {
-		color: #374151;
-		font-weight: 500;
-	}
-
-	:global(.dark) .manage-pill {
-		color: #f3f4f6;
-	}
-
-	:global(.dark) .manage-pill .tag-name {
-		color: #f3f4f6;
-	}
-
-	/* Create pill with neutral style */
-	.create-pill {
-		color: #374151;
-	}
-
-	.create-pill .tag-name {
-		color: #374151;
-		font-weight: 500;
-	}
-
-	:global(.dark) .create-pill {
-		color: #f3f4f6;
-	}
-
-	:global(.dark) .create-pill .tag-name {
-		color: #f3f4f6;
-	}
-
-	/* Glass tag styling */
-	.glass-tag {
-		padding: 0.5rem 1rem;
-		border-radius: 9999px;
-		background: rgba(255, 255, 255, 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	}
-
-	:global(.dark) .glass-tag {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.glass-tag:hover {
-		transform: scale(1.05);
-		background: rgba(255, 255, 255, 0.95);
-		border-color: rgba(0, 0, 0, 0.15);
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .glass-tag:hover {
-		background: rgba(255, 255, 255, 0.2);
-		border-color: rgba(255, 255, 255, 0.25);
-	}
-
-	.glass-tag:active {
+	.tag-pill:active {
 		transform: scale(0.98);
 	}
 
@@ -340,7 +255,7 @@
 	}
 
 	.tag-name {
-		font-size: 0.9375rem;
+		font-size: 0.875rem;
 		font-weight: 500;
 		color: #374151;
 		white-space: nowrap;
@@ -356,26 +271,6 @@
 		padding: 0.5rem;
 	}
 
-	.empty-state {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		cursor: pointer;
-		color: #6b7280;
-		font-size: 0.875rem;
-		flex-shrink: 0;
-	}
-
-	:global(.dark) .empty-state {
-		color: #9ca3af;
-	}
-
-	.add-hint {
-		font-size: 0.875rem;
-		color: #8b5cf6;
-		font-weight: 500;
-	}
-
 	/* DnD: Tag is being dragged */
 	:global(.tag-pill.mana-drag-source-active) {
 		opacity: 0.5;
@@ -407,7 +302,7 @@
 		}
 
 		.tag-strip-container {
-			padding: 0.5rem 1rem;
+			padding: 0;
 		}
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/index.ts b/packages/shared-ui/src/navigation/index.ts
index ae025919c..968f7f56f 100644
--- a/packages/shared-ui/src/navigation/index.ts
+++ b/packages/shared-ui/src/navigation/index.ts
@@ -2,6 +2,7 @@ export { default as NavLink } from './NavLink.svelte';
 export { default as Navbar } from './Navbar.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SidebarSection } from './SidebarSection.svelte';
+export { default as Pill } from './Pill.svelte';
 export { default as PillNavigation } from './PillNavigation.svelte';
 export { default as PillDropdown } from './PillDropdown.svelte';
 export { default as PillDropdownBar } from './PillDropdownBar.svelte';
diff --git a/packages/shared-ui/src/navigation/phosphor-icon-map.ts b/packages/shared-ui/src/navigation/phosphor-icon-map.ts
new file mode 100644
index 000000000..f4acb44d4
--- /dev/null
+++ b/packages/shared-ui/src/navigation/phosphor-icon-map.ts
@@ -0,0 +1,126 @@
+import {
+	Archive,
+	Bell,
+	Buildings,
+	CalendarBlank,
+	CaretDown,
+	ChartBar,
+	ChatCircle,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	Clock,
+	Cloud,
+	Columns,
+	Compass,
+	CreditCard,
+	File,
+	FileText,
+	Fire,
+	Folder,
+	Gear,
+	Gift,
+	Globe,
+	GridFour,
+	Heart,
+	House,
+	Key,
+	List,
+	MagnifyingGlass,
+	Microphone,
+	Moon,
+	MusicNote,
+	MusicNotes,
+	Palette,
+	Playlist,
+	Plus,
+	Question,
+	Robot,
+	Scales,
+	ShareFat,
+	ShareNetwork,
+	Shield,
+	SignOut,
+	Sparkle,
+	Spiral,
+	Cards,
+	Sun,
+	Tag,
+	Target,
+	Timer,
+	Trash,
+	Tray,
+	Upload,
+	User,
+	Users,
+	Waveform,
+	X,
+} from '@mana/shared-icons';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const phosphorIcons: Record<string, any> = {
+	home: House,
+	users: Users,
+	user: User,
+	tag: Tag,
+	heart: Heart,
+	settings: Gear,
+	chat: ChatCircle,
+	'help-circle': Question,
+	help: Question,
+	'share-2': ShareNetwork,
+	bell: Bell,
+	clock: Clock,
+	timer: Timer,
+	target: Target,
+	globe: Globe,
+	inbox: Tray,
+	check: Check,
+	checkCircle: CheckCircle,
+	'check-square': CheckSquare,
+	plus: Plus,
+	columns: Columns,
+	kanban: Columns,
+	mic: Microphone,
+	calendar: CalendarBlank,
+	folder: Folder,
+	archive: Archive,
+	upload: Upload,
+	music: MusicNote,
+	document: File,
+	chart: ChartBar,
+	'bar-chart-3': ChartBar,
+	search: MagnifyingGlass,
+	list: List,
+	compass: Compass,
+	moon: Moon,
+	sun: Sun,
+	logout: SignOut,
+	chevronDown: CaretDown,
+	menu: List,
+	fire: Fire,
+	grid: GridFour,
+	gridSmall: GridFour,
+	palette: Palette,
+	creditCard: CreditCard,
+	building: Buildings,
+	scale: Scales,
+	robot: Robot,
+	key: Key,
+	shield: Shield,
+	gift: Gift,
+	'music-notes': MusicNotes,
+	playlist: Playlist,
+	waveform: Waveform,
+	'file-text': FileText,
+	sparkle: Sparkle,
+	sparkles: Sparkle,
+	spiral: Spiral,
+	share: ShareFat,
+	trash: Trash,
+	cloud: Cloud,
+	x: X,
+	close: X,
+	tabs: Cards,
+	cards: Cards,
+};
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index 4691b4246..b2d8145e9 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -30,7 +30,7 @@
 	}
 
 	import type { Snippet } from 'svelte';
-	import { ArrowRight, Check, CheckSquare, Heart, MagnifyingGlass, Plus } from '@mana/shared-icons';
+	import { ArrowRight, Heart, MagnifyingGlass, Plus } from '@mana/shared-icons';
 
 	interface Props {
 		onSearch: (query: string) => Promise<QuickInputItem[]>;
@@ -508,15 +508,6 @@
 			</div>
 		{/if}
 
-		<div class="app-icon" class:success-icon={createSuccess}>
-			{#if createSuccess}
-				<!-- Checkmark icon -->
-				<Check size={20} />
-			{:else}
-				<CheckSquare size={20} />
-			{/if}
-		</div>
-
 		<div class="input-wrapper">
 			<!-- Highlight backdrop (shows colored keywords) -->
 			<div class="input-highlight-backdrop" aria-hidden="true">
@@ -583,10 +574,10 @@
 		left: 0;
 		right: 0;
 		z-index: 90;
-		padding: 0.75rem 1rem;
+		padding: 0.3125rem 1rem;
 		pointer-events: none;
-		/* Fixed height to prevent layout shift when results appear */
-		height: 72px;
+		/* Matches tags/tabbar slot (see bottomChromeHeight in (app)/+layout.svelte). */
+		height: 64px;
 		transition: bottom 0.3s ease;
 	}
 
@@ -599,13 +590,13 @@
 	/* Mobile: tighter padding, full-width input */
 	@media (max-width: 640px) {
 		.quick-input-bar {
-			padding: 0.5rem 0.5rem;
+			padding: 0.3125rem 0.5rem;
 			height: 64px;
 		}
 
 		.input-container {
 			padding: 0.5rem 1rem;
-			height: 48px;
+			height: 54px;
 			gap: 0.5rem;
 		}
 	}