klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

optimizations

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-28 19:15:39 +01:00
parent 0b25d9570a
commit cab4fbd83e
509 changed files with 1016804 additions and 1605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/components/comments/ReactionBar.jsx
View File

@@ -119,10 +119,32 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
hoverTimeout.current = setTimeout(() => setPickerOpen(false), 400)
}
const isArtworkVariant = entityType === 'artwork'
const triggerClassName = isArtworkVariant
? [
'inline-flex items-center gap-2.5 rounded-full border px-4 py-2.5 text-sm font-semibold transition-all duration-200',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
myReaction
? 'border-accent/35 bg-accent/12 text-accent shadow-[0_12px_30px_rgba(245,158,11,0.14)] hover:bg-accent/18'
: 'border-white/[0.12] bg-white/[0.06] text-white/75 hover:border-accent/30 hover:bg-white/[0.1] hover:text-white',
].join(' ')
: [
'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-all duration-200',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
myReaction
? 'text-accent'
: 'text-white/40 hover:text-white/70',
].join(' ')
const summaryClassName = isArtworkVariant
? 'inline-flex items-center gap-2 rounded-full border border-white/[0.1] bg-white/[0.05] px-3 py-1.5 transition-colors hover:border-white/[0.16] hover:bg-white/[0.08] group/summary'
: 'inline-flex items-center gap-1.5 rounded-full px-1.5 py-0.5 transition-colors hover:bg-white/[0.06] group/summary'
return (
<div
ref={containerRef}
className="flex items-center gap-2"
className={isArtworkVariant ? 'flex flex-wrap items-center gap-3' : 'flex items-center gap-2'}
onMouseLeave={onMouseLeave}
>
{/* ── Trigger button ──────────────────────────────────────────── */}
@@ -138,21 +160,15 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
toggle('thumbs_up')
}
}}
className={[
'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-all duration-200',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
myReaction
? 'text-accent'
: 'text-white/40 hover:text-white/70',
].join(' ')}
className={triggerClassName}
aria-label={myReaction ? `You reacted with ${myReactionData?.label}. Click to remove.` : 'React to this comment'}
>
{myReaction ? (
<span className="text-base leading-none">{myReactionData?.emoji}</span>
<span className={isArtworkVariant ? 'text-xl leading-none' : 'text-base leading-none'}>{myReactionData?.emoji}</span>
) : (
<HeartOutlineIcon className="h-4 w-4" />
<HeartOutlineIcon className={isArtworkVariant ? 'h-5 w-5' : 'h-4 w-4'} />
)}
<span>{myReaction ? myReactionData?.label : 'React'}</span>
<span>{myReaction ? myReactionData?.label : (isArtworkVariant ? 'React to this artwork' : 'React')}</span>
</button>
{/* ── Floating picker ─────────────────────────────────────── */}
@@ -202,7 +218,7 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
<button
type="button"
onClick={() => setPickerOpen(v => !v)}
className="inline-flex items-center gap-1.5 rounded-full px-1.5 py-0.5 transition-colors hover:bg-white/[0.06] group/summary"
className={summaryClassName}
aria-label={`${totalCount} reaction${totalCount !== 1 ? 's' : ''}`}
>
{/* Stacked emoji circles (Facebook-style, max 3) */}