feat(theme): migrate theme emojis to Phosphor icons and integrate theme system into Zitare

- Replace emoji with Phosphor icon components in ThemeCard
- Add icon property to ThemeVariantDefinition type
- Add theme icon SVG paths to PillDropdown (sparkle, leaf, hexagon, waves)
- Update all app layouts to use icon instead of emoji for theme variants
- Integrate shared-theme system into Zitare web app
- Migrate Zitare from Tailwind v3 to v4
- Add themes page to Zitare
- Update Zitare settings page with icon-based theme display
- Add missing shared-icons dependency to Presi and Zitare

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

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

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

@@ -1,10 +1,18 @@
 <script lang="ts">
 	import type { ThemeVariant } from '@manacore/shared-theme';
 	import { THEME_DEFINITIONS } from '@manacore/shared-theme';
-	import { Check, Lock, Clock, Star } from '@manacore/shared-icons';
+	import { Check, Lock, Clock, Star, Sparkle, Leaf, Hexagon, Waves } from '@manacore/shared-icons';
 	import type { ThemeStatus } from '../types';
 	import ThemeColorPreview from './ThemeColorPreview.svelte';
 
+	// Theme icon components map
+	const themeIcons = {
+		sparkle: Sparkle,
+		leaf: Leaf,
+		hexagon: Hexagon,
+		waves: Waves,
+	} as const;
+
 	interface Props {
 		variant: ThemeVariant;
 		isActive: boolean;
@@ -93,7 +101,14 @@
 
 	<!-- Header -->
 	<div class="flex items-center gap-2 mb-3">
-		<span class="text-xl">{definition.emoji}</span>
+		{#if definition.icon && themeIcons[definition.icon as keyof typeof themeIcons]}
+			<svelte:component
+				this={themeIcons[definition.icon as keyof typeof themeIcons]}
+				size={20}
+				weight="duotone"
+				class="text-primary"
+			/>
+		{/if}
 		<span class="font-semibold text-foreground">{definition.label}</span>
 	</div>
 

packages/shared-ui/src/navigation/PillDropdown.svelte

@@ -63,6 +63,14 @@
 			'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
 		palette:
 			'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01',
+		// Theme icons (Phosphor-style)
+		sparkle:
+			'M12 2L13.09 8.26L18 6L15.74 10.91L22 12L15.74 13.09L18 18L13.09 15.74L12 22L10.91 15.74L6 18L8.26 13.09L2 12L8.26 10.91L6 6L10.91 8.26L12 2Z',
+		leaf: 'M6.5 21.5C3.5 18.5 3.5 12.5 6.5 8.5C9.5 4.5 15 3 20 3C20 8 18.5 13.5 14.5 16.5C10.5 19.5 4.5 19.5 4.5 19.5M6.5 21.5L4.5 19.5M6.5 21.5C6.5 21.5 12 18 14.5 16.5',
+		hexagon:
+			'M12 2L21.5 7.5V16.5L12 22L2.5 16.5V7.5L12 2Z',
+		waves:
+			'M2 12C2 12 5 8 9 8C13 8 15 12 15 12C15 12 17 16 21 16M2 17C2 17 5 13 9 13C13 13 15 17 15 17C15 17 17 21 21 21M2 7C2 7 5 3 9 3C13 3 15 7 15 7C15 7 17 11 21 11',
 	};
 
 	function getIcon(iconName: string) {