feat(ui): update currency toggle to minimalistic dropdown

- Replace toggle group with dropdown menu for currency selection
- Update currency formatting to round USD to 2 decimals
- Improve header space utilization

ui/components/currency-toggle.tsx

@@ -3,9 +3,16 @@
 import { useCurrencyStore } from '@/lib/stores/currency';
 import { useQuery } from '@tanstack/react-query';
 import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useEffect } from 'react';
 import type { DisplayUnit } from '@/lib/types/units';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { Coins } from 'lucide-react';
 
 export function CurrencyToggle() {
   const { displayUnit, setDisplayUnit } = useCurrencyStore();
@@ -25,34 +32,43 @@ export function CurrencyToggle() {
     }
   }, [displayUnit, usdPerSat, setDisplayUnit]);
 
+  const getLabel = (unit: DisplayUnit) => {
+    switch (unit) {
+      case 'msat':
+        return 'mSAT';
+      case 'sat':
+        return 'sat';
+      case 'usd':
+        return 'USD';
+      default:
+        return unit;
+    }
+  };
+
   return (
-    <ToggleGroup
-      type='single'
-      value={displayUnit}
-      onValueChange={(value) => {
-        if (value) {
-          setDisplayUnit(value as DisplayUnit);
-        }
-      }}
-      variant='outline'
-      size='sm'
-      className="mr-2"
-    >
-      <ToggleGroupItem value='msat' aria-label="Toggle msat" title="Millisatoshis">
-        mSAT
-      </ToggleGroupItem>
-      <ToggleGroupItem value='sat' aria-label="Toggle sat" title="Satoshis">
-        sat
-      </ToggleGroupItem>
-      <ToggleGroupItem 
-        value='usd' 
-        disabled={!usdPerSat} 
-        aria-label="Toggle usd" 
-        title="US Dollar (approx)"
-      >
-        USD
-      </ToggleGroupItem>
-    </ToggleGroup>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-9 w-9 px-0 gap-2 w-auto px-3 font-normal">
+          <Coins className="h-4 w-4" />
+          <span className="hidden sm:inline-block">{getLabel(displayUnit)}</span>
+          <span className="sm:hidden uppercase">{displayUnit}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setDisplayUnit('msat')}>
+          Millisatoshis (mSAT)
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setDisplayUnit('sat')}>
+          Satoshis (sat)
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => setDisplayUnit('usd')}
+          disabled={!usdPerSat}
+        >
+          US Dollar (USD)
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }