fix: preset UX — gradient fade edges, Tiptap notes renderer, two-column modal layout with stats/settings, upvote/downvote buttons
This commit is contained in:
@@ -12,8 +12,8 @@ import {
|
|||||||
SparklesIcon,
|
SparklesIcon,
|
||||||
DatabaseIcon,
|
DatabaseIcon,
|
||||||
Plus,
|
Plus,
|
||||||
ChevronLeftIcon,
|
ThumbsUpIcon,
|
||||||
ChevronRightIcon,
|
ThumbsDownIcon,
|
||||||
} from "lucide-react"
|
} from "lucide-react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { useSession } from "@/lib/auth-client"
|
import { useSession } from "@/lib/auth-client"
|
||||||
@@ -383,7 +383,8 @@ export function GamePageClient({
|
|||||||
<Image
|
<Image
|
||||||
src={coverImage}
|
src={coverImage}
|
||||||
alt={game.title}
|
alt={game.title}
|
||||||
fill
|
width={600}
|
||||||
|
height={900}
|
||||||
className='object-cover'
|
className='object-cover'
|
||||||
priority
|
priority
|
||||||
onError={handleImgError}
|
onError={handleImgError}
|
||||||
@@ -745,21 +746,11 @@ export function GamePageClient({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative group/presets">
|
<div className="relative">
|
||||||
{/* Left scroll button */}
|
{/* Left fade edge */}
|
||||||
<button
|
<div className="pointer-events-none absolute left-0 top-0 bottom-4 w-12 z-10 bg-gradient-to-r from-background to-transparent" />
|
||||||
onClick={() => presetsRef.current?.scrollBy({ left: -300, behavior: "smooth" })}
|
{/* Right fade edge */}
|
||||||
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center h-10 w-10 rounded-full bg-background/80 border border-border hover:bg-text/5 opacity-0 group-hover/presets:opacity-100 transition-opacity"
|
<div className="pointer-events-none absolute right-0 top-0 bottom-4 w-12 z-10 bg-gradient-to-l from-background to-transparent" />
|
||||||
>
|
|
||||||
<ChevronLeftIcon className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
{/* Right scroll button */}
|
|
||||||
<button
|
|
||||||
onClick={() => presetsRef.current?.scrollBy({ left: 300, behavior: "smooth" })}
|
|
||||||
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center h-10 w-10 rounded-full bg-background/80 border border-border hover:bg-text/5 opacity-0 group-hover/presets:opacity-100 transition-opacity"
|
|
||||||
>
|
|
||||||
<ChevronRightIcon className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
<div
|
<div
|
||||||
ref={presetsRef}
|
ref={presetsRef}
|
||||||
className="flex gap-4 overflow-x-auto scrollbar-hide pb-4"
|
className="flex gap-4 overflow-x-auto scrollbar-hide pb-4"
|
||||||
@@ -774,7 +765,7 @@ export function GamePageClient({
|
|||||||
key={preset.id}
|
key={preset.id}
|
||||||
layoutId={preset.id}
|
layoutId={preset.id}
|
||||||
onClick={() => setSelectedPresetId(preset.id)}
|
onClick={() => setSelectedPresetId(preset.id)}
|
||||||
className={`flex-shrink-0 w-72 flex flex-col gap-3 p-4 rounded-xl border transition-colors cursor-pointer hover:border-primary/30 ${
|
className={`shrink-0 w-72 flex flex-col gap-3 p-4 rounded-xl border transition-colors cursor-pointer hover:border-primary/30 ${
|
||||||
raw
|
raw
|
||||||
? "border-green-500/30 bg-green-500/5"
|
? "border-green-500/30 bg-green-500/5"
|
||||||
: "border-border bg-text/3"
|
: "border-border bg-text/3"
|
||||||
@@ -803,9 +794,15 @@ export function GamePageClient({
|
|||||||
{preset.hardwareName}
|
{preset.hardwareName}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center gap-1 text-xs text-text/60 shrink-0'>
|
<div className='flex items-center gap-2 text-xs text-text/60 shrink-0'>
|
||||||
<TrendingUpIcon className='h-3 w-3' />
|
<span className='flex items-center gap-0.5'>
|
||||||
{preset.upvotes}
|
<ThumbsUpIcon className='h-3 w-3' />
|
||||||
|
{preset.upvotes}
|
||||||
|
</span>
|
||||||
|
<span className='flex items-center gap-0.5'>
|
||||||
|
<ThumbsDownIcon className='h-3 w-3' />
|
||||||
|
{preset.downvotes}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -6,15 +6,17 @@ import { AnimatePresence, motion } from "motion/react"
|
|||||||
import { useSession } from "@/lib/auth-client"
|
import { useSession } from "@/lib/auth-client"
|
||||||
import type { GameSettingCategory } from "@/lib/db/schema/performanceEntries"
|
import type { GameSettingCategory } from "@/lib/db/schema/performanceEntries"
|
||||||
import {
|
import {
|
||||||
TrendingUpIcon,
|
ThumbsUpIcon,
|
||||||
TrendingDownIcon,
|
ThumbsDownIcon,
|
||||||
FlagIcon,
|
FlagIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
ChevronDownIcon,
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
ShieldCheckIcon,
|
ShieldCheckIcon,
|
||||||
XIcon,
|
XIcon,
|
||||||
UserIcon,
|
UserIcon,
|
||||||
} from "lucide-react"
|
} from "lucide-react"
|
||||||
|
import { TiptapRenderer } from "@/components/tiptap-renderer"
|
||||||
|
|
||||||
interface Preset {
|
interface Preset {
|
||||||
id: string
|
id: string
|
||||||
@@ -72,9 +74,7 @@ export function PresetDetailModal({
|
|||||||
}: PresetDetailModalProps) {
|
}: PresetDetailModalProps) {
|
||||||
const { data: session } = useSession()
|
const { data: session } = useSession()
|
||||||
|
|
||||||
const [openCategories, setOpenCategories] = useState<Set<number>>(
|
const [activeCategoryIndex, setActiveCategoryIndex] = useState(0)
|
||||||
new Set(),
|
|
||||||
)
|
|
||||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||||
const [showReportForm, setShowReportForm] = useState(false)
|
const [showReportForm, setShowReportForm] = useState(false)
|
||||||
const [reportReason, setReportReason] = useState<
|
const [reportReason, setReportReason] = useState<
|
||||||
@@ -82,19 +82,52 @@ export function PresetDetailModal({
|
|||||||
>("inaccurate")
|
>("inaccurate")
|
||||||
const [reportDetails, setReportDetails] = useState("")
|
const [reportDetails, setReportDetails] = useState("")
|
||||||
|
|
||||||
|
const [userVote, setUserVote] = useState<"up" | "down" | null>(null)
|
||||||
|
const [localUpvotes, setLocalUpvotes] = useState(preset.upvotes)
|
||||||
|
const [localDownvotes, setLocalDownvotes] = useState(preset.downvotes)
|
||||||
|
|
||||||
const isOwner = session?.user?.id === preset.userId
|
const isOwner = session?.user?.id === preset.userId
|
||||||
const isAdmin = session?.user?.role === "admin"
|
const isAdmin = session?.user?.role === "admin"
|
||||||
|
const isAuthenticated = !!session?.user
|
||||||
|
|
||||||
const toggleCategory = (index: number) => {
|
const categories = preset.settingsJson ?? []
|
||||||
setOpenCategories((prev) => {
|
const hasCategories = categories.length > 0
|
||||||
const next = new Set(prev)
|
const currentCategory = hasCategories ? categories[activeCategoryIndex] : null
|
||||||
if (next.has(index)) {
|
|
||||||
next.delete(index)
|
const goPrevCategory = () => {
|
||||||
} else {
|
setActiveCategoryIndex((prev) => (prev > 0 ? prev - 1 : categories.length - 1))
|
||||||
next.add(index)
|
}
|
||||||
|
|
||||||
|
const goNextCategory = () => {
|
||||||
|
setActiveCategoryIndex((prev) => (prev < categories.length - 1 ? prev + 1 : 0))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUpvote = async () => {
|
||||||
|
if (!isAuthenticated || userVote === "up") return
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/performance/${preset.id}/upvote`, { method: "POST" })
|
||||||
|
if (res.ok) {
|
||||||
|
if (userVote === "down") setLocalDownvotes((d) => d - 1)
|
||||||
|
setLocalUpvotes((u) => u + 1)
|
||||||
|
setUserVote("up")
|
||||||
}
|
}
|
||||||
return next
|
} catch (err) {
|
||||||
})
|
console.error("Failed to upvote:", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownvote = async () => {
|
||||||
|
if (!isAuthenticated || userVote === "down") return
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/performance/${preset.id}/downvote`, { method: "POST" })
|
||||||
|
if (res.ok) {
|
||||||
|
if (userVote === "up") setLocalUpvotes((u) => u - 1)
|
||||||
|
setLocalDownvotes((d) => d + 1)
|
||||||
|
setUserVote("down")
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to downvote:", err)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleReportSubmit = () => {
|
const handleReportSubmit = () => {
|
||||||
@@ -132,7 +165,7 @@ export function PresetDetailModal({
|
|||||||
{/* Modal card */}
|
{/* Modal card */}
|
||||||
<motion.div
|
<motion.div
|
||||||
layoutId={preset.id}
|
layoutId={preset.id}
|
||||||
className="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-xl border border-border bg-background"
|
className="relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-xl border border-border bg-background flex flex-col"
|
||||||
initial={{ scale: 0.95, opacity: 0 }}
|
initial={{ scale: 0.95, opacity: 0 }}
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
exit={{ scale: 0.95, opacity: 0 }}
|
exit={{ scale: 0.95, opacity: 0 }}
|
||||||
@@ -144,41 +177,11 @@ export function PresetDetailModal({
|
|||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-start justify-between p-5 border-b border-border">
|
<div className="flex items-start justify-between p-5 border-b border-border shrink-0">
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
<div className="h-10 w-10 rounded-full bg-text/10 overflow-hidden flex items-center justify-center shrink-0">
|
<h2 className="text-base font-semibold text-text truncate">
|
||||||
{preset.userImage ? (
|
{preset.hardwareName}
|
||||||
<Image
|
</h2>
|
||||||
src={preset.userImage}
|
|
||||||
alt={
|
|
||||||
preset.userName || "User"
|
|
||||||
}
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<UserIcon className="h-5 w-5 text-text/50" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="font-semibold text-sm text-text truncate">
|
|
||||||
{preset.userName || "Anonymous"}
|
|
||||||
</span>
|
|
||||||
{preset.verifiedAt && (
|
|
||||||
<span
|
|
||||||
className="inline-flex items-center gap-0.5 text-green-400"
|
|
||||||
title="Verified"
|
|
||||||
>
|
|
||||||
<ShieldCheckIcon className="h-3.5 w-3.5" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-text/50">
|
|
||||||
{formatDate(preset.createdAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
@@ -189,311 +192,315 @@ export function PresetDetailModal({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Row */}
|
{/* Two-column body */}
|
||||||
<div className="grid grid-cols-3 gap-4 p-5 border-b border-border">
|
<div className="flex flex-col md:flex-row overflow-hidden flex-1">
|
||||||
<div className="flex flex-col gap-1">
|
{/* Left panel */}
|
||||||
<span className="text-xs text-text/50 uppercase tracking-wider">
|
<div className="w-full md:w-1/3 md:min-w-[240px] flex flex-col gap-4 p-5 border-b md:border-b-0 md:border-r border-border overflow-y-auto">
|
||||||
Upvotes
|
{/* User info */}
|
||||||
</span>
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-1.5 text-sm text-text">
|
<div className="h-10 w-10 rounded-full bg-text/10 overflow-hidden flex items-center justify-center shrink-0">
|
||||||
<TrendingUpIcon className="h-4 w-4 text-green-400" />
|
{preset.userImage ? (
|
||||||
<span className="font-semibold">
|
<Image
|
||||||
{preset.upvotes}
|
src={preset.userImage}
|
||||||
</span>
|
alt={preset.userName || "User"}
|
||||||
</div>
|
width={40}
|
||||||
</div>
|
height={40}
|
||||||
<div className="flex flex-col gap-1">
|
className="object-cover"
|
||||||
<span className="text-xs text-text/50 uppercase tracking-wider">
|
/>
|
||||||
Downvotes
|
) : (
|
||||||
</span>
|
<UserIcon className="h-5 w-5 text-text/50" />
|
||||||
<div className="flex items-center gap-1.5 text-sm text-text">
|
|
||||||
<TrendingDownIcon className="h-4 w-4 text-red-400" />
|
|
||||||
<span className="font-semibold">
|
|
||||||
{preset.downvotes}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<span className="text-xs text-text/50 uppercase tracking-wider">
|
|
||||||
Avg FPS
|
|
||||||
</span>
|
|
||||||
<div className="text-sm text-text">
|
|
||||||
<span className="font-semibold tabular-nums">
|
|
||||||
{preset.fpsAvg ?? "—"}
|
|
||||||
</span>
|
|
||||||
{preset.fpsAvg !== null &&
|
|
||||||
preset.fpsLow !== null &&
|
|
||||||
preset.fpsHigh !== null && (
|
|
||||||
<span className="text-text/50 ml-1">
|
|
||||||
({Math.round(preset.fpsLow)}
|
|
||||||
–
|
|
||||||
{Math.round(preset.fpsHigh)})
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Metadata Grid */}
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 p-5 border-b border-border">
|
|
||||||
<MetaItem
|
|
||||||
label="Proton"
|
|
||||||
value={preset.protonVersion}
|
|
||||||
/>
|
|
||||||
<MetaItem
|
|
||||||
label="SteamOS"
|
|
||||||
value={preset.osVersion}
|
|
||||||
/>
|
|
||||||
<MetaItem
|
|
||||||
label="Upscaler"
|
|
||||||
value={
|
|
||||||
preset.upscalerType &&
|
|
||||||
preset.upscalerType !== "none"
|
|
||||||
? `${preset.upscalerType.toUpperCase()}${preset.upscalerVersion ? ` ${preset.upscalerVersion}` : ""}`
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<MetaItem
|
|
||||||
label="Frame Gen"
|
|
||||||
value={
|
|
||||||
preset.frameGenMethod &&
|
|
||||||
preset.frameGenMethod !== "none"
|
|
||||||
? preset.frameGenMethod === "fsr_fg"
|
|
||||||
? "FSR FG"
|
|
||||||
: preset.frameGenMethod ===
|
|
||||||
"dlss_fg"
|
|
||||||
? "DLSS FG"
|
|
||||||
: preset.frameGenMethod
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<MetaItem
|
|
||||||
label="Launch Options"
|
|
||||||
value={preset.launchOptions}
|
|
||||||
className="col-span-2 sm:col-span-3"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Settings Table */}
|
|
||||||
{preset.settingsJson &&
|
|
||||||
preset.settingsJson.length > 0 && (
|
|
||||||
<div className="p-5 border-b border-border">
|
|
||||||
<h3 className="text-sm font-medium text-text/80 mb-3">
|
|
||||||
Settings ({preset.settingsCount})
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
{preset.settingsJson.map(
|
|
||||||
(category, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="rounded-lg border border-border overflow-hidden"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
toggleCategory(idx)
|
|
||||||
}
|
|
||||||
className="w-full flex items-center justify-between px-3 py-2.5 bg-text/3 hover:bg-text/5 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<span className="text-xs font-semibold uppercase tracking-wider text-text/70">
|
|
||||||
{category.category}
|
|
||||||
</span>
|
|
||||||
<ChevronDownIcon
|
|
||||||
className={`h-4 w-4 text-text/50 transition-transform duration-200 ${openCategories.has(idx) ? "rotate-180" : ""}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<AnimatePresence>
|
|
||||||
{openCategories.has(
|
|
||||||
idx,
|
|
||||||
) && (
|
|
||||||
<motion.div
|
|
||||||
initial={{
|
|
||||||
height: 0,
|
|
||||||
opacity: 0,
|
|
||||||
}}
|
|
||||||
animate={{
|
|
||||||
height: "auto",
|
|
||||||
opacity: 1,
|
|
||||||
}}
|
|
||||||
exit={{
|
|
||||||
height: 0,
|
|
||||||
opacity: 0,
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 0.2,
|
|
||||||
}}
|
|
||||||
className="overflow-hidden"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
{category.settings.map(
|
|
||||||
(
|
|
||||||
setting,
|
|
||||||
sIdx,
|
|
||||||
) => (
|
|
||||||
<div
|
|
||||||
key={
|
|
||||||
sIdx
|
|
||||||
}
|
|
||||||
className="flex items-center justify-between px-3 py-2 border-t border-border text-sm"
|
|
||||||
>
|
|
||||||
<span className="text-text/70">
|
|
||||||
{
|
|
||||||
setting.title
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
<span className="font-medium text-text">
|
|
||||||
{formatValue(
|
|
||||||
setting.value,
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="min-w-0">
|
||||||
)}
|
|
||||||
|
|
||||||
{/* User Notes */}
|
|
||||||
{preset.userNotes && (
|
|
||||||
<div className="p-5 border-b border-border">
|
|
||||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
|
||||||
Notes
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-text/70 whitespace-pre-line leading-relaxed">
|
|
||||||
{preset.userNotes}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex flex-wrap items-center gap-3 p-5">
|
|
||||||
{(isOwner || isAdmin) && (
|
|
||||||
<>
|
|
||||||
{!showDeleteConfirm ? (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setShowDeleteConfirm(true)
|
|
||||||
}
|
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<TrashIcon className="h-4 w-4" />
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-xs text-text/50">
|
<span className="font-medium text-sm text-text truncate">
|
||||||
Are you sure?
|
{preset.userName || "Anonymous"}
|
||||||
</span>
|
</span>
|
||||||
<button
|
{preset.verifiedAt && (
|
||||||
onClick={() => {
|
<span
|
||||||
onDelete(preset.id)
|
className="inline-flex items-center gap-0.5 text-green-400"
|
||||||
setShowDeleteConfirm(
|
title="Verified"
|
||||||
false,
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setShowDeleteConfirm(false)
|
|
||||||
}
|
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{session && !hasReported && (
|
|
||||||
<>
|
|
||||||
{!showReportForm ? (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setShowReportForm(true)
|
|
||||||
}
|
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<FlagIcon className="h-4 w-4" />
|
|
||||||
Report
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-col gap-2 w-full">
|
|
||||||
<select
|
|
||||||
value={reportReason}
|
|
||||||
onChange={(e) =>
|
|
||||||
setReportReason(
|
|
||||||
e.target
|
|
||||||
.value as typeof reportReason,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full max-w-xs"
|
|
||||||
>
|
|
||||||
<option value="inaccurate">
|
|
||||||
Inaccurate data
|
|
||||||
</option>
|
|
||||||
<option value="spam">
|
|
||||||
Spam
|
|
||||||
</option>
|
|
||||||
<option value="inappropriate">
|
|
||||||
Inappropriate
|
|
||||||
</option>
|
|
||||||
<option value="other">
|
|
||||||
Other
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<textarea
|
|
||||||
value={reportDetails}
|
|
||||||
onChange={(e) =>
|
|
||||||
setReportDetails(
|
|
||||||
e.target.value,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
placeholder="Additional details (optional)"
|
|
||||||
rows={3}
|
|
||||||
className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full resize-none"
|
|
||||||
/>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={
|
|
||||||
handleReportSubmit
|
|
||||||
}
|
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
|
|
||||||
>
|
>
|
||||||
Submit Report
|
<ShieldCheckIcon className="h-3.5 w-3.5" />
|
||||||
</button>
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-text/50">
|
||||||
|
{formatDate(preset.createdAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-px bg-border" />
|
||||||
|
|
||||||
|
{/* Vote buttons */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={handleUpvote}
|
||||||
|
disabled={!isAuthenticated || userVote === "up"}
|
||||||
|
className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
|
||||||
|
userVote === "up"
|
||||||
|
? "bg-green-500/10 border-green-500/30 text-green-400"
|
||||||
|
: "border-border text-text/70 hover:bg-text/5"
|
||||||
|
} ${!isAuthenticated ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||||
|
title={!isAuthenticated ? "Sign in to vote" : undefined}
|
||||||
|
>
|
||||||
|
<ThumbsUpIcon className="h-4 w-4" />
|
||||||
|
{localUpvotes}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleDownvote}
|
||||||
|
disabled={!isAuthenticated || userVote === "down"}
|
||||||
|
className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
|
||||||
|
userVote === "down"
|
||||||
|
? "bg-red-500/10 border-red-500/30 text-red-400"
|
||||||
|
: "border-border text-text/70 hover:bg-text/5"
|
||||||
|
} ${!isAuthenticated ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||||
|
title={!isAuthenticated ? "Sign in to vote" : undefined}
|
||||||
|
>
|
||||||
|
<ThumbsDownIcon className="h-4 w-4" />
|
||||||
|
{localDownvotes}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FPS */}
|
||||||
|
{preset.fpsAvg !== null && (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="text-xs text-text/50 uppercase tracking-wider">
|
||||||
|
Avg FPS
|
||||||
|
</span>
|
||||||
|
<div className="text-sm text-text">
|
||||||
|
<span className="font-semibold tabular-nums">
|
||||||
|
{preset.fpsAvg}
|
||||||
|
</span>
|
||||||
|
{preset.fpsLow !== null && preset.fpsHigh !== null && (
|
||||||
|
<span className="text-text/50 ml-1">
|
||||||
|
({Math.round(preset.fpsLow)}–{Math.round(preset.fpsHigh)})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="h-px bg-border" />
|
||||||
|
|
||||||
|
{/* Metadata */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<MetaItem label="Proton" value={preset.protonVersion} />
|
||||||
|
<MetaItem label="SteamOS" value={preset.osVersion} />
|
||||||
|
<MetaItem
|
||||||
|
label="Upscaler"
|
||||||
|
value={
|
||||||
|
preset.upscalerType && preset.upscalerType !== "none"
|
||||||
|
? `${preset.upscalerType.toUpperCase()}${preset.upscalerVersion ? ` ${preset.upscalerVersion}` : ""}`
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<MetaItem
|
||||||
|
label="Frame Gen"
|
||||||
|
value={
|
||||||
|
preset.frameGenMethod && preset.frameGenMethod !== "none"
|
||||||
|
? preset.frameGenMethod === "fsr_fg"
|
||||||
|
? "FSR FG"
|
||||||
|
: preset.frameGenMethod === "dlss_fg"
|
||||||
|
? "DLSS FG"
|
||||||
|
: preset.frameGenMethod
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<MetaItem label="Launch Options" value={preset.launchOptions} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-px bg-border" />
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex flex-wrap items-center gap-2 mt-auto">
|
||||||
|
{(isOwner || isAdmin) && (
|
||||||
|
<>
|
||||||
|
{!showDeleteConfirm ? (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => setShowDeleteConfirm(true)}
|
||||||
setShowReportForm(
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
|
||||||
false,
|
>
|
||||||
)
|
<TrashIcon className="h-4 w-4" />
|
||||||
setReportDetails("")
|
Delete
|
||||||
}}
|
</button>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs text-text/50">
|
||||||
|
Are you sure?
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
onDelete(preset.id)
|
||||||
|
setShowDeleteConfirm(false)
|
||||||
|
}}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteConfirm(false)}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{session && !hasReported && (
|
||||||
|
<>
|
||||||
|
{!showReportForm ? (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowReportForm(true)}
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
||||||
>
|
>
|
||||||
Cancel
|
<FlagIcon className="h-4 w-4" />
|
||||||
|
Report
|
||||||
</button>
|
</button>
|
||||||
</div>
|
) : (
|
||||||
</div>
|
<div className="flex flex-col gap-2 w-full">
|
||||||
|
<select
|
||||||
|
value={reportReason}
|
||||||
|
onChange={(e) =>
|
||||||
|
setReportReason(
|
||||||
|
e.target.value as typeof reportReason,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full max-w-xs"
|
||||||
|
>
|
||||||
|
<option value="inaccurate">
|
||||||
|
Inaccurate data
|
||||||
|
</option>
|
||||||
|
<option value="spam">
|
||||||
|
Spam
|
||||||
|
</option>
|
||||||
|
<option value="inappropriate">
|
||||||
|
Inappropriate
|
||||||
|
</option>
|
||||||
|
<option value="other">
|
||||||
|
Other
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<textarea
|
||||||
|
value={reportDetails}
|
||||||
|
onChange={(e) =>
|
||||||
|
setReportDetails(e.target.value)
|
||||||
|
}
|
||||||
|
placeholder="Additional details (optional)"
|
||||||
|
rows={3}
|
||||||
|
className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full resize-none"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleReportSubmit}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
|
Submit Report
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowReportForm(false)
|
||||||
|
setReportDetails("")
|
||||||
|
}}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasReported && (
|
{hasReported && (
|
||||||
<span className="inline-flex items-center gap-1.5 text-sm text-text/50">
|
<span className="inline-flex items-center gap-1.5 text-sm text-text/50">
|
||||||
<FlagIcon className="h-4 w-4" />
|
<FlagIcon className="h-4 w-4" />
|
||||||
Reported
|
Reported
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right panel */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-5">
|
||||||
|
{hasCategories ? (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Category navigation */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
onClick={goPrevCategory}
|
||||||
|
className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer"
|
||||||
|
aria-label="Previous category"
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon className="h-4 w-4 text-text/50" />
|
||||||
|
</button>
|
||||||
|
<span className="text-sm font-medium text-text/80">
|
||||||
|
{currentCategory?.category}{" "}
|
||||||
|
<span className="text-text/40">
|
||||||
|
({activeCategoryIndex + 1}/{categories.length})
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={goNextCategory}
|
||||||
|
className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer"
|
||||||
|
aria-label="Next category"
|
||||||
|
>
|
||||||
|
<ChevronRightIcon className="h-4 w-4 text-text/50" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Settings table */}
|
||||||
|
<div className="rounded-lg border border-border overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-text/3">
|
||||||
|
<tr>
|
||||||
|
<th className="text-left px-3 py-2 text-xs font-medium uppercase tracking-wider text-text/50">
|
||||||
|
Setting
|
||||||
|
</th>
|
||||||
|
<th className="text-right px-3 py-2 text-xs font-medium uppercase tracking-wider text-text/50">
|
||||||
|
Value
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{currentCategory?.settings.map((setting, sIdx) => (
|
||||||
|
<tr
|
||||||
|
key={sIdx}
|
||||||
|
className="border-t border-border"
|
||||||
|
>
|
||||||
|
<td className="px-3 py-2 text-text/70">
|
||||||
|
{setting.title}
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-2 text-right font-medium text-text">
|
||||||
|
{formatValue(setting.value)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center py-16 gap-3 rounded-lg border border-border bg-text/2">
|
||||||
|
<p className="text-sm text-text/40">
|
||||||
|
No settings data
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
{preset.userNotes && (
|
||||||
|
<div className="mt-4 pt-4 border-t border-border">
|
||||||
|
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||||
|
Notes
|
||||||
|
</h3>
|
||||||
|
<TiptapRenderer content={preset.userNotes} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@@ -0,0 +1,52 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import React from "react"
|
||||||
|
|
||||||
|
interface TiptapNode {
|
||||||
|
type: string
|
||||||
|
content?: TiptapNode[]
|
||||||
|
text?: string
|
||||||
|
marks?: { type: string; attrs?: Record<string, string> }[]
|
||||||
|
attrs?: Record<string, string>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TiptapRenderer({ content }: { content: string }) {
|
||||||
|
let parsed: TiptapNode
|
||||||
|
try {
|
||||||
|
parsed = JSON.parse(content)
|
||||||
|
} catch {
|
||||||
|
// If it's just plain text, wrap it in a paragraph
|
||||||
|
return <p className="text-sm text-text/70 whitespace-pre-line leading-relaxed">{content}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="text-sm text-text/70 leading-relaxed">{renderNode(parsed)}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNode(node: TiptapNode, key?: number): React.ReactNode {
|
||||||
|
switch (node.type) {
|
||||||
|
case "doc":
|
||||||
|
return node.content?.map((child, i) => renderNode(child, i))
|
||||||
|
case "paragraph":
|
||||||
|
return <p key={key} className="mb-2 last:mb-0">{node.content ? node.content.map((child, i) => renderNode(child, i)) : <br />}</p>
|
||||||
|
case "text": {
|
||||||
|
let el: React.ReactNode = node.text ?? ""
|
||||||
|
node.marks?.forEach((mark) => {
|
||||||
|
if (mark.type === "bold") el = <strong key={`${key}-bold`}>{el}</strong>
|
||||||
|
if (mark.type === "italic") el = <em key={`${key}-italic`}>{el}</em>
|
||||||
|
})
|
||||||
|
return <span key={key}>{el}</span>
|
||||||
|
}
|
||||||
|
case "bulletList":
|
||||||
|
return <ul key={key} className="list-disc pl-4 mb-2">{node.content?.map((child, i) => renderNode(child, i))}</ul>
|
||||||
|
case "orderedList":
|
||||||
|
return <ol key={key} className="list-decimal pl-4 mb-2">{node.content?.map((child, i) => renderNode(child, i))}</ol>
|
||||||
|
case "listItem":
|
||||||
|
return <li key={key}>{node.content?.map((child, i) => renderNode(child, i))}</li>
|
||||||
|
case "link":
|
||||||
|
return <a key={key} href={node.attrs?.href} target="_blank" rel="noopener noreferrer" className="text-primary underline">{node.content?.map((child, i) => renderNode(child, i))}</a>
|
||||||
|
case "hardBreak":
|
||||||
|
return <br key={key} />
|
||||||
|
default:
|
||||||
|
return node.content?.map((child, i) => renderNode(child, i))
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user