From 6035994972a72da7d936139f4dfbe7bbeeb4f312 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Tue, 16 Dec 2025 18:39:59 +0100
Subject: [PATCH] feat(calendar): add stats sidebar section and heatmap support
 in year view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add StatsSidebarSection component with event statistics, weekly trend chart, and calendar activity
- Show stats sidebar when heatmap mode is enabled instead of todo section
- Add heatmap level classes (1-5) to YearView with GitHub-style coloring
- Only show StatsOverlay when sidebar is collapsed

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/calendar/StatsOverlay.svelte   |   4 +-
 .../calendar/StatsSidebarSection.svelte       | 434 ++++++++++++++++++
 .../lib/components/calendar/YearView.svelte   |  65 ++-
 .../apps/web/src/routes/(app)/+page.svelte    |  14 +-
 4 files changed, 511 insertions(+), 6 deletions(-)
 create mode 100644 apps/calendar/apps/web/src/lib/components/calendar/StatsSidebarSection.svelte

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/StatsOverlay.svelte b/apps/calendar/apps/web/src/lib/components/calendar/StatsOverlay.svelte
index 201928b93..47d7c1e28 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/StatsOverlay.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/StatsOverlay.svelte
@@ -57,8 +57,8 @@
 	});
 </script>
 
-<!-- Only show when heatmap is enabled -->
-{#if heatmapStore.enabled}
+<!-- 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 -->
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/StatsSidebarSection.svelte b/apps/calendar/apps/web/src/lib/components/calendar/StatsSidebarSection.svelte
new file mode 100644
index 000000000..a739ad0a4
--- /dev/null
+++ b/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>
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/YearView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/YearView.svelte
index 265e7a172..ed6b2a6e2 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/YearView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/YearView.svelte
@@ -183,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
@@ -337,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;
diff --git a/apps/calendar/apps/web/src/routes/(app)/+page.svelte b/apps/calendar/apps/web/src/routes/(app)/+page.svelte
index 723cf5293..9fb8693d0 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+page.svelte
@@ -8,9 +8,11 @@
 	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';
@@ -125,7 +127,11 @@
 				</svg>
 			</button>
 
-			<TodoSidebarSection maxItems={5} />
+			{#if heatmapStore.enabled}
+				<StatsSidebarSection />
+			{:else}
+				<TodoSidebarSection maxItems={5} />
+			{/if}
 		</aside>
 
 		<!-- Main Calendar Area -->
@@ -144,7 +150,11 @@
 			class="calendar-sidebar-mobile mobile-only"
 			class:collapsed={settingsStore.sidebarCollapsed}
 		>
-			<TodoSidebarSection maxItems={3} />
+			{#if heatmapStore.enabled}
+				<StatsSidebarSection />
+			{:else}
+				<TodoSidebarSection maxItems={3} />
+			{/if}
 		</aside>
 
 		<!-- Quick Event Overlay (for both create and edit) -->