adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: transfer admin check to middleware and add vertical padding

Browse Source
This commit is contained in:
adrianbonpin
2026-04-27 23:47:24 +08:00
parent 647a26db94
commit f35b6aee1e
5 changed files with 793 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(admin)/layout.tsx
+12 -20
View File
@@ -1,11 +1,11 @@
import { redirect } from "next/navigation"
import { headers } from "next/headers"
import { auth } from "@/lib/auth"
import { AdminSidebar } from "@/components/admin/admin-sidebar" import { AdminSidebar } from "@/components/admin/admin-sidebar"
import type { Metadata } from "next" import type { Metadata } from "next"
export const metadata: Metadata = { export const metadata: Metadata = {
title: { template: "%s | Admin — DeckyVault", default: "Admin — DeckyVault" }, title: {
template: "%s | Admin — DeckyVault",
default: "Admin — DeckyVault",
},
robots: { index: false, follow: false }, robots: { index: false, follow: false },
} }
@@ -14,29 +14,21 @@ export default async function AdminLayout({
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const session = await auth.api.getSession({
headers: await headers(),
})
if (!session || session.user.role !== "admin") {
redirect("/")
}
return ( return (
<section className="w-full flex flex-col gap-8 pb-16"> <section className='w-full flex flex-col gap-8 py-16'>
<div className="px-4 md:px-[10svw]"> <div className='px-4 md:px-[10svw]'>
<div className="max-w-7xl mx-auto"> <div className='max-w-7xl mx-auto'>
<h1 className="text-2xl sm:text-3xl font-bold">Admin</h1> <h1 className='text-2xl sm:text-3xl font-bold'>Admin</h1>
<p className="text-sm text-text/60 mt-1"> <p className='text-sm text-text/60 mt-1'>
Manage users, hardware, and games Manage users, hardware, and games
</p> </p>
</div> </div>
</div> </div>
<div className="px-4 md:px-[10svw]"> <div className='px-4 md:px-[10svw]'>
<div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-6"> <div className='max-w-7xl mx-auto flex flex-col md:flex-row gap-6'>
<AdminSidebar /> <AdminSidebar />
<div className="flex-1 min-w-0">{children}</div> <div className='flex-1 min-w-0'>{children}</div>
</div> </div>
</div> </div>
</section> </section>
app/devices/[slug]/device-detail-client.tsx
+218 -95
View File
@@ -127,7 +127,9 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
yAxis: { yAxis: {
type: "value", type: "value",
axisLine: { lineStyle: { color: CHART_THEME.border } }, axisLine: { lineStyle: { color: CHART_THEME.border } },
splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } }, splitLine: {
lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
},
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 }, axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
}, },
series: [ series: [
@@ -139,7 +141,10 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
areaStyle: { areaStyle: {
color: { color: {
type: "linear", type: "linear",
x: 0, y: 0, x2: 0, y2: 1, x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: deviceColor + "40" }, { offset: 0, color: deviceColor + "40" },
{ offset: 1, color: deviceColor + "05" }, { offset: 1, color: deviceColor + "05" },
@@ -168,21 +173,36 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
type: "category", type: "category",
data: stats.boxplot.map((b) => b.gameTitle), data: stats.boxplot.map((b) => b.gameTitle),
axisLine: { lineStyle: { color: CHART_THEME.border } }, axisLine: { lineStyle: { color: CHART_THEME.border } },
axisLabel: { color: CHART_THEME.textMuted, fontSize: 10, rotate: 30 }, axisLabel: {
color: CHART_THEME.textMuted,
fontSize: 10,
rotate: 30,
},
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "FPS", name: "FPS",
axisLine: { lineStyle: { color: CHART_THEME.border } }, axisLine: { lineStyle: { color: CHART_THEME.border } },
splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } }, splitLine: {
lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
},
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 }, axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 }, nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
}, },
series: [ series: [
{ {
type: "boxplot", type: "boxplot",
data: stats.boxplot.map((b) => [b.min, b.q1, b.median, b.q3, b.max]), data: stats.boxplot.map((b) => [
itemStyle: { color: deviceColor + "30", borderColor: deviceColor }, b.min,
b.q1,
b.median,
b.q3,
b.max,
]),
itemStyle: {
color: deviceColor + "30",
borderColor: deviceColor,
},
}, },
], ],
} }
@@ -206,12 +226,17 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
name: g.genre, name: g.genre,
value: g.count, value: g.count,
itemStyle: { itemStyle: {
color: CHART_THEME.deviceColors[i % CHART_THEME.deviceColors.length], color: CHART_THEME.deviceColors[
i % CHART_THEME.deviceColors.length
],
}, },
})), })),
label: { color: CHART_THEME.textMuted, fontSize: 10 }, label: { color: CHART_THEME.textMuted, fontSize: 10 },
emphasis: { emphasis: {
itemStyle: { shadowBlur: 10, shadowColor: "rgba(0,0,0,0.5)" }, itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0,0,0,0.5)",
},
}, },
}, },
], ],
@@ -219,18 +244,18 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
}, [stats]) }, [stats])
return ( return (
<section className="w-full flex flex-col gap-8 pb-16"> <section className='w-full flex flex-col gap-8 py-16'>
{/* Hero Header */} {/* Hero Header */}
<motion.div <motion.div
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }} transition={{ duration: 0.4 }}
className="px-4 md:px-[10svw]" className='px-4 md:px-[10svw]'
> >
<div className="max-w-7xl mx-auto"> <div className='max-w-7xl mx-auto'>
<div className="flex items-center gap-4 mb-2"> <div className='flex items-center gap-4 mb-2'>
<div <div
className="flex items-center justify-center h-14 w-14 rounded-xl shrink-0" className='flex items-center justify-center h-14 w-14 rounded-xl shrink-0'
style={{ background: `${deviceColor}15` }} style={{ background: `${deviceColor}15` }}
> >
{device.image ? ( {device.image ? (
@@ -239,33 +264,42 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
alt={device.name} alt={device.name}
width={56} width={56}
height={56} height={56}
className="object-contain" className='object-contain'
/> />
) : ( ) : (
<Gamepad2Icon className="h-7 w-7" style={{ color: deviceColor }} /> <Gamepad2Icon
className='h-7 w-7'
style={{ color: deviceColor }}
/>
)} )}
</div> </div>
<div> <div>
<h1 className="text-2xl sm:text-3xl font-bold">{device.name}</h1> <h1 className='text-2xl sm:text-3xl font-bold'>
<div className="flex items-center gap-2 mt-1"> {device.name}
</h1>
<div className='flex items-center gap-2 mt-1'>
<span <span
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border capitalize ${ className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border capitalize ${
deviceTypeColor[device.deviceType] || "text-text/50 bg-text/5 border-border" deviceTypeColor[device.deviceType] ||
"text-text/50 bg-text/5 border-border"
}`} }`}
> >
<Gamepad2Icon className="h-3 w-3" /> <Gamepad2Icon className='h-3 w-3' />
{deviceTypeLabel[device.deviceType] || device.deviceType} {deviceTypeLabel[device.deviceType] ||
device.deviceType}
</span> </span>
{stats && stats.verifiedCount > 0 && ( {stats && stats.verifiedCount > 0 && (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20"> <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20'>
<CheckCircleIcon className="h-3 w-3" /> <CheckCircleIcon className='h-3 w-3' />
{stats.verifiedCount} verified {stats.verifiedCount} verified
</span> </span>
)} )}
</div> </div>
</div> </div>
</div> </div>
<p className="text-sm text-text/60">Performance benchmarks and statistics</p> <p className='text-sm text-text/60'>
Performance benchmarks and statistics
</p>
</div> </div>
</motion.div> </motion.div>
@@ -275,35 +309,55 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.05 }} transition={{ duration: 0.4, delay: 0.05 }}
className="px-4 md:px-[10svw]" className='px-4 md:px-[10svw]'
> >
<div className="max-w-7xl mx-auto flex flex-wrap gap-4"> <div className='max-w-7xl mx-auto flex flex-wrap gap-4'>
<StatCard icon={DatabaseIcon} label="Total Benchmarks" value={String(stats.totalBenchmarks)} /> <StatCard
<StatCard icon={TrendingUpIcon} label="Average FPS" value={stats.avgFps !== null ? String(stats.avgFps) : "—"} /> icon={DatabaseIcon}
<StatCard icon={MonitorIcon} label="Games Tested" value={String(stats.gameCount)} /> label='Total Benchmarks'
<StatCard icon={CheckCircleIcon} label="Verified" value={String(stats.verifiedCount)} /> value={String(stats.totalBenchmarks)}
/>
<StatCard
icon={TrendingUpIcon}
label='Average FPS'
value={
stats.avgFps !== null
? String(stats.avgFps)
: "—"
}
/>
<StatCard
icon={MonitorIcon}
label='Games Tested'
value={String(stats.gameCount)}
/>
<StatCard
icon={CheckCircleIcon}
label='Verified'
value={String(stats.verifiedCount)}
/>
</div> </div>
</motion.div> </motion.div>
)} )}
{/* Loading */} {/* Loading */}
{loading && ( {loading && (
<div className="flex items-center justify-center py-16"> <div className='flex items-center justify-center py-16'>
<Loader2 className="h-8 w-8 animate-spin text-primary" /> <Loader2 className='h-8 w-8 animate-spin text-primary' />
</div> </div>
)} )}
{/* Error State */} {/* Error State */}
{error && !loading && ( {error && !loading && (
<div className="px-4 md:px-[10svw]"> <div className='px-4 md:px-[10svw]'>
<div className="max-w-7xl mx-auto text-center py-16 text-text/40"> <div className='max-w-7xl mx-auto text-center py-16 text-text/40'>
<Gamepad2Icon className="h-10 w-10 mx-auto mb-3" /> <Gamepad2Icon className='h-10 w-10 mx-auto mb-3' />
<p className="text-text/60 mb-4">{error}</p> <p className='text-text/60 mb-4'>{error}</p>
<button <button
onClick={fetchStats} onClick={fetchStats}
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors cursor-pointer" className='inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors cursor-pointer'
> >
<RefreshCwIcon className="h-4 w-4" /> <RefreshCwIcon className='h-4 w-4' />
Retry Retry
</button> </button>
</div> </div>
@@ -316,48 +370,75 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.1 }} transition={{ duration: 0.4, delay: 0.1 }}
className="px-4 md:px-[10svw]" className='px-4 md:px-[10svw]'
> >
<div className="max-w-7xl mx-auto flex flex-col gap-6"> <div className='max-w-7xl mx-auto flex flex-col gap-6'>
{stats.historical.length > 0 && ( {stats.historical.length > 0 && (
<div className="rounded-xl border border-border bg-text/[0.03] p-4"> <div className='rounded-xl border border-border bg-text/3 p-4'>
<h3 className="text-sm font-medium text-text/80 mb-2">Historical Performance</h3> <h3 className='text-sm font-medium text-text/80 mb-2'>
<EChartWrapper option={historicalOption} height={280} /> Historical Performance
</h3>
<EChartWrapper
option={historicalOption}
height={280}
/>
</div> </div>
)} )}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
{stats.boxplot.length > 0 && ( {stats.boxplot.length > 0 && (
<div className="rounded-xl border border-border bg-text/[0.03] p-4"> <div className='rounded-xl border border-border bg-text/3 p-4'>
<h3 className="text-sm font-medium text-text/80 mb-2">FPS Distribution by Game</h3> <h3 className='text-sm font-medium text-text/80 mb-2'>
<EChartWrapper option={boxplotOption} height={300} /> FPS Distribution by Game
</h3>
<EChartWrapper
option={boxplotOption}
height={300}
/>
</div> </div>
)} )}
{stats.genreBreakdown.length > 0 && ( {stats.genreBreakdown.length > 0 && (
<div className="rounded-xl border border-border bg-text/[0.03] p-4"> <div className='rounded-xl border border-border bg-text/3 p-4'>
<h3 className="text-sm font-medium text-text/80 mb-2">Genre Breakdown</h3> <h3 className='text-sm font-medium text-text/80 mb-2'>
<EChartWrapper option={genreOption} height={300} /> Genre Breakdown
</h3>
<EChartWrapper
option={genreOption}
height={300}
/>
</div> </div>
)} )}
</div> </div>
{(stats.protonBreakdown.length > 0 || stats.upscalerBreakdown.length > 0) && ( {(stats.protonBreakdown.length > 0 ||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> stats.upscalerBreakdown.length > 0) && (
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
{stats.protonBreakdown.length > 0 && ( {stats.protonBreakdown.length > 0 && (
<div className="rounded-xl border border-border bg-text/[0.03] p-4"> <div className='rounded-xl border border-border bg-text/3 p-4'>
<h3 className="text-sm font-medium text-text/80 mb-3">Proton Version Distribution</h3> <h3 className='text-sm font-medium text-text/80 mb-3'>
<div className="space-y-2"> Proton Version Distribution
</h3>
<div className='space-y-2'>
{stats.protonBreakdown.map((p) => ( {stats.protonBreakdown.map((p) => (
<div key={p.version} className="flex items-center justify-between text-sm">
<span className="text-text/70">{p.version}</span>
<div className="flex items-center gap-2">
<div className="w-24 h-1.5 rounded-full bg-text/10 overflow-hidden">
<div <div
className="h-full rounded-full bg-primary" key={p.version}
style={{ width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%` }} className='flex items-center justify-between text-sm'
>
<span className='text-text/70'>
{p.version}
</span>
<div className='flex items-center gap-2'>
<div className='w-24 h-1.5 rounded-full bg-text/10 overflow-hidden'>
<div
className='h-full rounded-full bg-primary'
style={{
width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%`,
}}
/> />
</div> </div>
<span className="text-text/50 text-xs">{p.count}</span> <span className='text-text/50 text-xs'>
{p.count}
</span>
</div> </div>
</div> </div>
))} ))}
@@ -365,20 +446,34 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
</div> </div>
)} )}
{stats.upscalerBreakdown.length > 0 && ( {stats.upscalerBreakdown.length > 0 && (
<div className="rounded-xl border border-border bg-text/[0.03] p-4"> <div className='rounded-xl border border-border bg-text/3 p-4'>
<h3 className="text-sm font-medium text-text/80 mb-3">Upscaler Performance</h3> <h3 className='text-sm font-medium text-text/80 mb-3'>
<div className="space-y-2"> Upscaler Performance
{stats.upscalerBreakdown.map((f) => ( </h3>
<div key={f.upscalerType} className="flex items-center justify-between text-sm"> <div className='space-y-2'>
<span className="text-text/70 capitalize"> {stats.upscalerBreakdown.map(
{f.upscalerType === "none" ? "Native" : f.upscalerType.toUpperCase()} (f) => (
<div
key={f.upscalerType}
className='flex items-center justify-between text-sm'
>
<span className='text-text/70 capitalize'>
{f.upscalerType ===
"none"
? "Native"
: f.upscalerType.toUpperCase()}
</span>
<div className='flex items-center gap-2'>
<span className='text-text/80 font-medium tabular-nums'>
{f.avgFps} FPS
</span>
<span className='text-text/40 text-xs'>
({f.count})
</span> </span>
<div className="flex items-center gap-2">
<span className="text-text/80 font-medium tabular-nums">{f.avgFps} FPS</span>
<span className="text-text/40 text-xs">({f.count})</span>
</div> </div>
</div> </div>
))} ),
)}
</div> </div>
</div> </div>
)} )}
@@ -386,28 +481,44 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
)} )}
{stats.topGames.length > 0 && ( {stats.topGames.length > 0 && (
<div className="rounded-xl border border-border bg-text/[0.03] p-4"> <div className='rounded-xl border border-border bg-text/3 p-4'>
<h3 className="text-sm font-medium text-text/80 mb-3">Top Games by Average FPS</h3> <h3 className='text-sm font-medium text-text/80 mb-3'>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> Top Games by Average FPS
{stats.topGames.slice(0, 8).map((game, i) => ( </h3>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'>
{stats.topGames
.slice(0, 8)
.map((game, i) => (
<Link <Link
key={game.gameId} key={game.gameId}
href={`/game/${game.gameId}`} href={`/game/${game.gameId}`}
className="flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group" className='flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group'
>
<div
className='text-lg font-bold tabular-nums w-6'
style={{
color: deviceColor,
}}
> >
<div className="text-lg font-bold tabular-nums w-6" style={{ color: deviceColor }}>
{i + 1} {i + 1}
</div> </div>
<div className="min-w-0 flex-1"> <div className='min-w-0 flex-1'>
<p className="text-sm font-medium truncate group-hover:text-primary transition-colors"> <p className='text-sm font-medium truncate group-hover:text-primary transition-colors'>
{game.gameTitle} {game.gameTitle}
</p> </p>
<div className="flex items-center gap-2 text-xs text-text/50"> <div className='flex items-center gap-2 text-xs text-text/50'>
<span className="text-green-400 font-medium">{game.avgFps} FPS</span> <span className='text-green-400 font-medium'>
<span>{game.benchmarkCount} runs</span> {game.avgFps} FPS
</span>
<span>
{
game.benchmarkCount
}{" "}
runs
</span>
</div> </div>
</div> </div>
<ArrowRightIcon className="h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0" /> <ArrowRightIcon className='h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0' />
</Link> </Link>
))} ))}
</div> </div>
@@ -419,11 +530,13 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
{/* Empty state */} {/* Empty state */}
{stats && !loading && !error && stats.totalBenchmarks === 0 && ( {stats && !loading && !error && stats.totalBenchmarks === 0 && (
<div className="max-w-7xl mx-auto px-4 md:px-[10svw]"> <div className='max-w-7xl mx-auto px-4 md:px-[10svw]'>
<div className="text-center py-16 text-text/40"> <div className='text-center py-16 text-text/40'>
<Gamepad2Icon className="h-10 w-10 mx-auto mb-2" /> <Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
<p>No benchmark data yet for this device</p> <p>No benchmark data yet for this device</p>
<p className="text-sm mt-1">Data will appear as benchmarks are submitted</p> <p className='text-sm mt-1'>
Data will appear as benchmarks are submitted
</p>
</div> </div>
</div> </div>
)} )}
@@ -431,15 +544,25 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
) )
} }
function StatCard({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: string }) { function StatCard({
icon: Icon,
label,
value,
}: {
icon: React.ElementType
label: string
value: string
}) {
return ( return (
<div className="flex items-center gap-3 p-4 rounded-xl border border-border bg-text/[0.03] min-w-[160px]"> <div className='flex items-center gap-3 p-4 rounded-xl border border-border bg-text/3 min-w-40'>
<div className="flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary"> <div className='flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary'>
<Icon className="h-4 w-4" /> <Icon className='h-4 w-4' />
</div> </div>
<div className="flex flex-col"> <div className='flex flex-col'>
<span className="text-xs text-text/50">{label}</span> <span className='text-xs text-text/50'>{label}</span>
<span className="text-lg font-semibold tabular-nums">{value}</span> <span className='text-lg font-semibold tabular-nums'>
{value}
</span>
</div> </div>
</div> </div>
) )
app/devices/page-client.tsx
+66 -50
View File
@@ -61,11 +61,11 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
if (devices.length === 0) { if (devices.length === 0) {
return ( return (
<div className="max-w-7xl mx-auto px-4 md:px-[10svw] py-8"> <div className='max-w-7xl mx-auto px-4 md:px-[10svw] py-8'>
<div className="text-center py-16 text-text/40"> <div className='text-center py-16 text-text/40'>
<Gamepad2Icon className="h-10 w-10 mx-auto mb-2" /> <Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
<p>No devices found</p> <p>No devices found</p>
<p className="text-sm mt-1"> <p className='text-sm mt-1'>
Benchmark data will appear as devices are added Benchmark data will appear as devices are added
</p> </p>
</div> </div>
@@ -74,17 +74,17 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
} }
return ( return (
<section className="w-full flex flex-col gap-8 pb-16"> <section className='w-full flex flex-col gap-8 py-16'>
{/* Hero Header */} {/* Hero Header */}
<motion.div <motion.div
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }} transition={{ duration: 0.4 }}
className="px-4 md:px-[10svw]" className='px-4 md:px-[10svw]'
> >
<div className="max-w-7xl mx-auto"> <div className='max-w-7xl mx-auto'>
<h1 className="text-2xl sm:text-3xl font-bold">Devices</h1> <h1 className='text-2xl sm:text-3xl font-bold'>Devices</h1>
<p className="text-sm text-text/60 mt-1"> <p className='text-sm text-text/60 mt-1'>
Browse benchmark data for handheld and console devices Browse benchmark data for handheld and console devices
</p> </p>
</div> </div>
@@ -95,10 +95,10 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.05 }} transition={{ duration: 0.4, delay: 0.05 }}
className="px-4 md:px-[10svw]" className='px-4 md:px-[10svw]'
> >
<div className="max-w-7xl mx-auto"> <div className='max-w-7xl mx-auto'>
<div className="flex items-center gap-2"> <div className='flex items-center gap-2'>
{filterOptions.map((opt) => ( {filterOptions.map((opt) => (
<button <button
key={opt.id} key={opt.id}
@@ -121,9 +121,9 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.1 }} transition={{ duration: 0.4, delay: 0.1 }}
className="px-4 md:px-[10svw]" 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"> <div className='max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
{filteredDevices.map((device, i) => ( {filteredDevices.map((device, i) => (
<motion.div <motion.div
key={device.slug} key={device.slug}
@@ -136,11 +136,11 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
> >
<Link <Link
href={`/devices/${device.slug}`} href={`/devices/${device.slug}`}
className="block rounded-xl border border-border bg-text/[0.03] hover:border-primary/30 transition-colors group overflow-hidden" className='block rounded-xl border border-border bg-text/3 hover:border-primary/30 transition-colors group overflow-hidden'
> >
{/* Image / Icon Header */} {/* Image / Icon Header */}
<div <div
className="relative h-28 flex items-center justify-center" className='relative h-28 flex items-center justify-center'
style={{ style={{
background: `${getDeviceColor(device.colorIndex)}08`, background: `${getDeviceColor(device.colorIndex)}08`,
}} }}
@@ -150,14 +150,16 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
src={device.image} src={device.image}
alt={device.name} alt={device.name}
fill fill
className="object-contain p-4" className='object-contain p-4'
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
/> />
) : ( ) : (
<Gamepad2Icon <Gamepad2Icon
className="h-12 w-12" className='h-12 w-12'
style={{ style={{
color: getDeviceColor(device.colorIndex), color: getDeviceColor(
device.colorIndex,
),
opacity: 0.6, opacity: 0.6,
}} }}
/> />
@@ -165,63 +167,77 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
</div> </div>
{/* Card Body */} {/* Card Body */}
<div className="p-5"> <div className='p-5'>
{/* Name & Type */} {/* Name & Type */}
<div className="flex items-start justify-between gap-2 mb-3"> <div className='flex items-start justify-between gap-2 mb-3'>
<div> <div>
<h2 className="text-lg font-semibold group-hover:text-primary transition-colors"> <h2 className='text-lg font-semibold group-hover:text-primary transition-colors'>
{device.name} {device.name}
</h2> </h2>
<span <span
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border capitalize mt-1 ${ 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] || deviceTypeColor[
device.deviceType
] ||
"text-text/50 bg-text/5 border-border" "text-text/50 bg-text/5 border-border"
}`} }`}
> >
<Gamepad2Icon className="h-2.5 w-2.5" /> <Gamepad2Icon className='h-2.5 w-2.5' />
{deviceTypeLabel[device.deviceType] || device.deviceType} {deviceTypeLabel[
device.deviceType
] || device.deviceType}
</span> </span>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-text/20 group-hover:text-primary transition-colors" /> <ArrowRightIcon className='h-5 w-5 text-text/20 group-hover:text-primary transition-colors' />
</div> </div>
{/* Stats Row */} {/* Stats Row */}
<div className="grid grid-cols-4 gap-2 mt-4"> <div className='grid grid-cols-4 gap-2 mt-4'>
<div className="flex flex-col items-center text-center"> <div className='flex flex-col items-center text-center'>
<DatabaseIcon className="h-3.5 w-3.5 text-primary mb-1" /> <DatabaseIcon className='h-3.5 w-3.5 text-primary mb-1' />
<span className="text-base font-bold tabular-nums"> <span className='text-base font-bold tabular-nums'>
{device.totalBenchmarks} {device.totalBenchmarks}
</span> </span>
<span className="text-[9px] text-text/50">Benchmarks</span> <span className='text-[9px] text-text/50'>
</div> Benchmarks
<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>
<span className="text-[9px] text-text/50">Avg FPS</span>
</div> </div>
<div className="flex flex-col items-center text-center"> <div className='flex flex-col items-center text-center'>
<MonitorIcon className="h-3.5 w-3.5 text-accent mb-1" /> <TrendingUpIcon className='h-3.5 w-3.5 text-green-400 mb-1' />
<span className="text-base font-bold tabular-nums"> <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} {device.gameCount}
</span> </span>
<span className="text-[9px] text-text/50">Games</span> <span className='text-[9px] text-text/50'>
Games
</span>
</div> </div>
<div className="flex flex-col items-center text-center"> <div className='flex flex-col items-center text-center'>
<CheckCircleIcon className="h-3.5 w-3.5 text-blue-400 mb-1" /> <CheckCircleIcon className='h-3.5 w-3.5 text-blue-400 mb-1' />
<span className="text-base font-bold tabular-nums"> <span className='text-base font-bold tabular-nums'>
{device.verifiedCount} {device.verifiedCount}
</span> </span>
<span className="text-[9px] text-text/50">Verified</span> <span className='text-[9px] text-text/50'>
Verified
</span>
</div> </div>
</div> </div>
{/* Best game */} {/* Best game */}
{device.bestGame && ( {device.bestGame && (
<div className="mt-3 pt-3 border-t border-border text-xs text-text/50"> <div className='mt-3 pt-3 border-t border-border text-xs text-text/50'>
Top:{" "} Top:{" "}
<span className="text-text/80 font-medium"> <span className='text-text/80 font-medium'>
{device.bestGame.title} {device.bestGame.title}
</span>{" "} </span>{" "}
· {device.bestGame.fpsAvg} FPS · {device.bestGame.fpsAvg} FPS
@@ -234,8 +250,8 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
</div> </div>
{filteredDevices.length === 0 && devices.length > 0 && ( {filteredDevices.length === 0 && devices.length > 0 && (
<div className="text-center py-12 text-text/40"> <div className='text-center py-12 text-text/40'>
<Gamepad2Icon className="h-8 w-8 mx-auto mb-2" /> <Gamepad2Icon className='h-8 w-8 mx-auto mb-2' />
<p>No {activeFilter} devices found</p> <p>No {activeFilter} devices found</p>
</div> </div>
)} )}
lib/routes.ts
+4 -5
View File
@@ -7,11 +7,10 @@ export const routes = [
title: "Search", title: "Search",
href: "/search", href: "/search",
}, },
// TODO: Add back when games page is implemented {
// { title: "Games",
// title: "Games", href: "/games",
// href: "/games", },
// },
// TODO: Add back when compare page is implemented // TODO: Add back when compare page is implemented
// { // {
// title: "Compare", // title: "Compare",
proxy.ts
+13 -1
View File
@@ -9,11 +9,14 @@ const authRoutes = [
"/reset-password", "/reset-password",
] ]
const adminRoutes = ["/admin"]
export async function proxy(req: NextRequest) { export async function proxy(req: NextRequest) {
const path = req.nextUrl.pathname const path = req.nextUrl.pathname
const isAuthRoute = authRoutes.some((route) => path.startsWith(route)) const isAuthRoute = authRoutes.some((route) => path.startsWith(route))
const isAdminRoute = adminRoutes.some((route) => path.startsWith(route))
if (!isAuthRoute) { if (!isAuthRoute && !isAdminRoute) {
return NextResponse.next() return NextResponse.next()
} }
@@ -33,6 +36,15 @@ export async function proxy(req: NextRequest) {
headers: req.headers, headers: req.headers,
}) })
// Admin routes: require an admin session
if (isAdminRoute) {
if (!session || session.user.role !== "admin") {
return NextResponse.redirect(new URL("/", req.url))
}
return NextResponse.next()
}
// Auth routes: redirect authenticated users away
if (session) { if (session) {
return NextResponse.redirect(new URL("/", req.url)) return NextResponse.redirect(new URL("/", req.url))
} }