feat(calendar): show settings as modal on homepage

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

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;