From 6bb8285349cb90525239dde577ae9f7ab0d8a969 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sun, 30 Nov 2025 00:46:13 +0100
Subject: [PATCH] refactor(apps): unify AppSlider to use centralized MANA_APPS
 config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update ManaCore, ManaDeck, and Picture AppSlider components
- Replace hardcoded app lists with getActiveManaApps() from shared-branding
- Use APP_STATUS_LABELS and APP_SLIDER_LABELS for translations
- Archived apps (Memoro, Märchenzauber, WiseKeep, Nutriphi) now auto-filtered
- All 5 apps with AppSlider now use the same centralized config

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../web/src/lib/components/AppSlider.svelte   | 78 +++++------------
 .../web/src/lib/components/AppSlider.svelte   | 78 +++++------------
 .../web/src/lib/components/AppSlider.svelte   | 87 +++++--------------
 3 files changed, 60 insertions(+), 183 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/AppSlider.svelte b/apps/manacore/apps/web/src/lib/components/AppSlider.svelte
index 4cd0928f2..7686722ea 100644
--- a/apps/manacore/apps/web/src/lib/components/AppSlider.svelte
+++ b/apps/manacore/apps/web/src/lib/components/AppSlider.svelte
@@ -1,62 +1,24 @@
 <script lang="ts">
 	import { AppSlider, type AppItem } from '@manacore/shared-ui';
-	import { APP_ICONS } from '@manacore/shared-branding';
-	import { t } from 'svelte-i18n';
+	import {
+		getActiveManaApps,
+		APP_STATUS_LABELS,
+		APP_SLIDER_LABELS,
+	} from '@manacore/shared-branding';
 
-	let apps = $derived<AppItem[]>([
-		{
-			name: 'Memoro',
-			description: $t('app_slider.memoro_desc'),
-			longDescription: $t('app_slider.memoro_long_desc'),
-			icon: APP_ICONS.memoro,
-			color: '#f8d62b',
-			comingSoon: false,
-			status: 'published',
-		},
-		{
-			name: 'Märchenzauber',
-			description: $t('app_slider.maerchenzauber_desc'),
-			longDescription: $t('app_slider.maerchenzauber_long_desc'),
-			icon: APP_ICONS.maerchenzauber,
-			color: '#FF6B9D',
-			comingSoon: true,
-			status: 'beta',
-		},
-		{
-			name: 'ManaDeck',
-			description: $t('app_slider.manadeck_desc'),
-			longDescription: $t('app_slider.manadeck_long_desc'),
-			icon: APP_ICONS.manadeck,
-			color: '#8b5cf6',
-			comingSoon: true,
-			status: 'development',
-		},
-		{
-			name: 'Moodlit',
-			description: $t('app_slider.moodlit_desc'),
-			longDescription: $t('app_slider.moodlit_long_desc'),
-			icon: APP_ICONS.moodlit,
-			color: '#9C27B0',
-			comingSoon: true,
-			status: 'planning',
-		},
-		{
-			name: 'Manacore',
-			description: $t('app_slider.manacore_desc'),
-			longDescription: $t('app_slider.manacore_long_desc'),
-			icon: APP_ICONS.manacore,
-			color: '#6366f1',
-			comingSoon: false,
-			status: 'development',
-		},
-	]);
+	// Convert MANA_APPS to AppItem format (German)
+	const apps: AppItem[] = getActiveManaApps().map((app) => ({
+		name: app.name,
+		description: app.description.de,
+		longDescription: app.longDescription.de,
+		icon: app.icon,
+		color: app.color,
+		comingSoon: app.comingSoon,
+		status: app.status,
+	}));
 
-	let statusLabels = $derived({
-		published: $t('app_slider.status_published'),
-		beta: $t('app_slider.status_beta'),
-		development: $t('app_slider.status_development'),
-		planning: $t('app_slider.status_planning'),
-	});
+	const statusLabels = APP_STATUS_LABELS.de;
+	const labels = APP_SLIDER_LABELS.de;
 
 	function handleAppClick(app: AppItem, index: number) {
 		console.log('Opening app:', app.name);
@@ -65,10 +27,10 @@
 
 <AppSlider
 	{apps}
-	title={$t('app_slider.title')}
+	title={labels.title}
 	isDark={false}
 	{statusLabels}
-	comingSoonLabel={$t('app_slider.coming_soon')}
-	openAppLabel={$t('app_slider.download')}
+	comingSoonLabel={labels.comingSoon}
+	openAppLabel={labels.openApp}
 	onAppClick={handleAppClick}
 />
diff --git a/apps/manadeck/apps/web/src/lib/components/AppSlider.svelte b/apps/manadeck/apps/web/src/lib/components/AppSlider.svelte
index e291b4b2f..7686722ea 100644
--- a/apps/manadeck/apps/web/src/lib/components/AppSlider.svelte
+++ b/apps/manadeck/apps/web/src/lib/components/AppSlider.svelte
@@ -1,62 +1,24 @@
 <script lang="ts">
 	import { AppSlider, type AppItem } from '@manacore/shared-ui';
-	import { APP_ICONS } from '@manacore/shared-branding';
-	import { t } from 'svelte-i18n';
+	import {
+		getActiveManaApps,
+		APP_STATUS_LABELS,
+		APP_SLIDER_LABELS,
+	} from '@manacore/shared-branding';
 
-	let apps = $derived<AppItem[]>([
-		{
-			name: 'Memoro',
-			description: $t('app_slider.memoro_desc'),
-			longDescription: $t('app_slider.memoro_long_desc'),
-			icon: APP_ICONS.memoro,
-			color: '#f8d62b',
-			comingSoon: false,
-			status: 'published',
-		},
-		{
-			name: 'ManaDeck',
-			description: $t('app_slider.manadeck_desc'),
-			longDescription: $t('app_slider.manadeck_long_desc'),
-			icon: APP_ICONS.manadeck,
-			color: '#8b5cf6',
-			comingSoon: false,
-			status: 'development',
-		},
-		{
-			name: 'Märchenzauber',
-			description: $t('app_slider.maerchenzauber_desc'),
-			longDescription: $t('app_slider.maerchenzauber_long_desc'),
-			icon: APP_ICONS.maerchenzauber,
-			color: '#FF6B9D',
-			comingSoon: true,
-			status: 'beta',
-		},
-		{
-			name: 'Moodlit',
-			description: $t('app_slider.moodlit_desc'),
-			longDescription: $t('app_slider.moodlit_long_desc'),
-			icon: APP_ICONS.moodlit,
-			color: '#9C27B0',
-			comingSoon: true,
-			status: 'planning',
-		},
-		{
-			name: 'Manacore',
-			description: $t('app_slider.manacore_desc'),
-			longDescription: $t('app_slider.manacore_long_desc'),
-			icon: APP_ICONS.manacore,
-			color: '#6366f1',
-			comingSoon: true,
-			status: 'development',
-		},
-	]);
+	// Convert MANA_APPS to AppItem format (German)
+	const apps: AppItem[] = getActiveManaApps().map((app) => ({
+		name: app.name,
+		description: app.description.de,
+		longDescription: app.longDescription.de,
+		icon: app.icon,
+		color: app.color,
+		comingSoon: app.comingSoon,
+		status: app.status,
+	}));
 
-	let statusLabels = $derived({
-		published: $t('app_slider.status_published'),
-		beta: $t('app_slider.status_beta'),
-		development: $t('app_slider.status_development'),
-		planning: $t('app_slider.status_planning'),
-	});
+	const statusLabels = APP_STATUS_LABELS.de;
+	const labels = APP_SLIDER_LABELS.de;
 
 	function handleAppClick(app: AppItem, index: number) {
 		console.log('Opening app:', app.name);
@@ -65,10 +27,10 @@
 
 <AppSlider
 	{apps}
-	title={$t('app_slider.title')}
+	title={labels.title}
 	isDark={false}
 	{statusLabels}
-	comingSoonLabel={$t('app_slider.coming_soon')}
-	openAppLabel={$t('app_slider.download')}
+	comingSoonLabel={labels.comingSoon}
+	openAppLabel={labels.openApp}
 	onAppClick={handleAppClick}
 />
diff --git a/apps/picture/apps/web/src/lib/components/AppSlider.svelte b/apps/picture/apps/web/src/lib/components/AppSlider.svelte
index 97771b71f..db7bcb7f5 100644
--- a/apps/picture/apps/web/src/lib/components/AppSlider.svelte
+++ b/apps/picture/apps/web/src/lib/components/AppSlider.svelte
@@ -1,72 +1,25 @@
 <script lang="ts">
 	import { AppSlider, type AppItem } from '@manacore/shared-ui';
-	import { APP_ICONS } from '@manacore/shared-branding';
+	import {
+		getActiveManaApps,
+		APP_STATUS_LABELS,
+		APP_SLIDER_LABELS,
+	} from '@manacore/shared-branding';
 	import { theme } from '$lib/stores/theme';
-	import { t } from 'svelte-i18n';
 
-	let apps = $derived<AppItem[]>([
-		{
-			name: 'Picture',
-			description: $t('app_slider.picture_desc'),
-			longDescription: $t('app_slider.picture_long_desc'),
-			icon: APP_ICONS.picture,
-			color: '#3b82f6',
-			comingSoon: false,
-			status: 'published',
-		},
-		{
-			name: 'Memoro',
-			description: $t('app_slider.memoro_desc'),
-			longDescription: $t('app_slider.memoro_long_desc'),
-			icon: APP_ICONS.memoro,
-			color: '#f8d62b',
-			comingSoon: false,
-			status: 'published',
-		},
-		{
-			name: 'Märchenzauber',
-			description: $t('app_slider.maerchenzauber_desc'),
-			longDescription: $t('app_slider.maerchenzauber_long_desc'),
-			icon: APP_ICONS.maerchenzauber,
-			color: '#FF6B9D',
-			comingSoon: true,
-			status: 'beta',
-		},
-		{
-			name: 'ManaDeck',
-			description: $t('app_slider.manadeck_desc'),
-			longDescription: $t('app_slider.manadeck_long_desc'),
-			icon: APP_ICONS.manadeck,
-			color: '#8b5cf6',
-			comingSoon: true,
-			status: 'development',
-		},
-		{
-			name: 'Moodlit',
-			description: $t('app_slider.moodlit_desc'),
-			longDescription: $t('app_slider.moodlit_long_desc'),
-			icon: APP_ICONS.moodlit,
-			color: '#9C27B0',
-			comingSoon: true,
-			status: 'planning',
-		},
-		{
-			name: 'Manacore',
-			description: $t('app_slider.manacore_desc'),
-			longDescription: $t('app_slider.manacore_long_desc'),
-			icon: APP_ICONS.manacore,
-			color: '#00BCD4',
-			comingSoon: true,
-			status: 'development',
-		},
-	]);
+	// Convert MANA_APPS to AppItem format (German)
+	const apps: AppItem[] = getActiveManaApps().map((app) => ({
+		name: app.name,
+		description: app.description.de,
+		longDescription: app.longDescription.de,
+		icon: app.icon,
+		color: app.color,
+		comingSoon: app.comingSoon,
+		status: app.status,
+	}));
 
-	let statusLabels = $derived({
-		published: $t('app_slider.status_published'),
-		beta: $t('app_slider.status_beta'),
-		development: $t('app_slider.status_development'),
-		planning: $t('app_slider.status_planning'),
-	});
+	const statusLabels = APP_STATUS_LABELS.de;
+	const labels = APP_SLIDER_LABELS.de;
 
 	function handleAppClick(app: AppItem, index: number) {
 		console.log('Opening app:', app.name);
@@ -75,10 +28,10 @@
 
 <AppSlider
 	{apps}
-	title={$t('app_slider.title')}
+	title={labels.title}
 	isDark={theme.isDark}
 	{statusLabels}
-	comingSoonLabel={$t('app_slider.coming_soon')}
-	openAppLabel={$t('app_slider.download')}
+	comingSoonLabel={labels.comingSoon}
+	openAppLabel={labels.openApp}
 	onAppClick={handleAppClick}
 />