feat: redesign devices list page with filter tabs, image/icon, verified stats

- Server component fetches data and passes as props (RSC pattern)
- Add device-type filter pills (All/Handheld/Console)
- Add device image with icon fallback
- Add verified count to stats row
- Fix deviceTypeLabel to use 'handheld' key
- Cap stagger animation delay at 0.5s
- Enhanced SEO metadata with keywords and OpenGraph

app/devices/page-client.tsx

@@ -1,15 +1,26 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import Link from "next/link"
+import Image from "next/image"
 import { motion } from "motion/react"
-import { Gamepad2Icon, TrendingUpIcon, DatabaseIcon, ArrowRightIcon, Loader2 } from "lucide-react"
+import {
+  Gamepad2Icon,
+  TrendingUpIcon,
+  DatabaseIcon,
+  ArrowRightIcon,
+  MonitorIcon,
+  CheckCircleIcon,
+} from "lucide-react"
+import { getDeviceColor } from "@/components/charts/EChartWrapper"
 
-interface DeviceStats {
+export interface DeviceStats {
   slug: string
   name: string
   deviceType: string
+  image: string | null
   sortOrder: number
+  colorIndex: number
   totalBenchmarks: number
   avgFps: number | null
   gameCount: number
@@ -27,46 +38,26 @@ const deviceTypeLabel: Record<string, string> = {
   console: "Console",
 }
 
-export function DevicesPageClient() {
-  const [devices, setDevices] = useState<DeviceStats[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+const deviceTypeColor: Record<string, string> = {
+  handheld: "text-primary bg-primary/10 border-primary/20",
+  console: "text-secondary bg-secondary/10 border-secondary/20",
+}
 
-  useEffect(() => {
-    async function fetchDevices() {
-      try {
-        const res = await fetch("/api/hardware/stats")
-        if (!res.ok) throw new Error(`HTTP ${res.status}`)
-        const data = await res.json()
-        setDevices(data)
-      } catch (err) {
-        setError("Failed to load devices")
-        console.error(err)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchDevices()
-  }, [])
+type FilterType = "all" | "handheld" | "console"
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-[50vh]">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
-    )
-  }
+const filterOptions: { id: FilterType; label: string }[] = [
+  { id: "all", label: "All" },
+  { id: "handheld", label: "Handheld" },
+  { id: "console", label: "Console" },
+]
 
-  if (error) {
-    return (
-      <div className="max-w-7xl mx-auto px-4 md:px-[10svw] py-8">
-        <div className="text-center py-16 text-text/40">
-          <Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
-          <p>{error}</p>
-        </div>
-      </div>
-    )
-  }
+export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
+  const [activeFilter, setActiveFilter] = useState<FilterType>("all")
+
+  const filteredDevices =
+    activeFilter === "all"
+      ? devices
+      : devices.filter((d) => d.deviceType === activeFilter)
 
   if (devices.length === 0) {
     return (
@@ -74,7 +65,9 @@ export function DevicesPageClient() {
         <div className="text-center py-16 text-text/40">
           <Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
           <p>No devices found</p>
-          <p className="text-sm mt-1">Benchmark data will appear as devices are added</p>
+          <p className="text-sm mt-1">
+            Benchmark data will appear as devices are added
+          </p>
         </div>
       </div>
     )
@@ -82,7 +75,7 @@ export function DevicesPageClient() {
 
   return (
     <section className="w-full flex flex-col gap-8 pb-16">
-      {/* Header */}
+      {/* Hero Header */}
       <motion.div
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
@@ -97,6 +90,32 @@ export function DevicesPageClient() {
         </div>
       </motion.div>
 
+      {/* Filter Tabs */}
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.05 }}
+        className="px-4 md:px-[10svw]"
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="flex items-center gap-2">
+            {filterOptions.map((opt) => (
+              <button
+                key={opt.id}
+                onClick={() => setActiveFilter(opt.id)}
+                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors cursor-pointer ${
+                  activeFilter === opt.id
+                    ? "bg-primary/10 text-primary border border-primary/30"
+                    : "text-text/50 hover:text-text/70 hover:bg-text/5 border border-transparent"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </motion.div>
+
       {/* Device Grid */}
       <motion.div
         initial={{ opacity: 0, y: 12 }}
@@ -105,62 +124,121 @@ export function DevicesPageClient() {
         className="px-4 md:px-[10svw]"
       >
         <div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {devices.map((device, i) => (
+          {filteredDevices.map((device, i) => (
             <motion.div
               key={device.slug}
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.3, delay: 0.05 * i }}
+              transition={{
+                duration: 0.3,
+                delay: Math.min(0.05 * i, 0.5),
+              }}
             >
               <Link
                 href={`/devices/${device.slug}`}
-                className="block p-5 rounded-xl border border-border bg-text/[0.03] hover:border-primary/30 transition-colors group"
+                className="block rounded-xl border border-border bg-text/[0.03] hover:border-primary/30 transition-colors group overflow-hidden"
               >
-                {/* Header */}
-                <div className="flex items-start justify-between gap-2 mb-3">
-                  <div>
-                    <h2 className="text-lg font-semibold group-hover:text-primary transition-colors">
-                      {device.name}
-                    </h2>
-                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-secondary/20 text-secondary border border-secondary/30 capitalize mt-1">
-                      <Gamepad2Icon className="h-2.5 w-2.5" />
-                      {deviceTypeLabel[device.deviceType] || device.deviceType}
-                    </span>
-                  </div>
-                  <ArrowRightIcon className="h-5 w-5 text-text/20 group-hover:text-primary transition-colors" />
+                {/* Image / Icon Header */}
+                <div
+                  className="relative h-28 flex items-center justify-center"
+                  style={{
+                    background: `${getDeviceColor(device.colorIndex)}08`,
+                  }}
+                >
+                  {device.image ? (
+                    <Image
+                      src={device.image}
+                      alt={device.name}
+                      fill
+                      className="object-contain p-4"
+                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    />
+                  ) : (
+                    <Gamepad2Icon
+                      className="h-12 w-12"
+                      style={{
+                        color: getDeviceColor(device.colorIndex),
+                        opacity: 0.6,
+                      }}
+                    />
+                  )}
                 </div>
 
-                {/* Stats */}
-                <div className="grid grid-cols-3 gap-3 mt-4">
-                  <div className="flex flex-col items-center text-center">
-                    <DatabaseIcon className="h-4 w-4 text-primary mb-1" />
-                    <span className="text-lg font-bold tabular-nums">{device.totalBenchmarks}</span>
-                    <span className="text-[10px] text-text/50">Benchmarks</span>
+                {/* Card Body */}
+                <div className="p-5">
+                  {/* Name & Type */}
+                  <div className="flex items-start justify-between gap-2 mb-3">
+                    <div>
+                      <h2 className="text-lg font-semibold group-hover:text-primary transition-colors">
+                        {device.name}
+                      </h2>
+                      <span
+                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border capitalize mt-1 ${
+                          deviceTypeColor[device.deviceType] ||
+                          "text-text/50 bg-text/5 border-border"
+                        }`}
+                      >
+                        <Gamepad2Icon className="h-2.5 w-2.5" />
+                        {deviceTypeLabel[device.deviceType] || device.deviceType}
+                      </span>
+                    </div>
+                    <ArrowRightIcon className="h-5 w-5 text-text/20 group-hover:text-primary transition-colors" />
                   </div>
-                  <div className="flex flex-col items-center text-center">
-                    <TrendingUpIcon className="h-4 w-4 text-green-400 mb-1" />
-                    <span className="text-lg font-bold tabular-nums">
-                      {device.avgFps !== null ? device.avgFps : "—"}
-                    </span>
-                    <span className="text-[10px] text-text/50">Avg FPS</span>
-                  </div>
-                  <div className="flex flex-col items-center text-center">
-                    <Gamepad2Icon className="h-4 w-4 text-accent mb-1" />
-                    <span className="text-lg font-bold tabular-nums">{device.gameCount}</span>
-                    <span className="text-[10px] text-text/50">Games</span>
-                  </div>
-                </div>
 
-                {/* Best game */}
-                {device.bestGame && (
-                  <div className="mt-3 pt-3 border-t border-border text-xs text-text/50">
-                    Top: <span className="text-text/80 font-medium">{device.bestGame.title}</span> · {device.bestGame.fpsAvg} FPS
+                  {/* Stats Row */}
+                  <div className="grid grid-cols-4 gap-2 mt-4">
+                    <div className="flex flex-col items-center text-center">
+                      <DatabaseIcon className="h-3.5 w-3.5 text-primary mb-1" />
+                      <span className="text-base font-bold tabular-nums">
+                        {device.totalBenchmarks}
+                      </span>
+                      <span className="text-[9px] text-text/50">Benchmarks</span>
+                    </div>
+                    <div className="flex flex-col items-center text-center">
+                      <TrendingUpIcon className="h-3.5 w-3.5 text-green-400 mb-1" />
+                      <span className="text-base font-bold tabular-nums">
+                        {device.avgFps !== null ? device.avgFps : "—"}
+                      </span>
+                      <span className="text-[9px] text-text/50">Avg FPS</span>
+                    </div>
+                    <div className="flex flex-col items-center text-center">
+                      <MonitorIcon className="h-3.5 w-3.5 text-accent mb-1" />
+                      <span className="text-base font-bold tabular-nums">
+                        {device.gameCount}
+                      </span>
+                      <span className="text-[9px] text-text/50">Games</span>
+                    </div>
+                    <div className="flex flex-col items-center text-center">
+                      <CheckCircleIcon className="h-3.5 w-3.5 text-blue-400 mb-1" />
+                      <span className="text-base font-bold tabular-nums">
+                        {device.verifiedCount}
+                      </span>
+                      <span className="text-[9px] text-text/50">Verified</span>
+                    </div>
                   </div>
-                )}
+
+                  {/* Best game */}
+                  {device.bestGame && (
+                    <div className="mt-3 pt-3 border-t border-border text-xs text-text/50">
+                      Top:{" "}
+                      <span className="text-text/80 font-medium">
+                        {device.bestGame.title}
+                      </span>{" "}
+                      · {device.bestGame.fpsAvg} FPS
+                    </div>
+                  )}
+                </div>
               </Link>
             </motion.div>
           ))}
         </div>
+
+        {filteredDevices.length === 0 && devices.length > 0 && (
+          <div className="text-center py-12 text-text/40">
+            <Gamepad2Icon className="h-8 w-8 mx-auto mb-2" />
+            <p>No {activeFilter} devices found</p>
+          </div>
+        )}
       </motion.div>
     </section>
   )