refactor: Extract SatsDisplay component and fix page IDs

- Extract SatsDisplay component to shared components directory
- Fix page IDs: rename 'admin-appointments' to 'admin-trades'
- Fix trades page using correct 'trades' page ID

frontend/app/trades/page.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState, useCallback } from "react";
 import { Permission } from "../auth-context";
 import { api } from "../api";
 import { Header } from "../components/Header";
+import { SatsDisplay } from "../components/SatsDisplay";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { components } from "../generated/api";
 import { formatDateTime } from "../utils/date";
@@ -25,59 +26,6 @@ function formatEur(cents: number): string {
   return `€${(cents / 100).toLocaleString("de-DE")}`;
 }
 
-/**
- * Format satoshi amount with styled components
- * Leading zeros are subtle, main digits are prominent
- */
-function SatsDisplay({ sats }: { sats: number }) {
-  const btc = sats / 100_000_000;
-  const btcStr = btc.toFixed(8);
-  const [whole, decimal] = btcStr.split(".");
-
-  const part1 = decimal.slice(0, 2);
-  const part2 = decimal.slice(2, 5);
-  const part3 = decimal.slice(5, 8);
-
-  const fullDecimal = part1 + part2 + part3;
-  let firstNonZero = fullDecimal.length;
-  for (let i = 0; i < fullDecimal.length; i++) {
-    if (fullDecimal[i] !== "0") {
-      firstNonZero = i;
-      break;
-    }
-  }
-
-  const subtleStyle: React.CSSProperties = {
-    opacity: 0.45,
-    fontWeight: 400,
-  };
-
-  const renderPart = (part: string, startIdx: number) => {
-    return part.split("").map((char, i) => {
-      const globalIdx = startIdx + i;
-      const isSubtle = globalIdx < firstNonZero;
-      return (
-        <span key={globalIdx} style={isSubtle ? subtleStyle : undefined}>
-          {char}
-        </span>
-      );
-    });
-  };
-
-  return (
-    <span style={{ fontFamily: "'DM Mono', monospace" }}>
-      <span style={subtleStyle}>₿</span>
-      <span style={subtleStyle}> {whole}.</span>
-      {renderPart(part1, 0)}
-      <span> </span>
-      {renderPart(part2, 2)}
-      <span> </span>
-      {renderPart(part3, 5)}
-      <span> sats</span>
-    </span>
-  );
-}
-
 /**
  * Get status display properties
  */
@@ -192,7 +140,7 @@ export default function TradesPage() {
 
   return (
     <main style={layoutStyles.main}>
-      <Header currentPage="appointments" />
+      <Header currentPage="trades" />
       <div style={styles.content}>
         <h1 style={typographyStyles.pageTitle}>My Trades</h1>
         <p style={typographyStyles.pageSubtitle}>View and manage your Bitcoin trades</p>