✨ 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>

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';
 

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}

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>

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';

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 */