mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-28 05:17:42 +02:00
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:
parent
1958cf2c01
commit
0acd7c3e7e
9 changed files with 360 additions and 26 deletions
32
apps/chat/apps/web/src/lib/components/AppSlider.svelte
Normal file
32
apps/chat/apps/web/src/lib/components/AppSlider.svelte
Normal 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}
|
||||
/>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue