Overlay Gitea contributions on btop commit graph

src/lib/components/btop/ContributionPanel.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
-	import type { BtopData } from '#lib/btop/types';
+	import type { BtopData, ContributionDay } 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 levelOpacity = [1, 0.35, 0.6, 0.8, 1];
 
 	const calendar = $derived(data?.contributions ?? null);
+
+	function dayBackground({ githubCount, giteaCount }: ContributionDay): string | undefined {
+		if (githubCount > 0 && giteaCount > 0) return 'linear-gradient(135deg, var(--green) 50%, var(--orange) 50%)';
+		if (giteaCount > 0) return 'var(--orange)';
+		if (githubCount > 0) return 'var(--green)';
+		return undefined;
+	}
+
+	function dayTitle(day: ContributionDay): string {
+		return `${day.count} contributions on ${day.date} (GitHub ${day.githubCount}, Gitea ${day.giteaCount})`;
+	}
 </script>
 
 <BtopBox title="net · commits" number={3} color="blue">
@@ -19,27 +30,38 @@
 			{/if}
 		</div>
 
-		<a class="heatmap" href={data.github.profileUrl} target="_blank" rel="noopener noreferrer" aria-label="GitHub contribution graph">
+		<div class="heatmap" aria-label="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}"
+							class:empty={day.count === 0}
+							style:background={dayBackground(day)}
+							style:opacity={levelOpacity[day.level]}
+							title={dayTitle(day)}
 						></span>
 					{/each}
 				</span>
 			{/each}
-		</a>
+		</div>
 
-		<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 class="legend">
+			<a class="source" href={data.github.profileUrl} target="_blank" rel="noopener noreferrer">
+				<span class="swatch github"></span>GitHub <b>{calendar.githubTotal.toLocaleString('en-US')}</b>
+			</a>
+			{#if calendar.giteaProfileUrl}
+				<a class="source" href={calendar.giteaProfileUrl} target="_blank" rel="noopener noreferrer">
+					<span class="swatch gitea"></span>Gitea <b>{calendar.giteaTotal.toLocaleString('en-US')}</b>
+				</a>
+			{/if}
+			<span class="scale muted">
+				less
+				{#each levelOpacity as opacity, level (level)}
+					<span class="swatch" class:empty={level === 0} style:opacity></span>
+				{/each}
+				more
+			</span>
 		</div>
 	{:else}
 		<p class="muted loading">connecting to github...</p>
@@ -76,25 +98,57 @@
 		display: block;
 		aspect-ratio: 1;
 		min-width: 4px;
-		background: var(--green);
 		border-radius: 1px;
 	}
 
-	.day.empty {
+	.empty {
 		background: color-mix(in srgb, var(--foreground) 10%, transparent);
 	}
 
 	.legend {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
-		justify-content: flex-end;
-		gap: 3px;
-		margin-top: 0.4rem;
-		font-size: 0.7rem;
+		gap: 0.3rem 0.9rem;
+		margin-top: 0.5rem;
+		font-size: 0.72rem;
 	}
 
-	.legend .day {
+	.source {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+	}
+
+	.source:hover {
+		color: var(--accent);
+	}
+
+	.source b {
+		color: var(--blue);
+	}
+
+	.scale {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		margin-left: auto;
+	}
+
+	.swatch {
+		display: inline-block;
 		width: 9px;
+		height: 9px;
+		border-radius: 1px;
+		background: var(--green);
+	}
+
+	.swatch.gitea {
+		background: var(--orange);
+	}
+
+	.swatch.empty {
+		background: color-mix(in srgb, var(--foreground) 10%, transparent);
 	}
 
 	.loading {