Add floating windows and btop system monitor

src/lib/components/btop/ContributionPanel.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { BtopData } from '#lib/btop/types';
+	import BtopBox from './BtopBox.svelte';
+
+	let { data }: { data: BtopData | null } = $props();
+
+	const levelOpacity = [0, 0.3, 0.55, 0.8, 1];
+
+	const calendar = $derived(data?.contributions ?? null);
+</script>
+
+<BtopBox title="net · commits" number={3} color="blue">
+	{#if calendar && data}
+		<div class="stats">
+			<span><b class="value">{calendar.total.toLocaleString('en-US')}</b> contributions in the last year</span>
+			<span class="muted">streak <b class="value">{calendar.currentStreak}d</b></span>
+			{#if calendar.bestDay}
+				<span class="muted">peak <b class="value">{calendar.bestDay.count}</b> on {calendar.bestDay.date}</span>
+			{/if}
+		</div>
+
+		<a class="heatmap" href={data.github.profileUrl} target="_blank" rel="noopener noreferrer" aria-label="GitHub contribution graph">
+			{#each calendar.weeks as week, weekIndex (weekIndex)}
+				<span class="week">
+					{#each week as day (day.date)}
+						<span
+							class="day"
+							style:opacity={day.level === 0 ? 1 : levelOpacity[day.level]}
+							class:empty={day.level === 0}
+							title="{day.count} contributions on {day.date}"
+						></span>
+					{/each}
+				</span>
+			{/each}
+		</a>
+
+		<div class="legend muted">
+			less
+			{#each levelOpacity as opacity, level (level)}
+				<span class="day" class:empty={level === 0} style:opacity={level === 0 ? 1 : opacity}></span>
+			{/each}
+			more
+		</div>
+	{:else}
+		<p class="muted loading">connecting to github...</p>
+	{/if}
+</BtopBox>
+
+<style>
+	.stats {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.2rem 1rem;
+		margin-bottom: 0.6rem;
+		font-size: 0.75rem;
+	}
+
+	.value {
+		color: var(--blue);
+	}
+
+	.heatmap {
+		display: grid;
+		grid-auto-columns: minmax(0, 1fr);
+		grid-auto-flow: column;
+		gap: 2px;
+	}
+
+	.week {
+		display: grid;
+		grid-template-rows: repeat(7, auto);
+		gap: 2px;
+	}
+
+	.day {
+		display: block;
+		aspect-ratio: 1;
+		min-width: 4px;
+		background: var(--green);
+		border-radius: 1px;
+	}
+
+	.day.empty {
+		background: color-mix(in srgb, var(--foreground) 10%, transparent);
+	}
+
+	.legend {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 3px;
+		margin-top: 0.4rem;
+		font-size: 0.7rem;
+	}
+
+	.legend .day {
+		width: 9px;
+	}
+
+	.loading {
+		margin: 0;
+		font-size: 0.8rem;
+	}
+</style>