refactor: overhaul settings editor, review step, and preset detail modal
- Refactored settings-editor.tsx with improved structure - Refactored review-step.tsx for better readability - Refactored preset-detail-modal.tsx - Minor fix in game-page-client.tsx
This commit is contained in:
@@ -883,7 +883,7 @@ export function GamePageClient({
|
||||
{/* Desktop hero — side-by-side layout */}
|
||||
<div className='hidden md:flex gap-4 sm:gap-6 px-[10svw]'>
|
||||
{/* Cover image */}
|
||||
<div className='relative shrink-0 aspect-2/3 w-20 sm:w-28 md:w-36 rounded-lg overflow-hidden border border-border bg-text/5 h-max'>
|
||||
<div className='relative shrink-0 aspect-2/3 w-20 sm:w-32 md:w-52 rounded-lg overflow-hidden border border-border bg-text/5 h-max'>
|
||||
{coverImage && !imgError ? (
|
||||
<Image
|
||||
src={coverImage}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,22 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { motion } from "motion/react"
|
||||
import { Send, Loader2, AlertCircle, Monitor, Gauge, SlidersHorizontal, Terminal, FileText, ImagePlus, X } from "lucide-react"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { motion, Reorder, useDragControls } from "motion/react"
|
||||
import {
|
||||
Send,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
Monitor,
|
||||
Gauge,
|
||||
SlidersHorizontal,
|
||||
Terminal,
|
||||
FileText,
|
||||
ImagePlus,
|
||||
X,
|
||||
GripVertical,
|
||||
Upload,
|
||||
ImageIcon,
|
||||
} from "lucide-react"
|
||||
import { TiptapEditor } from "@/components/tiptap-editor"
|
||||
import type { SettingCategory } from "@/components/wizard/settings-editor"
|
||||
import type { PerformanceData } from "./performance-step"
|
||||
@@ -37,20 +51,34 @@ interface ReviewStepProps {
|
||||
submitPhase: "idle" | "uploading" | "saving" | "success" | "error"
|
||||
}
|
||||
|
||||
function SectionHeader({ icon: Icon, label }: { icon: React.ElementType; label: string }) {
|
||||
function SectionHeader({
|
||||
icon: Icon,
|
||||
label,
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
label: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon className="h-3.5 w-3.5 text-primary" />
|
||||
<span className="text-xs font-semibold text-text/80 uppercase tracking-wider">{label}</span>
|
||||
<div className='flex items-center gap-2 mb-2'>
|
||||
<Icon className='h-3.5 w-3.5 text-primary' />
|
||||
<span className='text-xs font-semibold text-text/80 uppercase tracking-wider'>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SummaryRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
function SummaryRow({
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
label: string
|
||||
value: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-1.5 border-b border-border/50 last:border-b-0">
|
||||
<span className="text-xs text-text/50">{label}</span>
|
||||
<span className="text-xs text-text font-medium">{value}</span>
|
||||
<div className='flex items-center justify-between py-1.5 border-b border-border/50 last:border-b-0'>
|
||||
<span className='text-xs text-text/50'>{label}</span>
|
||||
<span className='text-xs text-text font-medium'>{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -60,6 +88,93 @@ function formatNumber(val: number | undefined): string {
|
||||
return String(val)
|
||||
}
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
}
|
||||
|
||||
function ScreenshotCard({
|
||||
file,
|
||||
url,
|
||||
index,
|
||||
onRemove,
|
||||
}: {
|
||||
file: File
|
||||
url: string
|
||||
index: number
|
||||
onRemove: () => void
|
||||
}) {
|
||||
const dragControls = useDragControls()
|
||||
|
||||
return (
|
||||
<Reorder.Item
|
||||
value={file}
|
||||
dragListener={false}
|
||||
dragControls={dragControls}
|
||||
as='div'
|
||||
className='group relative rounded-xl border border-border bg-text/3 overflow-hidden shadow-sm hover:shadow-md hover:border-primary/30 transition-all'
|
||||
whileDrag={{
|
||||
scale: 1.02,
|
||||
boxShadow: "0 12px 40px rgba(0,0,0,0.3)",
|
||||
zIndex: 20,
|
||||
}}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className='relative aspect-video'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={url}
|
||||
alt={file.name}
|
||||
className='w-full h-full object-cover'
|
||||
draggable={false}
|
||||
/>
|
||||
|
||||
{/* Overlay gradient */}
|
||||
<div className='absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity' />
|
||||
|
||||
{/* Drag handle (top-left) */}
|
||||
<div
|
||||
className='absolute top-2 left-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-black/70 backdrop-blur-sm cursor-grab active:cursor-grabbing transition-colors opacity-0 group-hover:opacity-100'
|
||||
onPointerDown={(e) => dragControls.start(e)}
|
||||
>
|
||||
<GripVertical className='h-3.5 w-3.5' />
|
||||
</div>
|
||||
|
||||
{/* Remove button (top-right) */}
|
||||
<button
|
||||
type='button'
|
||||
onClick={onRemove}
|
||||
className='absolute top-2 right-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-red-500/80 backdrop-blur-sm transition-colors opacity-0 group-hover:opacity-100 cursor-pointer'
|
||||
title='Remove screenshot'
|
||||
>
|
||||
<X className='h-3.5 w-3.5' />
|
||||
</button>
|
||||
|
||||
{/* Index badge */}
|
||||
<div className='absolute bottom-2 left-2 px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-sm text-[10px] font-medium text-white/90 opacity-0 group-hover:opacity-100 transition-opacity'>
|
||||
#{index + 1}
|
||||
</div>
|
||||
|
||||
{/* File info (bottom-right) */}
|
||||
<div className='absolute bottom-2 right-2 px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-sm text-[10px] text-white/70 opacity-0 group-hover:opacity-100 transition-opacity truncate max-w-30'>
|
||||
{formatFileSize(file.size)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filename bar */}
|
||||
<div className='px-3 py-2 border-t border-border/50'>
|
||||
<p
|
||||
className='text-[11px] text-text/60 truncate'
|
||||
title={file.name}
|
||||
>
|
||||
{file.name}
|
||||
</p>
|
||||
</div>
|
||||
</Reorder.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export function ReviewStep({
|
||||
data,
|
||||
userNotes,
|
||||
@@ -71,85 +186,210 @@ export function ReviewStep({
|
||||
onScreenshotFilesChange,
|
||||
submitPhase,
|
||||
}: ReviewStepProps) {
|
||||
const { hardwareName, gameVersionLabel, antiCheat, performance, environment, settings } = data
|
||||
const {
|
||||
hardwareName,
|
||||
gameVersionLabel,
|
||||
antiCheat,
|
||||
performance,
|
||||
environment,
|
||||
settings,
|
||||
} = data
|
||||
|
||||
const [previews, setPreviews] = useState<{ file: File; url: string }[]>([])
|
||||
// Stable URL mapping so reordering doesn't flicker
|
||||
const urlMapRef = useRef(new Map<File, string>())
|
||||
const [previewUrls, setPreviewUrls] = useState<string[]>([])
|
||||
const [isDragOver, setIsDragOver] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!screenshotFiles?.length) {
|
||||
setPreviews([])
|
||||
return
|
||||
const map = urlMapRef.current
|
||||
|
||||
// Create URLs for new files
|
||||
for (const file of screenshotFiles) {
|
||||
if (!map.has(file)) {
|
||||
map.set(file, URL.createObjectURL(file))
|
||||
}
|
||||
const next = screenshotFiles.map((file) => ({ file, url: URL.createObjectURL(file) }))
|
||||
setPreviews(next)
|
||||
return () => {
|
||||
next.forEach((p) => URL.revokeObjectURL(p.url))
|
||||
}
|
||||
|
||||
// Revoke URLs for removed files
|
||||
for (const [file, url] of Array.from(map.entries())) {
|
||||
if (!screenshotFiles.includes(file)) {
|
||||
URL.revokeObjectURL(url)
|
||||
map.delete(file)
|
||||
}
|
||||
}
|
||||
|
||||
setPreviewUrls(screenshotFiles.map((f) => map.get(f)!))
|
||||
}, [screenshotFiles])
|
||||
|
||||
useEffect(() => {
|
||||
const map = urlMapRef.current
|
||||
return () => {
|
||||
for (const url of map.values()) {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
map.clear()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleFiles = (files: FileList | null) => {
|
||||
if (!files) return
|
||||
const incoming = Array.from(files).filter((f) =>
|
||||
/image\/(jpeg|png|webp)/.test(f.type),
|
||||
)
|
||||
const current = screenshotFiles || []
|
||||
const combined = [...current, ...incoming].slice(0, 2)
|
||||
onScreenshotFilesChange?.(combined)
|
||||
}
|
||||
|
||||
const removeFile = (file: File) => {
|
||||
const newFiles = (screenshotFiles || []).filter((f) => f !== file)
|
||||
onScreenshotFilesChange?.(newFiles)
|
||||
}
|
||||
|
||||
const handleReorder = (newFiles: File[]) => {
|
||||
onScreenshotFilesChange(newFiles)
|
||||
}
|
||||
|
||||
const upscalerLabel = (() => {
|
||||
if (!data.environment.upscalerType || data.environment.upscalerType === "none") return "None"
|
||||
const opt = UPSCALER_TYPE_OPTIONS.find(o => o.value === data.environment.upscalerType)
|
||||
if (
|
||||
!data.environment.upscalerType ||
|
||||
data.environment.upscalerType === "none"
|
||||
)
|
||||
return "None"
|
||||
const opt = UPSCALER_TYPE_OPTIONS.find(
|
||||
(o) => o.value === data.environment.upscalerType,
|
||||
)
|
||||
const base = opt?.label ?? data.environment.upscalerType
|
||||
return data.environment.upscalerVersion ? `${base} ${data.environment.upscalerVersion}` : base
|
||||
return data.environment.upscalerVersion
|
||||
? `${base} ${data.environment.upscalerVersion}`
|
||||
: base
|
||||
})()
|
||||
|
||||
const frameGenLabel = (() => {
|
||||
if (!environment.frameGenMethod || environment.frameGenMethod === "none") return "None"
|
||||
const opt = FRAME_GEN_OPTIONS.find(o => o.value === environment.frameGenMethod)
|
||||
if (
|
||||
!environment.frameGenMethod ||
|
||||
environment.frameGenMethod === "none"
|
||||
)
|
||||
return "None"
|
||||
const opt = FRAME_GEN_OPTIONS.find(
|
||||
(o) => o.value === environment.frameGenMethod,
|
||||
)
|
||||
return opt?.label ?? environment.frameGenMethod
|
||||
})()
|
||||
|
||||
const canUploadMore =
|
||||
(!screenshotFiles || screenshotFiles.length < 2) &&
|
||||
submitPhase !== "uploading" &&
|
||||
submitPhase !== "saving"
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<FileText className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
|
||||
<div className='space-y-6'>
|
||||
<div className='flex items-start gap-3'>
|
||||
<FileText className='h-4 w-4 text-primary mt-0.5 shrink-0' />
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-text">Review & Submit</h3>
|
||||
<p className="text-xs text-text/60 mt-1">
|
||||
Review your submission details below. Add any additional notes and click Submit when ready.
|
||||
<h3 className='text-sm font-semibold text-text'>
|
||||
Review & Submit
|
||||
</h3>
|
||||
<p className='text-xs text-text/60 mt-1'>
|
||||
Review your submission details below. Add any additional
|
||||
notes and click Submit when ready.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
|
||||
{/* Setup: Hardware + Version + Anti-Cheat */}
|
||||
<div className="rounded-lg border border-border bg-text/5 p-4">
|
||||
<SectionHeader icon={Monitor} label="Setup" />
|
||||
<SummaryRow label="Device" value={hardwareName || data.hardwareSlug || "Not selected"} />
|
||||
<SummaryRow label="Game Version" value={gameVersionLabel} />
|
||||
<div className='rounded-lg border border-border bg-text/5 p-4'>
|
||||
<SectionHeader
|
||||
icon={Monitor}
|
||||
label='Setup'
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Device'
|
||||
value={
|
||||
hardwareName || data.hardwareSlug || "Not selected"
|
||||
}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Game Version'
|
||||
value={gameVersionLabel}
|
||||
/>
|
||||
{antiCheat.antiCheatRelevant && (
|
||||
<>
|
||||
<SummaryRow label="Anti-Cheat" value={antiCheat.antiCheatName || "Unknown"} />
|
||||
<SummaryRow label="Anti-Cheat Status" value={
|
||||
antiCheat.antiCheatStatus === "supported" ? "Supported" :
|
||||
antiCheat.antiCheatStatus === "unsupported" ? "Unsupported" :
|
||||
antiCheat.antiCheatStatus === "unknown" ? "Unknown" : "None"
|
||||
} />
|
||||
<SummaryRow
|
||||
label='Anti-Cheat'
|
||||
value={antiCheat.antiCheatName || "Unknown"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Anti-Cheat Status'
|
||||
value={
|
||||
antiCheat.antiCheatStatus === "supported"
|
||||
? "Supported"
|
||||
: antiCheat.antiCheatStatus ===
|
||||
"unsupported"
|
||||
? "Unsupported"
|
||||
: antiCheat.antiCheatStatus ===
|
||||
"unknown"
|
||||
? "Unknown"
|
||||
: "None"
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!antiCheat.antiCheatRelevant && (
|
||||
<SummaryRow label="Anti-Cheat" value="None" />
|
||||
<SummaryRow
|
||||
label='Anti-Cheat'
|
||||
value='None'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Performance */}
|
||||
<div className="rounded-lg border border-border bg-text/5 p-4">
|
||||
<SectionHeader icon={Gauge} label="Performance" />
|
||||
<SummaryRow label="FPS Average" value={formatNumber(performance.fpsAvg)} />
|
||||
<SummaryRow label="1% Low FPS" value={formatNumber(performance.fpsOnePercentLow)} />
|
||||
<SummaryRow label="FPS Low" value={formatNumber(performance.fpsLow)} />
|
||||
<SummaryRow label="FPS High" value={formatNumber(performance.fpsHigh)} />
|
||||
<SummaryRow label="Load Time SSD" value={formatNumber(performance.loadTimeSsd)} />
|
||||
<SummaryRow label="Load Time SD" value={formatNumber(performance.loadTimeSd)} />
|
||||
<SummaryRow label="TDP (Watts)" value={formatNumber(performance.tdpWatts)} />
|
||||
<div className='rounded-lg border border-border bg-text/5 p-4'>
|
||||
<SectionHeader
|
||||
icon={Gauge}
|
||||
label='Performance'
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Est. Battery"
|
||||
label='FPS Average'
|
||||
value={formatNumber(performance.fpsAvg)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='1% Low FPS'
|
||||
value={formatNumber(performance.fpsOnePercentLow)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='FPS Low'
|
||||
value={formatNumber(performance.fpsLow)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='FPS High'
|
||||
value={formatNumber(performance.fpsHigh)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Load Time SSD'
|
||||
value={formatNumber(performance.loadTimeSsd)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Load Time SD'
|
||||
value={formatNumber(performance.loadTimeSd)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='TDP (Watts)'
|
||||
value={formatNumber(performance.tdpWatts)}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Est. Battery'
|
||||
value={(() => {
|
||||
const wh = data.hardwareWattHours
|
||||
const tdp = performance.tdpWatts
|
||||
if (wh && tdp && tdp > 0 && data.hardwareDeviceType === "handheld") {
|
||||
if (
|
||||
wh &&
|
||||
tdp &&
|
||||
tdp > 0 &&
|
||||
data.hardwareDeviceType === "handheld"
|
||||
) {
|
||||
const hours = wh / tdp
|
||||
const mins = Math.round(hours * 60)
|
||||
return `~${hours.toFixed(1)}h (${mins} min)`
|
||||
@@ -160,58 +400,95 @@ export function ReviewStep({
|
||||
</div>
|
||||
|
||||
{/* Environment */}
|
||||
<div className="rounded-lg border border-border bg-text/5 p-4">
|
||||
<SectionHeader icon={Terminal} label="Environment" />
|
||||
<SummaryRow label="Proton Version" value={environment.protonVersion || "Not set"} />
|
||||
<SummaryRow label="OS Version" value={environment.osVersion || "Not set"} />
|
||||
<SummaryRow label="Upscaler" value={upscalerLabel} />
|
||||
<SummaryRow label="Frame Gen" value={frameGenLabel} />
|
||||
<SummaryRow label="Custom System" value={environment.customSystem ? "Yes" : "No"} />
|
||||
<div className='rounded-lg border border-border bg-text/5 p-4'>
|
||||
<SectionHeader
|
||||
icon={Terminal}
|
||||
label='Environment'
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Proton Version'
|
||||
value={environment.protonVersion || "Not set"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='OS Version'
|
||||
value={environment.osVersion || "Not set"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Upscaler'
|
||||
value={upscalerLabel}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Frame Gen'
|
||||
value={frameGenLabel}
|
||||
/>
|
||||
<SummaryRow
|
||||
label='Custom System'
|
||||
value={environment.customSystem ? "Yes" : "No"}
|
||||
/>
|
||||
{environment.launchOptions && (
|
||||
<SummaryRow
|
||||
label="Launch Options"
|
||||
label='Launch Options'
|
||||
value={
|
||||
<span className="font-mono text-[10px] truncate max-w-[160px] block" title={environment.launchOptions}>
|
||||
<span
|
||||
className='font-mono text-[10px] truncate max-w-40 block'
|
||||
title={environment.launchOptions}
|
||||
>
|
||||
{environment.launchOptions}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{environment.youtubeVideoId && /^[a-zA-Z0-9_-]{11}$/.test(environment.youtubeVideoId) ? (
|
||||
<div className="mt-2">
|
||||
<span className="text-xs text-text/50">YouTube Video</span>
|
||||
<div className="mt-1 relative" style={{ paddingBottom: "56.25%" }}>
|
||||
{environment.youtubeVideoId &&
|
||||
/^[a-zA-Z0-9_-]{11}$/.test(environment.youtubeVideoId) ? (
|
||||
<div className='mt-2'>
|
||||
<span className='text-xs text-text/50'>
|
||||
YouTube Video
|
||||
</span>
|
||||
<div
|
||||
className='mt-1 relative'
|
||||
style={{ paddingBottom: "56.25%" }}
|
||||
>
|
||||
<iframe
|
||||
src={`https://www.youtube-nocookie.com/embed/${environment.youtubeVideoId}`}
|
||||
className="absolute inset-0 w-full h-full rounded-md"
|
||||
allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
|
||||
sandbox="allow-scripts allow-same-origin allow-presentation"
|
||||
className='absolute inset-0 w-full h-full rounded-md'
|
||||
allow='accelerometer; autoplay; encrypted-media; picture-in-picture'
|
||||
sandbox='allow-scripts allow-same-origin allow-presentation'
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
title="Review: Gameplay Video"
|
||||
loading='lazy'
|
||||
title='Review: Gameplay Video'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<SummaryRow label="YouTube Video" value="Not provided" />
|
||||
<SummaryRow
|
||||
label='YouTube Video'
|
||||
value='Not provided'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="rounded-lg border border-border bg-text/5 p-4">
|
||||
<SectionHeader icon={SlidersHorizontal} label="Settings" />
|
||||
<div className='rounded-lg border border-border bg-text/5 p-4'>
|
||||
<SectionHeader
|
||||
icon={SlidersHorizontal}
|
||||
label='Settings'
|
||||
/>
|
||||
{settings.length === 0 ? (
|
||||
<p className="text-xs text-text/40 py-1">No settings configured</p>
|
||||
<p className='text-xs text-text/40 py-1'>
|
||||
No settings configured
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto">
|
||||
<div className='space-y-2 max-h-40 overflow-y-auto'>
|
||||
{settings.map((cat) => (
|
||||
<div key={cat.category}>
|
||||
<p className="text-xs font-medium text-text/70">{cat.category}</p>
|
||||
<div className="flex flex-wrap gap-1 mt-0.5">
|
||||
<p className='text-xs font-medium text-text/70'>
|
||||
{cat.category}
|
||||
</p>
|
||||
<div className='flex flex-wrap gap-1 mt-0.5'>
|
||||
{cat.settings.map((s) => (
|
||||
<span
|
||||
key={s.title}
|
||||
className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-text/10 text-text/60"
|
||||
className='inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-text/10 text-text/60'
|
||||
>
|
||||
{s.title}: {String(s.value)}
|
||||
</span>
|
||||
@@ -225,88 +502,133 @@ export function ReviewStep({
|
||||
</div>
|
||||
|
||||
{/* Screenshots */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-text/60">Screenshots</label>
|
||||
{data.settings.length === 0 ? (
|
||||
<div className="rounded-lg border border-border bg-text/5 p-4">
|
||||
<p className="text-xs text-text/50">Add game settings to enable screenshot upload</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border border-border bg-text/5 p-4 space-y-3">
|
||||
{(submitPhase === "uploading" || submitPhase === "saving") && (
|
||||
<div className="flex items-center gap-2 text-xs text-text/60">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
<div className='space-y-3 overflow-clip'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='text-xs font-medium text-text/60 flex items-center gap-1.5'>
|
||||
<ImageIcon className='h-3.5 w-3.5 text-text/40' />
|
||||
Screenshots
|
||||
<span className='text-[10px] text-text/30 font-normal'>
|
||||
({screenshotFiles?.length ?? 0}/2)
|
||||
</span>
|
||||
</label>
|
||||
{(submitPhase === "uploading" ||
|
||||
submitPhase === "saving") && (
|
||||
<div className='flex items-center gap-2 text-xs text-text/60'>
|
||||
<Loader2 className='h-3.5 w-3.5 animate-spin' />
|
||||
<span>Uploading...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{previews.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{previews.map((preview) => (
|
||||
<div
|
||||
key={preview.url}
|
||||
className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-lg overflow-hidden border border-border bg-text/10"
|
||||
{data.settings.length === 0 ? (
|
||||
<div className='rounded-lg border border-border bg-text/5 p-4'>
|
||||
<p className='text-xs text-text/50'>
|
||||
Add game settings to enable screenshot upload
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className='space-y-3'>
|
||||
{/* Screenshot grid with drag-to-reorder */}
|
||||
{screenshotFiles && screenshotFiles.length > 0 && (
|
||||
<Reorder.Group
|
||||
axis='x'
|
||||
values={screenshotFiles}
|
||||
onReorder={handleReorder}
|
||||
as='div'
|
||||
className='grid grid-cols-2 gap-3'
|
||||
>
|
||||
<img
|
||||
src={preview.url}
|
||||
alt={preview.file.name}
|
||||
className="w-full h-full object-cover"
|
||||
{screenshotFiles.map((file, idx) => (
|
||||
<ScreenshotCard
|
||||
key={
|
||||
file.name +
|
||||
file.size +
|
||||
file.lastModified
|
||||
}
|
||||
file={file}
|
||||
url={previewUrls[idx] || ""}
|
||||
index={idx}
|
||||
onRemove={() => removeFile(file)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const newFiles = (screenshotFiles || []).filter((f) => f !== preview.file)
|
||||
onScreenshotFilesChange?.(newFiles)
|
||||
}}
|
||||
className="absolute top-1 right-1 p-0.5 rounded bg-black/60 text-white hover:bg-black/80 transition-colors cursor-pointer"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reorder.Group>
|
||||
)}
|
||||
|
||||
{(!screenshotFiles || screenshotFiles.length < 2) && submitPhase !== "uploading" && submitPhase !== "saving" && (
|
||||
<label className="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-dashed border-border bg-text/5 hover:bg-text/10 transition-colors cursor-pointer">
|
||||
<ImagePlus className="h-3.5 w-3.5 text-primary" />
|
||||
<span className="text-xs text-text/70">
|
||||
{(!screenshotFiles || screenshotFiles.length === 0) ? "Add screenshots" : "Add another screenshot"}
|
||||
</span>
|
||||
{/* Upload area */}
|
||||
{canUploadMore ? (
|
||||
<label
|
||||
className={`relative flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 transition-all cursor-pointer ${
|
||||
isDragOver
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-border bg-text/2 hover:bg-text/5 hover:border-text/20"
|
||||
}`}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault()
|
||||
setIsDragOver(true)
|
||||
}}
|
||||
onDragLeave={() => setIsDragOver(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault()
|
||||
setIsDragOver(false)
|
||||
handleFiles(e.dataTransfer.files)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`p-2.5 rounded-full transition-colors ${
|
||||
isDragOver
|
||||
? "bg-primary/15 text-primary"
|
||||
: "bg-text/5 text-text/30"
|
||||
}`}
|
||||
>
|
||||
<Upload
|
||||
className={`h-5 w-5 transition-transform ${
|
||||
isDragOver ? "scale-110" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-center space-y-0.5'>
|
||||
<p className='text-xs text-text/60 font-medium'>
|
||||
{isDragOver
|
||||
? "Drop screenshots here"
|
||||
: screenshotFiles &&
|
||||
screenshotFiles.length > 0
|
||||
? "Add another screenshot"
|
||||
: "Add screenshots"}
|
||||
</p>
|
||||
<p className='text-[10px] text-text/30'>
|
||||
JPG, PNG, WebP · Max 2 files · Drag to
|
||||
upload
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
type='file'
|
||||
accept='image/jpeg,image/png,image/webp'
|
||||
multiple
|
||||
onChange={(e) => {
|
||||
const files = Array.from(e.target.files || []).filter((f) =>
|
||||
/image\/(jpeg|png|webp)/.test(f.type)
|
||||
)
|
||||
const current = screenshotFiles || []
|
||||
const combined = [...current, ...files].slice(0, 2)
|
||||
onScreenshotFilesChange?.(combined)
|
||||
handleFiles(e.target.files)
|
||||
e.target.value = ""
|
||||
}}
|
||||
className="sr-only"
|
||||
className='sr-only'
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<div className='flex items-center justify-center gap-2 rounded-xl border border-border bg-text/2 p-4 text-xs text-text/40'>
|
||||
<ImagePlus className='h-4 w-4 text-text/20' />
|
||||
Maximum 2 screenshots reached
|
||||
</div>
|
||||
)}
|
||||
|
||||
{screenshotFiles && screenshotFiles.length >= 2 && (
|
||||
<p className="text-xs text-text/50">Maximum 2 screenshots reached</p>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Notes */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-text/60">Additional Notes</label>
|
||||
<div className='space-y-2'>
|
||||
<label className='text-xs font-medium text-text/60'>
|
||||
Additional Notes
|
||||
</label>
|
||||
<TiptapEditor
|
||||
content={userNotes}
|
||||
onChange={(json) => onUserNotesChange(JSON.stringify(json))}
|
||||
placeholder="Add any extra details about your experience..."
|
||||
placeholder='Add any extra details about your experience...'
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -315,23 +637,23 @@ export function ReviewStep({
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3"
|
||||
className='flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3'
|
||||
>
|
||||
<AlertCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
|
||||
<p className="text-xs text-red-400">{error}</p>
|
||||
<AlertCircle className='h-4 w-4 text-red-400 shrink-0' />
|
||||
<p className='text-xs text-red-400'>{error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={onSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
|
||||
className='w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer'
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
{submitPhase === "uploading"
|
||||
? "Uploading screenshots..."
|
||||
: submitPhase === "saving"
|
||||
@@ -340,7 +662,7 @@ export function ReviewStep({
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="h-4 w-4" />
|
||||
<Send className='h-4 w-4' />
|
||||
Submit Entry
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user