// hub-components.jsx — building blocks for the Profil-Hub.
const { useState, useRef, useEffect } = React;
/* ---------- tier badge ---------- */
function Badge({ tier, live, override }) {
const d = TIERS[tier];
if (!d) return null;
return (
{live && }
{override || tierLabel(tier)}
);
}
/* ---------- avatar ---------- */
function Avatar({ data, size = 34, cls = 'pavatar' }) {
if (data.img) {
return ;
}
return (
{data.mono}
);
}
/* ---------- clean sign-out ---------- */
// Revoke the Supabase session (the SDK clears its own persisted token), wipe the
// remaining client-side session flags, and return to the landing — where the
// anon blur+gate then shows the logged-out state. getSupabaseClient lives in
// hub-app.jsx (loaded after this module; resolved at click-time).
async function aipHubSignOut() {
try {
const sb = (typeof getSupabaseClient === 'function') ? getSupabaseClient() : null;
if (sb) await sb.auth.signOut();
} catch (_) { /* fall through to the manual wipe */ }
try {
localStorage.removeItem('sb-wrzzxxepdwgpwuqdbnyt-auth-token');
localStorage.removeItem('aip_user_email');
localStorage.removeItem('aip_username_known');
localStorage.removeItem('aip_admin_pass');
} catch (_) {}
try {
sessionStorage.removeItem('aip_greeting_shown');
sessionStorage.removeItem('aip_last_login_pinged');
} catch (_) {}
window.location.href = '/';
}
/* ---------- identity header ---------- */
// Clicking the profile photo opens a small chooser: open the profile, or zoom
// the photo in a lightbox. (Sign out lives in the top-right account menu.)
// Outside-click / Escape dismiss both.
function Identity({ avatarUrl }) {
const [menuOpen, setMenuOpen] = useState(false);
const [zoom, setZoom] = useState(false);
useEffect(() => {
if (!menuOpen && !zoom) return;
const onKey = (e) => { if (e.key === 'Escape') { setMenuOpen(false); setZoom(false); } };
const onDocClick = () => setMenuOpen(false);
document.addEventListener('keydown', onKey);
document.addEventListener('click', onDocClick);
return () => { document.removeEventListener('keydown', onKey); document.removeEventListener('click', onDocClick); };
}, [menuOpen, zoom]);
return (
e.stopPropagation()}>
{menuOpen && (
)}
{zoom && ReactDOM.createPortal(
// Portal to so the fixed overlay is relative to the VIEWPORT,
// not the backdrop-filtered .identity (which would be its containing
// block and let the image burst out / overflow the screen).
setZoom(false)}>
{avatarUrl
?
:
AS
}
,
document.body
)}
Akos Simonkovits
@showrunnerzero · {t('in_studio')}
);
}
/* ---------- 4 fixed sections ---------- */
// `counts` (optional) overrides a stat's number by key — used to show the
// real KÖVETÉSEK (follow) count once it's fetched.
function Sections({ active, onPick, counts }) {
return (
);
}
/* ---------- focus / showcase — 3 compact cards ---------- */
// Cards 1-2: the two strongest image posts from the live feed; click → scroll
// to + expand that post (onPick). Card 3: STUDIO LIVE (SIROB) — visual/inviting,
// not a working live stream.
function Focus({ posts, onPick }) {
const imgPosts = (posts || []).filter((p) => p.media && p.media.type === 'image');
const cards = [imgPosts[0] || null, imgPosts[1] || null];
return (
{cards.map((p, i) => (
p ? (
) : (
{t('focus_soon')}
)
))}
{/* Card 3 — STUDIO LIVE (SIROB). Deep-links to the Handbook's public
"ask SIROB" widget (#sirobWidget on /handbook). */}
);
}
/* ---------- clapperboard ("csapó") icon — brand-DNS, NOT a heart ---------- */
// Ported from the profile feed (src/profile/app.jsx) — slate body + 3 angled
// clap-stick stripes. stroke=currentColor → inherits the button colour (gold
// when clapped).
function ClapIcon({ size = 14 }) {
return (
);
}
/* ---------- post body renderer (collapsible) ---------- */
// body is pre-rendered, sanitized markdown HTML (mapApiPost → renderMarkdown).
// Long bodies clamp to a few lines with a "még több…" expander so the feed
// stays scannable; short posts are unaffected (clamp taller than their text).
// fiction-italic by tier; *emphasis* → styled gold-italic in hub.css.
// `forceOpen` (from a Fókuszban-card click) shows the full text immediately.
function PostBody({ post, forceOpen }) {
const ref = useRef(null);
const [open, setOpen] = useState(false);
// null = not yet measured; clamp during measurement so scrollHeight vs the
// clamped clientHeight is meaningful, then keep the clamp ONLY if it overflows.
const [overflow, setOverflow] = useState(null);
const expanded = open || forceOpen;
React.useLayoutEffect(() => {
const el = ref.current;
if (el) setOverflow(el.scrollHeight - el.clientHeight > 4);
}, [post.bodyHtml]);
// Short posts (overflow === false) render full-height with no fade/“more”.
const clamped = !expanded && overflow !== false;
return (
);
}
/* ---------- post media ---------- */
function PostMedia({ media }) {
const [zoom, setZoom] = useState(false);
useEffect(() => {
if (!zoom) return;
const onKey = (e) => { if (e.key === 'Escape') setZoom(false); };
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [zoom]);
if (!media) return null;
if (media.type === 'music') {
return (
{media.label}
{Array.from({ length: 38 }).map((_, i) => (
))}
{media.dur}
{media.download && (
{media.download.note}
)}
);
}
if (media.type === 'placeholder') {
return (
{media.label}
{media.title && (
{media.title}
)}
);
}
// image — click opens a 16:9 cinematic lightbox (portal to so the
// fixed overlay is viewport-relative; future video/music reuse this frame).
return (
<>
setZoom(false)}>
{/* 16:9 cinematic frame — never 9:16. Bigger in landscape, smaller in
portrait; viewport-fitted via min(vw, vh-derived). */}
e.stopPropagation()}>
{/* Burned-in caption: the post's own scene caption + the series
title. "The Beautiful Illusion" is a brand/IP title — never
translated, fixed on every post (one series at launch). */}
{/* Discreet portrait-only hint (hidden in landscape via CSS). */}
{t('media_rotate_hint')}
,
document.body
)}
);
}
/* ---------- post card ---------- */
// onClap(postId, nextLiked) → Promise<{ liked, likes_count }>. Provided by
// App: it attaches the Supabase JWT and hits POST /api/posts/:id/like. The
// card stays optimistic and reconciles against the server's truth (or reverts).
function Post({ post, onChat, onClap, forceExpand, onFollow, following, followBusy, meId }) {
const [claps, setClaps] = useState(post.claps);
const [clapped, setClapped] = useState(() => {
try { return window.localStorage.getItem(`liked:${post.id}`) === '1'; } catch { return false; }
});
const [bursts, setBursts] = useState([]);
const [busy, setBusy] = useState(false);
const btnRef = useRef(null);
const fmt = (n) => n >= 1000 ? (n / 1000).toFixed(1).replace('.0', '') + 'k' : n;
async function clap() {
if (busy) return;
const wasClapped = clapped;
const prevCount = claps;
const next = !wasClapped;
// optimistic
setClapped(next);
setClaps((c) => Math.max(0, c + (next ? 1 : -1)));
if (next) {
const id = Date.now();
setBursts((b) => [...b, id]);
setTimeout(() => setBursts((b) => b.filter((x) => x !== id)), 600);
}
try { window.localStorage.setItem(`liked:${post.id}`, next ? '1' : '0'); } catch { /* non-blocking */ }
if (!onClap) return; // no handler (shouldn't happen) → optimistic only
setBusy(true);
try {
const result = await onClap(post.id, next); // throws on failure / auth
if (result && typeof result.likes_count === 'number') setClaps(result.likes_count);
if (result && typeof result.liked === 'boolean') {
setClapped(result.liked);
try { window.localStorage.setItem(`liked:${post.id}`, result.liked ? '1' : '0'); } catch { /* non-blocking */ }
}
} catch (_err) {
// revert — server rejected (e.g. not logged in)
setClapped(wasClapped);
setClaps(prevCount);
try { window.localStorage.setItem(`liked:${post.id}`, wasClapped ? '1' : '0'); } catch { /* non-blocking */ }
} finally {
setBusy(false);
}
}
return (
{post.replyTo && (
{t('reply_to')} {post.replyTo}
)}
{post.name}
{post.role &&
{post.role}
}
{relativeTime(post.publishedAt)}
{/* Per-author ACTION (follow) — market standard, in the post header.
"ACTION" is a brand/film term → identical in all locales.
Hidden on your own showrunner posts. Wired to /api/follows. */}
{post.followType && !(post.followType === 'showrunner' && post.followId === meId) && (
)}
: