refactor: convert to bun workspaces monorepo
- Move web app into apps/web/ - Create packages/shared/ with shared types - Create plugins/decky-vault/ scaffold - Root package.json manages workspaces only
This commit is contained in:
@@ -0,0 +1,569 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { motion } from "motion/react"
|
||||
import {
|
||||
Gamepad2Icon,
|
||||
TrendingUpIcon,
|
||||
DatabaseIcon,
|
||||
CheckCircleIcon,
|
||||
ArrowRightIcon,
|
||||
Loader2,
|
||||
RefreshCwIcon,
|
||||
MonitorIcon,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
EChartWrapper,
|
||||
CHART_THEME,
|
||||
getDeviceColor,
|
||||
} from "@/components/charts/EChartWrapper"
|
||||
import type { EChartsOption } from "echarts"
|
||||
|
||||
interface DeviceInfo {
|
||||
slug: string
|
||||
name: string
|
||||
deviceType: string
|
||||
image: string | null
|
||||
colorIndex: number
|
||||
}
|
||||
|
||||
interface UpscalerEntry {
|
||||
upscalerType: string
|
||||
count: number
|
||||
avgFps: number
|
||||
}
|
||||
|
||||
interface DeviceStats {
|
||||
slug: string
|
||||
name: string
|
||||
deviceType: string
|
||||
totalBenchmarks: number
|
||||
avgFps: number | null
|
||||
verifiedCount: number
|
||||
gameCount: number
|
||||
boxplot: Array<{
|
||||
gameId: string
|
||||
gameTitle: string
|
||||
min: number
|
||||
q1: number
|
||||
median: number
|
||||
q3: number
|
||||
max: number
|
||||
count: number
|
||||
}>
|
||||
historical: Array<{
|
||||
period: string
|
||||
avgFps: number
|
||||
count: number
|
||||
}>
|
||||
topGames: Array<{
|
||||
gameId: string
|
||||
gameTitle: string
|
||||
headerImage: string | null
|
||||
avgFps: number
|
||||
benchmarkCount: number
|
||||
}>
|
||||
genreBreakdown: Array<{ genre: string; count: number }>
|
||||
protonBreakdown: Array<{ version: string; count: number }>
|
||||
upscalerBreakdown: UpscalerEntry[]
|
||||
}
|
||||
|
||||
const deviceTypeLabel: Record<string, string> = {
|
||||
handheld: "Handheld",
|
||||
console: "Console",
|
||||
}
|
||||
|
||||
const deviceTypeColor: Record<string, string> = {
|
||||
handheld: "text-primary bg-primary/10 border-primary/20",
|
||||
console: "text-secondary bg-secondary/10 border-secondary/20",
|
||||
}
|
||||
|
||||
export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
const [stats, setStats] = useState<DeviceStats | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const deviceColor = getDeviceColor(device.colorIndex)
|
||||
|
||||
async function fetchStats() {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await fetch(`/api/hardware/${device.slug}/stats`)
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
const data = await res.json()
|
||||
setStats(data)
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch device stats:", err)
|
||||
setError("Failed to load device statistics. Please try again.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
fetchStats()
|
||||
}, [device.slug]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const historicalOption = useMemo<EChartsOption>(() => {
|
||||
if (!stats || stats.historical.length === 0) return {}
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#1a1020",
|
||||
borderColor: CHART_THEME.border,
|
||||
textStyle: { color: CHART_THEME.text },
|
||||
},
|
||||
grid: { left: 50, right: 20, top: 10, bottom: 30 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: stats.historical.map((h) => h.period),
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
splitLine: {
|
||||
lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
|
||||
},
|
||||
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
data: stats.historical.map((h) => h.avgFps),
|
||||
smooth: true,
|
||||
lineStyle: { color: deviceColor, width: 2 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: deviceColor + "40" },
|
||||
{ offset: 1, color: deviceColor + "05" },
|
||||
],
|
||||
},
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
itemStyle: { color: deviceColor },
|
||||
},
|
||||
],
|
||||
}
|
||||
}, [stats, deviceColor])
|
||||
|
||||
const boxplotOption = useMemo<EChartsOption>(() => {
|
||||
if (!stats || stats.boxplot.length === 0) return {}
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#1a1020",
|
||||
borderColor: CHART_THEME.border,
|
||||
textStyle: { color: CHART_THEME.text },
|
||||
},
|
||||
grid: { left: 80, right: 20, top: 10, bottom: 40 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: stats.boxplot.map((b) => b.gameTitle),
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
axisLabel: {
|
||||
color: CHART_THEME.textMuted,
|
||||
fontSize: 10,
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "FPS",
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
splitLine: {
|
||||
lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
|
||||
},
|
||||
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "boxplot",
|
||||
data: stats.boxplot.map((b) => [
|
||||
b.min,
|
||||
b.q1,
|
||||
b.median,
|
||||
b.q3,
|
||||
b.max,
|
||||
]),
|
||||
itemStyle: {
|
||||
color: deviceColor + "30",
|
||||
borderColor: deviceColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}, [stats, deviceColor])
|
||||
|
||||
const genreOption = useMemo<EChartsOption>(() => {
|
||||
if (!stats || stats.genreBreakdown.length === 0) return {}
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#1a1025",
|
||||
borderColor: CHART_THEME.border,
|
||||
textStyle: { color: CHART_THEME.text },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["50%", "50%"],
|
||||
data: stats.genreBreakdown.map((g, i) => ({
|
||||
name: g.genre,
|
||||
value: g.count,
|
||||
itemStyle: {
|
||||
color: CHART_THEME.deviceColors[
|
||||
i % CHART_THEME.deviceColors.length
|
||||
],
|
||||
},
|
||||
})),
|
||||
label: { color: CHART_THEME.textMuted, fontSize: 10 },
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0,0,0,0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}, [stats])
|
||||
|
||||
return (
|
||||
<section className='w-full flex flex-col gap-8 py-16'>
|
||||
{/* Hero Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<div className='flex items-center gap-4 mb-2'>
|
||||
<div
|
||||
className='flex items-center justify-center h-14 w-14 rounded-xl shrink-0'
|
||||
style={{ background: `${deviceColor}15` }}
|
||||
>
|
||||
{device.image ? (
|
||||
<Image
|
||||
src={device.image}
|
||||
alt={device.name}
|
||||
width={56}
|
||||
height={56}
|
||||
className='object-contain'
|
||||
/>
|
||||
) : (
|
||||
<Gamepad2Icon
|
||||
className='h-7 w-7'
|
||||
style={{ color: deviceColor }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className='text-2xl sm:text-3xl font-bold'>
|
||||
{device.name}
|
||||
</h1>
|
||||
<div className='flex items-center gap-2 mt-1'>
|
||||
<span
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<Gamepad2Icon className='h-3 w-3' />
|
||||
{deviceTypeLabel[device.deviceType] ||
|
||||
device.deviceType}
|
||||
</span>
|
||||
{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'>
|
||||
<CheckCircleIcon className='h-3 w-3' />
|
||||
{stats.verifiedCount} verified
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className='text-sm text-text/60'>
|
||||
Performance benchmarks and statistics
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Overview Stats */}
|
||||
{stats && !loading && (
|
||||
<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 flex flex-wrap gap-4'>
|
||||
<StatCard
|
||||
icon={DatabaseIcon}
|
||||
label='Total Benchmarks'
|
||||
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>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className='flex items-center justify-center py-16'>
|
||||
<Loader2 className='h-8 w-8 animate-spin text-primary' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{error && !loading && (
|
||||
<div className='px-4 md:px-[10svw]'>
|
||||
<div className='max-w-7xl mx-auto text-center py-16 text-text/40'>
|
||||
<Gamepad2Icon className='h-10 w-10 mx-auto mb-3' />
|
||||
<p className='text-text/60 mb-4'>{error}</p>
|
||||
<button
|
||||
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'
|
||||
>
|
||||
<RefreshCwIcon className='h-4 w-4' />
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Charts */}
|
||||
{stats && !loading && !error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className='max-w-7xl mx-auto flex flex-col gap-6'>
|
||||
{stats.historical.length > 0 && (
|
||||
<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>
|
||||
<EChartWrapper
|
||||
option={historicalOption}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
|
||||
{stats.boxplot.length > 0 && (
|
||||
<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>
|
||||
<EChartWrapper
|
||||
option={boxplotOption}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{stats.genreBreakdown.length > 0 && (
|
||||
<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>
|
||||
<EChartWrapper
|
||||
option={genreOption}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(stats.protonBreakdown.length > 0 ||
|
||||
stats.upscalerBreakdown.length > 0) && (
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
|
||||
{stats.protonBreakdown.length > 0 && (
|
||||
<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>
|
||||
<div className='space-y-2'>
|
||||
{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
|
||||
className='h-full rounded-full bg-primary'
|
||||
style={{
|
||||
width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className='text-text/50 text-xs'>
|
||||
{p.count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{stats.upscalerBreakdown.length > 0 && (
|
||||
<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>
|
||||
<div className='space-y-2'>
|
||||
{stats.upscalerBreakdown.map(
|
||||
(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>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stats.topGames.length > 0 && (
|
||||
<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>
|
||||
<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
|
||||
key={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'
|
||||
>
|
||||
<div
|
||||
className='text-lg font-bold tabular-nums w-6'
|
||||
style={{
|
||||
color: deviceColor,
|
||||
}}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<p className='text-sm font-medium truncate group-hover:text-primary transition-colors'>
|
||||
{game.gameTitle}
|
||||
</p>
|
||||
<div className='flex items-center gap-2 text-xs text-text/50'>
|
||||
<span className='text-green-400 font-medium'>
|
||||
{game.avgFps} FPS
|
||||
</span>
|
||||
<span>
|
||||
{
|
||||
game.benchmarkCount
|
||||
}{" "}
|
||||
runs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRightIcon className='h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0' />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{stats && !loading && !error && stats.totalBenchmarks === 0 && (
|
||||
<div className='max-w-7xl mx-auto px-4 md:px-[10svw]'>
|
||||
<div className='text-center py-16 text-text/40'>
|
||||
<Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
|
||||
<p>No benchmark data yet for this device</p>
|
||||
<p className='text-sm mt-1'>
|
||||
Data will appear as benchmarks are submitted
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
label: string
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<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'>
|
||||
<Icon className='h-4 w-4' />
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<span className='text-xs text-text/50'>{label}</span>
|
||||
<span className='text-lg font-semibold tabular-nums'>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import { ImageResponse } from "next/og"
|
||||
import { db } from "@/lib/db/index"
|
||||
import { hardware, performanceEntries, gameVersions, games } from "@/lib/db/schema"
|
||||
import { eq, and, sql } from "drizzle-orm"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
export const alt = "Device benchmarks on DeckyVault"
|
||||
export const size = { width: 1200, height: 630 }
|
||||
export const contentType = "image/png"
|
||||
|
||||
export default async function Image({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>
|
||||
}) {
|
||||
const { slug } = await params
|
||||
|
||||
const [device] = await db
|
||||
.select({
|
||||
name: hardware.name,
|
||||
deviceType: hardware.deviceType,
|
||||
})
|
||||
.from(hardware)
|
||||
.where(eq(hardware.slug, slug))
|
||||
.limit(1)
|
||||
|
||||
if (!device) {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#100b14",
|
||||
color: "#ebe4f1",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 48, fontWeight: 700 }}>DeckyVault</div>
|
||||
<div style={{ fontSize: 20, color: "#6b5a7d", marginTop: 8 }}>
|
||||
Device Not Found
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{ ...size }
|
||||
)
|
||||
}
|
||||
|
||||
const [stats] = await db
|
||||
.select({
|
||||
totalBenchmarks: sql<number>`count(*)::int`,
|
||||
avgFps: sql<number>`round(avg(${performanceEntries.fpsAvg})::numeric, 1)`,
|
||||
gameCount: sql<number>`count(distinct ${gameVersions.gameId})::int`,
|
||||
})
|
||||
.from(performanceEntries)
|
||||
.innerJoin(gameVersions, eq(performanceEntries.versionId, gameVersions.id))
|
||||
.innerJoin(games, eq(gameVersions.gameId, games.id))
|
||||
.where(
|
||||
and(
|
||||
eq(performanceEntries.hardwareSlug, slug),
|
||||
eq(performanceEntries.isRemoved, false)
|
||||
)
|
||||
)
|
||||
|
||||
const typeLabel = device.deviceType === "handheld" ? "Handheld" : "Console"
|
||||
const avgFpsStr = stats?.avgFps ? String(Math.round(Number(stats.avgFps))) : "—"
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
padding: "60px 80px",
|
||||
backgroundColor: "#100b14",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
|
||||
<div
|
||||
style={{
|
||||
padding: "4px 12px",
|
||||
borderRadius: 12,
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: "#eb3779",
|
||||
backgroundColor: "#eb377920",
|
||||
border: "1px solid #eb377940",
|
||||
}}
|
||||
>
|
||||
{typeLabel}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 56, fontWeight: 700, color: "#ebe4f1", lineHeight: 1.1, marginBottom: 24 }}>
|
||||
{device.name}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 32, fontSize: 18, color: "#6b5a7d" }}>
|
||||
<div>
|
||||
<span style={{ color: "#ebe4f1", fontWeight: 600, fontSize: 24 }}>{stats?.totalBenchmarks ?? 0}</span> Benchmarks
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: "#22c55e", fontWeight: 600, fontSize: 24 }}>{avgFpsStr}</span> Avg FPS
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: "#ebe4f1", fontWeight: 600, fontSize: 24 }}>{stats?.gameCount ?? 0}</span> Games
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ position: "absolute", bottom: 40, left: 80, fontSize: 16, color: "#4a3a5c", fontWeight: 500 }}>
|
||||
deckyvault.xyz
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
{ ...size }
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { db } from "@/lib/db/index"
|
||||
import { hardware } from "@/lib/db/schema"
|
||||
import { eq } from "drizzle-orm"
|
||||
import { notFound } from "next/navigation"
|
||||
import { DeviceDetailClient } from "./device-detail-client"
|
||||
import type { Metadata } from "next"
|
||||
|
||||
export const revalidate = 3600
|
||||
|
||||
export async function generateStaticParams() {
|
||||
try {
|
||||
const devices = await db
|
||||
.select({ slug: hardware.slug })
|
||||
.from(hardware)
|
||||
return devices.map((d) => ({ slug: d.slug }))
|
||||
} catch {
|
||||
// DB unreachable during build (e.g. Docker builder without network access).
|
||||
// Return empty — pages will be generated on first request via ISR.
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>
|
||||
}): Promise<Metadata> {
|
||||
const { slug } = await params
|
||||
const [device] = await db
|
||||
.select({
|
||||
name: hardware.name,
|
||||
deviceType: hardware.deviceType,
|
||||
})
|
||||
.from(hardware)
|
||||
.where(eq(hardware.slug, slug))
|
||||
.limit(1)
|
||||
|
||||
if (!device) return { title: "Device Not Found — DeckyVault" }
|
||||
|
||||
const typeLabel = device.deviceType === "handheld" ? "Handheld" : "Console"
|
||||
|
||||
return {
|
||||
title: `${device.name} — DeckyVault`,
|
||||
description: `Benchmark data, FPS stats, and performance analysis for the ${device.name} (${typeLabel}) on DeckyVault.`,
|
||||
keywords: [
|
||||
device.name.toLowerCase(),
|
||||
device.deviceType,
|
||||
"benchmarks",
|
||||
"FPS",
|
||||
"performance",
|
||||
"steam deck",
|
||||
],
|
||||
alternates: { canonical: `https://deckyvault.xyz/devices/${slug}` },
|
||||
openGraph: {
|
||||
title: `${device.name} — DeckyVault`,
|
||||
description: `Benchmark data and performance stats for ${device.name} on DeckyVault.`,
|
||||
url: `https://deckyvault.xyz/devices/${slug}`,
|
||||
siteName: "DeckyVault",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: `/devices/${slug}/opengraph-image`,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: `${device.name} — DeckyVault`,
|
||||
description: `Benchmark data and performance stats for ${device.name} on DeckyVault.`,
|
||||
images: [`/devices/${slug}/opengraph-image`],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default async function DevicePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>
|
||||
}) {
|
||||
const { slug } = await params
|
||||
|
||||
const [device] = await db
|
||||
.select({
|
||||
slug: hardware.slug,
|
||||
name: hardware.name,
|
||||
deviceType: hardware.deviceType,
|
||||
image: hardware.image,
|
||||
})
|
||||
.from(hardware)
|
||||
.where(eq(hardware.slug, slug))
|
||||
.limit(1)
|
||||
|
||||
if (!device) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const allDevices = await db
|
||||
.select({ slug: hardware.slug })
|
||||
.from(hardware)
|
||||
.orderBy(hardware.sortOrder)
|
||||
const deviceColorIndex = allDevices.findIndex((d) => d.slug === slug)
|
||||
|
||||
const typeLabel = device.deviceType === "handheld" ? "Handheld" : "Console"
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Product",
|
||||
name: device.name,
|
||||
category: typeLabel,
|
||||
url: `https://deckyvault.xyz/devices/${device.slug}`,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<DeviceDetailClient
|
||||
device={{
|
||||
slug: device.slug,
|
||||
name: device.name,
|
||||
deviceType: device.deviceType,
|
||||
image: device.image,
|
||||
colorIndex: deviceColorIndex,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { motion } from "motion/react"
|
||||
import {
|
||||
Gamepad2Icon,
|
||||
TrendingUpIcon,
|
||||
DatabaseIcon,
|
||||
ArrowRightIcon,
|
||||
MonitorIcon,
|
||||
CheckCircleIcon,
|
||||
Zap,
|
||||
Gauge,
|
||||
} from "lucide-react"
|
||||
import { getDeviceColor } from "@/components/charts/EChartWrapper"
|
||||
|
||||
export interface DeviceStats {
|
||||
slug: string
|
||||
name: string
|
||||
deviceType: string
|
||||
image: string | null
|
||||
sortOrder: number
|
||||
colorIndex: number
|
||||
totalBenchmarks: number
|
||||
avgFps: number | null
|
||||
gameCount: number
|
||||
verifiedCount: number
|
||||
bestGame: {
|
||||
id: string
|
||||
title: string
|
||||
headerImage: string | null
|
||||
fpsAvg: number
|
||||
} | null
|
||||
wattHours: number | null
|
||||
tdpMax: number | null
|
||||
}
|
||||
|
||||
const deviceTypeLabel: Record<string, string> = {
|
||||
handheld: "Handheld",
|
||||
console: "Console",
|
||||
}
|
||||
|
||||
const deviceTypeColor: Record<string, string> = {
|
||||
handheld: "text-primary bg-primary/10 border-primary/20",
|
||||
console: "text-secondary bg-secondary/10 border-secondary/20",
|
||||
}
|
||||
|
||||
type FilterType = "all" | "handheld" | "console"
|
||||
|
||||
const filterOptions: { id: FilterType; label: string }[] = [
|
||||
{ id: "all", label: "All" },
|
||||
{ id: "handheld", label: "Handheld" },
|
||||
{ id: "console", label: "Console" },
|
||||
]
|
||||
|
||||
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 (
|
||||
<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>No devices found</p>
|
||||
<p className='text-sm mt-1'>
|
||||
Benchmark data will appear as devices are added
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='w-full flex flex-col gap-8 py-16'>
|
||||
{/* Hero Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<h1 className='text-2xl sm:text-3xl font-bold'>Devices</h1>
|
||||
<p className='text-sm text-text/60 mt-1'>
|
||||
Browse benchmark data for handheld and console devices
|
||||
</p>
|
||||
</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 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
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'>
|
||||
{filteredDevices.map((device, i) => (
|
||||
<motion.div
|
||||
key={device.slug}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: Math.min(0.05 * i, 0.5),
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={`/devices/${device.slug}`}
|
||||
className='block rounded-xl border border-border bg-text/3 hover:border-primary/30 transition-colors group overflow-hidden'
|
||||
>
|
||||
{/* 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 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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'>
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { db } from "@/lib/db/index"
|
||||
import { hardware, performanceEntries, gameVersions, games } from "@/lib/db/schema"
|
||||
import { eq, sql, desc } from "drizzle-orm"
|
||||
import { buildBreadcrumbList } from "@/lib/utils/seo"
|
||||
import { DevicesPageClient } from "./page-client"
|
||||
import type { Metadata } from "next"
|
||||
|
||||
// This page needs live data — skip static generation at build time
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Devices",
|
||||
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 deviceRows = await db
|
||||
.select({
|
||||
slug: hardware.slug,
|
||||
name: hardware.name,
|
||||
deviceType: hardware.deviceType,
|
||||
image: hardware.image,
|
||||
sortOrder: hardware.sortOrder,
|
||||
wattHours: hardware.wattHours,
|
||||
tdpMax: hardware.tdpMax,
|
||||
})
|
||||
.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,
|
||||
wattHours: device.wattHours ? Number(device.wattHours) : null,
|
||||
tdpMax: device.tdpMax ? Number(device.tdpMax) : null,
|
||||
}
|
||||
})
|
||||
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "ItemList",
|
||||
itemListElement: devices.map((d, i) => ({
|
||||
"@type": "ListItem",
|
||||
position: i + 1,
|
||||
name: d.name,
|
||||
url: `https://deckyvault.xyz/devices/${d.slug}`,
|
||||
})),
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify(
|
||||
buildBreadcrumbList([
|
||||
{ name: "Home", url: "https://deckyvault.xyz" },
|
||||
{ name: "Devices", url: "https://deckyvault.xyz/devices" },
|
||||
]),
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<DevicesPageClient devices={devices} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user