feat(shared-ui): add global CommandBar component with search across apps

- Add reusable CommandBar component to shared-ui package with dark theme
- Integrate CommandBar (Cmd/K) in contacts, calendar, todo, and clock apps
- Implement search functionality for each app:
  - Contacts: search by name, company, email with relevance-based sorting
  - Calendar: search events by title/description within next year
  - Todo: search tasks by title/description
  - Clock: search alarms and timers by label
- Add quick actions for common operations in each app

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/clock/apps/web/src/routes/(app)/+layout.svelte

@@ -3,8 +3,13 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { PillNavigation } from '@manacore/shared-ui';
-	import type { PillNavItem, PillDropdownItem } from '@manacore/shared-ui';
+	import { PillNavigation, CommandBar } from '@manacore/shared-ui';
+	import type {
+		PillNavItem,
+		PillDropdownItem,
+		CommandBarItem,
+		QuickAction,
+	} from '@manacore/shared-ui';
 	import { theme } from '$lib/stores/theme.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
@@ -16,12 +21,89 @@
 	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { setLocale, supportedLocales } from '$lib/i18n';
+	import { alarmsApi } from '$lib/api/alarms';
+	import { timersApi } from '$lib/api/timers';
 
 	// App switcher items
 	const appItems = getPillAppItems('clock');
 
 	let { children } = $props();
 
+	// CommandBar state
+	let commandBarOpen = $state(false);
+
+	// CommandBar quick actions
+	const commandBarQuickActions: QuickAction[] = [
+		{
+			id: 'alarm',
+			label: 'Neuen Wecker erstellen',
+			icon: 'bell',
+			href: '/alarms?new=true',
+			shortcut: 'A',
+		},
+		{
+			id: 'timer',
+			label: 'Neuen Timer starten',
+			icon: 'timer',
+			href: '/timers?new=true',
+			shortcut: 'T',
+		},
+		{ id: 'stopwatch', label: 'Stoppuhr', icon: 'stopwatch', href: '/stopwatch' },
+		{ id: 'pomodoro', label: 'Pomodoro starten', icon: 'target', href: '/pomodoro' },
+		{ id: 'worldclock', label: 'Weltzeituhr', icon: 'globe', href: '/world-clock' },
+		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
+	];
+
+	// CommandBar search - search alarms and timers
+	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+		if (!query.trim()) return [];
+
+		const queryLower = query.toLowerCase();
+		const results: CommandBarItem[] = [];
+
+		try {
+			// Search alarms
+			const alarms = await alarmsApi.getAll();
+			const matchingAlarms = alarms
+				.filter((alarm) => alarm.label?.toLowerCase().includes(queryLower))
+				.slice(0, 5)
+				.map((alarm) => ({
+					id: `alarm-${alarm.id}`,
+					title: alarm.label || 'Wecker',
+					subtitle: `⏰ ${alarm.time} ${alarm.enabled ? '(aktiv)' : '(inaktiv)'}`,
+				}));
+			results.push(...matchingAlarms);
+
+			// Search timers
+			const timers = await timersApi.getAll();
+			const matchingTimers = timers
+				.filter((timer) => timer.label?.toLowerCase().includes(queryLower))
+				.slice(0, 5)
+				.map((timer) => {
+					const mins = Math.floor(timer.durationSeconds / 60);
+					const secs = timer.durationSeconds % 60;
+					return {
+						id: `timer-${timer.id}`,
+						title: timer.label || 'Timer',
+						subtitle: `⏱️ ${mins}:${secs.toString().padStart(2, '0')} ${timer.status === 'running' ? '(läuft)' : ''}`,
+					};
+				});
+			results.push(...matchingTimers);
+		} catch {
+			// Ignore errors
+		}
+
+		return results.slice(0, 10);
+	}
+
+	function handleCommandBarSelect(item: CommandBarItem) {
+		if (item.id.startsWith('alarm-')) {
+			goto('/alarms');
+		} else if (item.id.startsWith('timer-')) {
+			goto('/timers');
+		}
+	}
+
 	let isSidebarMode = $state(false);
 	let isCollapsed = $state(false);
 
@@ -83,6 +165,13 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const target = event.target as HTMLElement;
 
+		// Cmd/Ctrl+K to open command bar (works even in inputs)
+		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+			event.preventDefault();
+			commandBarOpen = true;
+			return;
+		}
+
 		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
 			return;
 		}
@@ -206,6 +295,18 @@
 			{@render children()}
 		</div>
 	</main>
+
+	<!-- Global Command Bar (Cmd/K) -->
+	<CommandBar
+		bind:open={commandBarOpen}
+		onClose={() => (commandBarOpen = false)}
+		onSearch={handleCommandBarSearch}
+		onSelect={handleCommandBarSelect}
+		quickActions={commandBarQuickActions}
+		placeholder="Schnellzugriff..."
+		emptyText="Keine Ergebnisse"
+		searchingText="Suche..."
+	/>
 </div>
 
 <style>