Gregor Klevze
eee7df1f8c
- Infinite loop carousels for Similar Artworks & Trending rails
- Mouse wheel horizontal scrolling on both carousels
- Author avatar shown on hover in RailCard (similar + trending)
- Removed "View" badge from RailCard hover overlay
- Added `id` to Meilisearch filterable attributes
- Auto-prepend Scout prefix in meilisearch:configure-index command
- Added author name + avatar to Similar Artworks API response
- Added avatar_url to ArtworkListResource author object
- Added direct /art/{id}/{slug} URL to ArtworkListResource
- Fixed race condition: Similar Artworks no longer briefly shows trending items
- Fixed user_profiles eager load (user_id primary key, not id)
- Bumped /api/art/{id}/similar rate limit to 300/min
- Removed decorative heart icons from tag pills
- Moved ReactionBar under artwork description
588 lines
23 KiB
JavaScript
588 lines
23 KiB
JavaScript
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
import axios from 'axios'
|
|
import CommentForm from '../comments/CommentForm'
|
|
import ReactionBar from '../comments/ReactionBar'
|
|
import { isFlood } from '../../utils/emojiFlood'
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
function timeAgo(dateStr) {
|
|
if (!dateStr) return ''
|
|
const date = new Date(dateStr)
|
|
const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
|
|
if (seconds < 60) return 'just now'
|
|
const minutes = Math.floor(seconds / 60)
|
|
if (minutes < 60) return `${minutes}m ago`
|
|
const hours = Math.floor(minutes / 60)
|
|
if (hours < 24) return `${hours}h ago`
|
|
const days = Math.floor(hours / 24)
|
|
if (days < 365) return `${days}d ago`
|
|
return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
|
|
}
|
|
|
|
/* ── Icons ─────────────────────────────────────────────────────────────────── */
|
|
function ReplyIcon() {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5">
|
|
<path fillRule="evenodd" d="M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z" clipRule="evenodd" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function ChatBubbleIcon() {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.2} stroke="currentColor" className="h-10 w-10 text-white/15">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function ChevronDownIcon({ className }) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={className}>
|
|
<path fillRule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
/* ── Avatar ─────────────────────────────────────────────────────────────────── */
|
|
function Avatar({ user, size = 36 }) {
|
|
if (user?.avatar_url) {
|
|
return (
|
|
<img
|
|
src={user.avatar_url}
|
|
alt={user.name || user.username || ''}
|
|
width={size}
|
|
height={size}
|
|
className="rounded-full object-cover shrink-0 ring-1 ring-white/10"
|
|
style={{ width: size, height: size }}
|
|
loading="lazy"
|
|
onError={(e) => {
|
|
e.currentTarget.onerror = null
|
|
e.currentTarget.src = 'https://files.skinbase.org/default/avatar_default.webp'
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
const initials = (user?.name || user?.username || '?').slice(0, 1).toUpperCase()
|
|
return (
|
|
<span
|
|
className="flex items-center justify-center rounded-full bg-gradient-to-br from-nova-600 to-nova-800 text-sm font-bold text-white/90 shrink-0 ring-1 ring-white/10"
|
|
style={{ width: size, height: size }}
|
|
>
|
|
{initials}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// ── Reply item (nested under a parent) ────────────────────────────────────────
|
|
|
|
function ReplyItem({ reply, parentId, artworkId, isLoggedIn, onReplyPosted, depth = 1 }) {
|
|
const user = reply.user
|
|
const html = reply.rendered_content ?? null
|
|
const plain = reply.content ?? reply.raw_content ?? ''
|
|
const profileLabel = user?.display || user?.username || user?.name || 'Member'
|
|
const replies = reply.replies || []
|
|
|
|
const [showReplyForm, setShowReplyForm] = useState(false)
|
|
const [showAllReplies, setShowAllReplies] = useState(false)
|
|
const [reactionTotals, setReactionTotals] = useState(reply.reactions ?? {})
|
|
|
|
useEffect(() => {
|
|
if (reply.reactions || !reply.id) return
|
|
axios
|
|
.get(`/api/comments/${reply.id}/reactions`)
|
|
.then(({ data }) => setReactionTotals(data.totals ?? {}))
|
|
.catch(() => {})
|
|
}, [reply.id, reply.reactions])
|
|
|
|
const handleReplyPosted = useCallback((newReply) => {
|
|
// Reply posts under THIS reply's id as parent
|
|
onReplyPosted?.(reply.id, newReply)
|
|
setShowReplyForm(false)
|
|
setShowAllReplies(true)
|
|
}, [reply.id, onReplyPosted])
|
|
|
|
// Show first 2 nested replies, expand to show all
|
|
const visibleReplies = showAllReplies ? replies : replies.slice(0, 2)
|
|
const hiddenReplyCount = replies.length - 2
|
|
|
|
// Shrink avatar at deeper levels
|
|
const avatarSize = depth >= 3 ? 22 : 28
|
|
|
|
return (
|
|
<li className="rounded-lg bg-white/[0.02] px-3 py-2.5" id={`comment-${reply.id}`}>
|
|
<div className="flex gap-2.5">
|
|
{user?.profile_url ? (
|
|
<a href={user.profile_url} className="shrink-0 mt-0.5" tabIndex={-1}>
|
|
<Avatar user={user} size={avatarSize} />
|
|
</a>
|
|
) : (
|
|
<span className="shrink-0 mt-0.5"><Avatar user={user} size={avatarSize} /></span>
|
|
)}
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{user?.profile_url ? (
|
|
<a href={user.profile_url} className="text-[12px] font-semibold text-white/90 hover:text-accent transition-colors">
|
|
{profileLabel}
|
|
</a>
|
|
) : (
|
|
<span className="text-[12px] font-semibold text-white/90">{profileLabel}</span>
|
|
)}
|
|
<span className="text-white/15" aria-hidden="true">·</span>
|
|
<time
|
|
dateTime={reply.created_at}
|
|
title={reply.created_at ? new Date(reply.created_at).toLocaleString() : ''}
|
|
className="text-[10px] font-medium tracking-wide text-white/25 uppercase"
|
|
>
|
|
{reply.time_ago || timeAgo(reply.created_at)}
|
|
</time>
|
|
</div>
|
|
|
|
{html ? (
|
|
<div
|
|
className="mt-1 text-[12.5px] leading-[1.65] text-white/70 prose prose-invert prose-sm max-w-none prose-p:my-1 prose-a:text-sky-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-white/[0.07] prose-code:px-1 prose-code:py-0.5 prose-code:rounded-md prose-code:text-xs"
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
) : (
|
|
<p className="mt-1 text-[12.5px] leading-[1.65] text-white/70 whitespace-pre-line break-words">{plain}</p>
|
|
)}
|
|
|
|
{/* Actions — Reply + React inline */}
|
|
<div className="flex items-center gap-1.5 pt-1">
|
|
{isLoggedIn && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowReplyForm(v => !v)}
|
|
className={[
|
|
'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-wider transition-all duration-200 focus:outline-none',
|
|
showReplyForm
|
|
? 'bg-accent/10 text-accent'
|
|
: 'text-white/35 hover:bg-white/[0.06] hover:text-white/65',
|
|
].join(' ')}
|
|
>
|
|
<ReplyIcon />
|
|
Reply
|
|
</button>
|
|
)}
|
|
|
|
<ReactionBar
|
|
entityType="comment"
|
|
entityId={reply.id}
|
|
initialTotals={reactionTotals}
|
|
isLoggedIn={isLoggedIn}
|
|
/>
|
|
</div>
|
|
|
|
{/* Inline reply form */}
|
|
{showReplyForm && (
|
|
<div className="mt-2">
|
|
<CommentForm
|
|
artworkId={artworkId}
|
|
parentId={reply.id}
|
|
replyTo={profileLabel}
|
|
onCancelReply={() => setShowReplyForm(false)}
|
|
onPosted={handleReplyPosted}
|
|
isLoggedIn={isLoggedIn}
|
|
compact
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Nested replies (tree) */}
|
|
{replies.length > 0 && (
|
|
<div className="mt-2">
|
|
<ul className={`space-y-1 pl-3 border-l-2 ${depth >= 3 ? 'border-white/[0.03]' : 'border-white/[0.05]'}`}>
|
|
{visibleReplies.map((child) => (
|
|
<ReplyItem
|
|
key={child.id}
|
|
reply={child}
|
|
parentId={reply.id}
|
|
artworkId={artworkId}
|
|
isLoggedIn={isLoggedIn}
|
|
onReplyPosted={onReplyPosted}
|
|
depth={depth + 1}
|
|
/>
|
|
))}
|
|
</ul>
|
|
|
|
{!showAllReplies && hiddenReplyCount > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAllReplies(true)}
|
|
className="mt-1.5 ml-3 inline-flex items-center gap-1 text-[10px] font-medium text-accent/70 transition-colors hover:text-accent"
|
|
>
|
|
<ChevronDownIcon className="h-3 w-3" />
|
|
Show {hiddenReplyCount} more {hiddenReplyCount === 1 ? 'reply' : 'replies'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
// ── Single comment (top-level) ────────────────────────────────────────────────
|
|
|
|
function CommentItem({ comment, isLoggedIn, artworkId, onReplyPosted }) {
|
|
const user = comment.user
|
|
const html = comment.rendered_content ?? null
|
|
const plain = comment.content ?? comment.raw_content ?? ''
|
|
const profileLabel = user?.display || user?.username || user?.name || 'Member'
|
|
const replies = comment.replies || []
|
|
|
|
const flood = isFlood(plain)
|
|
const [expanded, setExpanded] = useState(!flood)
|
|
const [showReplyForm, setShowReplyForm] = useState(false)
|
|
const [showAllReplies, setShowAllReplies] = useState(false)
|
|
|
|
const [reactionTotals, setReactionTotals] = useState(comment.reactions ?? {})
|
|
|
|
useEffect(() => {
|
|
if (comment.reactions || !comment.id) return
|
|
axios
|
|
.get(`/api/comments/${comment.id}/reactions`)
|
|
.then(({ data }) => setReactionTotals(data.totals ?? {}))
|
|
.catch(() => {})
|
|
}, [comment.id, comment.reactions])
|
|
|
|
const handleReplyPosted = useCallback((newReply) => {
|
|
onReplyPosted?.(comment.id, newReply)
|
|
setShowReplyForm(false)
|
|
setShowAllReplies(true)
|
|
}, [comment.id, onReplyPosted])
|
|
|
|
// Show first 2 replies by default, expand to show all
|
|
const visibleReplies = showAllReplies ? replies : replies.slice(0, 2)
|
|
const hiddenReplyCount = replies.length - 2
|
|
|
|
return (
|
|
<li
|
|
id={`comment-${comment.id}`}
|
|
className="group/comment rounded-2xl border border-white/[0.06] bg-white/[0.03] shadow-[0_1px_3px_rgba(0,0,0,.25)] backdrop-blur-sm transition-all duration-200 hover:border-white/[0.1] hover:bg-white/[0.05]"
|
|
>
|
|
<div className="p-4 sm:p-5">
|
|
<div className="flex gap-3.5">
|
|
{/* Avatar */}
|
|
{user?.profile_url ? (
|
|
<a href={user.profile_url} className="shrink-0 mt-0.5" tabIndex={-1} aria-hidden="true">
|
|
<Avatar user={user} size={38} />
|
|
</a>
|
|
) : (
|
|
<span className="shrink-0 mt-0.5"><Avatar user={user} size={38} /></span>
|
|
)}
|
|
|
|
{/* Content */}
|
|
<div className="min-w-0 flex-1 space-y-2">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{user?.profile_url ? (
|
|
<a href={user.profile_url} className="text-[13px] font-semibold text-white/95 transition-colors hover:text-accent">
|
|
{profileLabel}
|
|
</a>
|
|
) : (
|
|
<span className="text-[13px] font-semibold text-white/95">{profileLabel}</span>
|
|
)}
|
|
<span className="text-white/15" aria-hidden="true">·</span>
|
|
<time
|
|
dateTime={comment.created_at}
|
|
title={comment.created_at ? new Date(comment.created_at).toLocaleString() : ''}
|
|
className="text-[11px] font-medium tracking-wide text-white/30 uppercase"
|
|
>
|
|
{comment.time_ago || timeAgo(comment.created_at)}
|
|
</time>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div
|
|
className={!expanded ? 'overflow-hidden relative' : undefined}
|
|
style={!expanded ? { maxHeight: '5em' } : undefined}
|
|
>
|
|
{html ? (
|
|
<div
|
|
className="text-[13px] leading-[1.7] text-white/80 prose prose-invert prose-sm max-w-none prose-p:my-1.5 prose-a:text-sky-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-white/[0.07] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-xs prose-code:font-normal"
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
) : (
|
|
<p className="text-[13px] leading-[1.7] text-white/80 whitespace-pre-line break-words">{plain}</p>
|
|
)}
|
|
|
|
{flood && !expanded && (
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-nova-900/95 to-transparent" aria-hidden="true" />
|
|
)}
|
|
</div>
|
|
|
|
{flood && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setExpanded((e) => !e)}
|
|
className="rounded-md px-2 py-0.5 text-xs font-medium text-sky-400 transition-all hover:bg-sky-500/10 hover:text-sky-300"
|
|
aria-expanded={expanded}
|
|
>
|
|
{expanded ? '↑ Collapse' : '↓ Show full comment'}
|
|
</button>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-1.5 pt-0.5">
|
|
{isLoggedIn && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowReplyForm(v => !v)}
|
|
className={[
|
|
'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[11px] font-medium uppercase tracking-wider transition-all duration-200 focus:outline-none',
|
|
showReplyForm
|
|
? 'bg-accent/10 text-accent'
|
|
: 'text-white/40 hover:bg-white/[0.06] hover:text-white/70',
|
|
].join(' ')}
|
|
>
|
|
<ReplyIcon />
|
|
Reply
|
|
</button>
|
|
)}
|
|
|
|
<ReactionBar
|
|
entityType="comment"
|
|
entityId={comment.id}
|
|
initialTotals={reactionTotals}
|
|
isLoggedIn={isLoggedIn}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Replies thread ───────────────────────────────────────────────── */}
|
|
{(replies.length > 0 || showReplyForm) && (
|
|
<div className="border-t border-white/[0.04] bg-white/[0.01] px-4 pb-4 pt-3 sm:px-5 sm:pb-5">
|
|
{replies.length > 0 && (
|
|
<>
|
|
<ul className="space-y-1 pl-4 border-l-2 border-white/[0.06]">
|
|
{visibleReplies.map((reply) => (
|
|
<ReplyItem
|
|
key={reply.id}
|
|
reply={reply}
|
|
parentId={comment.id}
|
|
artworkId={artworkId}
|
|
isLoggedIn={isLoggedIn}
|
|
onReplyPosted={onReplyPosted}
|
|
/>
|
|
))}
|
|
</ul>
|
|
|
|
{!showAllReplies && hiddenReplyCount > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAllReplies(true)}
|
|
className="mt-2 ml-4 inline-flex items-center gap-1 text-[11px] font-medium text-accent/70 transition-colors hover:text-accent"
|
|
>
|
|
<ChevronDownIcon className="h-3.5 w-3.5" />
|
|
Show {hiddenReplyCount} more {hiddenReplyCount === 1 ? 'reply' : 'replies'}
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Inline reply form */}
|
|
{showReplyForm && (
|
|
<div className={replies.length > 0 ? 'mt-3 pl-4 border-l-2 border-accent/20' : ''}>
|
|
<CommentForm
|
|
artworkId={artworkId}
|
|
parentId={comment.id}
|
|
replyTo={profileLabel}
|
|
onCancelReply={() => setShowReplyForm(false)}
|
|
onPosted={handleReplyPosted}
|
|
isLoggedIn={isLoggedIn}
|
|
compact
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</li>
|
|
)
|
|
}
|
|
|
|
// ── Skeleton ──────────────────────────────────────────────────────────────────
|
|
|
|
function Skeleton() {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex gap-3.5 rounded-2xl border border-white/[0.04] bg-white/[0.02] p-5 animate-pulse"
|
|
style={{ animationDelay: `${i * 120}ms` }}
|
|
>
|
|
<div className="w-[38px] h-[38px] rounded-full bg-white/[0.06] shrink-0" />
|
|
<div className="flex-1 space-y-3 pt-1">
|
|
<div className="flex gap-2.5">
|
|
<div className="h-3 bg-white/[0.06] rounded-full w-24" />
|
|
<div className="h-3 bg-white/[0.04] rounded-full w-14" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="h-3 bg-white/[0.05] rounded-full w-full" />
|
|
<div className="h-3 bg-white/[0.04] rounded-full w-4/5" />
|
|
<div className="h-3 bg-white/[0.03] rounded-full w-2/5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Main export ───────────────────────────────────────────────────────────────
|
|
|
|
export default function ArtworkComments({
|
|
artworkId,
|
|
comments: initialComments = [],
|
|
isLoggedIn = false,
|
|
loginUrl = '/login',
|
|
}) {
|
|
const [comments, setComments] = useState(initialComments)
|
|
const [loading, setLoading] = useState(false)
|
|
const [page, setPage] = useState(1)
|
|
const [lastPage, setLastPage] = useState(1)
|
|
const [total, setTotal] = useState(initialComments.length)
|
|
const initialized = useRef(false)
|
|
|
|
const loadComments = useCallback(
|
|
async (p = 1) => {
|
|
if (!artworkId) return
|
|
setLoading(true)
|
|
try {
|
|
const { data } = await axios.get(`/api/artworks/${artworkId}/comments?page=${p}`)
|
|
if (p === 1) {
|
|
setComments(data.data ?? [])
|
|
} else {
|
|
setComments((prev) => [...prev, ...(data.data ?? [])])
|
|
}
|
|
setPage(data.meta?.current_page ?? p)
|
|
setLastPage(data.meta?.last_page ?? 1)
|
|
setTotal(data.meta?.total ?? 0)
|
|
} catch {
|
|
// keep existing
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
},
|
|
[artworkId],
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (initialized.current) return
|
|
initialized.current = true
|
|
|
|
if (artworkId && initialComments.length === 0) {
|
|
loadComments(1)
|
|
} else {
|
|
setTotal(initialComments.length)
|
|
}
|
|
}, [artworkId, initialComments.length, loadComments])
|
|
|
|
// New top-level comment posted
|
|
const handlePosted = useCallback((newComment) => {
|
|
// Ensure it has a replies array
|
|
const comment = { ...newComment, replies: newComment.replies || [] }
|
|
setComments((prev) => [comment, ...prev])
|
|
setTotal((t) => t + 1)
|
|
}, [])
|
|
|
|
// Reply posted under a parent comment (works at any nesting depth)
|
|
const handleReplyPosted = useCallback((parentId, newReply) => {
|
|
// Recursively find the parent node and append the reply
|
|
const insertReply = (nodes) =>
|
|
nodes.map((c) => {
|
|
if (c.id === parentId) {
|
|
return { ...c, replies: [...(c.replies || []), { ...newReply, replies: [] }] }
|
|
}
|
|
if (c.replies?.length) {
|
|
return { ...c, replies: insertReply(c.replies) }
|
|
}
|
|
return c
|
|
})
|
|
|
|
setComments((prev) => insertReply(prev))
|
|
setTotal((t) => t + 1)
|
|
}, [])
|
|
|
|
return (
|
|
<section aria-label="Comments" className="space-y-6">
|
|
{/* Section header */}
|
|
<div className="flex items-center gap-3">
|
|
<h2 className="text-lg font-semibold tracking-tight text-white sm:text-xl">
|
|
Comments
|
|
</h2>
|
|
{total > 0 && (
|
|
<span className="inline-flex items-center rounded-full bg-white/[0.06] px-2.5 py-0.5 text-xs font-medium tabular-nums text-white/50">
|
|
{total}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Comment list */}
|
|
{loading && comments.length === 0 ? (
|
|
<Skeleton />
|
|
) : comments.length === 0 ? (
|
|
<div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.015] px-6 py-10 text-center">
|
|
<ChatBubbleIcon />
|
|
<p className="text-sm font-medium text-white/40">No comments yet</p>
|
|
<p className="text-xs text-white/25">Be the first to share your thoughts.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<ul className="space-y-3 sm:space-y-4">
|
|
{comments.map((comment) => (
|
|
<CommentItem
|
|
key={comment.id}
|
|
comment={comment}
|
|
artworkId={artworkId}
|
|
isLoggedIn={isLoggedIn}
|
|
onReplyPosted={handleReplyPosted}
|
|
/>
|
|
))}
|
|
</ul>
|
|
|
|
{page < lastPage && (
|
|
<div className="flex justify-center pt-3">
|
|
<button
|
|
type="button"
|
|
disabled={loading}
|
|
onClick={() => loadComments(page + 1)}
|
|
className="group relative rounded-full border border-white/[0.08] bg-white/[0.03] px-6 py-2.5 text-sm font-medium text-white/50 transition-all duration-200 hover:border-white/[0.15] hover:bg-white/[0.06] hover:text-white/80 hover:shadow-lg hover:shadow-black/20 disabled:opacity-40 disabled:pointer-events-none"
|
|
>
|
|
{loading ? (
|
|
<span className="inline-flex items-center gap-2">
|
|
<svg className="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
Loading…
|
|
</span>
|
|
) : (
|
|
'Load more comments'
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Comment form — after all comments */}
|
|
{artworkId && (
|
|
<CommentForm
|
|
artworkId={artworkId}
|
|
onPosted={handlePosted}
|
|
isLoggedIn={isLoggedIn}
|
|
loginUrl={loginUrl}
|
|
/>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|
|
|