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,24 +124,60 @@ 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 */}
+                {/* 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>
+
+                {/* 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 bg-secondary/20 text-secondary border border-secondary/30 capitalize mt-1">
+                      <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>
@@ -130,37 +185,60 @@ export function DevicesPageClient() {
                     <ArrowRightIcon className="h-5 w-5 text-text/20 group-hover:text-primary transition-colors" />
                   </div>
 
-                {/* Stats */}
-                <div className="grid grid-cols-3 gap-3 mt-4">
+                  {/* Stats Row */}
+                  <div className="grid grid-cols-4 gap-2 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>
+                      <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-4 w-4 text-green-400 mb-1" />
-                    <span className="text-lg font-bold tabular-nums">
+                      <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-[10px] text-text/50">Avg FPS</span>
+                      <span className="text-[9px] 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>
+                      <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
+                      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>
   )

app/devices/page.tsx

@@ -1,15 +1,106 @@
 import { db } from "@/lib/db/index"
-import { hardware } from "@/lib/db/schema"
+import { hardware, performanceEntries, gameVersions, games } from "@/lib/db/schema"
+import { eq, sql, desc } from "drizzle-orm"
 import { DevicesPageClient } from "./page-client"
+import type { Metadata } from "next"
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Devices — DeckyVault",
-    description: "Browse handheld and console devices with benchmark data on DeckyVault",
+  description:
+    "Browse benchmark data for handheld and console gaming devices. Compare FPS, performance stats, and community benchmarks on DeckyVault.",
+  keywords: ["steam deck", "handheld", "console", "benchmarks", "FPS", "performance", "devices"],
   alternates: { canonical: "https://deckyvault.xyz/devices" },
+  openGraph: {
+    title: "Devices — DeckyVault",
+    description:
+      "Browse benchmark data for handheld and console gaming devices on DeckyVault.",
+    url: "https://deckyvault.xyz/devices",
+    siteName: "DeckyVault",
+    type: "website",
+  },
 }
 
 export default async function DevicesPage() {
-    const devices = await db.select({ slug: hardware.slug, name: hardware.name }).from(hardware)
+  const deviceRows = await db
+    .select({
+      slug: hardware.slug,
+      name: hardware.name,
+      deviceType: hardware.deviceType,
+      image: hardware.image,
+      sortOrder: hardware.sortOrder,
+    })
+    .from(hardware)
+    .orderBy(hardware.sortOrder)
+
+  const statsPerDevice = await db
+    .select({
+      hardwareSlug: performanceEntries.hardwareSlug,
+      totalBenchmarks: sql<number>`count(*)::int`,
+      avgFps: sql<number>`round(avg(${performanceEntries.fpsAvg})::numeric, 1)`,
+      verifiedCount: sql<number>`count(*) filter (where ${performanceEntries.verifiedAt} is not null)::int`,
+      gameCount: sql<number>`count(distinct ${gameVersions.gameId})::int`,
+    })
+    .from(performanceEntries)
+    .innerJoin(gameVersions, eq(performanceEntries.versionId, gameVersions.id))
+    .innerJoin(games, eq(gameVersions.gameId, games.id))
+    .innerJoin(hardware, eq(performanceEntries.hardwareSlug, hardware.slug))
+    .where(eq(performanceEntries.isRemoved, false))
+    .groupBy(performanceEntries.hardwareSlug)
+
+  const statsMap = new Map(statsPerDevice.map((s) => [s.hardwareSlug, s]))
+
+  const bestGames = await db
+    .select({
+      hardwareSlug: performanceEntries.hardwareSlug,
+      gameId: games.id,
+      gameTitle: games.title,
+      gameHeaderImage: games.headerImage,
+      fpsAvg: sql<number>`round(avg(${performanceEntries.fpsAvg})::numeric, 1)`,
+    })
+    .from(performanceEntries)
+    .innerJoin(gameVersions, eq(performanceEntries.versionId, gameVersions.id))
+    .innerJoin(games, eq(gameVersions.gameId, games.id))
+    .where(eq(performanceEntries.isRemoved, false))
+    .groupBy(
+      performanceEntries.hardwareSlug,
+      games.id,
+      games.title,
+      games.headerImage,
+    )
+    .orderBy(desc(sql`avg(${performanceEntries.fpsAvg})`))
+
+  const bestGameMap = new Map<
+    string,
+    { id: string; title: string; headerImage: string | null; fpsAvg: number }
+  >()
+  for (const bg of bestGames) {
+    if (!bestGameMap.has(bg.hardwareSlug)) {
+      bestGameMap.set(bg.hardwareSlug, {
+        id: bg.gameId,
+        title: bg.gameTitle,
+        headerImage: bg.gameHeaderImage,
+        fpsAvg: Number(bg.fpsAvg),
+      })
+    }
+  }
+
+  const devices = deviceRows.map((device, index) => {
+    const stats = statsMap.get(device.slug)
+    const bestGame = bestGameMap.get(device.slug)
+    return {
+      slug: device.slug,
+      name: device.name,
+      deviceType: device.deviceType,
+      image: device.image,
+      sortOrder: device.sortOrder,
+      colorIndex: index,
+      totalBenchmarks: stats?.totalBenchmarks ?? 0,
+      avgFps: stats?.avgFps ? Number(stats.avgFps) : null,
+      gameCount: stats?.gameCount ?? 0,
+      verifiedCount: stats?.verifiedCount ?? 0,
+      bestGame: bestGame ?? null,
+    }
+  })
 
   const jsonLd = {
     "@context": "https://schema.org",
@@ -24,8 +115,11 @@ export default async function DevicesPage() {
 
   return (
     <>
-            <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
-            <DevicesPageClient />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <DevicesPageClient devices={devices} />
     </>
   )
 }