feat: major update with network graphs, themes, todo extensions, and more

## New Features

### Network Graph Visualization (Contacts, Calendar, Todo)
- D3.js force simulation for physics-based layout
- Zoom & pan with mouse/touchpad
- Keyboard shortcuts: +/- zoom, 0 reset, Esc deselect, / search, F focus
- Filtering by tags, company/location/project, connection strength
- Shared components in @manacore/shared-ui

### Central Tags API (mana-core-auth)
- CRUD endpoints for tags
- Schema: tags table with userId, name, color, app
- Shared tag components in @manacore/shared-ui

### Custom Themes System
- Theme editor with live preview and color picker
- Community theme gallery
- Theme sharing (public, unlisted, private)
- Backend API in mana-core-auth

### Todo App Extensions
- Glass-pill design for task input and items
- Settings page with 20+ preferences
- Task edit modal with inline editing
- Statistics page with visualizations
- PWA support with offline capabilities
- Multiple kanban boards

### Contacts App Features
- Duplicate detection
- Photo upload
- Batch operations
- Enhanced favorites page with multiple view modes
- Alphabet view improvements
- Search modal

### Help System
- @manacore/shared-help-content
- @manacore/shared-help-ui
- @manacore/shared-help-types

### Other Features
- Themes page for all apps
- Referral system frontend
- CommandBar (global search)
- Skeleton loaders
- Settings page improvements

## Bug Fixes
- Network graph simulation initialization
- Database schema TEXT for user_id columns (Better Auth compatibility)
- Various styling fixes

## Documentation
- Daily report for 2025-12-10
- CI/CD deployment guide

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

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

packages/shared-theme-ui/src/components/ThemeGrid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ThemeVariant } from '@manacore/shared-theme';
-	import { THEME_VARIANTS } from '@manacore/shared-theme';
+	import { DEFAULT_THEME_VARIANTS, EXTENDED_THEME_VARIANTS } from '@manacore/shared-theme';
 	import type { ThemeCardData, ThemePageTranslations } from '../types';
 	import ThemeCard from './ThemeCard.svelte';
 
@@ -11,6 +11,12 @@
 		onUnlock?: (variant: ThemeVariant) => void;
 		showLockedThemes?: boolean;
 		translations?: Partial<ThemePageTranslations>;
+		/** Currently pinned themes (extended themes only) */
+		pinnedThemes?: ThemeVariant[];
+		/** Callback when pin status changes */
+		onTogglePin?: (variant: ThemeVariant) => void;
+		/** Whether to show extended themes section */
+		showExtendedThemes?: boolean;
 	}
 
 	let {
@@ -20,15 +26,34 @@
 		onUnlock,
 		showLockedThemes = true,
 		translations = {},
+		pinnedThemes = [],
+		onTogglePin,
+		showExtendedThemes = true,
 	}: Props = $props();
 
-	// Build theme data - use provided themes or create defaults from THEME_VARIANTS
-	const themeData = $derived(() => {
+	// Build theme data for default themes
+	const defaultThemeData = $derived(() => {
 		if (themes) {
-			return showLockedThemes ? themes : themes.filter((t) => t.status === 'available');
+			const defaultThemes = themes.filter((t) => DEFAULT_THEME_VARIANTS.includes(t.variant));
+			return showLockedThemes
+				? defaultThemes
+				: defaultThemes.filter((t) => t.status === 'available');
 		}
-		// Default: all variants are available
-		return THEME_VARIANTS.map((variant) => ({
+		return DEFAULT_THEME_VARIANTS.map((variant) => ({
+			variant,
+			status: 'available' as const,
+		}));
+	});
+
+	// Build theme data for extended themes
+	const extendedThemeData = $derived(() => {
+		if (themes) {
+			const extendedThemes = themes.filter((t) => EXTENDED_THEME_VARIANTS.includes(t.variant));
+			return showLockedThemes
+				? extendedThemes
+				: extendedThemes.filter((t) => t.status === 'available');
+		}
+		return EXTENDED_THEME_VARIANTS.map((variant) => ({
 			variant,
 			status: 'available' as const,
 		}));
@@ -42,10 +67,15 @@
 		lightPreview: translations.lightPreview,
 		darkPreview: translations.darkPreview,
 	});
+
+	function isThemePinned(variant: ThemeVariant): boolean {
+		return pinnedThemes.includes(variant);
+	}
 </script>
 
+<!-- Default Themes -->
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-	{#each themeData() as theme (theme.variant)}
+	{#each defaultThemeData() as theme (theme.variant)}
 		<ThemeCard
 			variant={theme.variant}
 			isActive={currentVariant === theme.variant}
@@ -56,3 +86,28 @@
 		/>
 	{/each}
 </div>
+
+<!-- Extended Themes -->
+{#if showExtendedThemes && extendedThemeData().length > 0}
+	<div class="mt-8">
+		<h3 class="text-sm font-medium text-muted-foreground mb-4 flex items-center gap-2">
+			Weitere Themes
+			<span class="text-xs text-muted-foreground/70">(zum Anpinnen in der Navigation)</span>
+		</h3>
+		<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+			{#each extendedThemeData() as theme (theme.variant)}
+				<ThemeCard
+					variant={theme.variant}
+					isActive={currentVariant === theme.variant}
+					status={theme.status}
+					onClick={() => onSelect(theme.variant)}
+					onUnlock={onUnlock ? () => onUnlock(theme.variant) : undefined}
+					canPin={true}
+					isPinned={isThemePinned(theme.variant)}
+					{onTogglePin}
+					translations={cardTranslations}
+				/>
+			{/each}
+		</div>
+	</div>
+{/if}