till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 21:01:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: rename subscription routes to /mana across all apps

Browse source 
- 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>
This commit is contained in:
Till-JS 2025-11-29 15:42:32 +01:00
parent 606fd9a32c
commit 353cf6adb2
11 changed files with 73 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

32
apps/chat/apps/web/src/routes/(protected)/mana/+page.svelte Normal file
View file

@ -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>

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

@ -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' },
];

0
apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte → apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte
View file

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

@ -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' },
];

0
apps/manadeck/apps/web/src/routes/(app)/subscription/+page.svelte → apps/manadeck/apps/web/src/routes/(app)/mana/+page.svelte
View file

23
apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
View file

@ -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>

2
apps/picture/apps/web/src/routes/app/+layout.svelte
View file

@ -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

2
apps/picture/apps/web/src/routes/app/subscription/+page.svelte → apps/picture/apps/web/src/routes/app/mana/+page.svelte
View file

@ -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));">

6
packages/shared-ui/src/navigation/PillDropdown.svelte
View file

@ -81,6 +81,8 @@
'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
// App icons
grid: 'M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z',
// Mana icon (water drop)
mana: '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',
};
function getIcon(iconName: string) {
@ -142,6 +144,10 @@
>
{#if item.imageUrl}
<img src={item.imageUrl} alt="" class="pill-image-icon" />
{:else if item.icon === 'mana'}
<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
<path d={getIcon('mana')} />
</svg>
{:else if item.icon}
<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path

16
packages/shared-ui/src/navigation/PillNavigation.svelte
View file

@ -82,6 +82,8 @@
userEmail?: string;
/** Settings page href */
settingsHref?: string;
/** Mana/subscription page href */
manaHref?: string;
}
let {
@ -113,6 +115,7 @@
showAppSwitcher = false,
userEmail,
settingsHref = '/settings',
manaHref,
}: Props = $props();
// Type guards for elements
@ -449,6 +452,19 @@
{#if userEmail}
<PillDropdown
items={[
...(manaHref
? [
{
id: 'mana',
label: 'Mana',
icon: 'mana',
onClick: () => {
window.location.href = manaHref;
},
active: currentPath === manaHref,
},
]
: []),
{
id: 'settings',
label: 'Einstellungen',