Add hobby stats and graphs to btop

src/lib/components/btop/charts/CountBars.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { CountStat } from '#lib/btop/types';
+
+	let { items }: { items: CountStat[] } = $props();
+
+	const highest = $derived(Math.max(1, ...items.map((item) => item.count)));
+</script>
+
+<div class="count-bars">
+	{#each items as item (item.label)}
+		<span class="label" title={item.label}>{item.label}</span>
+		<span class="track"><span style:width="{(item.count / highest) * 100}%" style:background="var(--{item.color})"></span></span>
+		<span class="count" style:color="var(--{item.color})">{item.count}</span>
+	{/each}
+</div>
+
+<style>
+	.count-bars {
+		display: grid;
+		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
+		align-items: center;
+		gap: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.label {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.track {
+		display: block;
+		height: 6px;
+		background: color-mix(in srgb, var(--foreground) 10%, transparent);
+	}
+
+	.track span {
+		display: block;
+		height: 100%;
+	}
+
+	.count {
+		text-align: right;
+	}
+</style>