Merge pull request #19 from Memo-2023/till-dev

Till dev

apps/calendar/apps/backend/src/network/network.controller.ts

@@ -2,7 +2,7 @@ import { Controller, Get, UseGuards, Headers } from '@nestjs/common';
 import { JwtAuthGuard, CurrentUser, CurrentUserData } from '@manacore/shared-nestjs-auth';
 import { NetworkService } from './network.service';
 
-@Controller('api/v1/network')
+@Controller('network')
 @UseGuards(JwtAuthGuard)
 export class NetworkController {
 	constructor(private readonly networkService: NetworkService) {}

apps/calendar/apps/backend/src/network/network.service.ts

@@ -24,7 +24,7 @@ export interface NetworkNode {
 export interface NetworkLink {
 	source: string;
 	target: string;
-	type: 'tag';
+	type: 'tag' | 'calendar' | 'date' | 'location';
 	strength: number;
 	sharedTags: string[];
 }
@@ -114,14 +114,8 @@ export class NetworkService {
 			eventTagsMap.set(event.id, tags);
 		}
 
-		// 5. Filter events that have at least one tag
-		const eventsWithTagsList = eventsData.filter((e) => {
-			const tags = eventTagsMap.get(e.event.id) || [];
-			return tags.length > 0;
-		});
-
-		// 6. Build nodes
-		const nodes: NetworkNode[] = eventsWithTagsList.map(({ event }) => {
+		// 5. Build nodes from ALL events (not just those with tags)
+		const nodes: NetworkNode[] = eventsData.map(({ event }) => {
 			const tags = eventTagsMap.get(event.id) || [];
 			return {
 				id: event.id,
@@ -134,41 +128,88 @@ export class NetworkService {
 			};
 		});
 
-		// 7. Build links based on shared tags
+		// 6. Build links based on multiple criteria
 		const links: NetworkLink[] = [];
 		const connectionCounts = new Map<string, number>();
+		const linkSet = new Set<string>(); // Track unique links to avoid duplicates
 
-		for (let i = 0; i < nodes.length; i++) {
-			for (let j = i + 1; j < nodes.length; j++) {
+		for (let i = 0; i < eventsData.length; i++) {
+			for (let j = i + 1; j < eventsData.length; j++) {
+				const event1 = eventsData[i].event;
+				const event2 = eventsData[j].event;
 				const node1 = nodes[i];
 				const node2 = nodes[j];
+				const linkKey = `${event1.id}-${event2.id}`;
 
-				// Find shared tags
-				const sharedTags = node1.tags
-					.filter((t1) => node2.tags.some((t2) => t2.id === t1.id))
-					.map((t) => t.name);
+				// Skip if link already exists
+				if (linkSet.has(linkKey)) continue;
 
-				if (sharedTags.length > 0) {
-					// Calculate strength based on number of shared tags
-					const maxTags = Math.max(node1.tags.length, node2.tags.length);
-					const strength = Math.round((sharedTags.length / maxTags) * 100);
+				let linked = false;
+				let linkType: 'tag' | 'calendar' | 'date' | 'location' = 'tag';
+				let strength = 0;
+				const sharedTags: string[] = [];
 
+				// 6a. Check for shared tags (highest priority)
+				const tags1 = eventTagsMap.get(event1.id) || [];
+				const tags2 = eventTagsMap.get(event2.id) || [];
+				const commonTags = tags1.filter((t1) => tags2.some((t2) => t2.id === t1.id));
+
+				if (commonTags.length > 0) {
+					linked = true;
+					linkType = 'tag';
+					const maxTags = Math.max(tags1.length, tags2.length);
+					strength = Math.round((commonTags.length / maxTags) * 100);
+					sharedTags.push(...commonTags.map((t) => t.name));
+				}
+
+				// 6b. Check for same calendar (if not already linked)
+				if (!linked && event1.calendarId === event2.calendarId) {
+					linked = true;
+					linkType = 'calendar';
+					strength = 50;
+				}
+
+				// 6c. Check for same date (if not already linked)
+				if (!linked) {
+					const date1 = new Date(event1.startTime).toDateString();
+					const date2 = new Date(event2.startTime).toDateString();
+					if (date1 === date2) {
+						linked = true;
+						linkType = 'date';
+						strength = 40;
+					}
+				}
+
+				// 6d. Check for same location (if not already linked and both have location)
+				if (
+					!linked &&
+					event1.location &&
+					event2.location &&
+					event1.location.toLowerCase() === event2.location.toLowerCase()
+				) {
+					linked = true;
+					linkType = 'location';
+					strength = 60;
+				}
+
+				if (linked) {
 					links.push({
-						source: node1.id,
-						target: node2.id,
-						type: 'tag',
+						source: event1.id,
+						target: event2.id,
+						type: linkType,
 						strength,
 						sharedTags,
 					});
+					linkSet.add(linkKey);
 
 					// Update connection counts
-					connectionCounts.set(node1.id, (connectionCounts.get(node1.id) || 0) + 1);
-					connectionCounts.set(node2.id, (connectionCounts.get(node2.id) || 0) + 1);
+					connectionCounts.set(event1.id, (connectionCounts.get(event1.id) || 0) + 1);
+					connectionCounts.set(event2.id, (connectionCounts.get(event2.id) || 0) + 1);
 				}
 			}
 		}
 
-		// 8. Update connection counts in nodes
+		// 7. Update connection counts in nodes
 		for (const node of nodes) {
 			node.connectionCount = connectionCounts.get(node.id) || 0;
 		}

apps/calendar/apps/web/src/lib/api/network.ts

@@ -23,7 +23,7 @@ export interface NetworkNode {
 export interface NetworkLink {
 	source: string;
 	target: string;
-	type: 'tag';
+	type: 'tag' | 'calendar' | 'date' | 'location';
 	strength: number;
 	sharedTags: string[];
 }

apps/calendar/apps/web/src/lib/components/calendar/AgendaView.svelte

@@ -2,7 +2,9 @@
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { eventsStore } from '$lib/stores/events.svelte';
 	import { calendarsStore } from '$lib/stores/calendars.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
 	import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
+	import { filterByTags } from '$lib/utils/eventFiltering';
 	import EventContextMenu from '$lib/components/event/EventContextMenu.svelte';
 	import { format, parseISO, isToday, isTomorrow, startOfDay } from 'date-fns';
 	import { de } from 'date-fns/locale';
@@ -33,6 +35,9 @@
 
 		const groups: Map<string, CalendarEvent[]> = new Map();
 
+		// Get selected tag IDs for filtering
+		const selectedTagIds = settingsStore.selectedTagIds;
+
 		for (const event of currentEvents) {
 			// Skip events from hidden calendars
 			if (!visibleCalendarIds.has(event.calendarId)) continue;
@@ -50,17 +55,21 @@
 			groups.get(dateKey)!.push(event);
 		}
 
-		// Sort groups by date
+		// Sort groups by date and apply tag filtering
 		return Array.from(groups.entries())
 			.sort(([a], [b]) => a.localeCompare(b))
 			.map(([dateKey, events]) => ({
 				date: parseISO(dateKey),
-				events: events.sort((a, b) => {
-					const aStart = toDate(a.startTime);
-					const bStart = toDate(b.startTime);
-					return aStart.getTime() - bStart.getTime();
-				}),
-			}));
+				events: filterByTags(
+					events.sort((a, b) => {
+						const aStart = toDate(a.startTime);
+						const bStart = toDate(b.startTime);
+						return aStart.getTime() - bStart.getTime();
+					}),
+					selectedTagIds
+				),
+			}))
+			.filter((group) => group.events.length > 0); // Remove empty groups after tag filtering
 	});
 
 	function formatDateHeader(date: Date) {

apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import type { CalendarViewType } from '@calendar/shared';
 	import {
 		PillToolbarButton,
@@ -8,6 +9,7 @@
 		PillTimeRangeSelector,
 		PillViewSwitcher,
 	} from '@manacore/shared-ui';
+	import { Flame } from 'lucide-svelte';
 	import PillCalendarSelector from './PillCalendarSelector.svelte';
 
 	interface Props {
@@ -84,6 +86,15 @@
 		Mo-Fr
 	</PillToolbarButton>
 
+	<!-- Heatmap toggle -->
+	<PillToolbarButton
+		onclick={() => heatmapStore.toggle()}
+		active={heatmapStore.enabled}
+		title="Heatmap ein/aus - zeigt Event-Dichte"
+	>
+		<Flame size={16} />
+	</PillToolbarButton>
+
 	<!-- Hours filter with time range selector -->
 	<PillTimeRangeSelector
 		startHour={settingsStore.dayStartHour}

apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte

@@ -7,6 +7,7 @@
 	import { todosStore, type Task } from '$lib/stores/todos.svelte';
 	import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
 	import { birthdaysStore } from '$lib/stores/birthdays.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
 	import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
 	import { toDate } from '$lib/utils/eventDateHelpers';
@@ -39,6 +40,9 @@
 	// Use provided date or fall back to viewStore
 	let effectiveDate = $derived(date ?? viewStore.currentDate);
 
+	// Heatmap level for this day
+	let heatmapLevel = $derived(heatmapStore.enabled ? heatmapStore.getLevel(effectiveDate) : 0);
+
 	// Use shared constants
 	const HOUR_HEIGHT = HOUR_HEIGHT_PX;
 	const SNAP_MINUTES = SNAP_INTERVAL_MINUTES;
@@ -763,6 +767,11 @@
 			class="day-column"
 			class:today={isToday(effectiveDate)}
 			class:drop-target={isSidebarDropTarget}
+			class:heatmap-1={heatmapLevel === 1}
+			class:heatmap-2={heatmapLevel === 2}
+			class:heatmap-3={heatmapLevel === 3}
+			class:heatmap-4={heatmapLevel === 4}
+			class:heatmap-5={heatmapLevel === 5}
 			bind:this={dayColumnRef}
 			ondragover={handleSidebarDragOver}
 			ondragleave={handleSidebarDragLeave}
@@ -1018,6 +1027,47 @@
 		outline-offset: -2px;
 	}
 
+	/* Heatmap levels - subtle background tint */
+	.day-column.heatmap-1 {
+		background: hsl(var(--color-primary) / 0.08);
+	}
+	.day-column.heatmap-2 {
+		background: hsl(var(--color-primary) / 0.15);
+	}
+	.day-column.heatmap-3 {
+		background: hsl(var(--color-primary) / 0.22);
+	}
+	.day-column.heatmap-4 {
+		background: hsl(var(--color-primary) / 0.3);
+	}
+	.day-column.heatmap-5 {
+		background: hsl(var(--color-primary) / 0.4);
+	}
+
+	/* Override today background when heatmap is active */
+	.day-column.today.heatmap-1,
+	.day-column.today.heatmap-2,
+	.day-column.today.heatmap-3,
+	.day-column.today.heatmap-4,
+	.day-column.today.heatmap-5 {
+		background: hsl(var(--color-primary) / var(--heatmap-opacity, 0.1));
+	}
+	.day-column.today.heatmap-1 {
+		--heatmap-opacity: 0.12;
+	}
+	.day-column.today.heatmap-2 {
+		--heatmap-opacity: 0.2;
+	}
+	.day-column.today.heatmap-3 {
+		--heatmap-opacity: 0.28;
+	}
+	.day-column.today.heatmap-4 {
+		--heatmap-opacity: 0.36;
+	}
+	.day-column.today.heatmap-5 {
+		--heatmap-opacity: 0.45;
+	}
+
 	/* Time indicator */
 	.time-indicator {
 		position: absolute;

apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte

@@ -7,6 +7,7 @@
 	import { todosStore } from '$lib/stores/todos.svelte';
 	import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
 	import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import TodoDayCell from './TodoDayCell.svelte';
 	import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
 	import { useBirthdayPopover } from '$lib/composables';
@@ -31,7 +32,7 @@
 	} from 'date-fns';
 	import { de } from 'date-fns/locale';
 	import { _ } from 'svelte-i18n';
-	import { filterByVisibleCalendars } from '$lib/utils/eventFiltering';
+	import { filterByVisibleCalendars, filterByTags } from '$lib/utils/eventFiltering';
 
 	import type { CalendarEvent } from '@calendar/shared';
 
@@ -201,17 +202,20 @@
 	// Event Handlers
 	// ============================================================================
 	function getEventsForDay(day: Date): CalendarEvent[] {
-		return filterByVisibleCalendars(
-			eventsStore.getEventsForDay(day),
-			calendarsStore.visibleCalendars
-		).slice(0, 3); // Max 3 events shown
-	}
-
-	function getAllEventsForDay(day: Date): CalendarEvent[] {
-		return filterByVisibleCalendars(
+		let events = filterByVisibleCalendars(
 			eventsStore.getEventsForDay(day),
 			calendarsStore.visibleCalendars
 		);
+		events = filterByTags(events, settingsStore.selectedTagIds);
+		return events.slice(0, 3); // Max 3 events shown
+	}
+
+	function getAllEventsForDay(day: Date): CalendarEvent[] {
+		let events = filterByVisibleCalendars(
+			eventsStore.getEventsForDay(day),
+			calendarsStore.visibleCalendars
+		);
+		return filterByTags(events, settingsStore.selectedTagIds);
 	}
 
 	function handleDayClick(day: Date, e: MouseEvent) {
@@ -294,11 +298,17 @@
 			<div class="week-row">
 				{#each week as day}
 					{@const isDropTarget = isDragging && dragTargetDay && isSameDay(day, dragTargetDay)}
+					{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
 					<div
 						class="day-cell"
 						class:other-month={!isSameMonth(day, effectiveDate)}
 						class:today={isToday(day)}
 						class:drop-target={isDropTarget}
+						class:heatmap-1={heatmapLevel === 1}
+						class:heatmap-2={heatmapLevel === 2}
+						class:heatmap-3={heatmapLevel === 3}
+						class:heatmap-4={heatmapLevel === 4}
+						class:heatmap-5={heatmapLevel === 5}
 						use:bindDayCellRef={day}
 						onclick={(e) => handleDayClick(day, e)}
 						onkeydown={(e) => e.key === 'Enter' && handleDayClick(day, e as unknown as MouseEvent)}
@@ -308,9 +318,14 @@
 							values: { date: format(day, 'EEEE, d. MMMM', { locale: de }) },
 						})}
 					>
-						<span class="day-number" class:today={isToday(day)}>
-							{format(day, 'd')}
-						</span>
+						<div class="day-header">
+							<span class="day-number" class:today={isToday(day)}>
+								{format(day, 'd')}
+							</span>
+							{#if heatmapStore.enabled && heatmapLevel > 0}
+								<span class="heatmap-count">{heatmapStore.getDisplayValue(day)}</span>
+							{/if}
+						</div>
 
 						<!-- Todos for this day -->
 						{#if todosStore.serviceAvailable}
@@ -402,6 +417,8 @@
 	.month-view {
 		display: flex;
 		flex-direction: column;
+		height: 100%;
+		min-height: 0;
 	}
 
 	.weekday-headers {
@@ -427,13 +444,14 @@
 		flex: 1;
 		display: flex;
 		flex-direction: column;
+		min-height: 0;
 	}
 
 	.week-row {
-		flex: 1;
+		flex: 1 1 0;
 		display: grid;
 		grid-template-columns: repeat(var(--column-count, 7), 1fr);
-		min-height: 100px;
+		min-height: 0;
 	}
 
 	.day-cell {
@@ -447,6 +465,8 @@
 		display: flex;
 		flex-direction: column;
 		transition: background-color var(--transition-fast);
+		min-height: 0;
+		overflow: hidden;
 	}
 
 	.day-cell:first-child {
@@ -465,6 +485,13 @@
 		opacity: 0.5;
 	}
 
+	.day-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 0.25rem;
+	}
+
 	.day-number {
 		font-size: 0.875rem;
 		font-weight: 500;
@@ -474,7 +501,6 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: var(--radius-full);
-		margin-bottom: 0.25rem;
 	}
 
 	.day-number.today {
@@ -482,6 +508,48 @@
 		color: hsl(var(--color-primary-foreground));
 	}
 
+	.heatmap-count {
+		font-size: 0.65rem;
+		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
+		padding: 2px 6px;
+		background: hsl(var(--color-muted) / 0.5);
+		border-radius: var(--radius-sm);
+	}
+
+	/* Heatmap level colors */
+	.day-cell.heatmap-1 {
+		background-color: hsl(var(--color-primary) / 0.1);
+	}
+	.day-cell.heatmap-2 {
+		background-color: hsl(var(--color-primary) / 0.2);
+	}
+	.day-cell.heatmap-3 {
+		background-color: hsl(var(--color-primary) / 0.35);
+	}
+	.day-cell.heatmap-4 {
+		background-color: hsl(var(--color-primary) / 0.5);
+	}
+	.day-cell.heatmap-5 {
+		background-color: hsl(var(--color-primary) / 0.65);
+	}
+
+	/* Heatmap hover states - slightly lighter on hover */
+	.day-cell.heatmap-1:hover,
+	.day-cell.heatmap-2:hover,
+	.day-cell.heatmap-3:hover,
+	.day-cell.heatmap-4:hover,
+	.day-cell.heatmap-5:hover {
+		filter: brightness(1.05);
+	}
+
+	/* Heatmap count styling for higher levels (better contrast) */
+	.day-cell.heatmap-4 .heatmap-count,
+	.day-cell.heatmap-5 .heatmap-count {
+		background: hsl(var(--color-background) / 0.8);
+		color: hsl(var(--color-foreground));
+	}
+
 	.day-events {
 		flex: 1;
 		display: flex;

apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte

@@ -6,6 +6,7 @@
 	import { searchStore } from '$lib/stores/search.svelte';
 	import { todosStore, type Task } from '$lib/stores/todos.svelte';
 	import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import {
 		useVisibleHours,
 		useCurrentTimeIndicator,
@@ -155,6 +156,7 @@
 				filterHoursEnabled: settingsStore.filterHoursEnabled,
 				dayStartHour: settingsStore.dayStartHour,
 				dayEndHour: settingsStore.dayEndHour,
+				selectedTagIds: settingsStore.selectedTagIds,
 			}
 		);
 	}
@@ -174,7 +176,10 @@
 	function getAllDayEventsForDay(day: Date): CalendarEvent[] {
 		return getVisibleAllDayEvents(
 			eventsStore.getEventsForDay(day),
-			calendarsStore.visibleCalendars
+			calendarsStore.visibleCalendars,
+			{
+				selectedTagIds: settingsStore.selectedTagIds,
+			}
 		);
 	}
 
@@ -832,11 +837,23 @@
 		<div class="day-headers">
 			<div class="time-gutter"></div>
 			{#each days as day}
-				<div class="day-header" class:today={isToday(day)}>
+				{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
+				<div
+					class="day-header"
+					class:today={isToday(day)}
+					class:heatmap-1={heatmapLevel === 1}
+					class:heatmap-2={heatmapLevel === 2}
+					class:heatmap-3={heatmapLevel === 3}
+					class:heatmap-4={heatmapLevel === 4}
+					class:heatmap-5={heatmapLevel === 5}
+				>
 					<span class="day-name"
 						>{format(day, columnClass === 'very-compact' ? 'EEEEE' : 'EEE', { locale: de })}</span
 					>
 					<span class="day-number" class:today={isToday(day)}>{format(day, 'd')}</span>
+					{#if heatmapStore.enabled && heatmapLevel > 0 && columnClass !== 'ultra-compact'}
+						<span class="heatmap-badge">{heatmapStore.getDisplayValue(day)}</span>
+					{/if}
 				</div>
 			{/each}
 		</div>
@@ -1194,6 +1211,7 @@
 		padding: 0.5rem;
 		border-left: 1px solid hsl(var(--color-border));
 		min-width: 0;
+		transition: background-color 150ms ease;
 	}
 
 	.compact .day-header {
@@ -1204,6 +1222,40 @@
 		padding: 0.125rem;
 	}
 
+	/* Heatmap level colors for day headers */
+	.day-header.heatmap-1 {
+		background-color: hsl(var(--color-primary) / 0.1);
+	}
+	.day-header.heatmap-2 {
+		background-color: hsl(var(--color-primary) / 0.2);
+	}
+	.day-header.heatmap-3 {
+		background-color: hsl(var(--color-primary) / 0.35);
+	}
+	.day-header.heatmap-4 {
+		background-color: hsl(var(--color-primary) / 0.5);
+	}
+	.day-header.heatmap-5 {
+		background-color: hsl(var(--color-primary) / 0.65);
+	}
+
+	.heatmap-badge {
+		font-size: 0.5rem;
+		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
+		padding: 1px 4px;
+		background: hsl(var(--color-muted) / 0.5);
+		border-radius: var(--radius-sm);
+		margin-top: 0.125rem;
+	}
+
+	/* Better contrast for higher heatmap levels */
+	.day-header.heatmap-4 .heatmap-badge,
+	.day-header.heatmap-5 .heatmap-badge {
+		background: hsl(var(--color-background) / 0.8);
+		color: hsl(var(--color-foreground));
+	}
+
 	.day-name {
 		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));

apps/calendar/apps/web/src/lib/components/calendar/NetworkView.svelte

@@ -10,12 +10,10 @@
 	let graphContainer: HTMLDivElement;
 
 	function handleNodeClick(node: SimulationNode) {
-		// Select node (highlight connections)
 		networkStore.selectNode(node.id);
 	}
 
 	function handleNodeDoubleClick(node: SimulationNode) {
-		// Navigate to event detail page
 		goto(`/event/${node.id}`);
 	}
 
@@ -95,11 +93,7 @@
 	});
 </script>
 
-<svelte:head>
-	<title>Netzwerk - Kalender</title>
-</svelte:head>
-
-<div class="network-page">
+<div class="network-view">
 	<!-- Controls (floating) -->
 	<div class="controls-wrapper">
 		<NetworkControls
@@ -175,7 +169,7 @@
 				<button
 					class="close-btn"
 					onclick={() => networkStore.selectNode(null)}
-					aria-label="Schließen"
+					aria-label="Schlie\u00dfen"
 				>
 					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path
@@ -213,17 +207,21 @@
 </div>
 
 <style>
-	.network-page {
-		position: fixed;
-		inset: 0;
+	.network-view {
+		position: relative;
+		width: 100%;
+		height: 100%;
 		display: flex;
 		flex-direction: column;
+		background: hsl(var(--color-background));
+		border-radius: var(--radius-lg);
+		overflow: hidden;
 	}
 
 	/* Floating Controls */
 	.controls-wrapper {
 		position: absolute;
-		top: 5rem; /* Below the nav */
+		top: 1rem;
 		left: 1rem;
 		z-index: 10;
 		max-width: calc(100% - 2rem);
@@ -232,7 +230,7 @@
 	/* Error Banner */
 	.error-banner {
 		position: absolute;
-		top: 5rem;
+		top: 1rem;
 		left: 50%;
 		transform: translateX(-50%);
 		z-index: 10;
@@ -247,7 +245,7 @@
 		backdrop-filter: blur(8px);
 	}
 
-	/* Graph Container - Full screen */
+	/* Graph Container - Full size within parent */
 	.graph-container {
 		flex: 1;
 		width: 100%;
@@ -284,8 +282,8 @@
 
 	/* Info Panel */
 	.info-panel {
-		position: fixed;
-		top: 5rem;
+		position: absolute;
+		top: 1rem;
 		right: 1rem;
 		bottom: 1rem;
 		width: 320px;
@@ -392,7 +390,7 @@
 			right: 0;
 			bottom: 0;
 			height: auto;
-			max-height: 50vh;
+			max-height: 50%;
 			border-radius: 1rem 1rem 0 0;
 			animation: slideInUp 0.2s ease-out;
 		}
@@ -411,8 +409,7 @@
 
 	@media (max-width: 768px) {
 		.controls-wrapper {
-			top: 6rem;
-			width: calc(100% - 1rem);
+			width: calc(100% - 2rem);
 			max-width: none;
 		}
 	}

apps/calendar/apps/web/src/lib/components/calendar/StatsOverlay.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import { calendarStatisticsStore } from '$lib/stores/statistics.svelte';
+	import { viewStore } from '$lib/stores/view.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { format } from 'date-fns';
+	import { de } from 'date-fns/locale';
+	import { BarChart3, Calendar, Clock, TrendingUp, X, ChevronDown, ChevronUp } from 'lucide-svelte';
+	import { browser } from '$app/environment';
+
+	// Collapsed state (persisted in localStorage)
+	let collapsed = $state(false);
+
+	// Load collapsed state from localStorage
+	if (browser) {
+		const saved = localStorage.getItem('calendar-stats-overlay-collapsed');
+		if (saved === 'true') {
+			collapsed = true;
+		}
+	}
+
+	function toggleCollapsed() {
+		collapsed = !collapsed;
+		if (browser) {
+			localStorage.setItem('calendar-stats-overlay-collapsed', String(collapsed));
+		}
+	}
+
+	// Period label based on current view
+	let periodLabel = $derived.by(() => {
+		const range = viewStore.viewRange;
+		if (!range) return 'Statistiken';
+
+		const viewType = viewStore.viewType;
+
+		if (viewType === 'day') {
+			return format(range.start, 'd. MMMM', { locale: de });
+		} else if (viewType === 'week' || viewType === '5day' || viewType === '3day') {
+			return `KW ${format(range.start, 'w', { locale: de })}`;
+		} else if (viewType === 'month') {
+			return format(range.start, 'MMMM yyyy', { locale: de });
+		} else if (viewType === 'year') {
+			return format(range.start, 'yyyy', { locale: de });
+		} else {
+			// Multi-day views
+			return `${format(range.start, 'd. MMM', { locale: de })} - ${format(range.end, 'd. MMM', { locale: de })}`;
+		}
+	});
+
+	// Stats derived from store
+	let stats = $derived({
+		eventsToday: calendarStatisticsStore.eventsToday,
+		eventsThisWeek: calendarStatisticsStore.eventsThisWeek,
+		busyHours: calendarStatisticsStore.busyHoursThisWeek,
+		totalEvents: calendarStatisticsStore.totalEvents,
+		avgDuration: calendarStatisticsStore.averageEventDuration,
+	});
+</script>
+
+<!-- Only show when heatmap is enabled AND sidebar is collapsed (stats shown in sidebar otherwise) -->
+{#if heatmapStore.enabled && settingsStore.sidebarCollapsed}
+	<div class="stats-overlay" class:collapsed>
+		{#if collapsed}
+			<!-- Collapsed: Just a small FAB -->
+			<button class="stats-fab" onclick={toggleCollapsed} title="Statistiken anzeigen">
+				<BarChart3 size={18} />
+			</button>
+		{:else}
+			<!-- Expanded: Full panel -->
+			<div class="stats-panel">
+				<header class="panel-header">
+					<div class="header-title">
+						<BarChart3 size={16} />
+						<span>{periodLabel}</span>
+					</div>
+					<button class="collapse-btn" onclick={toggleCollapsed} title="Minimieren">
+						<ChevronUp size={16} />
+					</button>
+				</header>
+
+				<div class="stats-content">
+					<div class="stat-row">
+						<Calendar size={14} />
+						<span class="stat-label">Heute</span>
+						<span class="stat-value">{stats.eventsToday}</span>
+					</div>
+
+					<div class="stat-row">
+						<TrendingUp size={14} />
+						<span class="stat-label">Diese Woche</span>
+						<span class="stat-value">{stats.eventsThisWeek}</span>
+					</div>
+
+					<div class="stat-row">
+						<Clock size={14} />
+						<span class="stat-label">Stunden/Woche</span>
+						<span class="stat-value">{stats.busyHours}h</span>
+					</div>
+
+					{#if stats.avgDuration > 0}
+						<div class="stat-row muted">
+							<span class="stat-label">Ø Dauer</span>
+							<span class="stat-value">{stats.avgDuration}min</span>
+						</div>
+					{/if}
+				</div>
+
+				<div class="panel-footer">
+					<span class="total-label">{stats.totalEvents} Events geladen</span>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.stats-overlay {
+		position: fixed;
+		top: 1rem;
+		right: 1rem;
+		z-index: 50;
+		pointer-events: auto;
+	}
+
+	/* Move down when in floating mode (DateStrip visible) */
+	@media (min-width: 768px) {
+		.stats-overlay {
+			top: 1rem;
+			right: 1rem;
+		}
+	}
+
+	.stats-fab {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		border-radius: var(--radius-full);
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		color: hsl(var(--color-foreground));
+		transition: all 150ms ease;
+	}
+
+	.stats-fab:hover {
+		background: hsl(var(--color-muted));
+		transform: scale(1.05);
+	}
+
+	.stats-panel {
+		background: hsl(var(--color-surface));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: var(--radius-lg);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		min-width: 180px;
+		overflow: hidden;
+	}
+
+	.panel-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.625rem 0.75rem;
+		border-bottom: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-muted) / 0.3);
+	}
+
+	.header-title {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: hsl(var(--color-foreground));
+	}
+
+	.collapse-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-muted-foreground));
+		cursor: pointer;
+		border-radius: var(--radius-sm);
+		transition: all 150ms ease;
+	}
+
+	.collapse-btn:hover {
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
+	}
+
+	.stats-content {
+		padding: 0.75rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.stat-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		color: hsl(var(--color-foreground));
+	}
+
+	.stat-row.muted {
+		color: hsl(var(--color-muted-foreground));
+		padding-top: 0.25rem;
+		border-top: 1px solid hsl(var(--color-border) / 0.5);
+	}
+
+	.stat-row :global(svg) {
+		color: hsl(var(--color-muted-foreground));
+		flex-shrink: 0;
+	}
+
+	.stat-label {
+		flex: 1;
+	}
+
+	.stat-value {
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.panel-footer {
+		padding: 0.5rem 0.75rem;
+		border-top: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-muted) / 0.2);
+	}
+
+	.total-label {
+		font-size: 0.625rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* Mobile: Position at bottom right, above PillNav */
+	@media (max-width: 640px) {
+		.stats-overlay {
+			top: auto;
+			bottom: calc(160px + env(safe-area-inset-bottom));
+			right: 1rem;
+		}
+
+		.stats-panel {
+			min-width: 160px;
+		}
+	}
+</style>

apps/calendar/apps/web/src/lib/components/calendar/StatsSidebarSection.svelte

@@ -0,0 +1,434 @@
+<script lang="ts">
+	import { calendarStatisticsStore } from '$lib/stores/statistics.svelte';
+	import { eventsStore } from '$lib/stores/events.svelte';
+	import { calendarsStore } from '$lib/stores/calendars.svelte';
+	import { viewStore } from '$lib/stores/view.svelte';
+	import { format } from 'date-fns';
+	import { de } from 'date-fns/locale';
+	import {
+		CalendarDays,
+		Calendar,
+		Clock,
+		CalendarCheck,
+		Hourglass,
+		TrendingUp,
+		BarChart3,
+		Repeat,
+		Sun,
+	} from 'lucide-svelte';
+
+	// Update statistics when events/calendars change
+	$effect(() => {
+		calendarStatisticsStore.setEvents(eventsStore.events);
+	});
+
+	$effect(() => {
+		calendarStatisticsStore.setCalendars(calendarsStore.calendars);
+	});
+
+	// Period label based on current view
+	let periodLabel = $derived.by(() => {
+		const range = viewStore.viewRange;
+		if (!range) return 'Statistiken';
+
+		const viewType = viewStore.viewType;
+
+		if (viewType === 'day') {
+			return format(range.start, 'd. MMMM', { locale: de });
+		} else if (viewType === 'week' || viewType === '5day' || viewType === '3day') {
+			return `KW ${format(range.start, 'w', { locale: de })}`;
+		} else if (viewType === 'month') {
+			return format(range.start, 'MMMM yyyy', { locale: de });
+		} else if (viewType === 'year') {
+			return format(range.start, 'yyyy', { locale: de });
+		} else {
+			return `${format(range.start, 'd. MMM', { locale: de })} - ${format(range.end, 'd. MMM', { locale: de })}`;
+		}
+	});
+
+	// Stats derived from store
+	let stats = $derived({
+		eventsToday: calendarStatisticsStore.eventsToday,
+		eventsThisWeek: calendarStatisticsStore.eventsThisWeek,
+		upcomingEvents: calendarStatisticsStore.upcomingEvents,
+		busyHours: calendarStatisticsStore.busyHoursThisWeek,
+		totalEvents: calendarStatisticsStore.totalEvents,
+		avgDuration: calendarStatisticsStore.averageEventDuration,
+		totalCalendars: calendarStatisticsStore.totalCalendars,
+		recurringEvents: calendarStatisticsStore.recurringEventsCount,
+		allDayRatio: calendarStatisticsStore.allDayRatio,
+		calendarActivity: calendarStatisticsStore.calendarActivity,
+		weeklyTrend: calendarStatisticsStore.weeklyTrend,
+	});
+
+	// Get the last 7 days of trend data for mini chart
+	let miniTrend = $derived(stats.weeklyTrend.slice(-7));
+	let maxTrendValue = $derived(Math.max(...miniTrend.map((d) => d.count), 1));
+</script>
+
+<div class="stats-sidebar">
+	<header class="sidebar-header">
+		<div class="header-content">
+			<BarChart3 size={18} />
+			<span class="header-title">Statistiken</span>
+		</div>
+		<span class="period-label">{periodLabel}</span>
+	</header>
+
+	<!-- Quick Stats Grid -->
+	<section class="stats-grid">
+		<div class="stat-card primary">
+			<div class="stat-icon">
+				<CalendarDays size={16} />
+			</div>
+			<div class="stat-content">
+				<span class="stat-value">{stats.eventsToday}</span>
+				<span class="stat-label">Heute</span>
+			</div>
+		</div>
+
+		<div class="stat-card">
+			<div class="stat-icon">
+				<Calendar size={16} />
+			</div>
+			<div class="stat-content">
+				<span class="stat-value">{stats.eventsThisWeek}</span>
+				<span class="stat-label">Diese Woche</span>
+			</div>
+		</div>
+
+		<div class="stat-card">
+			<div class="stat-icon">
+				<CalendarCheck size={16} />
+			</div>
+			<div class="stat-content">
+				<span class="stat-value">{stats.upcomingEvents}</span>
+				<span class="stat-label">Anstehend</span>
+			</div>
+		</div>
+
+		<div class="stat-card">
+			<div class="stat-icon">
+				<Clock size={16} />
+			</div>
+			<div class="stat-content">
+				<span class="stat-value">{stats.busyHours}h</span>
+				<span class="stat-label">Stunden/Woche</span>
+			</div>
+		</div>
+	</section>
+
+	<!-- Mini Weekly Trend -->
+	<section class="trend-section">
+		<h3 class="section-title">
+			<TrendingUp size={14} />
+			Letzte 7 Tage
+		</h3>
+		<div class="mini-trend">
+			{#each miniTrend as day}
+				<div class="trend-bar-container" title="{day.label || ''}: {day.count} Events">
+					<div
+						class="trend-bar"
+						style="height: {(day.count / maxTrendValue) * 100}%"
+						class:has-events={day.count > 0}
+					></div>
+					<span class="trend-label">{day.label?.charAt(0) || ''}</span>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<!-- Calendar Activity -->
+	{#if stats.calendarActivity.length > 0}
+		<section class="activity-section">
+			<h3 class="section-title">
+				<Calendar size={14} />
+				Kalender-Aktivität
+			</h3>
+			<div class="calendar-list">
+				{#each stats.calendarActivity.slice(0, 5) as cal}
+					<div class="calendar-item">
+						<div class="calendar-color" style="background-color: {cal.color}"></div>
+						<span class="calendar-name">{cal.name}</span>
+						<span class="calendar-count">{cal.total}</span>
+					</div>
+				{/each}
+			</div>
+		</section>
+	{/if}
+
+	<!-- Additional Stats -->
+	<section class="additional-stats">
+		<div class="additional-stat">
+			<Hourglass size={12} />
+			<span>Ø {stats.avgDuration} Min</span>
+		</div>
+		<div class="additional-stat">
+			<Repeat size={12} />
+			<span>{stats.recurringEvents} wiederkehrend</span>
+		</div>
+		<div class="additional-stat">
+			<Sun size={12} />
+			<span>{stats.allDayRatio.allDay} ganztägig</span>
+		</div>
+	</section>
+
+	<!-- Footer -->
+	<footer class="sidebar-footer">
+		<span>{stats.totalEvents} Events geladen</span>
+	</footer>
+</div>
+
+<style>
+	.stats-sidebar {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: hsl(var(--color-surface));
+		border-radius: var(--radius-lg);
+		border: 1px solid hsl(var(--color-border));
+		overflow: hidden;
+	}
+
+	.sidebar-header {
+		padding: 0.875rem 1rem;
+		border-bottom: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-muted) / 0.3);
+	}
+
+	.header-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: hsl(var(--color-foreground));
+	}
+
+	.header-title {
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+
+	.period-label {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-top: 0.25rem;
+		display: block;
+	}
+
+	/* Stats Grid */
+	.stats-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 0.5rem;
+		padding: 0.75rem;
+	}
+
+	.stat-card {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.625rem;
+		background: hsl(var(--color-muted) / 0.3);
+		border-radius: var(--radius-md);
+		border: 1px solid hsl(var(--color-border) / 0.5);
+	}
+
+	.stat-card.primary {
+		background: hsl(var(--color-primary) / 0.1);
+		border-color: hsl(var(--color-primary) / 0.2);
+	}
+
+	.stat-card.primary .stat-icon {
+		color: hsl(var(--color-primary));
+	}
+
+	.stat-card.primary .stat-value {
+		color: hsl(var(--color-primary));
+	}
+
+	.stat-icon {
+		color: hsl(var(--color-muted-foreground));
+		flex-shrink: 0;
+	}
+
+	.stat-content {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	.stat-value {
+		font-size: 1rem;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+		color: hsl(var(--color-foreground));
+		line-height: 1.2;
+	}
+
+	.stat-label {
+		font-size: 0.625rem;
+		color: hsl(var(--color-muted-foreground));
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+	}
+
+	/* Sections */
+	.section-title {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		margin-bottom: 0.5rem;
+	}
+
+	/* Trend Section */
+	.trend-section {
+		padding: 0.75rem;
+		border-top: 1px solid hsl(var(--color-border) / 0.5);
+	}
+
+	.mini-trend {
+		display: flex;
+		align-items: flex-end;
+		gap: 0.375rem;
+		height: 48px;
+	}
+
+	.trend-bar-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 100%;
+	}
+
+	.trend-bar {
+		width: 100%;
+		min-height: 2px;
+		background: hsl(var(--color-muted));
+		border-radius: 2px 2px 0 0;
+		transition: height 200ms ease;
+	}
+
+	.trend-bar.has-events {
+		background: hsl(var(--color-primary));
+	}
+
+	.trend-label {
+		font-size: 0.5625rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-top: 0.25rem;
+	}
+
+	/* Activity Section */
+	.activity-section {
+		padding: 0.75rem;
+		border-top: 1px solid hsl(var(--color-border) / 0.5);
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
+	.calendar-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.calendar-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0;
+	}
+
+	.calendar-color {
+		width: 10px;
+		height: 10px;
+		border-radius: var(--radius-full);
+		flex-shrink: 0;
+	}
+
+	.calendar-name {
+		flex: 1;
+		font-size: 0.75rem;
+		color: hsl(var(--color-foreground));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.calendar-count {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Additional Stats */
+	.additional-stats {
+		padding: 0.5rem 0.75rem;
+		border-top: 1px solid hsl(var(--color-border) / 0.5);
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem 0.75rem;
+	}
+
+	.additional-stat {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.6875rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	/* Footer */
+	.sidebar-footer {
+		padding: 0.5rem 0.75rem;
+		border-top: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-muted) / 0.2);
+		font-size: 0.625rem;
+		color: hsl(var(--color-muted-foreground));
+		text-align: center;
+	}
+
+	/* Mobile: Horizontal layout */
+	@media (max-width: 768px) {
+		.stats-sidebar {
+			border-radius: 0;
+			border: none;
+			border-top: 1px solid hsl(var(--color-border));
+		}
+
+		.stats-grid {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		.stat-card {
+			flex-direction: column;
+			text-align: center;
+			padding: 0.5rem;
+		}
+
+		.stat-content {
+			align-items: center;
+		}
+
+		.stat-value {
+			font-size: 0.875rem;
+		}
+
+		.trend-section,
+		.activity-section {
+			display: none;
+		}
+
+		.additional-stats {
+			justify-content: center;
+		}
+	}
+</style>

apps/calendar/apps/web/src/lib/components/calendar/TagStrip.svelte

@@ -4,7 +4,7 @@
 	import { eventTagGroupsStore } from '$lib/stores/event-tag-groups.svelte';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { DotsThree, Plus } from '@manacore/shared-icons';
+	import { DotsThree, Plus, X } from '@manacore/shared-icons';
 	import TagStripModal from './TagStripModal.svelte';
 
 	interface Props {
@@ -16,10 +16,16 @@
 	let showModal = $state(false);
 
 	function handleTagClick(tagId: string) {
-		// Navigate to tags page with the tag selected for editing
-		goto(`/tags?edit=${tagId}`);
+		// Toggle tag selection for filtering calendar view
+		settingsStore.toggleTagSelection(tagId);
 	}
 
+	function isTagSelected(tagId: string): boolean {
+		return settingsStore.isTagSelected(tagId);
+	}
+
+	const hasSelectedTags = $derived(settingsStore.hasSelectedTags);
+
 	function handleOpenModal() {
 		showModal = true;
 	}
@@ -58,10 +64,22 @@
 
 <div class="tag-strip-wrapper" class:sidebar-mode={isSidebarMode}>
 	<div class="tag-strip-container">
+		<!-- Clear Filter Button (always rendered to prevent layout shift) -->
+		<button
+			class="clear-filter-pill glass-tag"
+			class:hidden={!hasSelectedTags}
+			onclick={() => settingsStore.clearTagSelection()}
+			title="Filter löschen"
+			disabled={!hasSelectedTags}
+		>
+			<X size={16} weight="bold" />
+			<span class="tag-name">Filter</span>
+		</button>
+
 		<!-- More Pill (opens modal) -->
 		<button class="more-pill glass-tag" onclick={handleOpenModal} title="Alle Tags anzeigen">
 			<DotsThree size={18} weight="bold" />
-			<span class="tag-name">Mehr</span>
+			<span class="tag-name">Alle Tags</span>
 		</button>
 
 		{#if eventTagsStore.loading}
@@ -75,6 +93,7 @@
 			{#each sortedTags as tag (tag.id)}
 				<button
 					class="tag-pill glass-tag"
+					class:selected={isTagSelected(tag.id)}
 					onclick={() => handleTagClick(tag.id)}
 					title={tag.name}
 					style="--tag-color: {tag.color || '#3b82f6'}"
@@ -91,6 +110,7 @@
 				title="Neuer Tag"
 			>
 				<Plus size={16} weight="bold" />
+				<span class="tag-name">Neuer Tag</span>
 			</button>
 		{/if}
 	</div>
@@ -141,7 +161,8 @@
 
 	.tag-pill,
 	.more-pill,
-	.create-pill {
+	.create-pill,
+	.clear-filter-pill {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
@@ -150,32 +171,87 @@
 		transition: all 0.15s ease;
 	}
 
-	/* More pill with muted style */
-	.more-pill {
-		color: #6b7280;
+	/* Selected tag state */
+	.tag-pill.selected {
+		background: var(--tag-color) !important;
+		border-color: var(--tag-color) !important;
 	}
 
-	.more-pill .tag-name {
-		color: #6b7280;
+	.tag-pill.selected .tag-dot {
+		background-color: white;
+	}
+
+	.tag-pill.selected .tag-name {
+		color: white;
+	}
+
+	/* Clear filter pill */
+	.clear-filter-pill {
+		color: #ef4444;
+		background: rgba(239, 68, 68, 0.1) !important;
+		border-color: rgba(239, 68, 68, 0.3) !important;
+	}
+
+	.clear-filter-pill .tag-name {
+		color: #ef4444;
 		font-weight: 600;
 	}
 
+	:global(.dark) .clear-filter-pill {
+		color: #f87171;
+		background: rgba(239, 68, 68, 0.15) !important;
+		border-color: rgba(239, 68, 68, 0.3) !important;
+	}
+
+	:global(.dark) .clear-filter-pill .tag-name {
+		color: #f87171;
+	}
+
+	.clear-filter-pill:hover:not(.hidden) {
+		background: rgba(239, 68, 68, 0.2) !important;
+		border-color: rgba(239, 68, 68, 0.5) !important;
+	}
+
+	/* Hidden state for clear filter pill (prevents layout shift) */
+	.clear-filter-pill.hidden {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	/* More pill with neutral style */
+	.more-pill {
+		color: #374151;
+	}
+
+	.more-pill .tag-name {
+		color: #374151;
+		font-weight: 500;
+	}
+
 	:global(.dark) .more-pill {
-		color: #9ca3af;
+		color: #f3f4f6;
 	}
 
 	:global(.dark) .more-pill .tag-name {
-		color: #9ca3af;
+		color: #f3f4f6;
 	}
 
-	/* Create pill with primary accent */
+	/* Create pill with neutral style */
 	.create-pill {
-		color: #3b82f6;
-		padding: 0.5rem !important;
+		color: #374151;
+	}
+
+	.create-pill .tag-name {
+		color: #374151;
+		font-weight: 500;
 	}
 
 	:global(.dark) .create-pill {
-		color: #60a5fa;
+		color: #f3f4f6;
+	}
+
+	:global(.dark) .create-pill .tag-name {
+		color: #f3f4f6;
 	}
 
 	/* Glass tag styling - same as PillNavigation pills */

apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte

@@ -7,6 +7,7 @@
 	import { todosStore, type Task } from '$lib/stores/todos.svelte';
 	import { birthdaysStore, type BirthdayEvent } from '$lib/stores/birthdays.svelte';
 	import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import BirthdayPopover from '$lib/components/birthday/BirthdayPopover.svelte';
 	import { useVisibleHours, useCurrentTimeIndicator, useBirthdayPopover } from '$lib/composables';
 	import { toDate } from '$lib/utils/eventDateHelpers';
@@ -886,9 +887,21 @@
 		<div class="day-headers">
 			<div class="time-gutter"></div>
 			{#each days as day}
-				<div class="day-header" class:today={isToday(day)}>
+				{@const heatmapLevel = heatmapStore.enabled ? heatmapStore.getLevel(day) : 0}
+				<div
+					class="day-header"
+					class:today={isToday(day)}
+					class:heatmap-1={heatmapLevel === 1}
+					class:heatmap-2={heatmapLevel === 2}
+					class:heatmap-3={heatmapLevel === 3}
+					class:heatmap-4={heatmapLevel === 4}
+					class:heatmap-5={heatmapLevel === 5}
+				>
 					<span class="day-name">{format(day, 'EEE', { locale: currentDateLocale })}</span>
 					<span class="day-number" class:today={isToday(day)}>{format(day, 'd')}</span>
+					{#if heatmapStore.enabled && heatmapLevel > 0}
+						<span class="heatmap-badge">{heatmapStore.getDisplayValue(day)}</span>
+					{/if}
 				</div>
 			{/each}
 		</div>
@@ -1240,6 +1253,41 @@
 		align-items: center;
 		padding: 0.5rem;
 		border-left: 1px solid hsl(var(--color-border));
+		transition: background-color 150ms ease;
+	}
+
+	/* Heatmap level colors for day headers */
+	.day-header.heatmap-1 {
+		background-color: hsl(var(--color-primary) / 0.1);
+	}
+	.day-header.heatmap-2 {
+		background-color: hsl(var(--color-primary) / 0.2);
+	}
+	.day-header.heatmap-3 {
+		background-color: hsl(var(--color-primary) / 0.35);
+	}
+	.day-header.heatmap-4 {
+		background-color: hsl(var(--color-primary) / 0.5);
+	}
+	.day-header.heatmap-5 {
+		background-color: hsl(var(--color-primary) / 0.65);
+	}
+
+	.heatmap-badge {
+		font-size: 0.625rem;
+		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
+		padding: 1px 6px;
+		background: hsl(var(--color-muted) / 0.5);
+		border-radius: var(--radius-sm);
+		margin-top: 0.25rem;
+	}
+
+	/* Better contrast for higher heatmap levels */
+	.day-header.heatmap-4 .heatmap-badge,
+	.day-header.heatmap-5 .heatmap-badge {
+		background: hsl(var(--color-background) / 0.8);
+		color: hsl(var(--color-foreground));
 	}
 
 	.day-name {

apps/calendar/apps/web/src/lib/components/calendar/YearView.svelte

@@ -2,6 +2,7 @@
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { eventsStore } from '$lib/stores/events.svelte';
 	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { heatmapStore, type HeatmapLevel } from '$lib/stores/heatmap.svelte';
 	import {
 		format,
 		startOfMonth,
@@ -16,6 +17,7 @@
 	} from 'date-fns';
 	import { de } from 'date-fns/locale';
 	import { toDate } from '$lib/utils/eventDateHelpers';
+	import { filterByTags } from '$lib/utils/eventFiltering';
 	import type { CalendarViewType, CalendarEvent } from '@calendar/shared';
 
 	interface Props {
@@ -60,7 +62,10 @@
 	// Precompute event counts for performance
 	let eventCountsByDay = $derived.by(() => {
 		const counts = new Map<string, number>();
-		const events = eventsStore.events ?? [];
+		let events = eventsStore.events ?? [];
+
+		// Apply tag filter if tags are selected
+		events = filterByTags(events, settingsStore.selectedTagIds);
 
 		for (const event of events) {
 			const start = toDate(event.startTime);
@@ -90,6 +95,12 @@
 		return eventCountsByDay.get(key) || 0;
 	}
 
+	// Get heatmap level for a day (when heatmap is enabled)
+	function getHeatmapLevel(day: Date): HeatmapLevel {
+		if (!heatmapStore.enabled) return 0;
+		return heatmapStore.getLevel(day);
+	}
+
 	// Event handlers
 	function handleDayClick(day: Date, e: MouseEvent) {
 		if (onQuickCreate) {
@@ -172,12 +183,18 @@
 			<div class="days-grid" role="grid" aria-label={format(month, 'MMMM', { locale: de })}>
 				{#each getMonthDays(month) as day}
 					{@const eventCount = getEventCount(day)}
+					{@const heatmapLevel = getHeatmapLevel(day)}
 					<button
 						class="day"
 						class:other-month={!isSameMonth(day, month)}
 						class:today={isToday(day)}
-						class:has-events={eventCount > 0}
-						class:has-many-events={eventCount > 3}
+						class:has-events={eventCount > 0 && !heatmapStore.enabled}
+						class:has-many-events={eventCount > 3 && !heatmapStore.enabled}
+						class:heatmap-1={heatmapLevel === 1}
+						class:heatmap-2={heatmapLevel === 2}
+						class:heatmap-3={heatmapLevel === 3}
+						class:heatmap-4={heatmapLevel === 4}
+						class:heatmap-5={heatmapLevel === 5}
 						role="gridcell"
 						tabindex="0"
 						aria-label="{format(day, 'd. MMMM', { locale: de })}{eventCount > 0
@@ -326,6 +343,61 @@
 		border-radius: 2px;
 	}
 
+	/* Heatmap levels - GitHub contribution graph style */
+	.day.heatmap-1 {
+		background: hsl(var(--color-primary) / 0.15);
+	}
+	.day.heatmap-2 {
+		background: hsl(var(--color-primary) / 0.3);
+	}
+	.day.heatmap-3 {
+		background: hsl(var(--color-primary) / 0.5);
+	}
+	.day.heatmap-4 {
+		background: hsl(var(--color-primary) / 0.7);
+		color: hsl(var(--color-primary-foreground));
+	}
+	.day.heatmap-5 {
+		background: hsl(var(--color-primary) / 0.9);
+		color: hsl(var(--color-primary-foreground));
+	}
+
+	/* Heatmap hover states */
+	.day.heatmap-1:hover {
+		background: hsl(var(--color-primary) / 0.25);
+	}
+	.day.heatmap-2:hover {
+		background: hsl(var(--color-primary) / 0.4);
+	}
+	.day.heatmap-3:hover {
+		background: hsl(var(--color-primary) / 0.6);
+	}
+	.day.heatmap-4:hover {
+		background: hsl(var(--color-primary) / 0.8);
+	}
+	.day.heatmap-5:hover {
+		background: hsl(var(--color-primary) / 0.95);
+	}
+
+	/* Today with heatmap - add ring to distinguish */
+	.day.today.heatmap-1,
+	.day.today.heatmap-2,
+	.day.today.heatmap-3,
+	.day.today.heatmap-4,
+	.day.today.heatmap-5 {
+		outline: 2px solid hsl(var(--color-primary));
+		outline-offset: 1px;
+	}
+
+	/* Other month days with heatmap - more muted */
+	.day.other-month.heatmap-1,
+	.day.other-month.heatmap-2,
+	.day.other-month.heatmap-3,
+	.day.other-month.heatmap-4,
+	.day.other-month.heatmap-5 {
+		opacity: 0.5;
+	}
+
 	/* Context Menu */
 	.context-menu {
 		position: fixed;

apps/calendar/apps/web/src/lib/stores/heatmap.svelte.ts

@@ -0,0 +1,190 @@
+/**
+ * Heatmap Store - Manages heatmap visualization state for calendar views
+ */
+
+import { eventsStore } from './events.svelte';
+import { viewStore } from './view.svelte';
+import { format, eachDayOfInterval, differenceInMinutes } from 'date-fns';
+import { toDate } from '$lib/utils/eventDateHelpers';
+import { browser } from '$app/environment';
+
+// Heatmap metric type
+export type HeatmapMetric = 'events' | 'hours';
+
+// Heatmap level (0-5)
+export type HeatmapLevel = 0 | 1 | 2 | 3 | 4 | 5;
+
+// State
+let enabled = $state(false);
+let metric = $state<HeatmapMetric>('events');
+
+// Load from localStorage
+if (browser) {
+	const savedEnabled = localStorage.getItem('calendar-heatmap-enabled');
+	if (savedEnabled === 'true') {
+		enabled = true;
+	}
+	const savedMetric = localStorage.getItem('calendar-heatmap-metric');
+	if (savedMetric === 'events' || savedMetric === 'hours') {
+		metric = savedMetric;
+	}
+}
+
+// Daily counts cache - computed based on events and view range
+let dailyEventCounts = $derived.by(() => {
+	const counts = new Map<string, number>();
+	const range = viewStore.viewRange;
+
+	if (!range) return counts;
+
+	// Get all days in the current view range (plus some buffer for carousel)
+	try {
+		const days = eachDayOfInterval({ start: range.start, end: range.end });
+
+		for (const day of days) {
+			const dayKey = format(day, 'yyyy-MM-dd');
+			const dayEvents = eventsStore.getEventsForDay(day, false); // Don't include draft
+			counts.set(dayKey, dayEvents.length);
+		}
+	} catch {
+		// Invalid interval, return empty
+	}
+
+	return counts;
+});
+
+// Daily busy hours cache
+let dailyBusyHours = $derived.by(() => {
+	const hours = new Map<string, number>();
+	const range = viewStore.viewRange;
+
+	if (!range) return hours;
+
+	try {
+		const days = eachDayOfInterval({ start: range.start, end: range.end });
+
+		for (const day of days) {
+			const dayKey = format(day, 'yyyy-MM-dd');
+			const dayEvents = eventsStore.getEventsForDay(day, false);
+
+			let totalMinutes = 0;
+			for (const event of dayEvents) {
+				if (!event.isAllDay) {
+					const start = toDate(event.startTime);
+					const end = toDate(event.endTime);
+					totalMinutes += differenceInMinutes(end, start);
+				}
+			}
+
+			hours.set(dayKey, totalMinutes / 60);
+		}
+	} catch {
+		// Invalid interval, return empty
+	}
+
+	return hours;
+});
+
+export const heatmapStore = {
+	// Getters
+	get enabled() {
+		return enabled;
+	},
+	get metric() {
+		return metric;
+	},
+
+	// Toggle heatmap on/off
+	toggle() {
+		enabled = !enabled;
+		if (browser) {
+			localStorage.setItem('calendar-heatmap-enabled', String(enabled));
+		}
+	},
+
+	// Enable heatmap
+	enable() {
+		enabled = true;
+		if (browser) {
+			localStorage.setItem('calendar-heatmap-enabled', 'true');
+		}
+	},
+
+	// Disable heatmap
+	disable() {
+		enabled = false;
+		if (browser) {
+			localStorage.setItem('calendar-heatmap-enabled', 'false');
+		}
+	},
+
+	// Set metric type
+	setMetric(newMetric: HeatmapMetric) {
+		metric = newMetric;
+		if (browser) {
+			localStorage.setItem('calendar-heatmap-metric', newMetric);
+		}
+	},
+
+	/**
+	 * Get event count for a specific date
+	 */
+	getEventCount(date: Date): number {
+		const dayKey = format(date, 'yyyy-MM-dd');
+		return dailyEventCounts.get(dayKey) ?? 0;
+	},
+
+	/**
+	 * Get busy hours for a specific date
+	 */
+	getBusyHours(date: Date): number {
+		const dayKey = format(date, 'yyyy-MM-dd');
+		return dailyBusyHours.get(dayKey) ?? 0;
+	},
+
+	/**
+	 * Get heatmap level (0-5) for a specific date based on current metric
+	 */
+	getLevel(date: Date): HeatmapLevel {
+		if (metric === 'events') {
+			const count = this.getEventCount(date);
+			if (count === 0) return 0;
+			if (count <= 2) return 1;
+			if (count <= 4) return 2;
+			if (count <= 6) return 3;
+			if (count <= 9) return 4;
+			return 5;
+		} else {
+			// Hours metric
+			const hours = this.getBusyHours(date);
+			if (hours === 0) return 0;
+			if (hours <= 1) return 1;
+			if (hours <= 2) return 2;
+			if (hours <= 4) return 3;
+			if (hours <= 6) return 4;
+			return 5;
+		}
+	},
+
+	/**
+	 * Get CSS class for heatmap level
+	 */
+	getLevelClass(date: Date): string {
+		const level = this.getLevel(date);
+		return level === 0 ? '' : `heatmap-${level}`;
+	},
+
+	/**
+	 * Get display value for a date (count or hours depending on metric)
+	 */
+	getDisplayValue(date: Date): string {
+		if (metric === 'events') {
+			const count = this.getEventCount(date);
+			return count > 0 ? String(count) : '';
+		} else {
+			const hours = this.getBusyHours(date);
+			if (hours === 0) return '';
+			return hours < 1 ? `${Math.round(hours * 60)}m` : `${hours.toFixed(1)}h`;
+		}
+	},
+};

apps/calendar/apps/web/src/lib/stores/settings.svelte.ts

@@ -45,6 +45,7 @@ export interface CalendarAppSettings {
 
 	// TagStrip settings
 	tagStripCollapsed: boolean; // Whether TagStrip is hidden
+	selectedTagIds: string[]; // Tags selected for filtering calendar view
 
 	// Immersive Mode settings
 	immersiveModeEnabled: boolean; // Fullscreen mode - hides all UI elements
@@ -91,6 +92,7 @@ const DEFAULT_SETTINGS: CalendarAppSettings = {
 	dateStripCollapsed: false,
 	// TagStrip defaults
 	tagStripCollapsed: true, // Hidden by default
+	selectedTagIds: [], // No tags selected by default
 	// Immersive Mode defaults
 	immersiveModeEnabled: false,
 	// Birthday defaults
@@ -241,6 +243,12 @@ export const settingsStore = {
 	get tagStripCollapsed() {
 		return settings.tagStripCollapsed;
 	},
+	get selectedTagIds() {
+		return settings.selectedTagIds;
+	},
+	get hasSelectedTags() {
+		return settings.selectedTagIds.length > 0;
+	},
 	// Immersive Mode settings
 	get immersiveModeEnabled() {
 		return settings.immersiveModeEnabled;
@@ -316,6 +324,34 @@ export const settingsStore = {
 		syncToCloud();
 	},
 
+	/**
+	 * Toggle a tag selection for filtering
+	 */
+	toggleTagSelection(tagId: string) {
+		const currentIds = settings.selectedTagIds;
+		const isSelected = currentIds.includes(tagId);
+		const newIds = isSelected ? currentIds.filter((id) => id !== tagId) : [...currentIds, tagId];
+		settings = { ...settings, selectedTagIds: newIds };
+		saveSettings(settings);
+		syncToCloud();
+	},
+
+	/**
+	 * Check if a tag is selected
+	 */
+	isTagSelected(tagId: string): boolean {
+		return settings.selectedTagIds.includes(tagId);
+	},
+
+	/**
+	 * Clear all tag selections
+	 */
+	clearTagSelection() {
+		settings = { ...settings, selectedTagIds: [] };
+		saveSettings(settings);
+		syncToCloud();
+	},
+
 	/**
 	 * Toggle Immersive Mode (fullscreen, hide all UI)
 	 */

apps/calendar/apps/web/src/lib/stores/view-mode.svelte.ts

@@ -0,0 +1,76 @@
+/**
+ * View Mode Store - Manages app view mode (calendar vs network)
+ * Similar pattern to Contacts app view-mode store
+ */
+
+import { browser } from '$app/environment';
+
+export type AppViewMode = 'calendar' | 'network';
+
+const STORAGE_KEY = 'calendar-app-view-mode';
+
+// Valid view modes
+const VALID_MODES: AppViewMode[] = ['calendar', 'network'];
+
+function isValidMode(mode: string | null): mode is AppViewMode {
+	return mode !== null && VALID_MODES.includes(mode as AppViewMode);
+}
+
+// Get initial mode from sessionStorage or default to 'calendar'
+function getInitialMode(): AppViewMode {
+	if (!browser) return 'calendar';
+
+	const sessionMode = sessionStorage.getItem(STORAGE_KEY);
+	if (isValidMode(sessionMode)) {
+		return sessionMode;
+	}
+
+	return 'calendar';
+}
+
+let mode = $state<AppViewMode>(getInitialMode());
+
+export const viewModeStore = {
+	get mode() {
+		return mode;
+	},
+
+	setMode(newMode: AppViewMode) {
+		mode = newMode;
+		if (browser) {
+			sessionStorage.setItem(STORAGE_KEY, newMode);
+		}
+	},
+
+	/**
+	 * Toggle between calendar and network mode
+	 */
+	toggle() {
+		const newMode = mode === 'calendar' ? 'network' : 'calendar';
+		this.setMode(newMode);
+	},
+
+	/**
+	 * Reset to default view (calendar)
+	 */
+	resetToDefault() {
+		mode = 'calendar';
+		if (browser) {
+			sessionStorage.removeItem(STORAGE_KEY);
+		}
+	},
+
+	/**
+	 * Initialize mode from sessionStorage (call on app load)
+	 */
+	initialize() {
+		if (!browser) return;
+
+		const sessionMode = sessionStorage.getItem(STORAGE_KEY);
+		if (isValidMode(sessionMode)) {
+			mode = sessionMode;
+		} else {
+			mode = 'calendar';
+		}
+	},
+};

apps/calendar/apps/web/src/lib/utils/eventFiltering.ts

@@ -114,7 +114,7 @@ export function getOverflowEvents(
 }
 
 /**
- * Combined filter: Get visible timed events for a day with optional hour filtering
+ * Combined filter: Get visible timed events for a day with optional hour and tag filtering
  */
 export function getVisibleTimedEvents(
 	events: CalendarEvent[],
@@ -123,6 +123,7 @@ export function getVisibleTimedEvents(
 		filterHoursEnabled?: boolean;
 		dayStartHour?: number;
 		dayEndHour?: number;
+		selectedTagIds?: string[];
 	}
 ): CalendarEvent[] {
 	let filtered = filterByVisibleCalendars(events, visibleCalendars);
@@ -136,18 +137,57 @@ export function getVisibleTimedEvents(
 		filtered = filterByHourRange(filtered, options.dayStartHour, options.dayEndHour);
 	}
 
+	// Apply tag filter if tags are selected
+	if (options?.selectedTagIds) {
+		filtered = filterByTags(filtered, options.selectedTagIds);
+	}
+
 	return filtered;
 }
 
 /**
- * Combined filter: Get visible all-day events for a day
+ * Combined filter: Get visible all-day events for a day with optional tag filtering
  */
 export function getVisibleAllDayEvents(
 	events: CalendarEvent[],
-	visibleCalendars: Calendar[]
+	visibleCalendars: Calendar[],
+	options?: {
+		selectedTagIds?: string[];
+	}
 ): CalendarEvent[] {
 	let filtered = filterByVisibleCalendars(events, visibleCalendars);
-	return filterAllDayEvents(filtered);
+	filtered = filterAllDayEvents(filtered);
+
+	// Apply tag filter if tags are selected
+	if (options?.selectedTagIds) {
+		filtered = filterByTags(filtered, options.selectedTagIds);
+	}
+
+	return filtered;
+}
+
+/**
+ * Filter events by selected tag IDs
+ * If no tags are selected (empty array), returns all events
+ * If tags are selected, returns only events that have at least one of the selected tags
+ */
+export function filterByTags(events: CalendarEvent[], selectedTagIds: string[]): CalendarEvent[] {
+	// If no tags are selected, show all events
+	if (selectedTagIds.length === 0) {
+		return events;
+	}
+
+	const selectedTagSet = new Set(selectedTagIds);
+
+	return events.filter((event) => {
+		// If event has no tags, don't show it when filtering by tags
+		if (!event.tags || event.tags.length === 0) {
+			return false;
+		}
+
+		// Check if event has at least one of the selected tags
+		return event.tags.some((tag) => selectedTagSet.has(tag.id));
+	});
 }
 
 /**

apps/calendar/apps/web/src/routes/(app)/+layout.svelte

@@ -44,6 +44,7 @@
 		isNavCollapsed as collapsedStore,
 		isToolbarCollapsed as toolbarCollapsedStore,
 	} from '$lib/stores/navigation';
+	import { viewModeStore } from '$lib/stores/view-mode.svelte';
 	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { setLocale, supportedLocales } from '$lib/i18n';
@@ -63,7 +64,10 @@
 	import TagStrip from '$lib/components/calendar/TagStrip.svelte';
 	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';
 
 	// App switcher items
@@ -173,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;
@@ -268,6 +275,7 @@
 
 	// Base navigation items for Calendar (without Kalender/Aufgaben - handled by tab group)
 	// Note: Tags uses onClick to toggle TagStrip visibility instead of navigating
+	// Note: Statistiken uses onClick to toggle heatmap mode (shows stats overlay + event density)
 	let baseNavItems = $derived<PillNavItem[]>([
 		{
 			href: '/tags',
@@ -276,9 +284,19 @@
 			onClick: handleTagsToggle,
 			active: isTagStripVisible,
 		},
-		{ href: '/statistics', label: 'Statistiken', icon: 'bar-chart-3' },
-		{ href: '/network', label: 'Netzwerk', icon: 'share-2' },
-		{ href: '/settings', label: 'Einstellungen', icon: 'settings' },
+		{
+			href: '/',
+			label: 'Statistiken',
+			icon: 'flame',
+			onClick: () => heatmapStore.toggle(),
+			active: heatmapStore.enabled,
+		},
+		{
+			href: '/',
+			label: 'Einstellungen',
+			icon: 'settings',
+			onClick: () => (showSettingsModal = true),
+		},
 		{ href: '/feedback', label: 'Feedback', icon: 'chat' },
 	]);
 
@@ -355,16 +373,37 @@
 		return viewLabels[view];
 	}
 
+	// Handle view/mode change - switches between calendar views and network mode
+	function handleViewModeChange(id: string) {
+		if (id === 'network') {
+			viewModeStore.setMode('network');
+		} else {
+			// Switch to calendar mode and set the view type
+			viewModeStore.setMode('calendar');
+			viewStore.setViewType(id as CalendarViewType);
+		}
+	}
+
+	// Current view value - shows 'network' when in network mode, otherwise the calendar view type
+	let currentViewValue = $derived(
+		viewModeStore.mode === 'network' ? 'network' : viewStore.viewType
+	);
+
 	// View switcher tab group (only shown on calendar main page)
+	// Includes calendar views + network option
 	let viewSwitcherTabGroup = $derived<PillTabGroupConfig>({
 		type: 'tabs',
-		options: enabledViews.map((view) => ({
-			id: view,
-			label: getViewLabel(view),
-			title: view === 'custom' ? `${settingsStore.customDayCount}-Tage-Ansicht` : viewTitles[view],
-		})),
-		value: viewStore.viewType,
-		onChange: (id) => viewStore.setViewType(id as CalendarViewType),
+		options: [
+			...enabledViews.map((view) => ({
+				id: view,
+				label: getViewLabel(view),
+				title:
+					view === 'custom' ? `${settingsStore.customDayCount}-Tage-Ansicht` : viewTitles[view],
+			})),
+			{ id: 'network', label: 'N', title: 'Netzwerk-Ansicht' },
+		],
+		value: currentViewValue,
+		onChange: handleViewModeChange,
 		onContextMenu: handleViewContextMenu,
 	});
 
@@ -726,6 +765,16 @@
 <!-- InputBar Help Modal -->
 <InputBarHelpModal open={helpModalOpen} onClose={handleCloseHelpModal} mode={helpModalMode} />
 
+<!-- Stats Overlay (shown when heatmap is enabled) -->
+<StatsOverlay />
+
+<!-- Settings Modal -->
+<SettingsModal
+	visible={showSettingsModal}
+	onClose={() => (showSettingsModal = false)}
+	{isSidebarMode}
+/>
+
 <style>
 	.layout-container {
 		display: flex;

apps/calendar/apps/web/src/routes/(app)/+page.svelte

@@ -7,8 +7,12 @@
 	import { calendarsStore } from '$lib/stores/calendars.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { viewModeStore } from '$lib/stores/view-mode.svelte';
+	import { heatmapStore } from '$lib/stores/heatmap.svelte';
 	import ViewCarousel from '$lib/components/calendar/ViewCarousel.svelte';
+	import NetworkView from '$lib/components/calendar/NetworkView.svelte';
 	import TodoSidebarSection from '$lib/components/calendar/TodoSidebarSection.svelte';
+	import StatsSidebarSection from '$lib/components/calendar/StatsSidebarSection.svelte';
 	import QuickEventOverlay from '$lib/components/event/QuickEventOverlay.svelte';
 	import { CalendarViewSkeleton } from '$lib/components/skeletons';
 	import type { CalendarEvent } from '@calendar/shared';
@@ -97,63 +101,87 @@
 	<title>{$_('app.name')}</title>
 </svelte:head>
 
-<div class="calendar-layout">
-	<!-- Desktop: Left Sidebar -->
-	<aside class="calendar-sidebar desktop-only" class:collapsed={settingsStore.sidebarCollapsed}>
-		<!-- Collapse button at top -->
-		<button
-			class="sidebar-collapse-btn"
-			onclick={() => settingsStore.toggleSidebar()}
-			title={$_('calendar.hideSidebar')}
-		>
-			<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="M11 19l-7-7 7-7m8 14l-7-7 7-7"
-				/>
-			</svg>
-		</button>
-
-		<TodoSidebarSection maxItems={5} />
-	</aside>
-
-	<!-- Main Calendar Area -->
-	<div class="calendar-main" class:expanded={settingsStore.sidebarCollapsed}>
-		<div class="calendar-content">
-			{#if !initialized}
-				<CalendarViewSkeleton />
-			{:else}
-				<ViewCarousel onQuickCreate={handleQuickCreate} onEventClick={handleEventClick} />
-			{/if}
-		</div>
+{#if viewModeStore.mode === 'network'}
+	<!-- Network View Mode -->
+	<div class="network-layout">
+		<NetworkView />
 	</div>
+{:else}
+	<!-- Calendar View Mode -->
+	<div class="calendar-layout">
+		<!-- Desktop: Left Sidebar -->
+		<aside class="calendar-sidebar desktop-only" class:collapsed={settingsStore.sidebarCollapsed}>
+			<!-- Collapse button at top -->
+			<button
+				class="sidebar-collapse-btn"
+				onclick={() => settingsStore.toggleSidebar()}
+				title={$_('calendar.hideSidebar')}
+			>
+				<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="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+					/>
+				</svg>
+			</button>
 
-	<!-- Mobile: Bottom Todo Section -->
-	<aside
-		class="calendar-sidebar-mobile mobile-only"
-		class:collapsed={settingsStore.sidebarCollapsed}
-	>
-		<TodoSidebarSection maxItems={3} />
-	</aside>
+			{#if heatmapStore.enabled}
+				<StatsSidebarSection />
+			{:else}
+				<TodoSidebarSection maxItems={5} />
+			{/if}
+		</aside>
 
-	<!-- Quick Event Overlay (for both create and edit) -->
-	{#if showQuickOverlay}
-		{#key overlayKey}
-			<QuickEventOverlay
-				startTime={editingEvent ? undefined : quickCreateDate}
-				event={editingEvent ?? undefined}
-				onClose={handleQuickOverlayClose}
-				onCreated={handleEventCreated}
-				onUpdated={handleEventUpdated}
-				onDeleted={handleEventDeleted}
-			/>
-		{/key}
-	{/if}
-</div>
+		<!-- Main Calendar Area -->
+		<div class="calendar-main" class:expanded={settingsStore.sidebarCollapsed}>
+			<div class="calendar-content">
+				{#if !initialized}
+					<CalendarViewSkeleton />
+				{:else}
+					<ViewCarousel onQuickCreate={handleQuickCreate} onEventClick={handleEventClick} />
+				{/if}
+			</div>
+		</div>
+
+		<!-- Mobile: Bottom Todo Section -->
+		<aside
+			class="calendar-sidebar-mobile mobile-only"
+			class:collapsed={settingsStore.sidebarCollapsed}
+		>
+			{#if heatmapStore.enabled}
+				<StatsSidebarSection />
+			{:else}
+				<TodoSidebarSection maxItems={3} />
+			{/if}
+		</aside>
+
+		<!-- Quick Event Overlay (for both create and edit) -->
+		{#if showQuickOverlay}
+			{#key overlayKey}
+				<QuickEventOverlay
+					startTime={editingEvent ? undefined : quickCreateDate}
+					event={editingEvent ?? undefined}
+					onClose={handleQuickOverlayClose}
+					onCreated={handleEventCreated}
+					onUpdated={handleEventUpdated}
+					onDeleted={handleEventDeleted}
+				/>
+			{/key}
+		{/if}
+	</div>
+{/if}
 
 <style>
+	/* Network Layout - Full height without sidebar */
+	.network-layout {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		min-height: 0;
+	}
+
 	.calendar-layout {
 		display: flex;
 		gap: 1.5rem;

apps/calendar/apps/web/src/routes/(app)/statistics/+page.svelte

@@ -1,288 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { eventsStore } from '$lib/stores/events.svelte';
-	import { calendarsStore } from '$lib/stores/calendars.svelte';
-	import { calendarStatisticsStore } from '$lib/stores/statistics.svelte';
-	import {
-		StatsGrid,
-		ActivityHeatmap,
-		TrendLineChart,
-		DonutChart,
-		ProgressBars,
-		StatisticsSkeleton,
-		type StatItem,
-	} from '@manacore/shared-ui';
-	import {
-		BarChart3,
-		CalendarDays,
-		Calendar,
-		Clock,
-		CalendarCheck,
-		Hourglass,
-		type Icon as LucideIcon,
-	} from 'lucide-svelte';
-	import { subDays, addDays } from 'date-fns';
-
-	let loading = $state(true);
-
-	// Update statistics when events change
-	$effect(() => {
-		calendarStatisticsStore.setEvents(eventsStore.events);
-	});
-
-	$effect(() => {
-		calendarStatisticsStore.setCalendars(calendarsStore.calendars);
-	});
-
-	// Build stats items for StatsGrid
-	let statsItems = $derived<StatItem[]>([
-		{
-			id: 'eventsToday',
-			label: 'Heute',
-			value: calendarStatisticsStore.eventsToday,
-			icon: CalendarDays as any,
-			variant: 'success',
-		},
-		{
-			id: 'eventsThisWeek',
-			label: 'Diese Woche',
-			value: calendarStatisticsStore.eventsThisWeek,
-			icon: Calendar as any,
-			variant: 'primary',
-		},
-		{
-			id: 'upcoming',
-			label: 'Anstehend (7 Tage)',
-			value: calendarStatisticsStore.upcomingEvents,
-			icon: CalendarCheck as any,
-			variant: 'info',
-		},
-		{
-			id: 'busyHours',
-			label: 'Stunden/Woche',
-			value: `${calendarStatisticsStore.busyHoursThisWeek}h`,
-			icon: Clock as any,
-			variant: 'neutral',
-		},
-		{
-			id: 'calendars',
-			label: 'Kalender',
-			value: calendarStatisticsStore.totalCalendars,
-			icon: Calendar as any,
-			variant: 'accent',
-		},
-		{
-			id: 'avgDuration',
-			label: 'Ø Dauer (Min)',
-			value: calendarStatisticsStore.averageEventDuration,
-			icon: Hourglass as any,
-			variant: 'info',
-		},
-	]);
-
-	onMount(async () => {
-		// Fetch events for the last 6 months + next month for statistics
-		const startDate = subDays(new Date(), 180);
-		const endDate = addDays(new Date(), 30);
-
-		await Promise.all([
-			eventsStore.fetchEvents(startDate, endDate),
-			calendarsStore.fetchCalendars(),
-		]);
-
-		loading = false;
-	});
-</script>
-
-<svelte:head>
-	<title>Statistiken - Kalender</title>
-</svelte:head>
-
-<div class="statistics-page">
-	<header class="page-header">
-		<div class="header-icon">
-			<BarChart3 size={28} />
-		</div>
-		<div class="header-content">
-			<h1>Statistiken</h1>
-			<p class="header-subtitle">Dein Kalender im Überblick</p>
-		</div>
-	</header>
-
-	{#if loading}
-		<StatisticsSkeleton statCards={6} legendItems={3} />
-	{:else}
-		<!-- Quick Stats -->
-		<section class="stats-section">
-			<StatsGrid items={statsItems} columns={6} />
-		</section>
-
-		<!-- Charts Grid -->
-		<div class="charts-grid">
-			<!-- Activity Heatmap -->
-			<section class="chart-section heatmap-section">
-				<ActivityHeatmap
-					data={calendarStatisticsStore.activityHeatmap}
-					itemName="Event"
-					itemNamePlural="Events"
-				/>
-			</section>
-
-			<!-- Weekly Trend + Status Donut -->
-			<div class="charts-row">
-				<section class="chart-section trend-section">
-					<TrendLineChart
-						data={calendarStatisticsStore.weeklyTrend}
-						itemName="Event"
-						itemNamePlural="Events"
-					/>
-				</section>
-
-				<section class="chart-section donut-section">
-					<DonutChart
-						data={calendarStatisticsStore.statusBreakdown}
-						title="Status"
-						centerLabel="Events"
-						centerValue={calendarStatisticsStore.totalEvents}
-					/>
-				</section>
-			</div>
-
-			<!-- Calendar Activity -->
-			<section class="chart-section calendars-section">
-				<ProgressBars
-					data={calendarStatisticsStore.calendarActivity}
-					title="Kalender-Aktivität"
-					emptyMessage="Keine Kalender mit Events"
-				/>
-			</section>
-		</div>
-
-		<!-- Additional Stats -->
-		<div class="additional-stats">
-			<div class="stat-card-small">
-				<span class="stat-label">Ganztägige Events</span>
-				<span class="stat-value">
-					{calendarStatisticsStore.allDayRatio.allDay}
-					<span class="stat-percentage"
-						>({calendarStatisticsStore.allDayRatio.allDayPercentage}%)</span
-					>
-				</span>
-			</div>
-
-			<div class="stat-card-small">
-				<span class="stat-label">Wiederkehrende Events</span>
-				<span class="stat-value">{calendarStatisticsStore.recurringEventsCount}</span>
-			</div>
-
-			<div class="stat-card-small">
-				<span class="stat-label">Events gesamt</span>
-				<span class="stat-value">{calendarStatisticsStore.totalEvents}</span>
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.statistics-page {
-		padding-bottom: 6rem;
-	}
-
-	.page-header {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		margin-bottom: 2rem;
-	}
-
-	.header-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 56px;
-		height: 56px;
-		background: hsl(var(--primary) / 0.15);
-		color: hsl(var(--primary));
-		border-radius: 1rem;
-	}
-
-	.header-content h1 {
-		font-size: 1.5rem;
-		font-weight: 700;
-		color: hsl(var(--foreground));
-		margin: 0;
-	}
-
-	.header-subtitle {
-		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
-		margin: 0.25rem 0 0 0;
-	}
-
-	.stats-section {
-		margin-bottom: 1.5rem;
-	}
-
-	.charts-grid {
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-
-	.charts-row {
-		display: grid;
-		grid-template-columns: 1fr;
-		gap: 1.5rem;
-	}
-
-	@media (min-width: 768px) {
-		.charts-row {
-			grid-template-columns: 2fr 1fr;
-		}
-	}
-
-	.chart-section {
-		min-width: 0;
-	}
-
-	.additional-stats {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 1rem;
-		margin-top: 1.5rem;
-	}
-
-	.stat-card-small {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		padding: 1rem;
-		background: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		border-radius: 1rem;
-	}
-
-	:global(.dark) .stat-card-small {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
-	.stat-card-small .stat-label {
-		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
-	}
-
-	.stat-card-small .stat-value {
-		font-size: 1rem;
-		font-weight: 600;
-		color: hsl(var(--foreground));
-	}
-
-	.stat-percentage {
-		font-size: 0.875rem;
-		font-weight: 400;
-		color: hsl(var(--muted-foreground));
-	}
-</style>

apps/chat/apps/web/src/routes/+layout.svelte

@@ -7,13 +7,12 @@
 
 	let { children } = $props();
 
-	onMount(async () => {
+	onMount(() => {
 		// Initialize runtime config first (12-factor pattern)
-		await initializeConfig();
+		initializeConfig();
 
 		// Initialize theme
-		const cleanup = theme.initialize();
-		return cleanup;
+		return theme.initialize();
 	});
 </script>
 

apps/manacore/apps/web/src/lib/stores/user-settings.svelte.ts

@@ -11,17 +11,17 @@ import { createUserSettingsStore } from '@manacore/shared-theme';
 import { authStore } from './auth.svelte';
 import { getAuthUrl } from '$lib/config/runtime';
 
+// Initialize auth URL from runtime config
+let authUrl = 'http://localhost:3001'; // default fallback
+getAuthUrl().then((url) => {
+	authUrl = url;
+});
+
 // Create store with async initialization
 export const userSettings = createUserSettingsStore({
 	appId: 'manacore',
-	authUrl: 'http://localhost:3001', // Will be updated after config loads
+	get authUrl() {
+		return authUrl;
+	},
 	getAccessToken: () => authStore.getAccessToken(),
 });
-
-// Update auth URL after runtime config loads
-getAuthUrl().then((url) => {
-	// Update the store's auth URL after config loads
-	if (userSettings.settings) {
-		(userSettings.settings as { authUrl: string }).authUrl = url;
-	}
-});

apps/picture/apps/web/src/lib/config/runtime.ts

@@ -78,8 +78,8 @@ async function loadConfig(): Promise<RuntimeConfig> {
 			if (!dev) {
 				const result = ConfigSchema.safeParse(config);
 				if (!result.success) {
-					const errors = result.error.errors
-						.map((e: { path: (string | number)[]; message: string }) => `${e.path.join('.')}: ${e.message}`)
+					const errors = result.error.issues
+						.map((e) => `${e.path.join('.')}: ${e.message}`)
 						.join(', ');
 					throw new Error(`[Picture] Invalid config.json schema: ${errors}`);
 				}

games/worldream/apps/web/src/lib/components/AiGenerator.svelte

@@ -108,6 +108,7 @@
 				<div
 					class="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity"
 					onclick={toggleDialog}
+					onkeydown={(e) => e.key === 'Enter' && toggleDialog()}
 					role="button"
 					tabindex="-1"
 					aria-label="Close dialog"

games/worldream/apps/web/src/lib/components/AiImageGenerator.svelte

@@ -6,7 +6,7 @@
 		title?: string;
 		description?: string;
 		appearance?: string;
-		prompt?: string;
+		prompt?: string | null;
 		imagePrompt?: string;
 		imageUrl?: string | null;
 		onImageGenerated?: (imageUrl: string) => void;
@@ -17,7 +17,7 @@
 		title = '',
 		description = '',
 		appearance = '',
-		prompt = $bindable(''),
+		prompt = $bindable(null),
 		imagePrompt = $bindable(''),
 		imageUrl = $bindable(null),
 		onImageGenerated,
@@ -64,8 +64,6 @@
 	function getImageClass() {
 		const aspectRatio = getAspectRatio();
 		switch (aspectRatio) {
-			case '21:9':
-				return 'w-full aspect-[21/9]'; // 21:9 ultrawide aspect ratio
 			case '16:9':
 				return 'w-full aspect-video'; // 16:9 aspect ratio
 			case '9:16':
@@ -183,7 +181,7 @@
 
 	function resetImage() {
 		generatedImageUrl = null;
-		imagePrompt = null;
+		imagePrompt = '';
 		error = null;
 	}
 </script>
@@ -331,7 +329,7 @@
 		<button
 			type="button"
 			onclick={generateImage}
-			disabled={loading || (!title && !prompt) || (appearance && !imagePrompt)}
+			disabled={loading || (!title && !prompt) || (!!appearance && !imagePrompt)}
 			class="border-theme-border-default flex w-full items-center justify-center rounded-md border bg-theme-surface px-4 py-3 text-sm font-medium text-theme-text-primary shadow-sm hover:bg-theme-interactive-hover focus:outline-none focus:ring-2 focus:ring-theme-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
 		>
 			{#if loading}

games/worldream/apps/web/src/lib/components/GlobalAiAuthorBar.svelte

@@ -570,7 +570,7 @@
 							kind={aiState.currentNode.kind}
 							title={aiState.currentNode.title}
 							description={aiState.currentNode.summary}
-							appearance={aiState.currentNode.content?.appearance}
+							appearance={aiState.currentNode.content?.appearance || undefined}
 							bind:imageUrl
 							bind:prompt={generatedPrompt}
 							onImageGenerated={handleImageGenerated}

games/worldream/apps/web/src/lib/components/ImageGallery.svelte

@@ -190,6 +190,7 @@
 	<div
 		class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 p-4"
 		onclick={closeLightbox}
+		onkeydown={(e) => e.key === 'Enter' && closeLightbox()}
 		role="dialog"
 		aria-modal="true"
 		tabindex="-1"
@@ -199,10 +200,13 @@
 				src={selectedImage.image_url}
 				alt="Vollbild"
 				class="max-h-[90vh] max-w-full object-contain"
-				onclick={(e) => e.stopPropagation()}
 			/>
 
-			<button onclick={closeLightbox} class="absolute right-4 top-4 text-white hover:text-gray-300">
+			<button
+				onclick={closeLightbox}
+				aria-label="Close lightbox"
+				class="absolute right-4 top-4 text-white hover:text-gray-300"
+			>
 				<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path
 						stroke-linecap="round"

games/worldream/apps/web/src/lib/components/ImageUploadModal.svelte

@@ -166,6 +166,7 @@
 		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
 		transition:fade={{ duration: 200 }}
 		onclick={onClose}
+		onkeydown={(e) => e.key === 'Enter' && onClose()}
 		role="dialog"
 		aria-modal="true"
 		tabindex="-1"

games/worldream/apps/web/src/lib/components/ImageUploader.svelte

@@ -90,6 +90,7 @@
 			<div class="mb-4 flex items-center justify-between">
 				<h3 class="text-lg font-medium text-theme-text-primary">Neues Bild generieren</h3>
 				<button
+					aria-label="Close generator"
 					onclick={toggleGenerator}
 					class="text-theme-text-tertiary hover:text-theme-text-primary"
 				>

games/worldream/apps/web/src/lib/components/NodeDetail.svelte

@@ -544,7 +544,9 @@
 													references={node.content.references}
 												/>
 											{:else if field.key.includes('text') || field.key === 'references'}
-												{@html parseReferences(node.content[field.key])}
+												{@html typeof node.content[field.key] === 'string'
+													? parseReferences(node.content[field.key] as string)
+													: ''}
 											{:else}
 												<p class="whitespace-pre-wrap">{node.content[field.key]}</p>
 											{/if}
@@ -805,7 +807,9 @@
 												references={node.content.references}
 											/>
 										{:else if field.key.includes('text') || field.key === 'references'}
-											{@html parseReferences(node.content[field.key])}
+											{@html typeof node.content[field.key] === 'string'
+												? parseReferences(node.content[field.key] as string)
+												: ''}
 										{:else}
 											<p class="whitespace-pre-wrap">{node.content[field.key]}</p>
 										{/if}

games/worldream/apps/web/src/lib/components/NodeEditForm.svelte

@@ -213,8 +213,8 @@
 
 	const config = getFieldConfig();
 	const fields = config.fields;
-	const optionalFields = fields.filter((f) => f.optional);
-	const requiredFields = fields.filter((f) => !f.optional);
+	const optionalFields = fields.filter((f) => 'optional' in f && f.optional);
+	const requiredFields = fields.filter((f) => !('optional' in f) || !f.optional);
 
 	let hasOptionalContent = $derived(
 		optionalFields.some((field) => contentFields[field.key]?.trim())

games/worldream/apps/web/src/lib/components/customFields/CustomDataForm.svelte

@@ -215,7 +215,7 @@
 	function renderNumberField(field: CustomFieldDefinition, value: any, error: string | undefined) {
 		return `
 			<div class="flex items-center gap-2">
-				${field.config.prefix ? `<span class="text-sm text-theme-text-secondary">${field.config.prefix}</span>` : ''}
+				${field.display?.prefix ? `<span class="text-sm text-theme-text-secondary">${field.display.prefix}</span>` : ''}
 				<input
 					type="number"
 					value="${value ?? field.config.default ?? ''}"
@@ -224,7 +224,7 @@
 					step="${field.config.step ?? 1}"
 					onchange="this.dispatchEvent(new CustomEvent('fieldchange', { detail: parseFloat(this.value) }))"
 					${readonly ? 'disabled' : ''}
-					class="flex-1 px-3 py-2 border ${error ? 'border-theme-error' : 'border-theme-border-default'} 
+					class="flex-1 px-3 py-2 border ${error ? 'border-theme-error' : 'border-theme-border-default'}
 						rounded-md bg-theme-surface disabled:opacity-50"
 				/>
 				${field.config.unit ? `<span class="text-sm text-theme-text-secondary">${field.config.unit}</span>` : ''}
@@ -454,35 +454,44 @@
 						{/if}
 
 						<!-- Field Component -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class="field-component"
-							onfieldchange={(e: CustomEvent) => handleFieldChange(field.key, e.detail)}
-							onmultiselectchange={(e: CustomEvent) => {
-								const current = formData[field.key] || [];
-								if (e.detail.checked) {
-									handleFieldChange(field.key, [...current, e.detail.value]);
-								} else {
-									handleFieldChange(
-										field.key,
-										current.filter((v) => v !== e.detail.value)
-									);
-								}
-							}}
-							onlistitemchange={(e: CustomEvent) => {
-								const items = [...(formData[field.key] || [])];
-								items[e.detail.index] = e.detail.value;
-								handleFieldChange(field.key, items);
-							}}
-							onlistitemremove={(e: CustomEvent) => {
-								const items = [...(formData[field.key] || [])];
-								items.splice(e.detail, 1);
-								handleFieldChange(field.key, items);
-							}}
-							onlistitemadd={() => {
-								const items = [...(formData[field.key] || [])];
-								items.push(getDefaultValueForType(field.config.item_type || 'text'));
-								handleFieldChange(field.key, items);
-							}}
+							{...{
+								onfieldchange: (e: Event) => {
+									const customEvent = e as CustomEvent;
+									handleFieldChange(field.key, customEvent.detail);
+								},
+								onmultiselectchange: (e: Event) => {
+									const customEvent = e as CustomEvent;
+									const current = formData[field.key] || [];
+									if (customEvent.detail.checked) {
+										handleFieldChange(field.key, [...current, customEvent.detail.value]);
+									} else {
+										handleFieldChange(
+											field.key,
+											current.filter((v: any) => v !== customEvent.detail.value)
+										);
+									}
+								},
+								onlistitemchange: (e: Event) => {
+									const customEvent = e as CustomEvent;
+									const items = [...(formData[field.key] || [])];
+									items[customEvent.detail.index] = customEvent.detail.value;
+									handleFieldChange(field.key, items);
+								},
+								onlistitemremove: (e: Event) => {
+									const customEvent = e as CustomEvent;
+									const items = [...(formData[field.key] || [])];
+									items.splice(customEvent.detail, 1);
+									handleFieldChange(field.key, items);
+								},
+								onlistitemadd: () => {
+									const items = [...(formData[field.key] || [])];
+									items.push(getDefaultValueForType(field.config.item_type || 'text'));
+									handleFieldChange(field.key, items);
+								},
+							} as any}
 						>
 							{@html getFieldComponent(field)}
 						</div>

games/worldream/apps/web/src/lib/components/customFields/CustomFieldsDisplay.svelte

@@ -174,7 +174,9 @@
 												{#each Array.isArray(data[field.key]) ? data[field.key] : [] as item}
 													<span class="inline-block px-2 py-0.5 bg-theme-elevated rounded text-sm">
 														{field.type === 'multiselect'
-															? field.config.choices?.find((c) => c.value === item)?.label || item
+															? field.config.choices?.find(
+																	(c: { value: any; label: string }) => c.value === item
+																)?.label || item
 															: item}
 													</span>
 												{/each}

games/worldream/apps/web/src/lib/components/forms/NodeForm.svelte

@@ -304,10 +304,11 @@
 	);
 
 	// Check optional fields for collapsible section
-	let hasOptionalContent = $derived(() => {
-		const optionalFields = getFieldsForKind(kind).filter((f) => f.optional);
-		return optionalFields.some((field) => contentFields[field.key]?.trim());
-	});
+	let hasOptionalContent = $derived(
+		getFieldsForKind(kind)
+			.filter((f) => 'optional' in f && f.optional)
+			.some((field) => contentFields[field.key]?.trim())
+	);
 
 	// Auto-show form when AI generates content
 	$effect(() => {
@@ -525,8 +526,8 @@
 
 	const config = getKindConfig();
 	const fields = config.fields;
-	const optionalFields = fields.filter((f) => f.optional);
-	const requiredFields = fields.filter((f) => !f.optional);
+	const optionalFields = fields.filter((f) => 'optional' in f && f.optional);
+	const requiredFields = fields.filter((f) => !('optional' in f) || !f.optional);
 </script>
 
 <div class="mx-auto max-w-4xl">
@@ -793,7 +794,7 @@
 			<div class="border-t pt-6">
 				<h2 class="mb-4 text-lg font-medium text-theme-text-primary">Benutzerdefinierte Felder</h2>
 				<CustomFieldsManager
-					node={initialData}
+					node={initialData as ContentNode}
 					nodeSlug={initialData?.slug}
 					nodeKind={kind}
 					{worldSlug}

games/worldream/apps/web/src/lib/types/content.ts

@@ -6,6 +6,12 @@ export interface GenerationContext {
 	userPrompt: string;
 	systemPrompt: string;
 	worldContext?: string;
+	worldDetails?: {
+		title: string;
+		summary?: string;
+		appearance?: string;
+		lore?: string;
+	};
 	selectedCharacters?: Array<{
 		name: string;
 		slug: string;
@@ -15,6 +21,14 @@ export interface GenerationContext {
 		motivations?: string;
 		capabilities?: string;
 	}>;
+	selectedPlace?: {
+		name: string;
+		slug: string;
+		summary?: string;
+		appearance?: string;
+		capabilities?: string;
+		constraints?: string;
+	};
 	model: string;
 	timestamp: string;
 }

games/worldream/apps/web/src/routes/worlds/[world]/characters/[slug]/edit/+page.svelte

@@ -27,7 +27,7 @@
 
 	async function loadCharacter() {
 		try {
-			node = await NodeService.get(slug);
+			if (slug) node = await NodeService.get(slug);
 
 			// Ensure it's a character and belongs to this world
 			if (node && node.kind !== 'character') {

packages/shared-ui/src/organisms/network/network.types.ts

@@ -52,7 +52,7 @@ export interface NetworkLink {
 export interface SimulationLink {
 	source: string | SimulationNode;
 	target: string | SimulationNode;
-	type: 'tag';
+	type: string; // e.g., 'tag', 'calendar', 'date', 'location', etc.
 	strength: number;
 	sharedTags: string[];
 	index?: number;