Add Bank accounts, transactions, and pending transfer views

src/routes/leaderboard/players/[guid]/+page.svelte

@@ -164,8 +164,13 @@
             description="Stats appear after a game's end report arrives, provided this player was observed at round 2 or later. Games without an end report do not contribute."
         />
     {/if}
-    <section aria-labelledby="bank-title">
-        <h2 id="bank-title">Bank</h2>
+    <section class="bank-card" aria-labelledby="bank-title">
+        <div class="bank-heading">
+            <h2 id="bank-title">Bank</h2>
+            <Button size="sm" href={`/bank?player=${encodeURIComponent(profile.guid)}`}
+                >View bank history</Button
+            >
+        </div>
         <p>
             <strong>{number.format(data.bank.balance)} points</strong> shared across Black Ops I and II.
         </p>
@@ -184,7 +189,7 @@
                         ></thead
                     >
                     <tbody
-                        >{#each data.bank.entries as entry (entry.id)}
+                        >{#each data.bank.entries.slice(0, 3) as entry (entry.id)}
                             <tr
                                 ><td>{$timeFormat.dateTime(entry.createdAt)}</td><td
                                     >{serverTitle(entry.server)}</td
@@ -499,6 +504,22 @@
 </Dialog>
 
 <style>
+    .bank-card {
+        padding: var(--space-5);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+    }
+    .bank-heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: var(--space-3);
+    }
+    .bank-heading h2 {
+        margin: 0;
+    }
     .profile {
         display: flex;
         flex-direction: column;