Onboarding Modal Polish & Calendar ViewsBar

Fokussierter Tag mit 7 Commits für UI-Polish und kleinere Features:

• Onboarding Modal - Kompaktes Design statt Fullscreen
• Calendar ViewsBar - Unified View Switcher Komponente
• STT API Key - Support für alle Matrix Bots
• Gift Code Fixes - Debug-Logging entfernt

Onboarding Modal Polish

Das Onboarding-Modal wurde von Fullscreen auf kompaktes Modal umgestellt.

Vorher vs. Nachher

Elevation Layer Colors

Korrektur der Layer-Farben für das Design-System:

/* Vorher: Falsche Elevation */
.modal-content {
	background: var(--surface-0);
}

/* Nachher: Korrekte Elevation */
.modal-content {
	background: var(--surface-1); /* Erhöht */
}

.modal-overlay {
	background: rgba(0, 0, 0, 0.5);
}

Design-System Referenz

┌─────────────────────────────────────────────────────┐
│  Elevation Layers                                    │
├─────────────────────────────────────────────────────┤
│                                                      │
│  surface-0  ████████  Base (Page Background)        │
│  surface-1  ████████  Raised (Cards, Modals)        │
│  surface-2  ████████  Higher (Dropdowns, Tooltips)  │
│  surface-3  ████████  Highest (Floating Elements)   │
│                                                      │
└─────────────────────────────────────────────────────┘

Calendar ViewsBar

Neue unified Komponente für den View-Wechsel im Calendar.

Features

Component API

<script lang="ts">
	import { ViewsBar } from '$lib/components/ViewsBar.svelte';

	let currentView = $state<'day' | 'week' | 'month' | 'year' | 'agenda'>('week');
</script>

<ViewsBar bind:view={currentView} />

Implementation

<!-- apps/calendar/apps/web/src/lib/components/ViewsBar.svelte -->
<div class="views-bar">
	{#each views as view}
		<button
			class:active={currentView === view.id}
			on:click={() => (currentView = view.id)}
			title="{view.label} ({view.shortcut})"
		>
			<Icon name={view.icon} />
			<span class="label">{view.label}</span>
		</button>
	{/each}
</div>

<style>
	.views-bar {
		display: flex;
		gap: 4px;
		padding: 4px;
		background: var(--surface-1);
		border-radius: 8px;
	}

	button.active {
		background: var(--primary);
		color: var(--on-primary);
	}
</style>

STT API Key Support

API Key Authentication für den Transcription Service.

Motivation

• Externer Zugriff auf mana-stt
• Rate Limiting pro API Key
• Usage Tracking

Implementation

// packages/bot-services/src/transcription.service.ts
export class TranscriptionService {
	private apiKey?: string;

	constructor(config: { apiKey?: string }) {
		this.apiKey = config.apiKey;
	}

	async transcribe(audioBuffer: Buffer): Promise<string> {
		const headers: Record<string, string> = {
			'Content-Type': 'audio/wav',
		};

		if (this.apiKey) {
			headers['X-API-Key'] = this.apiKey;
		}

		const response = await fetch(`${this.baseUrl}/transcribe`, {
			method: 'POST',
			headers,
			body: audioBuffer,
		});

		return response.json();
	}
}

Betroffene Bots

Alle Matrix Bots mit STT-Funktionalität:

• matrix-stt-bot
• matrix-nutriphi-bot
• matrix-chat-bot (Voice Messages)

Environment Variable

STT_API_KEY=your-api-key-here

Gift Code Fixes

Debug Logging entfernt

Nach erfolgreichem Fix des userId undefined Problems wurde das Debug-Logging entfernt:

- console.log('Gift redemption debug:', {
-   userId,
-   giftCode,
-   giftType,
- });

Cleanup

• Produktions-ready ohne Debug-Output
• Cleaner Logs für Monitoring

Zusammenfassung

Nächste Schritte

1. Onboarding Steps - Weitere Steps implementieren
2. Calendar Sync - CalDAV Integration
3. STT Streaming - Real-time Transkription
4. Gift Admin Panel - Code-Erstellung im UI