feat(shared-branding): add global app icons and centralized app config

- Add app-icons.ts with SVG data URLs for all Manacore apps
- Add mana-apps.ts with centralized app configuration (de/en translations)
- Update AppSlider components across all apps to use global APP_ICONS
- Use real SVGs for memoro, manacore, mana, moodlit, maerchenzauber
- Placeholder icons for apps without original SVGs (chat, presi, manadeck, picture, zitare, wisekeep)

🤖 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-28 20:54:50 +01:00
parent 1958cf2c01
commit 0acd7c3e7e
9 changed files with 360 additions and 26 deletions

View file

@ -0,0 +1,32 @@
<script lang="ts">
import { AppSlider, type AppItem } from '@manacore/shared-ui';
import { MANA_APPS, APP_STATUS_LABELS, APP_SLIDER_LABELS } from '@manacore/shared-branding';
// Convert MANA_APPS to AppItem format (German)
const apps: AppItem[] = MANA_APPS.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,
}));
const statusLabels = APP_STATUS_LABELS.de;
const labels = APP_SLIDER_LABELS.de;
function handleAppClick(app: AppItem, index: number) {
console.log('Opening app:', app.name);
}
</script>
<AppSlider
{apps}
title={labels.title}
isDark={false}
{statusLabels}
comingSoonLabel={labels.comingSoon}
openAppLabel={labels.openApp}
onAppClick={handleAppClick}
/>

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { AppSlider, type AppItem } from '@manacore/shared-ui';
import { APP_ICONS } from '@manacore/shared-branding';
import { t } from 'svelte-i18n';
let apps = $derived<AppItem[]>([
@ -7,7 +8,7 @@
name: 'Memoro',
description: $t('app_slider.memoro_desc'),
longDescription: $t('app_slider.memoro_long_desc'),
icon: '/images/app-icons/memoro-logo-gradient.png',
icon: APP_ICONS.memoro,
color: '#f8d62b',
comingSoon: false,
status: 'published',
@ -16,7 +17,7 @@
name: 'Märchenzauber',
description: $t('app_slider.maerchenzauber_desc'),
longDescription: $t('app_slider.maerchenzauber_long_desc'),
icon: '/images/app-icons/maerchenzauber-logo-gradient.png',
icon: APP_ICONS.maerchenzauber,
color: '#FF6B9D',
comingSoon: false,
status: 'beta',
@ -25,7 +26,7 @@
name: 'ManaDeck',
description: $t('app_slider.manadeck_desc'),
longDescription: $t('app_slider.manadeck_long_desc'),
icon: '/images/app-icons/manadeck-logo-gradient.png',
icon: APP_ICONS.manadeck,
color: '#8b5cf6',
comingSoon: true,
status: 'development',
@ -34,7 +35,7 @@
name: 'Moodlit',
description: $t('app_slider.moodlit_desc'),
longDescription: $t('app_slider.moodlit_long_desc'),
icon: '/images/app-icons/moodlit-logo-gradient.png',
icon: APP_ICONS.moodlit,
color: '#9C27B0',
comingSoon: true,
status: 'planning',
@ -43,7 +44,7 @@
name: 'Manacore',
description: $t('app_slider.manacore_desc'),
longDescription: $t('app_slider.manacore_long_desc'),
icon: '/images/app-icons/manacore-logo-gradient.png',
icon: APP_ICONS.manacore,
color: '#6366f1',
comingSoon: true,
status: 'development',

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { AppSlider, type AppItem } from '@manacore/shared-ui';
import { APP_ICONS } from '@manacore/shared-branding';
import { t } from 'svelte-i18n';
let apps = $derived<AppItem[]>([
@ -7,7 +8,7 @@
name: 'Memoro',
description: $t('app_slider.memoro_desc'),
longDescription: $t('app_slider.memoro_long_desc'),
icon: '/images/app-icons/memoro-logo-gradient.png',
icon: APP_ICONS.memoro,
color: '#f8d62b',
comingSoon: false,
status: 'published',
@ -16,7 +17,7 @@
name: 'Märchenzauber',
description: $t('app_slider.maerchenzauber_desc'),
longDescription: $t('app_slider.maerchenzauber_long_desc'),
icon: '/images/app-icons/maerchenzauber-logo-gradient.png',
icon: APP_ICONS.maerchenzauber,
color: '#FF6B9D',
comingSoon: true,
status: 'beta',
@ -25,7 +26,7 @@
name: 'ManaDeck',
description: $t('app_slider.manadeck_desc'),
longDescription: $t('app_slider.manadeck_long_desc'),
icon: '/images/app-icons/manadeck-logo-gradient.png',
icon: APP_ICONS.manadeck,
color: '#8b5cf6',
comingSoon: true,
status: 'development',
@ -34,7 +35,7 @@
name: 'Moodlit',
description: $t('app_slider.moodlit_desc'),
longDescription: $t('app_slider.moodlit_long_desc'),
icon: '/images/app-icons/moodlit-logo-gradient.png',
icon: APP_ICONS.moodlit,
color: '#9C27B0',
comingSoon: true,
status: 'planning',
@ -43,7 +44,7 @@
name: 'Manacore',
description: $t('app_slider.manacore_desc'),
longDescription: $t('app_slider.manacore_long_desc'),
icon: '/images/app-icons/manacore-logo-gradient.png',
icon: APP_ICONS.manacore,
color: '#6366f1',
comingSoon: false,
status: 'development',

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { AppSlider, type AppItem } from '@manacore/shared-ui';
import { APP_ICONS } from '@manacore/shared-branding';
import { t } from 'svelte-i18n';
let apps = $derived<AppItem[]>([
@ -7,7 +8,7 @@
name: 'Memoro',
description: $t('app_slider.memoro_desc'),
longDescription: $t('app_slider.memoro_long_desc'),
icon: '/images/app-icons/memoro-logo-gradient.png',
icon: APP_ICONS.memoro,
color: '#f8d62b',
comingSoon: false,
status: 'published',
@ -16,7 +17,7 @@
name: 'ManaDeck',
description: $t('app_slider.manadeck_desc'),
longDescription: $t('app_slider.manadeck_long_desc'),
icon: '/images/app-icons/manadeck-logo-gradient.png',
icon: APP_ICONS.manadeck,
color: '#8b5cf6',
comingSoon: false,
status: 'development',
@ -25,7 +26,7 @@
name: 'Märchenzauber',
description: $t('app_slider.maerchenzauber_desc'),
longDescription: $t('app_slider.maerchenzauber_long_desc'),
icon: '/images/app-icons/maerchenzauber-logo-gradient.png',
icon: APP_ICONS.maerchenzauber,
color: '#FF6B9D',
comingSoon: true,
status: 'beta',
@ -34,7 +35,7 @@
name: 'Moodlit',
description: $t('app_slider.moodlit_desc'),
longDescription: $t('app_slider.moodlit_long_desc'),
icon: '/images/app-icons/moodlit-logo-gradient.png',
icon: APP_ICONS.moodlit,
color: '#9C27B0',
comingSoon: true,
status: 'planning',
@ -43,7 +44,7 @@
name: 'Manacore',
description: $t('app_slider.manacore_desc'),
longDescription: $t('app_slider.manacore_long_desc'),
icon: '/images/app-icons/manacore-logo-gradient.png',
icon: APP_ICONS.manacore,
color: '#6366f1',
comingSoon: true,
status: 'development',

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { AppSlider, type AppItem } from '@manacore/shared-ui';
import { APP_ICONS } from '@manacore/shared-branding';
import { theme } from '$lib/stores/theme';
import { t } from 'svelte-i18n';
@ -11,7 +12,7 @@
name: 'Memoro',
description: $t('app_slider.memoro_desc'),
longDescription: $t('app_slider.memoro_long_desc'),
icon: '/images/app-icons/memoro-logo-gradient.png',
icon: APP_ICONS.memoro,
color: '#f8d62b',
comingSoon: false,
status: 'published',
@ -20,7 +21,7 @@
name: 'Märchenzauber',
description: $t('app_slider.maerchenzauber_desc'),
longDescription: $t('app_slider.maerchenzauber_long_desc'),
icon: '/images/app-icons/maerchenzauber-logo-gradient.png',
icon: APP_ICONS.maerchenzauber,
color: '#FF6B9D',
comingSoon: true,
status: 'beta',
@ -29,7 +30,7 @@
name: 'ManaDeck',
description: $t('app_slider.manadeck_desc'),
longDescription: $t('app_slider.manadeck_long_desc'),
icon: '/images/app-icons/manadeck-logo-gradient.png',
icon: APP_ICONS.manadeck,
color: '#8b5cf6',
comingSoon: true,
status: 'development',
@ -38,7 +39,7 @@
name: 'Moodlit',
description: $t('app_slider.moodlit_desc'),
longDescription: $t('app_slider.moodlit_long_desc'),
icon: '/images/app-icons/moodlit-logo-gradient.png',
icon: APP_ICONS.moodlit,
color: '#9C27B0',
comingSoon: true,
status: 'planning',
@ -47,7 +48,7 @@
name: 'Manacore',
description: $t('app_slider.manacore_desc'),
longDescription: $t('app_slider.manacore_long_desc'),
icon: '/images/app-icons/manacore-logo-gradient.png',
icon: APP_ICONS.manacore,
color: '#00BCD4',
comingSoon: true,
status: 'development',

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { AppSlider, type AppItem } from '@manacore/shared-ui';
import { APP_ICONS } from '@manacore/shared-branding';
import { actualMode } from '$lib/stores/theme';
import { t } from 'svelte-i18n';
@ -10,7 +11,7 @@
name: 'Picture',
description: $t('app_slider.picture_desc'),
longDescription: $t('app_slider.picture_long_desc'),
icon: '/images/app-icons/picture-logo-gradient.png',
icon: APP_ICONS.picture,
color: '#3b82f6',
comingSoon: false,
status: 'published',
@ -19,7 +20,7 @@
name: 'Memoro',
description: $t('app_slider.memoro_desc'),
longDescription: $t('app_slider.memoro_long_desc'),
icon: '/images/app-icons/memoro-logo-gradient.png',
icon: APP_ICONS.memoro,
color: '#f8d62b',
comingSoon: false,
status: 'published',
@ -28,7 +29,7 @@
name: 'Märchenzauber',
description: $t('app_slider.maerchenzauber_desc'),
longDescription: $t('app_slider.maerchenzauber_long_desc'),
icon: '/images/app-icons/maerchenzauber-logo-gradient.png',
icon: APP_ICONS.maerchenzauber,
color: '#FF6B9D',
comingSoon: true,
status: 'beta',
@ -37,7 +38,7 @@
name: 'ManaDeck',
description: $t('app_slider.manadeck_desc'),
longDescription: $t('app_slider.manadeck_long_desc'),
icon: '/images/app-icons/manadeck-logo-gradient.png',
icon: APP_ICONS.manadeck,
color: '#8b5cf6',
comingSoon: true,
status: 'development',
@ -46,7 +47,7 @@
name: 'Moodlit',
description: $t('app_slider.moodlit_desc'),
longDescription: $t('app_slider.moodlit_long_desc'),
icon: '/images/app-icons/moodlit-logo-gradient.png',
icon: APP_ICONS.moodlit,
color: '#9C27B0',
comingSoon: true,
status: 'planning',
@ -55,7 +56,7 @@
name: 'Manacore',
description: $t('app_slider.manacore_desc'),
longDescription: $t('app_slider.manacore_long_desc'),
icon: '/images/app-icons/manacore-logo-gradient.png',
icon: APP_ICONS.manacore,
color: '#00BCD4',
comingSoon: true,
status: 'development',