mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 14:19:40 +02:00
refactor(apps): unify AppSlider to use centralized MANA_APPS config
- 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>
This commit is contained in:
Till-JS
parent
74b824d0a5
commit
6bb8285349
3 changed files with 60 additions and 183 deletions
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue