fix: preset UX — gradient fade edges, Tiptap notes renderer, two-column modal layout with stats/settings, upvote/downvote buttons

app/game/[id]/game-page-client.tsx

@@ -12,8 +12,8 @@ import {
     SparklesIcon,
     DatabaseIcon,
     Plus,
-    ChevronLeftIcon,
+    ThumbsUpIcon,
-    ChevronRightIcon,
+    ThumbsDownIcon,
 } from "lucide-react"
 import Link from "next/link"
 import { useSession } from "@/lib/auth-client"
@@ -383,7 +383,8 @@ export function GamePageClient({
                             <Image
                                 src={coverImage}
                                 alt={game.title}
-                                fill
+                                width={600}
+                                height={900}
                                 className='object-cover'
                                 priority
                                 onError={handleImgError}
@@ -745,21 +746,11 @@ export function GamePageClient({
                             </p>
                         </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
                                 ref={presetsRef}
                                 className="flex gap-4 overflow-x-auto scrollbar-hide pb-4"
@@ -774,7 +765,7 @@ export function GamePageClient({
                                                 key={preset.id}
                                                 layoutId={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
                                                         ? "border-green-500/30 bg-green-500/5"
                                                         : "border-border bg-text/3"
@@ -803,9 +794,15 @@ export function GamePageClient({
                                                             {preset.hardwareName}
                                                         </p>
                                                     </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'>
+                                                            <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>
 

app/game/[id]/preset-detail-modal.tsx

@@ -6,15 +6,17 @@ import { AnimatePresence, motion } from "motion/react"
 import { useSession } from "@/lib/auth-client"
 import type { GameSettingCategory } from "@/lib/db/schema/performanceEntries"
 import {
-    TrendingUpIcon,
+    ThumbsUpIcon,
-    TrendingDownIcon,
+    ThumbsDownIcon,
     FlagIcon,
     TrashIcon,
-    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
     ShieldCheckIcon,
     XIcon,
     UserIcon,
 } from "lucide-react"
+import { TiptapRenderer } from "@/components/tiptap-renderer"
 
 interface Preset {
     id: string
@@ -72,9 +74,7 @@ export function PresetDetailModal({
 }: PresetDetailModalProps) {
     const { data: session } = useSession()
 
-    const [openCategories, setOpenCategories] = useState<Set<number>>(
+    const [activeCategoryIndex, setActiveCategoryIndex] = useState(0)
-        new Set(),
-    )
     const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
     const [showReportForm, setShowReportForm] = useState(false)
     const [reportReason, setReportReason] = useState<
@@ -82,19 +82,52 @@ export function PresetDetailModal({
     >("inaccurate")
     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 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")
+            }
+        } 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)
         }
-            return next
-        })
     }
 
     const handleReportSubmit = () => {
@@ -132,7 +165,7 @@ export function PresetDetailModal({
                     {/* Modal card */}
                     <motion.div
                         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 }}
                         animate={{ scale: 1, opacity: 1 }}
                         exit={{ scale: 0.95, opacity: 0 }}
@@ -144,15 +177,32 @@ export function PresetDetailModal({
                         onClick={(e) => e.stopPropagation()}
                     >
                         {/* 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">
+                                <h2 className="text-base font-semibold text-text truncate">
+                                    {preset.hardwareName}
+                                </h2>
+                            </div>
+                            <button
+                                onClick={onClose}
+                                className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer shrink-0"
+                                aria-label="Close"
+                            >
+                                <XIcon className="h-4 w-4 text-text/50" />
+                            </button>
+                        </div>
+
+                        {/* Two-column body */}
+                        <div className="flex flex-col md:flex-row overflow-hidden flex-1">
+                            {/* Left panel */}
+                            <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">
+                                {/* User info */}
+                                <div className="flex items-center gap-3">
                                     <div className="h-10 w-10 rounded-full bg-text/10 overflow-hidden flex items-center justify-center shrink-0">
                                         {preset.userImage ? (
                                             <Image
                                                 src={preset.userImage}
-                                            alt={
+                                                alt={preset.userName || "User"}
-                                                preset.userName || "User"
-                                            }
                                                 width={40}
                                                 height={40}
                                                 className="object-cover"
@@ -163,7 +213,7 @@ export function PresetDetailModal({
                                     </div>
                                     <div className="min-w-0">
                                         <div className="flex items-center gap-2">
-                                        <span className="font-semibold text-sm text-text truncate">
+                                            <span className="font-medium text-sm text-text truncate">
                                                 {preset.userName || "Anonymous"}
                                             </span>
                                             {preset.verifiedAt && (
@@ -180,75 +230,68 @@ export function PresetDetailModal({
                                         </span>
                                     </div>
                                 </div>
+
+                                <div className="h-px bg-border" />
+
+                                {/* Vote buttons */}
+                                <div className="flex items-center gap-3">
                                     <button
-                                onClick={onClose}
+                                        onClick={handleUpvote}
-                                className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer shrink-0"
+                                        disabled={!isAuthenticated || userVote === "up"}
-                                aria-label="Close"
+                                        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}
                                     >
-                                <XIcon className="h-4 w-4 text-text/50" />
+                                        <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>
 
-                        {/* Stats Row */}
+                                {/* FPS */}
-                        <div className="grid grid-cols-3 gap-4 p-5 border-b border-border">
+                                {preset.fpsAvg !== null && (
-                            <div className="flex flex-col gap-1">
-                                <span className="text-xs text-text/50 uppercase tracking-wider">
-                                    Upvotes
-                                </span>
-                                <div className="flex items-center gap-1.5 text-sm text-text">
-                                    <TrendingUpIcon className="h-4 w-4 text-green-400" />
-                                    <span className="font-semibold">
-                                        {preset.upvotes}
-                                    </span>
-                                </div>
-                            </div>
-                            <div className="flex flex-col gap-1">
-                                <span className="text-xs text-text/50 uppercase tracking-wider">
-                                    Downvotes
-                                </span>
-                                <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 ?? "—"}
+                                                {preset.fpsAvg}
                                             </span>
-                                    {preset.fpsAvg !== null &&
+                                            {preset.fpsLow !== null && preset.fpsHigh !== null && (
-                                        preset.fpsLow !== null &&
-                                        preset.fpsHigh !== null && (
                                                 <span className="text-text/50 ml-1">
-                                                ({Math.round(preset.fpsLow)}
+                                                    ({Math.round(preset.fpsLow)}–{Math.round(preset.fpsHigh)})
-                                                –
-                                                {Math.round(preset.fpsHigh)})
                                                 </span>
                                             )}
                                         </div>
                                     </div>
-                        </div>
+                                )}
 
-                        {/* Metadata Grid */}
+                                <div className="h-px bg-border" />
-                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 p-5 border-b border-border">
+
-                            <MetaItem
+                                {/* Metadata */}
-                                label="Proton"
+                                <div className="flex flex-col gap-3">
-                                value={preset.protonVersion}
+                                    <MetaItem label="Proton" value={preset.protonVersion} />
-                            />
+                                    <MetaItem label="SteamOS" value={preset.osVersion} />
-                            <MetaItem
-                                label="SteamOS"
-                                value={preset.osVersion}
-                            />
                                     <MetaItem
                                         label="Upscaler"
                                         value={
-                                    preset.upscalerType &&
+                                            preset.upscalerType && preset.upscalerType !== "none"
-                                    preset.upscalerType !== "none"
                                                 ? `${preset.upscalerType.toUpperCase()}${preset.upscalerVersion ? ` ${preset.upscalerVersion}` : ""}`
                                                 : null
                                         }
@@ -256,130 +299,27 @@ export function PresetDetailModal({
                                     <MetaItem
                                         label="Frame Gen"
                                         value={
-                                    preset.frameGenMethod &&
+                                            preset.frameGenMethod && preset.frameGenMethod !== "none"
-                                    preset.frameGenMethod !== "none"
                                                 ? preset.frameGenMethod === "fsr_fg"
                                                     ? "FSR FG"
-                                            : preset.frameGenMethod ===
+                                                    : preset.frameGenMethod === "dlss_fg"
-                                                "dlss_fg"
                                                       ? "DLSS FG"
                                                       : preset.frameGenMethod
                                                 : null
                                         }
                                     />
-                            <MetaItem
+                                    <MetaItem label="Launch Options" value={preset.launchOptions} />
-                                label="Launch Options"
-                                value={preset.launchOptions}
-                                className="col-span-2 sm:col-span-3"
-                            />
                                 </div>
 
-                        {/* Settings Table */}
+                                <div className="h-px bg-border" />
-                        {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>
-                            )}
-
-                        {/* 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">
+                                <div className="flex flex-wrap items-center gap-2 mt-auto">
                                     {(isOwner || isAdmin) && (
                                         <>
                                             {!showDeleteConfirm ? (
                                                 <button
-                                            onClick={() =>
+                                                    onClick={() => setShowDeleteConfirm(true)}
-                                                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" />
@@ -393,18 +333,14 @@ export function PresetDetailModal({
                                                     <button
                                                         onClick={() => {
                                                             onDelete(preset.id)
-                                                    setShowDeleteConfirm(
+                                                            setShowDeleteConfirm(false)
-                                                        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={() =>
+                                                        onClick={() => setShowDeleteConfirm(false)}
-                                                    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
@@ -418,9 +354,7 @@ export function PresetDetailModal({
                                         <>
                                             {!showReportForm ? (
                                                 <button
-                                            onClick={() =>
+                                                    onClick={() => setShowReportForm(true)}
-                                                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" />
@@ -432,8 +366,7 @@ export function PresetDetailModal({
                                                         value={reportReason}
                                                         onChange={(e) =>
                                                             setReportReason(
-                                                        e.target
+                                                                e.target.value as typeof reportReason,
-                                                            .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"
@@ -454,9 +387,7 @@ export function PresetDetailModal({
                                                     <textarea
                                                         value={reportDetails}
                                                         onChange={(e) =>
-                                                    setReportDetails(
+                                                            setReportDetails(e.target.value)
-                                                        e.target.value,
-                                                    )
                                                         }
                                                         placeholder="Additional details (optional)"
                                                         rows={3}
@@ -464,18 +395,14 @@ export function PresetDetailModal({
                                                     />
                                                     <div className="flex items-center gap-2">
                                                         <button
-                                                    onClick={
+                                                            onClick={handleReportSubmit}
-                                                        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(
+                                                                setShowReportForm(false)
-                                                            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"
@@ -495,6 +422,86 @@ export function PresetDetailModal({
                                         </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>
                     </motion.div>
                 </motion.div>
             </>

components/tiptap-renderer.tsx

@@ -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))
+  }
+}