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>