// Reusable visual building blocks — Beachy Lila design system. // // All tokens come from CSS vars in colors_and_type.css (`--lila-500`, // `--grad-sunset`, `--shadow-card` etc.). Never hand-type a hex here // unless you're picking up a per-track colour passed in via props. // // Backward-compat aliases at the bottom of the file: the legacy names // (`ApprovalBg`, `ApGlass`, `ApCover`, `ApAvatar`, …) all resolve to // these new components so the migration doesn't have to touch every // screen at once. New code should use the short names (`PageBg`, // `Glass`, …). /* ========================================================= * PageBg — dusk plum + three drifting orbs * Wraps the entire app shell. Three blurred coloured circles * (lila, coral, aqua) drift slowly via the apBlob[ABC] * keyframes in styles.css — gives the page the "sunset behind * frosted glass" feeling without a single background image. * ========================================================= */ function PageBg({ children }) { return (
{children}
); } /* ========================================================= * Glass — frosted card surface * * The canonical card chrome. Translucent dusk-plum background, * 18px backdrop-blur, warm-violet shadow, foam rim light. * * Props: * • radius — corner radius in px (default 20) * • padding — inner padding (number → px; string → as-is) * • blur — backdrop-filter blur in px (18 default) * • style — extra style merged on top * • hover — when true, card lifts -2px on mouseover * • accent — overrides border color (e.g. for "flagged" cards) * • orb — colour string; renders a soft blurred orb in the * corner so the card has its own atmospheric tint * (used by login, hero, flagged submissions) * • onClick — makes the card clickable + pointer-cursored * ========================================================= */ function Glass({ children, radius = 20, padding = 0, blur = 18, style = {}, hover = false, accent = null, orb = null, onClick, }) { return (
{ e.currentTarget.style.transform = 'translateY(-2px)'; } : undefined} onMouseLeave={hover ? (e) => { e.currentTarget.style.transform = 'translateY(0)'; } : undefined} > {orb && (
)}
{children}
); } /* ========================================================= * Cover — square gradient placeholder OR uploaded image. * * Submissions carry a `cover` field — either a [colorA, colorB] * gradient palette (default) or an `src` URL pointing at the * uploaded cover image. Both render through this primitive. * ========================================================= */ function Cover({ colors, src, size = 80, radius = 14, style = {} }) { const [a, b] = colors || ['#A972F4', '#FF7E8B']; return (
{!src && (
)}
); } /* ========================================================= * Avatar — circular gradient initial chip * * Uses `player.avatar` ([colorA, colorB]) if present, otherwise * deterministically picks a palette from the player identifier * via fallbackAvatar() in helpers.jsx — same hash so the same * person always gets the same colours. * ========================================================= */ function Avatar({ player, size = 36, style = {} }) { if (!player) return null; const colors = player.avatar || (typeof fallbackAvatar === 'function' ? fallbackAvatar(player.identifier) : ['#A972F4', '#FF7E8B']); const [a, b] = colors; const initial = (player.name || '?').split(/\s+/).map(s => s[0]).slice(0, 2).join('').toUpperCase(); return (
{initial}
); } /* ========================================================= * PlayerName — name + role/verified badges * * Shrinks to fit. Verified = aqua circle-check, admin = gold * shield. Both badges sized relative to the text size so the * cluster reads as one line regardless of where it's used. * ========================================================= */ function PlayerName({ player, size = 13, opacity = 0.85, color, badge = true, style = {}, clickable }) { if (!player) return null; const verified = typeof isVerifiedArtist === 'function' ? isVerifiedArtist(player.identifier) : !!player.verified; const adm = player.group === 'admin'; // Click-to-open-artist-detail behaviour. Default ON for admins // viewing the site (they can investigate anyone); explicitly // overridable via the `clickable` prop. Skipped if there's no // identifier (e.g. anonymous votes) since we have nothing to // navigate to. const me = typeof Store !== 'undefined' ? Store.get().me : null; const isAdmin = me?.group === 'admin'; const canOpen = (clickable !== false) && isAdmin && !!player.identifier; const content = ( <> {player.name} {badge && verified && } {badge && adm && } ); // Common style block so the clickable + plain variants render // identically at rest. The button gets a hover affordance via // the global button:hover filter rule in styles.css. const base = { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: size, opacity, color, minWidth: 0, ...style, }; if (canOpen) { return ( ); } return {content}; } /* ========================================================= * ArtistLink — clickable artist name (for admins) by identifier. * * Used when we have an identifier handy but not a full player * object — e.g. a track row showing `track.artist` (string) + * `track.identifier`. Renders plain inline text for non-admins, * a click-through button for admins. * * Use this when you can't go through PlayerName because the * roster lookup doesn't have a record (e.g. the player left the * server, or the artist is using a stage name not tied to a * current online identity). * ========================================================= */ function ArtistLink({ identifier, name, size, color, style = {} }) { if (!name) return null; const me = typeof Store !== 'undefined' ? Store.get().me : null; const canOpen = me?.group === 'admin' && !!identifier; const base = { fontSize: size, color: color || 'inherit', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style, }; if (canOpen) { return ( ); } return {name}; } /* ========================================================= * IdentifierMono — clickable mono-formatted FiveM identifier * * Used everywhere we display a raw player identifier (profile * screen, audit log, blocks list, artist directory). For admins, * clicking jumps to that player's artist detail page. For * non-admins it renders as inert mono text — they have nothing * to navigate to. * ========================================================= */ function IdentifierMono({ identifier, size = 11.5, style = {} }) { if (!identifier) return null; const me = typeof Store !== 'undefined' ? Store.get().me : null; const canOpen = me?.group === 'admin'; const base = { fontFamily: 'var(--font-mono)', fontSize: size, color: 'var(--fg-3)', ...style, }; if (canOpen) { return ( ); } return {identifier}; } /* ========================================================= * StatusPill — submission status (pending/accepted/rejected) * * Three states plus a defensive fallback for corrupted data — * an earlier bug had peaks arrays accidentally assigned to * status and the raw payload was leaking into the UI as text. * Unknown values now render a neutral "?" badge. * ========================================================= */ function StatusPill({ status }) { const cfg = { pending: { bg: 'rgba(255,194,103,0.16)', fg: 'var(--warning)', label: 'In Prüfung', icon: 'clock' }, accepted: { bg: 'rgba(95,216,166,0.18)', fg: 'var(--success)', label: 'Veröffentlicht', icon: 'check' }, rejected: { bg: 'rgba(255,110,138,0.18)', fg: 'var(--danger)', label: 'Abgelehnt', icon: 'x' }, }[status]; if (!cfg) { return ( ? ); } return ( {cfg.label} ); } /* ========================================================= * RolePill — admin / mod / whitelist / verified / player * * Coloured chip showing the player's permission tier. Used in * the header next to the avatar and on profile/submission * cards. Verified artists get the aqua "Verifiziert" pill when * they aren't already admin / mod / whitelist. * ========================================================= */ function RolePill({ player }) { if (!player) return null; const verified = typeof isVerifiedArtist === 'function' ? isVerifiedArtist(player.identifier) : !!player.verified; let label, color, bg; if (player.group === 'admin') { label = 'Admin'; color = 'var(--gold)'; bg = 'rgba(255,210,122,0.14)'; } else if (player.group === 'mod') { label = 'Moderator'; color = 'var(--lila-300)'; bg = 'rgba(196,154,255,0.14)'; } else if (player.group === 'whitelist') { label = 'Whitelist'; color = 'var(--info)'; bg = 'rgba(143,183,255,0.14)'; } else if (verified) { label = 'Verifiziert'; color = 'var(--aqua)'; bg = 'rgba(110,224,210,0.16)'; } else { label = 'Spieler'; color = 'var(--fg-3)'; bg = 'rgba(196,154,255,0.08)'; } return ( {label} ); } /* ========================================================= * Button — variant + size, with optional left/right icon. * * Variants (intent-driven, never colour-driven on the callsite): * • primary — lila gradient, the default "do the thing" CTA * • reward — sunset gradient + coral glow, used for hero * "Veröffentlichen" / "Jetzt hören" * • secondary — translucent lilac, the workhorse for non-CTA * actions (edit, save, filter) * • ghost — transparent with hairline border, for tertiary * actions (CSV export, "Alle ansehen") * • danger — coral, destructive (reject, block, delete) * • warning — gold, attention-required (copyright skip) * • success — green, confirming success (vote accepted) * * Sizes: sm (filter chips), md (most buttons), lg (hero CTAs). * * `disabled` ghosts the button to 45% and disables the pointer. * The pure-CSS press feedback from styles.css still works on * the underlying ); } /* ========================================================= * TextInput — single-line input with optional leading icon * * Lila focus ring + brightening border. Used for search, * identifier fields, single-line free-text. Multiline edits * still go through raw