From ea856214fe2b7005839ee7ccf17b8d1237b3ead2 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Tue, 16 Dec 2025 18:37:11 +0100
Subject: [PATCH] feat(calendar): show settings as modal on homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create SettingsModal component with all settings sections
- Update layout to show settings modal when clicking Settings in PillNav
- Modal appears above the input bar with glassmorphism styling
- Settings changes are saved immediately via settingsStore

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/settings/SettingsModal.svelte  | 1232 +++++++++++++++++
 .../apps/web/src/routes/(app)/+layout.svelte  |   18 +-
 2 files changed, 1249 insertions(+), 1 deletion(-)
 create mode 100644 apps/calendar/apps/web/src/lib/components/settings/SettingsModal.svelte

diff --git a/apps/calendar/apps/web/src/lib/components/settings/SettingsModal.svelte b/apps/calendar/apps/web/src/lib/components/settings/SettingsModal.svelte
new file mode 100644
index 000000000..00f234422
--- /dev/null
+++ b/apps/calendar/apps/web/src/lib/components/settings/SettingsModal.svelte
@@ -0,0 +1,1232 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { userSettings } from '$lib/stores/user-settings.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import type { TimeFormat, AllDayDisplayMode } from '$lib/stores/settings.svelte';
+	import { calendarsStore } from '$lib/stores/calendars.svelte';
+	import { toast } from '$lib/stores/toast.svelte';
+	import {
+		GlobalSettingsSection,
+		SettingsSection,
+		SettingsCard,
+		FilterDropdown,
+		type FilterDropdownOption,
+	} from '@manacore/shared-ui';
+	import { X } from '@manacore/shared-icons';
+	import type { CalendarViewType, Calendar } from '@calendar/shared';
+
+	interface Props {
+		visible: boolean;
+		onClose: () => void;
+		isSidebarMode?: boolean;
+	}
+
+	let { visible, onClose, isSidebarMode = false }: Props = $props();
+
+	// Calendar management state
+	let editingCalendar = $state<Calendar | null>(null);
+	let editName = $state('');
+	let editColor = $state('');
+	let editIsDefault = $state(false);
+	let showNewCalendarForm = $state(false);
+	let newCalendarName = $state('');
+	let newCalendarColor = $state('#3b82f6');
+
+	function startEditing(calendar: Calendar) {
+		editingCalendar = calendar;
+		editName = calendar.name;
+		editColor = calendar.color || '#3b82f6';
+		editIsDefault = calendar.isDefault || false;
+	}
+
+	function cancelEditing() {
+		editingCalendar = null;
+		editName = '';
+		editColor = '';
+		editIsDefault = false;
+	}
+
+	// Calendar management functions
+	async function handleCreateCalendar() {
+		if (!newCalendarName.trim()) return;
+
+		const result = await calendarsStore.createCalendar({
+			name: newCalendarName.trim(),
+			color: newCalendarColor,
+		});
+
+		if (result.error) {
+			toast.error(`Fehler: ${result.error.message}`);
+			return;
+		}
+
+		toast.success('Kalender erstellt');
+		newCalendarName = '';
+		showNewCalendarForm = false;
+	}
+
+	async function handleDeleteCalendar(calendar: Calendar) {
+		if (!confirm(`Möchten Sie "${calendar.name}" wirklich löschen?`)) {
+			return;
+		}
+
+		const result = await calendarsStore.deleteCalendar(calendar.id);
+
+		if (result.error) {
+			toast.error(`Fehler: ${result.error.message}`);
+			return;
+		}
+
+		toast.success('Kalender gelöscht');
+	}
+
+	async function handleUpdateCalendar() {
+		if (!editingCalendar || !editName.trim()) return;
+
+		// If setting as default and it wasn't before, use setAsDefault
+		if (editIsDefault && !editingCalendar.isDefault) {
+			const defaultResult = await calendarsStore.setAsDefault(editingCalendar.id);
+			if (defaultResult?.error) {
+				toast.error(`Fehler: ${defaultResult.error.message}`);
+				return;
+			}
+		}
+
+		// Update name and color
+		const result = await calendarsStore.updateCalendar(editingCalendar.id, {
+			name: editName.trim(),
+			color: editColor,
+		});
+
+		if (result.error) {
+			toast.error(`Fehler: ${result.error.message}`);
+			return;
+		}
+
+		toast.success('Kalender aktualisiert');
+		cancelEditing();
+	}
+
+	function handleViewChange(view: CalendarViewType) {
+		settingsStore.set('defaultView', view);
+	}
+
+	function handleTimeFormatChange(format: TimeFormat) {
+		settingsStore.set('timeFormat', format);
+	}
+
+	function handleEventDurationChange(duration: number) {
+		settingsStore.set('defaultEventDuration', duration);
+	}
+
+	function handleReminderChange(minutes: number) {
+		settingsStore.set('defaultReminder', minutes);
+	}
+
+	// View labels
+	const viewLabels: Record<CalendarViewType, string> = {
+		day: 'Tag',
+		'3day': '3 Tage',
+		'5day': '5 Tage',
+		week: 'Woche',
+		'10day': '10 Tage',
+		'14day': '14 Tage',
+		'30day': '30 Tage',
+		'60day': '60 Tage',
+		'90day': '90 Tage',
+		'365day': '365 Tage',
+		month: 'Monat',
+		year: 'Jahr',
+		agenda: 'Agenda',
+		custom: 'Benutzerdefiniert',
+	};
+
+	// Duration options in minutes
+	const durationOptions = [15, 30, 45, 60, 90, 120];
+
+	// Reminder options in minutes
+	const reminderOptions = [
+		{ value: 0, label: 'Keine' },
+		{ value: 5, label: '5 Minuten' },
+		{ value: 10, label: '10 Minuten' },
+		{ value: 15, label: '15 Minuten' },
+		{ value: 30, label: '30 Minuten' },
+		{ value: 60, label: '1 Stunde' },
+		{ value: 1440, label: '1 Tag' },
+	];
+
+	// FilterDropdown options
+	let viewOptions = $derived<FilterDropdownOption[]>(
+		Object.entries(viewLabels).map(([value, label]) => ({ value, label }))
+	);
+
+	let durationDropdownOptions = $derived<FilterDropdownOption[]>(
+		durationOptions.map((duration) => ({
+			value: String(duration),
+			label:
+				duration >= 60
+					? `${duration / 60} Stunde${duration > 60 ? 'n' : ''}`
+					: `${duration} Minuten`,
+		}))
+	);
+
+	let reminderDropdownOptions = $derived<FilterDropdownOption[]>(
+		reminderOptions.map((opt) => ({
+			value: String(opt.value),
+			label: opt.label,
+		}))
+	);
+
+	// Dynamic hour options (filtered by the other value)
+	let hourStartOptions = $derived<FilterDropdownOption[]>(
+		Array.from({ length: 24 }, (_, i) => i)
+			.filter((hour) => hour < settingsStore.dayEndHour)
+			.map((hour) => ({
+				value: String(hour),
+				label: `${hour.toString().padStart(2, '0')}:00`,
+			}))
+	);
+
+	let hourEndOptions = $derived<FilterDropdownOption[]>(
+		Array.from({ length: 24 }, (_, i) => i + 1)
+			.filter((hour) => hour > settingsStore.dayStartHour)
+			.map((hour) => ({
+				value: String(hour),
+				label: `${hour.toString().padStart(2, '0')}:00`,
+			}))
+	);
+
+	// Keyboard handler
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	}
+
+	onMount(async () => {
+		settingsStore.initialize();
+		await userSettings.load();
+	});
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if visible}
+	<!-- Backdrop -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-backdrop" onclick={onClose}></div>
+
+	<!-- Modal -->
+	<div
+		class="settings-modal"
+		class:sidebar-mode={isSidebarMode}
+		role="dialog"
+		aria-modal="true"
+		aria-label="Einstellungen"
+	>
+		<!-- Header -->
+		<div class="modal-header">
+			<h2 class="modal-title">Einstellungen</h2>
+			<button class="header-btn close-btn" onclick={onClose} title="Schließen">
+				<X size={18} weight="bold" />
+			</button>
+		</div>
+
+		<!-- Content -->
+		<div class="modal-content">
+			<!-- Meine Kalender -->
+			<SettingsSection title="Meine Kalender">
+				{#snippet icon()}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+				{/snippet}
+				<SettingsCard>
+					<div class="p-4">
+						<div class="calendars-toolbar">
+							<button
+								class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-lg transition-colors bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary))]/90"
+								onclick={() => (showNewCalendarForm = true)}
+							>
+								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								Neuer Kalender
+							</button>
+						</div>
+
+						{#if showNewCalendarForm}
+							<div class="new-calendar-form">
+								<form
+									onsubmit={(e) => {
+										e.preventDefault();
+										handleCreateCalendar();
+									}}
+								>
+									<div class="calendar-form-row">
+										<input
+											type="text"
+											class="input"
+											placeholder="Kalender Name"
+											bind:value={newCalendarName}
+										/>
+										<input type="color" class="color-input" bind:value={newCalendarColor} />
+									</div>
+									<div class="calendar-form-actions">
+										<button
+											type="button"
+											class="btn btn-ghost"
+											onclick={() => (showNewCalendarForm = false)}
+										>
+											Abbrechen
+										</button>
+										<button
+											type="submit"
+											class="btn btn-primary"
+											disabled={!newCalendarName.trim()}
+										>
+											Erstellen
+										</button>
+									</div>
+								</form>
+							</div>
+						{/if}
+
+						<div class="calendar-list">
+							{#each calendarsStore.calendars as calendar}
+								{#if editingCalendar?.id === calendar.id}
+									<div class="calendar-edit-form">
+										<form
+											onsubmit={(e) => {
+												e.preventDefault();
+												handleUpdateCalendar();
+											}}
+										>
+											<div class="edit-form-row">
+												<div class="edit-form-group edit-form-group--name">
+													<label for="edit-name" class="edit-label">Name</label>
+													<input
+														type="text"
+														id="edit-name"
+														class="edit-input"
+														placeholder="Kalender Name"
+														bind:value={editName}
+													/>
+												</div>
+
+												<div class="edit-form-group edit-form-group--color">
+													<label for="edit-color" class="edit-label">Farbe</label>
+													<div class="edit-color-wrapper">
+														<input
+															type="color"
+															id="edit-color"
+															class="edit-color-input"
+															bind:value={editColor}
+														/>
+														<span class="edit-color-value">{editColor}</span>
+													</div>
+												</div>
+											</div>
+
+											<label class="edit-checkbox">
+												<input
+													type="checkbox"
+													bind:checked={editIsDefault}
+													disabled={editingCalendar.isDefault}
+												/>
+												<span class="edit-checkbox-text">
+													Als Standardkalender verwenden
+													{#if editingCalendar.isDefault}
+														<span class="edit-checkbox-hint">(aktueller Standard)</span>
+													{/if}
+												</span>
+											</label>
+
+											<div class="edit-form-actions">
+												<button type="button" class="btn btn-ghost" onclick={cancelEditing}>
+													Abbrechen
+												</button>
+												<button type="submit" class="btn btn-primary" disabled={!editName.trim()}>
+													Speichern
+												</button>
+											</div>
+										</form>
+									</div>
+								{:else}
+									<div class="calendar-card">
+										<div class="calendar-info">
+											<span class="color-dot" style="background-color: {calendar.color}"></span>
+											<span class="calendar-name">{calendar.name}</span>
+											{#if calendar.isDefault}
+												<span class="badge badge-primary">Standard</span>
+											{/if}
+										</div>
+										<div class="calendar-actions">
+											<button class="btn btn-ghost btn-sm" onclick={() => startEditing(calendar)}>
+												Bearbeiten
+											</button>
+											{#if !calendar.isDefault}
+												<button
+													class="btn btn-ghost btn-sm text-destructive"
+													onclick={() => handleDeleteCalendar(calendar)}
+												>
+													Löschen
+												</button>
+											{/if}
+										</div>
+									</div>
+								{/if}
+							{/each}
+
+							{#if calendarsStore.calendars.length === 0}
+								<div class="empty-state">
+									<p>Keine Kalender vorhanden</p>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</SettingsCard>
+			</SettingsSection>
+
+			<!-- Global App Settings (synced across all apps) -->
+			<GlobalSettingsSection
+				{userSettings}
+				appId="calendar"
+				title="App-Einstellungen"
+				description="Diese Einstellungen werden mit allen Mana Apps synchronisiert"
+			/>
+
+			<!-- Kalender-Ansicht -->
+			<SettingsSection title="Kalender-Ansicht">
+				{#snippet icon()}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+						/>
+					</svg>
+				{/snippet}
+				<SettingsCard>
+					<div class="p-4 space-y-3">
+						<div class="setting-item">
+							<div class="setting-info">
+								<span class="setting-label">Standard-Ansicht</span>
+								<span class="setting-description">Ansicht beim Öffnen des Kalenders</span>
+							</div>
+							<FilterDropdown
+								options={viewOptions}
+								value={settingsStore.defaultView}
+								onChange={(v) => handleViewChange(v as CalendarViewType)}
+								placeholder="Ansicht wählen"
+							/>
+						</div>
+
+						<div class="setting-item">
+							<div class="setting-info">
+								<span class="setting-label">Zeitformat</span>
+								<span class="setting-description">Anzeige der Uhrzeiten</span>
+							</div>
+							<div class="button-group">
+								<button
+									class="group-button"
+									class:active={settingsStore.timeFormat === '24h'}
+									onclick={() => handleTimeFormatChange('24h')}
+								>
+									24h (14:00)
+								</button>
+								<button
+									class="group-button"
+									class:active={settingsStore.timeFormat === '12h'}
+									onclick={() => handleTimeFormatChange('12h')}
+								>
+									12h (2:00 PM)
+								</button>
+							</div>
+						</div>
+
+						<div class="setting-item">
+							<label class="toggle-setting">
+								<input
+									type="checkbox"
+									checked={settingsStore.showOnlyWeekdays}
+									onchange={() =>
+										settingsStore.set('showOnlyWeekdays', !settingsStore.showOnlyWeekdays)}
+								/>
+								<div class="toggle-info">
+									<span class="setting-label">Nur Werktage anzeigen</span>
+									<span class="setting-description"
+										>Wochenenden in der Kalenderansicht ausblenden</span
+									>
+								</div>
+							</label>
+						</div>
+
+						<div class="setting-item">
+							<label class="toggle-setting">
+								<input
+									type="checkbox"
+									checked={settingsStore.showWeekNumbers}
+									onchange={() =>
+										settingsStore.set('showWeekNumbers', !settingsStore.showWeekNumbers)}
+								/>
+								<div class="toggle-info">
+									<span class="setting-label">Wochennummern anzeigen</span>
+									<span class="setting-description">Kalenderwoche (KW) in der Ansicht anzeigen</span
+									>
+								</div>
+							</label>
+						</div>
+
+						<div class="setting-item">
+							<label class="toggle-setting">
+								<input
+									type="checkbox"
+									checked={settingsStore.filterHoursEnabled}
+									onchange={() =>
+										settingsStore.set('filterHoursEnabled', !settingsStore.filterHoursEnabled)}
+								/>
+								<div class="toggle-info">
+									<span class="setting-label">Stunden filtern</span>
+									<span class="setting-description"
+										>Nur bestimmte Stunden in der Tages-/Wochenansicht anzeigen</span
+									>
+								</div>
+							</label>
+						</div>
+
+						{#if settingsStore.filterHoursEnabled}
+							<div class="setting-item hour-range-setting">
+								<div class="setting-info">
+									<span class="setting-label">Sichtbare Stunden</span>
+									<span class="setting-description"
+										>Zeitbereich der in der Kalenderansicht angezeigt wird</span
+									>
+								</div>
+								<div class="hour-range-inputs">
+									<div class="hour-input-group">
+										<span class="hour-label">Von</span>
+										<FilterDropdown
+											options={hourStartOptions}
+											value={String(settingsStore.dayStartHour)}
+											onChange={(v) => settingsStore.set('dayStartHour', Number(v))}
+											placeholder="Start"
+										/>
+									</div>
+									<span class="hour-separator">–</span>
+									<div class="hour-input-group">
+										<span class="hour-label">Bis</span>
+										<FilterDropdown
+											options={hourEndOptions}
+											value={String(settingsStore.dayEndHour)}
+											onChange={(v) => settingsStore.set('dayEndHour', Number(v))}
+											placeholder="Ende"
+										/>
+									</div>
+								</div>
+							</div>
+						{/if}
+
+						<div class="setting-item">
+							<div class="setting-info">
+								<span class="setting-label">Ganztägige Termine</span>
+								<span class="setting-description"
+									>Wie sollen ganztägige Termine angezeigt werden?</span
+								>
+							</div>
+							<div class="button-group">
+								<button
+									class="group-button"
+									class:active={settingsStore.allDayDisplayMode === 'header'}
+									onclick={() =>
+										settingsStore.set('allDayDisplayMode', 'header' as AllDayDisplayMode)}
+								>
+									In Kopfzeile
+								</button>
+								<button
+									class="group-button"
+									class:active={settingsStore.allDayDisplayMode === 'block'}
+									onclick={() =>
+										settingsStore.set('allDayDisplayMode', 'block' as AllDayDisplayMode)}
+								>
+									Als Tagesblock
+								</button>
+							</div>
+						</div>
+					</div>
+				</SettingsCard>
+			</SettingsSection>
+
+			<!-- Termin-Einstellungen -->
+			<SettingsSection title="Termine">
+				{#snippet icon()}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{/snippet}
+				<SettingsCard>
+					<div class="p-4 space-y-3">
+						<div class="setting-item">
+							<div class="setting-info">
+								<span class="setting-label">Standard-Dauer</span>
+								<span class="setting-description">Voreingestellte Dauer für neue Termine</span>
+							</div>
+							<FilterDropdown
+								options={durationDropdownOptions}
+								value={String(settingsStore.defaultEventDuration)}
+								onChange={(v) => handleEventDurationChange(Number(v))}
+								placeholder="Dauer wählen"
+							/>
+						</div>
+
+						<div class="setting-item">
+							<div class="setting-info">
+								<span class="setting-label">Standard-Erinnerung</span>
+								<span class="setting-description">Voreingestellte Erinnerung für neue Termine</span>
+							</div>
+							<FilterDropdown
+								options={reminderDropdownOptions}
+								value={String(settingsStore.defaultReminder)}
+								onChange={(v) => handleReminderChange(Number(v))}
+								placeholder="Erinnerung wählen"
+							/>
+						</div>
+					</div>
+				</SettingsCard>
+			</SettingsSection>
+
+			<!-- Geburtstage -->
+			<SettingsSection title="Geburtstage">
+				{#snippet icon()}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z"
+						/>
+					</svg>
+				{/snippet}
+				<SettingsCard>
+					<div class="p-4 space-y-3">
+						<div class="setting-item">
+							<label class="toggle-setting">
+								<input
+									type="checkbox"
+									checked={settingsStore.showBirthdays}
+									onchange={() => settingsStore.set('showBirthdays', !settingsStore.showBirthdays)}
+								/>
+								<div class="toggle-info">
+									<span class="setting-label">Geburtstage anzeigen</span>
+									<span class="setting-description"
+										>Geburtstage aus Kontakten im Kalender anzeigen</span
+									>
+								</div>
+							</label>
+						</div>
+
+						{#if settingsStore.showBirthdays}
+							<div class="setting-item birthday-age-setting">
+								<label class="toggle-setting">
+									<input
+										type="checkbox"
+										checked={settingsStore.showBirthdayAge}
+										onchange={() =>
+											settingsStore.set('showBirthdayAge', !settingsStore.showBirthdayAge)}
+									/>
+									<div class="toggle-info">
+										<span class="setting-label">Alter anzeigen</span>
+										<span class="setting-description"
+											>Das Alter der Person bei Geburtstagen anzeigen</span
+										>
+									</div>
+								</label>
+							</div>
+						{/if}
+					</div>
+				</SettingsCard>
+			</SettingsSection>
+
+			<!-- Konto -->
+			<SettingsSection title="Konto">
+				{#snippet icon()}
+					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+						/>
+					</svg>
+				{/snippet}
+				<SettingsCard>
+					<div class="p-4 space-y-3">
+						<div class="setting-item">
+							<div class="setting-info">
+								<span class="setting-label">E-Mail</span>
+								<span class="setting-value">{authStore.user?.email || '-'}</span>
+							</div>
+						</div>
+
+						<div class="setting-item">
+							<button
+								class="btn btn-ghost text-destructive"
+								onclick={() => {
+									authStore.signOut().then(() => goto('/login'));
+									onClose();
+								}}
+							>
+								Abmelden
+							</button>
+						</div>
+					</div>
+				</SettingsCard>
+			</SettingsSection>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.3);
+		z-index: 99;
+	}
+
+	:global(.dark) .modal-backdrop {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.settings-modal {
+		position: fixed;
+		bottom: calc(140px + env(safe-area-inset-bottom, 0px));
+		left: 50%;
+		transform: translateX(-50%);
+		width: calc(100% - 2rem);
+		max-width: 550px;
+		max-height: 70vh;
+		z-index: 100;
+		background: rgba(255, 255, 255, 0.98);
+		backdrop-filter: blur(20px);
+		-webkit-backdrop-filter: blur(20px);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 1rem;
+		box-shadow:
+			0 25px 50px -12px rgba(0, 0, 0, 0.25),
+			0 0 0 1px rgba(255, 255, 255, 0.1);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	:global(.dark) .settings-modal {
+		background: rgba(30, 30, 30, 0.98);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+	}
+
+	.settings-modal.sidebar-mode {
+		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1rem 0.75rem;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+		flex-shrink: 0;
+	}
+
+	:global(.dark) .modal-header {
+		border-bottom-color: rgba(255, 255, 255, 0.08);
+	}
+
+	.modal-title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: #1f2937;
+	}
+
+	:global(.dark) .modal-title {
+		color: #f3f4f6;
+	}
+
+	.header-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 0.5rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: #6b7280;
+		transition: all 0.15s ease;
+	}
+
+	.header-btn:hover {
+		background: rgba(0, 0, 0, 0.05);
+		color: #1f2937;
+	}
+
+	:global(.dark) .header-btn {
+		color: #9ca3af;
+	}
+
+	:global(.dark) .header-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	.modal-content {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.75rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	/* Settings section styles */
+	.setting-item {
+		padding: 0.75rem 0;
+		border-bottom: 1px solid hsl(var(--color-border) / 0.5);
+	}
+
+	.setting-item:last-child {
+		border-bottom: none;
+		padding-bottom: 0;
+	}
+
+	.setting-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.setting-label {
+		font-weight: 500;
+		font-size: 0.875rem;
+		color: hsl(var(--color-foreground));
+	}
+
+	.setting-description {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.setting-value {
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* Button group */
+	.button-group {
+		display: flex;
+		gap: 0;
+	}
+
+	.group-button {
+		padding: 0.375rem 0.75rem;
+		border: 2px solid hsl(var(--color-border));
+		background: transparent;
+		color: hsl(var(--color-foreground));
+		font-size: 0.8125rem;
+		cursor: pointer;
+		transition: all 150ms ease;
+	}
+
+	.group-button:first-child {
+		border-radius: var(--radius-md) 0 0 var(--radius-md);
+	}
+
+	.group-button:last-child {
+		border-radius: 0 var(--radius-md) var(--radius-md) 0;
+		border-left: none;
+	}
+
+	.group-button:hover {
+		background: hsl(var(--color-muted) / 0.5);
+	}
+
+	.group-button.active {
+		border-color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.1);
+		color: hsl(var(--color-primary));
+	}
+
+	/* Toggle setting */
+	.toggle-setting {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		cursor: pointer;
+	}
+
+	.toggle-setting input[type='checkbox'] {
+		width: 1rem;
+		height: 1rem;
+		margin-top: 0.125rem;
+		accent-color: hsl(var(--color-primary));
+		cursor: pointer;
+	}
+
+	.toggle-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.toggle-info .setting-label {
+		margin-bottom: 0;
+	}
+
+	.text-destructive {
+		color: hsl(var(--color-error));
+	}
+
+	/* Hour range settings */
+	.hour-range-setting {
+		padding-left: 1.5rem;
+		border-left: 2px solid hsl(var(--color-primary) / 0.3);
+		margin-left: 0.5rem;
+	}
+
+	.hour-range-inputs {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.hour-input-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.hour-label {
+		font-size: 0.6875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.hour-separator {
+		font-size: 1rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-top: 1rem;
+	}
+
+	/* Calendar management styles */
+	.calendars-toolbar {
+		display: flex;
+		justify-content: flex-end;
+		margin-bottom: 0.75rem;
+	}
+
+	.new-calendar-form {
+		margin-bottom: 0.75rem;
+		padding: 0.75rem;
+		background: hsl(var(--color-muted) / 0.3);
+		border-radius: var(--radius-md);
+	}
+
+	.calendar-form-row {
+		display: flex;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.calendar-form-row .input {
+		flex: 1;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: var(--radius-md);
+		background: hsl(var(--color-background));
+		font-size: 0.875rem;
+	}
+
+	.color-input {
+		width: 40px;
+		height: 36px;
+		padding: 2px;
+		border: 2px solid hsl(var(--color-border));
+		border-radius: var(--radius-md);
+		cursor: pointer;
+	}
+
+	.calendar-form-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.375rem;
+	}
+
+	.calendar-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.calendar-card {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 0.75rem;
+		background: hsl(var(--color-muted) / 0.2);
+		border-radius: var(--radius-md);
+	}
+
+	/* Edit form styles */
+	.calendar-edit-form {
+		padding: 1rem;
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: var(--radius-lg);
+		box-shadow: 0 2px 8px hsl(var(--color-foreground) / 0.08);
+	}
+
+	.edit-form-row {
+		display: flex;
+		gap: 0.75rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.edit-form-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.edit-form-group--name {
+		flex: 1;
+	}
+
+	.edit-form-group--color {
+		flex-shrink: 0;
+	}
+
+	.edit-label {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: hsl(var(--color-foreground));
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+	}
+
+	.edit-input {
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		color: hsl(var(--color-foreground));
+		background: hsl(var(--color-background));
+		border: 2px solid hsl(var(--color-border));
+		border-radius: var(--radius-md);
+		outline: none;
+		transition:
+			border-color 150ms ease,
+			box-shadow 150ms ease;
+	}
+
+	.edit-input:hover {
+		border-color: hsl(var(--color-muted-foreground) / 0.5);
+	}
+
+	.edit-input:focus {
+		border-color: hsl(var(--color-primary));
+		box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.15);
+	}
+
+	.edit-color-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+		background: hsl(var(--color-background));
+		border: 2px solid hsl(var(--color-border));
+		border-radius: var(--radius-md);
+		transition: border-color 150ms ease;
+	}
+
+	.edit-color-input {
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		background: transparent;
+	}
+
+	.edit-color-input::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	.edit-color-input::-webkit-color-swatch {
+		border: none;
+		border-radius: var(--radius-sm);
+	}
+
+	.edit-color-value {
+		font-size: 0.75rem;
+		font-family: monospace;
+		color: hsl(var(--color-muted-foreground));
+		text-transform: uppercase;
+	}
+
+	.edit-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		margin-bottom: 0.75rem;
+		background: hsl(var(--color-muted) / 0.3);
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		transition: background 150ms ease;
+		font-size: 0.8125rem;
+	}
+
+	.edit-checkbox:hover {
+		background: hsl(var(--color-muted) / 0.5);
+	}
+
+	.edit-checkbox input[type='checkbox'] {
+		width: 1rem;
+		height: 1rem;
+		accent-color: hsl(var(--color-primary));
+		cursor: pointer;
+	}
+
+	.edit-checkbox-text {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-foreground));
+	}
+
+	.edit-checkbox-hint {
+		color: hsl(var(--color-muted-foreground));
+		font-style: italic;
+		margin-left: 0.25rem;
+	}
+
+	.edit-form-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.375rem;
+		padding-top: 0.75rem;
+		border-top: 1px solid hsl(var(--color-border));
+	}
+
+	.calendar-info {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.color-dot {
+		width: 14px;
+		height: 14px;
+		border-radius: var(--radius-full);
+	}
+
+	.calendar-name {
+		font-weight: 500;
+		font-size: 0.875rem;
+	}
+
+	.badge {
+		font-size: 0.6875rem;
+		padding: 0.125rem 0.375rem;
+		background: hsl(var(--color-muted));
+		border-radius: var(--radius-sm);
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.badge-primary {
+		background: hsl(var(--color-primary) / 0.15);
+		color: hsl(var(--color-primary));
+		font-weight: 500;
+	}
+
+	.calendar-actions {
+		display: flex;
+		gap: 0.375rem;
+	}
+
+	.btn {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		transition: all 150ms ease;
+		border: none;
+	}
+
+	.btn-ghost {
+		background: transparent;
+		color: hsl(var(--color-foreground));
+	}
+
+	.btn-ghost:hover {
+		background: hsl(var(--color-muted) / 0.5);
+	}
+
+	.btn-primary {
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+	}
+
+	.btn-primary:hover {
+		background: hsl(var(--color-primary) / 0.9);
+	}
+
+	.btn-primary:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.btn-sm {
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: 1rem;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.875rem;
+	}
+
+	/* Birthday age setting (indented sub-setting) */
+	.birthday-age-setting {
+		padding-left: 1.5rem;
+		border-left: 2px solid hsl(var(--color-primary) / 0.3);
+		margin-left: 0.5rem;
+	}
+</style>
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index 930616492..575544714 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -65,6 +65,7 @@
 	import EventContextMenu from '$lib/components/event/EventContextMenu.svelte';
 	import ViewModePillContextMenu from '$lib/components/calendar/ViewModePillContextMenu.svelte';
 	import StatsOverlay from '$lib/components/calendar/StatsOverlay.svelte';
+	import SettingsModal from '$lib/components/settings/SettingsModal.svelte';
 	import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
 	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import type { CalendarViewType } from '@calendar/shared';
@@ -176,6 +177,9 @@
 	let helpModalOpen = $state(false);
 	let helpModalMode = $state<'shortcuts' | 'syntax'>('shortcuts');
 
+	// Settings modal state
+	let showSettingsModal = $state(false);
+
 	function handleShowShortcuts() {
 		helpModalMode = 'shortcuts';
 		helpModalOpen = true;
@@ -287,7 +291,12 @@
 			onClick: () => heatmapStore.toggle(),
 			active: heatmapStore.enabled,
 		},
-		{ href: '/settings', label: 'Einstellungen', icon: 'settings' },
+		{
+			href: '/',
+			label: 'Einstellungen',
+			icon: 'settings',
+			onClick: () => (showSettingsModal = true),
+		},
 		{ href: '/feedback', label: 'Feedback', icon: 'chat' },
 	]);
 
@@ -759,6 +768,13 @@
 <!-- Stats Overlay (shown when heatmap is enabled) -->
 <StatsOverlay />
 
+<!-- Settings Modal -->
+<SettingsModal
+	visible={showSettingsModal}
+	onClose={() => (showSettingsModal = false)}
+	{isSidebarMode}
+/>
+
 <style>
 	.layout-container {
 		display: flex;