✨ feat(calendar): integrate TagStrip into PillNavigation dropdown

- Add PillTagSelector component for tag selection in navigation - Remove separate TagStrip bar (saves 70px vertical space) - Add tag-selector support to PillNavigation element rendering - Remove hasTagStrip prop from DateStrip/DateStripFab components - Export PillTagSelector and types from shared-ui Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-05-14 21:01:08 +02:00 · 2026-02-13 22:42:11 +01:00 · 2026-02-13 22:42:11 +01:00 · affcfe4614
commit affcfe4614
parent 7d1b4a40d2
8 changed files with 615 additions and 139 deletions
--- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
@ -28,10 +28,9 @@

 	interface Props {
 		isToolbarExpanded?: boolean;
-		hasTagStrip?: boolean; // Whether TagStrip is visible below
 	}

-	let { isToolbarExpanded = false, hasTagStrip = false }: Props = $props();
+	let { isToolbarExpanded = false }: Props = $props();

 	// Get event count for a day (max 5 dots displayed)
 	function getEventCount(date: Date): number {
@ -246,7 +245,6 @@
 	class="date-strip-wrapper"
 	class:toolbar-expanded={isToolbarExpanded}
 	class:compact={settingsStore.dateStripCompact}
-	class:has-tag-strip={hasTagStrip}
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="date-strip-container" oncontextmenu={handleContextMenu}>
@ -338,15 +336,6 @@
 		bottom: calc(210px + env(safe-area-inset-bottom, 0px)); /* Extra space for toolbar */
 	}

-	/* When TagStrip is visible below, add extra offset */
-	.date-strip-wrapper.has-tag-strip {
-		bottom: calc(210px + env(safe-area-inset-bottom, 0px)); /* +70px for TagStrip */
-	}
-
-	.date-strip-wrapper.has-tag-strip.toolbar-expanded {
-		bottom: calc(280px + env(safe-area-inset-bottom, 0px));
-	}
-
 	.today-button {
 		position: absolute;
 		right: 100%;
--- a/apps/calendar/apps/web/src/lib/components/calendar/DateStripFab.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStripFab.svelte
@ -7,10 +7,9 @@
 	interface Props {
 		isToolbarExpanded?: boolean;
 		isMobile?: boolean;
-		hasTagStrip?: boolean;
 	}

-	let { isToolbarExpanded = false, isMobile = false, hasTagStrip = false }: Props = $props();
+	let { isToolbarExpanded = false, isMobile = false }: Props = $props();

 	let contextMenu: DateStripContextMenu;

@ -31,7 +30,6 @@
 	class="datestrip-fab-container"
 	class:toolbar-expanded={isToolbarExpanded}
 	class:mobile={isMobile}
-	class:has-tag-strip={hasTagStrip}
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<button
@ -81,23 +79,6 @@
 		bottom: calc(70px + 72px + 70px + 8px + env(safe-area-inset-bottom, 0px));
 	}

-	/* When TagStrip is visible, add 70px offset */
-	.datestrip-fab-container.has-tag-strip {
-		bottom: calc(140px + 9px + env(safe-area-inset-bottom, 0px));
-	}
-
-	.datestrip-fab-container.has-tag-strip.toolbar-expanded {
-		bottom: calc(210px + 9px + env(safe-area-inset-bottom, 0px));
-	}
-
-	.datestrip-fab-container.has-tag-strip.mobile {
-		bottom: calc(140px + 72px + 8px + env(safe-area-inset-bottom, 0px));
-	}
-
-	.datestrip-fab-container.has-tag-strip.mobile.toolbar-expanded {
-		bottom: calc(140px + 72px + 70px + 8px + env(safe-area-inset-bottom, 0px));
-	}
-
 	/* Fallback for CSS-only mobile detection */
 	@media (max-width: 640px) {
 		.datestrip-fab-container:not(.mobile) {
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@ -20,6 +20,7 @@
 		QuickInputItem,
 		CreatePreview,
 		PillTabGroupConfig,
+		PillTagSelectorConfig,
 		PillNavElement,
 	} from '@manacore/shared-ui';
 	import { theme } from '$lib/stores/theme';
@ -56,7 +57,6 @@
 	import CalendarToolbarContent from '$lib/components/calendar/CalendarToolbarContent.svelte';
 	import DateStrip from '$lib/components/calendar/DateStrip.svelte';
 	import DateStripFab from '$lib/components/calendar/DateStripFab.svelte';
-	import TagStrip from '$lib/components/calendar/TagStrip.svelte';
 	import EventContextMenu from '$lib/components/event/EventContextMenu.svelte';
 	import ViewModePillContextMenu from '$lib/components/calendar/ViewModePillContextMenu.svelte';
 	import SettingsModal from '$lib/components/settings/SettingsModal.svelte';
@ -256,27 +256,9 @@
 	// User email for user dropdown
 	let userEmail = $derived(authStore.user?.email || 'Menü');

-	// Toggle TagStrip visibility
-	function handleTagsToggle() {
-		settingsStore.toggleTagStrip();
-	}
-
-	// Tags button active state (show as active when TagStrip is visible)
-	let isTagStripVisible = $derived(!settingsStore.tagStripCollapsed);
-
-	// Offset for elements above TagStrip (70px when visible)
-	let tagStripOffset = $derived(showCalendarToolbar && !settingsStore.tagStripCollapsed ? 70 : 0);
-
 	// Base navigation items for Calendar (without Kalender/Aufgaben - handled by tab group)
-	// Note: Tags uses onClick to toggle TagStrip visibility instead of navigating
+	// Tags are now in the tag-selector dropdown in prependElements
 	let baseNavItems = $derived<PillNavItem[]>([
-		{
-			href: '/tags',
-			label: 'Tags',
-			icon: 'tag',
-			onClick: handleTagsToggle,
-			active: isTagStripVisible,
-		},
 		{
 			href: '/',
 			label: 'Einstellungen',
@ -377,9 +359,23 @@
 		onContextMenu: handleViewContextMenu,
 	});

+	// Tag selector config for PillNavigation
+	let tagSelectorConfig = $derived<PillTagSelectorConfig>({
+		type: 'tag-selector',
+		tags: eventTagsStore.tags.map((t) => ({ id: t.id, name: t.name, color: t.color || '#3b82f6' })),
+		selectedIds: settingsStore.selectedTagIds,
+		onToggle: settingsStore.toggleTagSelection,
+		onClear: settingsStore.clearTagSelection,
+		onCreate: () => goto('/tags?new=true'),
+		loading: eventTagsStore.loading,
+		label: 'Tags',
+	});
+
 	// Prepended elements (tab groups at the start of navigation)
 	let prependElements = $derived<PillNavElement[]>(
-		showCalendarToolbar ? [calendarTasksTabGroup, viewSwitcherTabGroup] : [calendarTasksTabGroup]
+		showCalendarToolbar
+			? [calendarTasksTabGroup, viewSwitcherTabGroup, { type: 'divider' }, tagSelectorConfig]
+			: [calendarTasksTabGroup]
 	);

 	// Handle tab change: toggle sidebar for tasks, close for calendar
@ -627,30 +623,18 @@
 			<!-- Date strip (only on main calendar page) -->
 			{#if showCalendarToolbar}
 				{#if settingsStore.dateStripCollapsed}
-					<DateStripFab
-						isToolbarExpanded={!isToolbarCollapsed}
-						{isMobile}
-						hasTagStrip={!settingsStore.tagStripCollapsed}
-					/>
+					<DateStripFab isToolbarExpanded={!isToolbarCollapsed} {isMobile} />
 				{:else}
-					<DateStrip
-						isToolbarExpanded={!isToolbarCollapsed}
-						hasTagStrip={!settingsStore.tagStripCollapsed}
-					/>
+					<DateStrip isToolbarExpanded={!isToolbarCollapsed} />
 				{/if}
 			{/if}

-			<!-- Tag strip (only on main calendar page, when not collapsed) - directly above PillNav -->
-			{#if showCalendarToolbar && !settingsStore.tagStripCollapsed}
-				<TagStrip />
-			{/if}
-
 			<!-- Calendar toolbar (only on main calendar page) -->
 			{#if showCalendarToolbar}
 				<CalendarToolbar
 					isCollapsed={isToolbarCollapsed}
 					{isMobile}
-					bottomOffset={settingsStore.tagStripCollapsed ? '70px' : '140px'}
+					bottomOffset="70px"
 					onCollapsedChange={handleToolbarCollapsedChange}
 				/>
 			{/if}
@ -671,10 +655,10 @@
 					createText="Erstellen"
 					appIcon="calendar"
 					bottomOffset={isMobile
-						? `${70 + tagStripOffset}px`
+						? '70px'
 						: showCalendarToolbar && !isToolbarCollapsed
-							? `${140 + tagStripOffset}px`
-							: `${70 + tagStripOffset}px`}
+							? '140px'
+							: '70px'}
 					hasFabRight={showCalendarToolbar}
 					hasFabLeft={!isMobile && showCalendarToolbar && settingsStore.dateStripCollapsed}
 					defaultOptions={calendarOptions}
@ -683,20 +667,13 @@
 					onDefaultChange={handleDefaultCalendarChange}
 					onShowShortcuts={handleShowShortcuts}
 					onShowSyntaxHelp={handleShowSyntaxHelp}
-				/>
-				<!-- Voice Record Button -->
-				{#if voiceRecordingStore.isSupported}
-					<div
-						class="voice-button-wrapper"
-						style="--bottom-offset: {isMobile
-							? `${70 + tagStripOffset}px`
-							: showCalendarToolbar && !isToolbarCollapsed
-								? `${140 + tagStripOffset}px`
-								: `${70 + tagStripOffset}px`}"
-					>
-						<VoiceRecordButton onResult={handleVoiceResult} size={40} />
-					</div>
-				{/if}
+				>
+					{#snippet leftAction()}
+						{#if voiceRecordingStore.isSupported}
+							<VoiceRecordButton onResult={handleVoiceResult} size={32} />
+						{/if}
+					{/snippet}
+				</QuickInputBar>
 			</div>
 		</div>

@ -911,55 +888,4 @@
 			padding-right: calc(54px + 1rem + 8px); /* FAB width + margin + gap */
 		}
 	}
-
-	/* Voice Button Wrapper */
-	.input-bar-row {
-		position: relative;
-	}
-
-	.voice-button-wrapper {
-		position: fixed;
-		bottom: calc(var(--bottom-offset, 70px) + env(safe-area-inset-bottom, 0px) + 7px);
-		left: 50%;
-		transform: translateX(calc(-50% + 260px)); /* Position to the right of centered InputBar */
-		z-index: 91;
-		background: hsl(var(--color-surface) / 0.85);
-		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 50%;
-		padding: 0.25rem;
-		box-shadow:
-			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
-			0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
-		transition:
-			bottom 0.3s ease,
-			transform 0.15s ease;
-	}
-
-	.voice-button-wrapper:hover {
-		transform: translateX(calc(-50% + 260px)) scale(1.05);
-	}
-
-	/* Adjust voice button position on smaller screens */
-	@media (max-width: 900px) {
-		.voice-button-wrapper {
-			right: calc(1rem + 54px + 8px); /* FAB width + margin + gap from right FAB */
-			left: auto;
-			transform: none;
-		}
-
-		.voice-button-wrapper:hover {
-			transform: scale(1.05);
-		}
-	}
-
-	/* Mobile: Hide voice button (use modal instead) */
-	@media (max-width: 640px) {
-		.voice-button-wrapper {
-			right: calc(54px + 1rem + 54px + 8px); /* Right FAB + margin + voice btn + gap */
-			left: auto;
-			transform: none;
-		}
-	}
 </style>
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@ -85,6 +85,7 @@ export {
 	PillNavigation,
 	PillDropdown,
 	PillTabGroup,
+	PillTagSelector,
 	PillTimeRangeSelector,
 	PillViewSwitcher,
 	PillToolbar,
@ -104,6 +105,8 @@ export type {
 	PillNavigationProps,
 	PillTabOption,
 	PillTabGroupConfig,
+	PillTagItem,
+	PillTagSelectorConfig,
 	ExpandableToolbarProps,
 } from './navigation';

--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@ -5,10 +5,12 @@
 		PillDropdownItem,
 		PillNavElement,
 		PillTabGroupConfig,
+		PillTagSelectorConfig,
 		PillAppItem,
 	} from './types';
 	import PillDropdown from './PillDropdown.svelte';
 	import PillTabGroup from './PillTabGroup.svelte';
+	import PillTagSelector from './PillTagSelector.svelte';
 	// Phosphor Icons (via shared-icons)
 	import {
 		House,
@ -311,6 +313,10 @@
 		return 'type' in element && element.type === 'divider';
 	}

+	function isTagSelector(element: PillNavElement): element is PillTagSelectorConfig {
+		return 'type' in element && element.type === 'tag-selector';
+	}
+
 	function isNavItem(element: PillNavElement): element is PillNavItem {
 		return 'href' in element;
 	}
@ -468,6 +474,8 @@
 			'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
 		'share-2':
 			'M18 8a3 3 0 100-6 3 3 0 000 6zM6 15a3 3 0 100-6 3 3 0 000 6zM18 22a3 3 0 100-6 3 3 0 000 6zM8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98',
+		filter:
+			'M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z',
 	};

 	function getIconPath(name: string): string {
@ -502,7 +510,7 @@
 				</a>
 			{/if}

-			<!-- Prepended Elements (Tab Groups, Dividers, Nav Items) -->
+			<!-- Prepended Elements (Tab Groups, Dividers, Nav Items, Tag Selectors) -->
 			{#each prependElements as element}
 				{#if isTabGroup(element)}
 					<PillTabGroup
@ -516,6 +524,17 @@
 					/>
 				{:else if isDivider(element)}
 					<div class="pill-divider" class:sidebar-divider={isSidebarMode}></div>
+				{:else if isTagSelector(element)}
+					<PillTagSelector
+						tags={element.tags}
+						selectedIds={element.selectedIds}
+						onToggle={element.onToggle}
+						onClear={element.onClear}
+						onCreate={element.onCreate}
+						loading={element.loading}
+						label={element.label}
+						direction={dropdownDirection}
+					/>
 				{:else if isNavItem(element)}
 					<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
 						{#if element.icon}
@ -597,7 +616,7 @@
 				{/if}
 			{/each}

-			<!-- Additional Elements (Tab Groups, Dividers) -->
+			<!-- Additional Elements (Tab Groups, Dividers, Tag Selectors) -->
 			{#each elements as element}
 				{#if isTabGroup(element)}
 					<PillTabGroup
@ -611,6 +630,17 @@
 					/>
 				{:else if isDivider(element)}
 					<div class="pill-divider" class:sidebar-divider={isSidebarMode}></div>
+				{:else if isTagSelector(element)}
+					<PillTagSelector
+						tags={element.tags}
+						selectedIds={element.selectedIds}
+						onToggle={element.onToggle}
+						onClear={element.onClear}
+						onCreate={element.onCreate}
+						loading={element.loading}
+						label={element.label}
+						direction={dropdownDirection}
+					/>
 				{:else if isNavItem(element)}
 					<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
 						{#if element.icon}
--- a/packages/shared-ui/src/navigation/PillTagSelector.svelte
+++ b/packages/shared-ui/src/navigation/PillTagSelector.svelte
@ -0,0 +1,516 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Tag, X, Plus, CaretDown } from '@manacore/shared-icons';
+
+	export interface TagItem {
+		id: string;
+		name: string;
+		color: string;
+	}
+
+	interface Props {
+		/** Available tags */
+		tags: TagItem[];
+		/** Currently selected tag IDs */
+		selectedIds: string[];
+		/** Called when a tag is toggled */
+		onToggle: (tagId: string) => void;
+		/** Called when selection is cleared */
+		onClear: () => void;
+		/** Called when "New Tag" is clicked */
+		onCreate?: () => void;
+		/** Loading state */
+		loading?: boolean;
+		/** Dropdown direction */
+		direction?: 'up' | 'down';
+		/** Label for the selector button */
+		label?: string;
+	}
+
+	let {
+		tags,
+		selectedIds,
+		onToggle,
+		onClear,
+		onCreate,
+		loading = false,
+		direction = 'up',
+		label = 'Tags',
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let triggerButton: HTMLButtonElement;
+	let dropdownPosition = $state({ top: 0, left: 0 });
+
+	// Count selected tags
+	const selectedCount = $derived(selectedIds.length);
+	const hasSelection = $derived(selectedCount > 0);
+
+	// Get display label based on selection
+	const displayLabel = $derived(
+		hasSelection ? `${selectedCount} ${selectedCount === 1 ? 'Tag' : 'Tags'}` : label
+	);
+
+	function toggle() {
+		if (triggerButton) {
+			const rect = triggerButton.getBoundingClientRect();
+			if (direction === 'down') {
+				dropdownPosition = {
+					top: rect.bottom + 8,
+					left: rect.left,
+				};
+			} else {
+				dropdownPosition = {
+					top: rect.top - 8,
+					left: rect.left,
+				};
+			}
+		}
+		isOpen = !isOpen;
+	}
+
+	function close() {
+		isOpen = false;
+	}
+
+	function handleTagClick(tagId: string) {
+		onToggle(tagId);
+	}
+
+	function handleClearClick() {
+		onClear();
+		close();
+	}
+
+	function handleCreateClick() {
+		onCreate?.();
+		close();
+	}
+
+	function isSelected(tagId: string): boolean {
+		return selectedIds.includes(tagId);
+	}
+</script>
+
+<div class="pill-tag-selector">
+	<!-- Trigger Button -->
+	<button
+		bind:this={triggerButton}
+		onclick={toggle}
+		class="pill glass-pill trigger-button"
+		class:has-selection={hasSelection}
+	>
+		<Tag size={16} weight={hasSelection ? 'fill' : 'regular'} />
+		<span class="pill-label">{displayLabel}</span>
+		<CaretDown size={12} class={`chevron-icon ${isOpen ? 'rotated' : ''}`} />
+	</button>
+
+	{#if isOpen}
+		<!-- Backdrop -->
+		<button
+			class="menu-backdrop"
+			onclick={close}
+			onkeydown={(e) => e.key === 'Escape' && close()}
+			aria-label="Close dropdown"
+		></button>
+
+		<!-- Dropdown panel -->
+		<div
+			class="dropdown-panel"
+			class:panel-up={direction === 'up'}
+			class:panel-down={direction === 'down'}
+			style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;"
+		>
+			{#if loading}
+				<div class="loading-state">Lädt...</div>
+			{:else if tags.length === 0}
+				<div class="empty-state">
+					<span>Keine Tags vorhanden</span>
+					{#if onCreate}
+						<button class="create-link" onclick={handleCreateClick}>
+							<Plus size={14} weight="bold" />
+							<span>Erstellen</span>
+						</button>
+					{/if}
+				</div>
+			{:else}
+				<!-- Tag grid -->
+				<div class="tag-grid">
+					{#each tags as tag (tag.id)}
+						<button
+							class="tag-pill"
+							class:selected={isSelected(tag.id)}
+							onclick={() => handleTagClick(tag.id)}
+							style="--tag-color: {tag.color || '#3b82f6'}"
+						>
+							<span class="tag-dot"></span>
+							<span class="tag-name">{tag.name}</span>
+						</button>
+					{/each}
+				</div>
+
+				<!-- Footer with actions -->
+				<div class="dropdown-footer">
+					{#if hasSelection}
+						<button class="footer-btn clear-btn" onclick={handleClearClick}>
+							<X size={14} weight="bold" />
+							<span>Löschen</span>
+						</button>
+					{/if}
+					{#if onCreate}
+						<button class="footer-btn create-btn" onclick={handleCreateClick}>
+							<Plus size={14} weight="bold" />
+							<span>Neuer Tag</span>
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.pill-tag-selector {
+		position: relative;
+		z-index: 1;
+	}
+
+	.pill-tag-selector:has(.dropdown-panel) {
+		z-index: 10000;
+	}
+
+	.trigger-button {
+		position: relative;
+		z-index: 10;
+	}
+
+	/* Base pill styles */
+	.pill {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.875rem;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		white-space: nowrap;
+		text-decoration: none;
+		transition: all 0.2s;
+		border: none;
+		cursor: pointer;
+	}
+
+	/* Glass effect */
+	.glass-pill {
+		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);
+		color: #374151;
+	}
+
+	:global(.dark) .glass-pill {
+		background: rgba(255, 255, 255, 0.12);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+		color: #f3f4f6;
+	}
+
+	.glass-pill:hover {
+		background: rgba(255, 255, 255, 0.95);
+		border-color: rgba(0, 0, 0, 0.15);
+		transform: translateY(-2px);
+		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-pill:hover {
+		background: rgba(255, 255, 255, 0.2);
+		border-color: rgba(255, 255, 255, 0.25);
+	}
+
+	/* Active selection state */
+	.trigger-button.has-selection {
+		background: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 15%, white 85%);
+		border-color: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 25%, transparent 75%);
+	}
+
+	:global(.dark) .trigger-button.has-selection {
+		background: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 25%, transparent 75%);
+		border-color: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 35%, transparent 65%);
+	}
+
+	:global(.chevron-icon) {
+		transition: transform 0.2s;
+		margin-left: 0.125rem;
+	}
+
+	:global(.chevron-icon.rotated) {
+		transform: rotate(180deg);
+	}
+
+	.pill-label {
+		display: inline;
+	}
+
+	/* Backdrop */
+	.menu-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		background: transparent;
+		border: none;
+		cursor: default;
+	}
+
+	/* Dropdown panel */
+	.dropdown-panel {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		z-index: 9999;
+		min-width: 200px;
+		max-width: 320px;
+		padding: 0.75rem;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 1rem;
+		box-shadow:
+			0 10px 25px -5px rgba(0, 0, 0, 0.1),
+			0 8px 10px -6px rgba(0, 0, 0, 0.1);
+		animation: panelIn 0.15s ease-out forwards;
+	}
+
+	:global(.dark) .dropdown-panel {
+		background: rgba(30, 30, 30, 0.95);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
+
+	.panel-up {
+		transform: translateY(-100%);
+	}
+
+	.panel-down {
+		transform: translateY(0);
+	}
+
+	@keyframes panelIn {
+		from {
+			opacity: 0;
+			transform: translateY(-100%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(-100%) scale(1);
+		}
+	}
+
+	.panel-down {
+		animation-name: panelInDown;
+	}
+
+	@keyframes panelInDown {
+		from {
+			opacity: 0;
+			transform: translateY(0) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Tag grid */
+	.tag-grid {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+
+	.tag-pill {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		border-radius: 9999px;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		background: rgba(255, 255, 255, 0.8);
+		color: #374151;
+		transition: all 0.15s ease;
+	}
+
+	:global(.dark) .tag-pill {
+		background: rgba(255, 255, 255, 0.1);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+		color: #f3f4f6;
+	}
+
+	.tag-pill:hover {
+		transform: scale(1.05);
+		background: rgba(255, 255, 255, 0.95);
+		border-color: rgba(0, 0, 0, 0.15);
+	}
+
+	:global(.dark) .tag-pill:hover {
+		background: rgba(255, 255, 255, 0.2);
+		border-color: rgba(255, 255, 255, 0.25);
+	}
+
+	.tag-pill.selected {
+		background: var(--tag-color) !important;
+		border-color: var(--tag-color) !important;
+		color: white;
+	}
+
+	.tag-pill.selected .tag-dot {
+		background-color: white;
+	}
+
+	.tag-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background-color: var(--tag-color);
+		flex-shrink: 0;
+	}
+
+	.tag-name {
+		white-space: nowrap;
+	}
+
+	/* Footer */
+	.dropdown-footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		padding-top: 0.5rem;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .dropdown-footer {
+		border-top-color: rgba(255, 255, 255, 0.15);
+	}
+
+	.footer-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.375rem 0.625rem;
+		border-radius: 9999px;
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+		border: none;
+		background: transparent;
+		color: #6b7280;
+		transition: all 0.15s ease;
+	}
+
+	:global(.dark) .footer-btn {
+		color: #9ca3af;
+	}
+
+	.footer-btn:hover {
+		background: rgba(0, 0, 0, 0.05);
+		color: #374151;
+	}
+
+	:global(.dark) .footer-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	.clear-btn {
+		color: #ef4444;
+	}
+
+	.clear-btn:hover {
+		background: rgba(239, 68, 68, 0.1);
+		color: #dc2626;
+	}
+
+	:global(.dark) .clear-btn {
+		color: #f87171;
+	}
+
+	:global(.dark) .clear-btn:hover {
+		background: rgba(239, 68, 68, 0.15);
+		color: #fca5a5;
+	}
+
+	.create-btn {
+		color: #3b82f6;
+	}
+
+	.create-btn:hover {
+		background: rgba(59, 130, 246, 0.1);
+		color: #2563eb;
+	}
+
+	:global(.dark) .create-btn {
+		color: #60a5fa;
+	}
+
+	:global(.dark) .create-btn:hover {
+		background: rgba(59, 130, 246, 0.15);
+		color: #93c5fd;
+	}
+
+	/* Loading and empty states */
+	.loading-state,
+	.empty-state {
+		padding: 1rem;
+		text-align: center;
+		font-size: 0.875rem;
+		color: #6b7280;
+	}
+
+	:global(.dark) .loading-state,
+	:global(.dark) .empty-state {
+		color: #9ca3af;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.create-link {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.375rem 0.625rem;
+		border-radius: 9999px;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: #3b82f6;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.create-link:hover {
+		background: rgba(59, 130, 246, 0.1);
+	}
+
+	:global(.dark) .create-link {
+		color: #60a5fa;
+	}
+
+	:global(.dark) .create-link:hover {
+		background: rgba(59, 130, 246, 0.15);
+	}
+</style>
--- a/packages/shared-ui/src/navigation/index.ts
+++ b/packages/shared-ui/src/navigation/index.ts
@ -5,6 +5,7 @@ export { default as SidebarSection } from './SidebarSection.svelte';
 export { default as PillNavigation } from './PillNavigation.svelte';
 export { default as PillDropdown } from './PillDropdown.svelte';
 export { default as PillTabGroup } from './PillTabGroup.svelte';
+export { default as PillTagSelector } from './PillTagSelector.svelte';
 export { default as PillTimeRangeSelector } from './PillTimeRangeSelector.svelte';
 export { default as PillViewSwitcher } from './PillViewSwitcher.svelte';
 export { default as PillToolbar } from './PillToolbar.svelte';
@ -24,6 +25,8 @@ export type {
 	PillNavigationProps,
 	PillTabOption,
 	PillTabGroupConfig,
+	PillTagItem,
+	PillTagSelectorConfig,
 	PillDivider,
 	PillNavElement,
 } from './types';
--- a/packages/shared-ui/src/navigation/types.ts
+++ b/packages/shared-ui/src/navigation/types.ts
@ -105,8 +105,36 @@ export interface PillDivider {
 	type: 'divider';
 }

+export interface PillTagItem {
+	/** Unique tag identifier */
+	id: string;
+	/** Tag display name */
+	name: string;
+	/** Tag color (hex) */
+	color: string;
+}
+
+export interface PillTagSelectorConfig {
+	/** Discriminator for type checking */
+	type: 'tag-selector';
+	/** Available tags */
+	tags: PillTagItem[];
+	/** Currently selected tag IDs */
+	selectedIds: string[];
+	/** Called when a tag is toggled */
+	onToggle: (tagId: string) => void;
+	/** Called when selection is cleared */
+	onClear: () => void;
+	/** Called when "New Tag" is clicked (optional) */
+	onCreate?: () => void;
+	/** Loading state */
+	loading?: boolean;
+	/** Label for the selector button */
+	label?: string;
+}
+
 /** Union type for all elements that can appear in PillNavigation */
-export type PillNavElement = PillNavItem | PillTabGroupConfig | PillDivider;
+export type PillNavElement = PillNavItem | PillTabGroupConfig | PillDivider | PillTagSelectorConfig;

 export interface PillNavigationProps {
 	/** Navigation items */