From ff360c6ab463e5dac09cad20fd546815236ebd64 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sat, 9 May 2026 23:27:37 +0800
Subject: [PATCH] feat: display wattHours and tdpMax on device cards

---
 app/devices/page-client.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/devices/page-client.tsx b/app/devices/page-client.tsx
index 2708308..0e392f5 100644
--- a/app/devices/page-client.tsx
+++ b/app/devices/page-client.tsx
@@ -11,6 +11,8 @@ import {
     ArrowRightIcon,
     MonitorIcon,
     CheckCircleIcon,
+    Zap,
+    Gauge,
 } from "lucide-react"
 import { getDeviceColor } from "@/components/charts/EChartWrapper"
 
@@ -31,6 +33,8 @@ export interface DeviceStats {
         headerImage: string | null
         fpsAvg: number
     } | null
+    wattHours: number | null
+    tdpMax: number | null
 }
 
 const deviceTypeLabel: Record<string, string> = {
@@ -233,6 +237,24 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
                                         </div>
                                     </div>
 
+                                    {/* Power specs */}
+                                    {(device.wattHours || device.tdpMax) && (
+                                        <div className="flex items-center gap-3 mt-3 text-xs text-text/40">
+                                            {device.wattHours && (
+                                                <span className="inline-flex items-center gap-1">
+                                                    <Zap className="h-3 w-3" />
+                                                    {Math.round(device.wattHours)}Wh
+                                                </span>
+                                            )}
+                                            {device.tdpMax && (
+                                                <span className="inline-flex items-center gap-1">
+                                                    <Gauge className="h-3 w-3" />
+                                                    Up to {Math.round(device.tdpMax)}W TDP
+                                                </span>
+                                            )}
+                                        </div>
+                                    )}
+
                                     {/* Best game */}
                                     {device.bestGame && (
                                         <div className='mt-3 pt-3 border-t border-border text-xs text-text/50'>