feat: rename subscription routes to /mana across all apps

- Add /mana route to chat web app with SubscriptionPage
- Add manaHref prop to PillNavigation for user dropdown link
- Add mana icon to PillDropdown component
- Rename /subscription to /mana in picture, manacore, and manadeck apps
- Update navigation items to use mana icon and label

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

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

apps/chat/apps/web/src/routes/(protected)/+layout.svelte

@@ -187,6 +187,7 @@
 			{appItems}
 			{userEmail}
 			settingsHref="/settings"
+			manaHref="/mana"
 		/>
 
 		<!-- Main Content with dynamic padding based on nav mode -->

apps/chat/apps/web/src/routes/(protected)/mana/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { SubscriptionPage } from '@manacore/shared-subscription-ui';
+
+	function handleSubscribe(planId: string) {
+		console.log('Subscribe to plan:', planId);
+		alert(`Abo "${planId}" ausgewählt. Bezahlsystem wird noch integriert.`);
+	}
+
+	function handleBuyPackage(packageId: string) {
+		console.log('Buy package:', packageId);
+		alert(`Paket "${packageId}" ausgewählt. Bezahlsystem wird noch integriert.`);
+	}
+</script>
+
+<svelte:head>
+	<title>Mana - ManaChat</title>
+</svelte:head>
+
+<div class="min-h-screen p-4 md:p-8" style="background-color: hsl(var(--color-background));">
+	<div class="mx-auto max-w-6xl">
+		<SubscriptionPage
+			appName="ManaChat"
+			onSubscribe={handleSubscribe}
+			onBuyPackage={handleBuyPackage}
+			currentPlanId="free"
+			pageTitle="Wähle dein Abo"
+			subscriptionsTitle="Abonnements"
+			packagesTitle="Einmal-Pakete"
+			yearlyDiscount="2 Monate gratis"
+		/>
+	</div>
+</div>

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

@@ -25,7 +25,7 @@
 		{ href: '/dashboard', label: 'Dashboard', icon: 'home' },
 		{ href: '/organizations', label: 'Organizations', icon: 'building' },
 		{ href: '/teams', label: 'Teams', icon: 'users' },
-		{ href: '/subscription', label: 'Subscription', icon: 'creditCard' },
+		{ href: '/mana', label: 'Mana', icon: 'mana' },
 		{ href: '/settings', label: 'Settings', icon: 'settings' },
 	];
 

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

@@ -25,7 +25,7 @@
 		{ href: '/decks', label: 'Decks', icon: 'archive' },
 		{ href: '/explore', label: 'Explore', icon: 'search' },
 		{ href: '/progress', label: 'Progress', icon: 'chart' },
-		{ href: '/subscription', label: 'Mana', icon: 'mana' },
+		{ href: '/mana', label: 'Mana', icon: 'mana' },
 		{ href: '/profile', label: 'Profile', icon: 'user' },
 	];
 

apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte

@@ -28,7 +28,6 @@
 		CloudArrowUp,
 		Tag,
 		Archive,
-		CurrencyCircleDollar,
 		Question,
 		CaretLeft,
 		CaretDown,
@@ -58,7 +57,7 @@
 		| 'upload'
 		| 'tags'
 		| 'archive'
-		| 'subscription';
+		| 'mana';
 
 	function handleSearchInput(e: Event) {
 		const target = e.target as HTMLInputElement;
@@ -130,7 +129,7 @@
 		{ path: '/app/upload', label: 'Upload', iconName: 'upload' },
 		{ path: '/app/tags', label: 'Tags', iconName: 'tags' },
 		{ path: '/app/archive', label: 'Archiv', iconName: 'archive' },
-		{ path: '/app/subscription', label: 'Abonnement', iconName: 'subscription' },
+		{ path: '/app/mana', label: 'Mana', iconName: 'mana' },
 	];
 </script>
 
@@ -192,8 +191,10 @@
 						<Tag size={20} />
 					{:else if item.iconName === 'archive'}
 						<Archive size={20} />
-					{:else if item.iconName === 'subscription'}
-						<CurrencyCircleDollar size={20} />
+					{:else if item.iconName === 'mana'}
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+							<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+						</svg>
 					{/if}
 				</span>
 				<span>{item.label}</span>
@@ -486,8 +487,10 @@
 								<Tag size={20} />
 							{:else if item.iconName === 'archive'}
 								<Archive size={20} />
-							{:else if item.iconName === 'subscription'}
-								<CurrencyCircleDollar size={20} />
+							{:else if item.iconName === 'mana'}
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+									<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+								</svg>
 							{/if}
 						</span>
 						{item.label}
@@ -542,8 +545,10 @@
 					<Tag size={24} />
 				{:else if item.iconName === 'archive'}
 					<Archive size={24} />
-				{:else if item.iconName === 'subscription'}
-					<CurrencyCircleDollar size={24} />
+				{:else if item.iconName === 'mana'}
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+					</svg>
 				{/if}
 				<span class="text-xs font-medium">{item.label}</span>
 			</a>

apps/picture/apps/web/src/routes/app/+layout.svelte

@@ -62,7 +62,7 @@
 		{ href: '/app/upload', label: 'Upload', icon: 'upload' },
 		{ href: '/app/tags', label: 'Tags', icon: 'tag' },
 		{ href: '/app/archive', label: 'Archiv', icon: 'archive' },
-		{ href: '/app/subscription', label: 'Abo', icon: 'creditCard' },
+		{ href: '/app/mana', label: 'Mana', icon: 'mana' },
 	];
 
 	// View mode options for tab group

apps/picture/apps/web/src/routes/app/mana/+page.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <svelte:head>
-	<title>Abonnement - Picture</title>
+	<title>Mana - Picture</title>
 </svelte:head>
 
 <div class="min-h-screen p-4 md:p-8" style="background-color: hsl(var(--color-background));">