✨ feat(moodlit): add complete web app with fullscreen moods and sequences

- Add 24 default moods with various animation types (pulse, wave, candle, disco, etc.)
- Implement fullscreen mood view with play/pause, timer, and keyboard controls
- Add create mood dialog for custom moods with color picker and animation selection
- Implement sequences page with demo sequences and playback functionality
- Add MoodCard component with favorite toggle and animations
- Integrate with shared-branding (MoodlitLogo, AppId, APP_BRANDING config)
- Add i18n support (DE/EN) for all features
- Setup auth pages using shared-auth-ui
- Add feedback page with shared-feedback-service integration

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

Co-Authored-By: Claude <noreply@anthropic.com>

packages/shared-branding/src/config.ts

@@ -207,6 +207,19 @@ export const APP_BRANDING: Record<AppId, AppBranding> = {
 		logoStroke: true,
 		logoStrokeWidth: 1.5,
 	},
+	moodlit: {
+		id: 'moodlit',
+		name: 'Moodlit',
+		tagline: 'Ambient Lighting',
+		primaryColor: '#8b5cf6',
+		secondaryColor: '#a78bfa',
+		// Lightbulb/ambient light icon
+		logoPath:
+			'M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18',
+		logoViewBox: '0 0 24 24',
+		logoStroke: true,
+		logoStrokeWidth: 1.5,
+	},
 };
 
 /**

packages/shared-branding/src/index.ts

@@ -29,6 +29,7 @@ export {
 	StorageLogo,
 	TodoLogo,
 	MailLogo,
+	MoodlitLogo,
 } from './logos';
 
 // Configuration

packages/shared-branding/src/logos/MoodlitLogo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="moodlit" {size} {color} class={className} />

packages/shared-branding/src/logos/index.ts

@@ -16,3 +16,4 @@ export { default as CalendarLogo } from './CalendarLogo.svelte';
 export { default as StorageLogo } from './StorageLogo.svelte';
 export { default as TodoLogo } from './TodoLogo.svelte';
 export { default as MailLogo } from './MailLogo.svelte';
+export { default as MoodlitLogo } from './MoodlitLogo.svelte';

packages/shared-branding/src/mana-apps.ts

@@ -276,6 +276,22 @@ export const MANA_APPS: ManaApp[] = [
 		comingSoon: false,
 		status: 'development',
 	},
+	{
+		id: 'moodlit',
+		name: 'Moodlit',
+		description: {
+			de: 'Ambient Lighting & Moods',
+			en: 'Ambient Lighting & Moods',
+		},
+		longDescription: {
+			de: 'Erstelle beruhigende Lichtstimmungen mit animierten Farbverläufen für entspannte Atmosphäre.',
+			en: 'Create calming ambient lighting with animated color gradients for a relaxed atmosphere.',
+		},
+		icon: APP_ICONS.moodlit,
+		color: '#8b5cf6',
+		comingSoon: false,
+		status: 'development',
+	},
 ];
 
 /**
@@ -355,7 +371,7 @@ export const APP_URLS: Record<AppIconId, { dev: string; prod: string }> = {
 	nutriphi: { dev: 'http://localhost:5182', prod: 'https://nutriphi.manacore.app' },
 	manacore: { dev: 'http://localhost:5173', prod: 'https://manacore.app' },
 	mana: { dev: 'http://localhost:5173', prod: 'https://manacore.app' },
-	moodlit: { dev: 'http://localhost:5183', prod: 'https://moodlit.manacore.app' },
+	moodlit: { dev: 'http://localhost:5182', prod: 'https://moodlit.manacore.app' },
 	contacts: { dev: 'http://localhost:5184', prod: 'https://contacts.manacore.app' },
 	calendar: { dev: 'http://localhost:5179', prod: 'https://calendar.manacore.app' },
 	storage: { dev: 'http://localhost:5185', prod: 'https://storage.manacore.app' },

packages/shared-branding/src/types.ts

@@ -17,7 +17,8 @@ export type AppId =
 	| 'storage'
 	| 'clock'
 	| 'todo'
-	| 'mail';
+	| 'mail'
+	| 'moodlit';
 
 /**
  * App branding configuration