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',

File diff suppressed because one or more lines are too long

View file

@ -21,10 +21,26 @@ export {
StorytellerLogo,
UloadLogo,
ChatLogo,
PresiLogo,
} from './logos';
// Configuration
export { APP_BRANDING, getAppBranding, getAllAppBrandings } from './config';
// App Icons (SVG data URLs)
export { APP_ICONS, type AppIconId } from './app-icons';
// Mana Apps Configuration
export {
MANA_APPS,
getManaApp,
getManaAppsByStatus,
getAvailableManaApps,
APP_STATUS_LABELS,
APP_SLIDER_LABELS,
type ManaApp,
type AppStatus,
} from './mana-apps';
// Types
export type { AppId, AppBranding, LogoProps, AppLogoWithNameProps } from './types';

View file

@ -0,0 +1,216 @@
/**
* Central configuration for all Mana ecosystem apps
* This is the single source of truth for AppSlider components
*/
import { APP_ICONS, type AppIconId } from './app-icons';
export type AppStatus = 'published' | 'beta' | 'development' | 'planning';
export interface ManaApp {
id: AppIconId;
name: string;
description: {
de: string;
en: string;
};
longDescription: {
de: string;
en: string;
};
icon: string; // Data URL from APP_ICONS
color: string;
comingSoon: boolean;
status: AppStatus;
url?: string; // Optional URL for the app
}
/**
* All apps in the Mana ecosystem
* Order determines display order in AppSlider
*/
export const MANA_APPS: ManaApp[] = [
{
id: 'chat',
name: 'ManaChat',
description: {
de: 'KI Chat Assistent',
en: 'AI Chat Assistant',
},
longDescription: {
de: 'Dein intelligenter KI-Begleiter für Gespräche, Fragen und kreative Aufgaben.',
en: 'Your intelligent AI companion for conversations, questions, and creative tasks.',
},
icon: APP_ICONS.chat,
color: '#0ea5e9',
comingSoon: false,
status: 'beta',
},
{
id: 'memoro',
name: 'Memoro',
description: {
de: 'KI Sprachnotizen',
en: 'AI Voice Memos',
},
longDescription: {
de: 'Verwandle deine Sprachnotizen in organisiertes, durchsuchbares Wissen mit KI-gestützter Transkription.',
en: 'Transform your voice memos into organized, searchable knowledge with AI-powered transcription.',
},
icon: APP_ICONS.memoro,
color: '#f8d62b',
comingSoon: false,
status: 'published',
},
{
id: 'presi',
name: 'Presi',
description: {
de: 'Präsentations-Creator',
en: 'Presentation Creator',
},
longDescription: {
de: 'Erstelle beeindruckende Präsentationen mit KI-gestützten Design-Vorschlägen.',
en: 'Create stunning presentations with AI-powered design suggestions.',
},
icon: APP_ICONS.presi,
color: '#f97316',
comingSoon: false,
status: 'development',
},
{
id: 'manadeck',
name: 'ManaDeck',
description: {
de: 'KI Karteikarten',
en: 'AI Flashcards',
},
longDescription: {
de: 'Lerne intelligenter mit KI-generierten Karteikarten und Spaced Repetition.',
en: 'Learn smarter with AI-generated flashcards and spaced repetition.',
},
icon: APP_ICONS.manadeck,
color: '#8b5cf6',
comingSoon: true,
status: 'development',
},
{
id: 'maerchenzauber',
name: 'Märchenzauber',
description: {
de: 'KI Geschichten',
en: 'AI Stories',
},
longDescription: {
de: 'Erstelle magische, personalisierte Geschichten für Kinder mit KI-gestütztem Storytelling.',
en: 'Create magical, personalized stories for children with AI-powered storytelling.',
},
icon: APP_ICONS.maerchenzauber,
color: '#FF6B9D',
comingSoon: true,
status: 'beta',
},
{
id: 'picture',
name: 'ManaPicture',
description: {
de: 'KI Bildgenerierung',
en: 'AI Image Generation',
},
longDescription: {
de: 'Erschaffe einzigartige Bilder mit der Kraft künstlicher Intelligenz.',
en: 'Create unique images with the power of artificial intelligence.',
},
icon: APP_ICONS.picture,
color: '#22c55e',
comingSoon: true,
status: 'development',
},
{
id: 'zitare',
name: 'Zitare',
description: {
de: 'Tägliche Inspiration',
en: 'Daily Inspiration',
},
longDescription: {
de: 'Entdecke inspirierende Zitate und Weisheiten für jeden Tag.',
en: 'Discover inspiring quotes and wisdom for every day.',
},
icon: APP_ICONS.zitare,
color: '#f59e0b',
comingSoon: true,
status: 'development',
},
{
id: 'wisekeep',
name: 'WiseKeep',
description: {
de: 'KI Wissensextraktion',
en: 'AI Knowledge Extraction',
},
longDescription: {
de: 'Extrahiere Weisheiten und Erkenntnisse aus Videos und Texten.',
en: 'Extract wisdom and insights from videos and texts.',
},
icon: APP_ICONS.wisekeep,
color: '#6366f1',
comingSoon: true,
status: 'planning',
},
];
/**
* Get a specific app by ID
*/
export function getManaApp(id: AppIconId): ManaApp | undefined {
return MANA_APPS.find((app) => app.id === id);
}
/**
* Get apps filtered by status
*/
export function getManaAppsByStatus(status: AppStatus): ManaApp[] {
return MANA_APPS.filter((app) => app.status === status);
}
/**
* Get only published/available apps
*/
export function getAvailableManaApps(): ManaApp[] {
return MANA_APPS.filter((app) => !app.comingSoon);
}
/**
* Status labels in German and English
*/
export const APP_STATUS_LABELS = {
de: {
published: 'Live',
beta: 'Beta',
development: 'In Entwicklung',
planning: 'Geplant',
},
en: {
published: 'Live',
beta: 'Beta',
development: 'In Development',
planning: 'Planned',
},
} as const;
/**
* Common labels for AppSlider in German and English
*/
export const APP_SLIDER_LABELS = {
de: {
title: 'Teil des Mana Ecosystems',
comingSoon: 'Demnächst',
openApp: 'App öffnen',
},
en: {
title: 'Part of the Mana Ecosystem',
comingSoon: 'Coming Soon',
openApp: 'Open App',
},
} as const;