Add AFK account and session overview (Refs #151)

src/lib/ui/components/AfkReserveCard.svelte

@@ -3,8 +3,9 @@
     import { formatDuration } from '$ui/duration.js';
     import { timeFormat } from '$ui/stores/time-zone.js';
     import { serverTitle } from '$ui/server-labels.js';
+    import Button from './primitives/Button.svelte';
 
-    let { account }: { account: ReturnType<typeof afkProfile> } = $props();
+    let { account, guid }: { account: ReturnType<typeof afkProfile>; guid?: string } = $props();
     const duration = (seconds: number) => formatDuration(seconds * 1000);
     const change = (seconds: number) =>
         `${seconds > 0 ? '+' : seconds < 0 ? '−' : ''}${duration(Math.abs(seconds))}`;
@@ -12,7 +13,12 @@
 </script>
 
 <section aria-labelledby="afk-title">
-    <h2 id="afk-title">AFK reserve</h2>
+    <div class="heading">
+        <h2 id="afk-title">AFK reserve</h2>
+        {#if guid}<Button size="sm" href={`/afk?view=ledger&player=${encodeURIComponent(guid)}`}
+                >View AFK history</Button
+            >{/if}
+    </div>
     <p>
         <strong>{duration(account.freeSeconds)} free</strong> and
         <strong>{duration(account.savedSeconds)} saved</strong>, shared across Black Ops I and II.
@@ -164,6 +170,13 @@
         margin: 0 0 var(--space-2);
         font-size: var(--text-lg);
     }
+    .heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: var(--space-3);
+    }
     dl {
         display: flex;
         flex-wrap: wrap;