{!open && moreAbove ? : null} {open && rows === null && !err ?

Loading the comments…

: null} {open && moreAbove ? : null} {list.length ? (

) : null} {/* Always in the page, so what is put in it is announced. */}

{said}

{open ? (meId ? (

{ e.preventDefault(); post(); }}> {replyTo ? (

Replying to {replyTo.name}

) : null} {tag.field(

{ setText(e.target.value); if (err) setErr(null); }}
              onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); post(); } }} />
          )}
          <div className="cmty-say-row">
            <span className="cmty-meta" aria-live="polite">{text.length > CMTY_TALK_MAX - 100 ? (CMTY_TALK_MAX - text.length) + " left" : ""}</span>
            <button type="submit" className="cmty-follow on" disabled={busy || !text.trim()}>{busy ? "Posting…" : replyTo ? "Reply" : "Post"}</button>
          </div>
        </form>
      ) : (
        <p className="cmty-say-out"><button className="cmty-link" onClick={signIn}>Sign in or create a free account</button> to join in.</p>
      )) : null}
      {err ? (
        <p className="cmty-say-err" role="alert">{err.text}{" "}
          {err.code === "need_record" && window.__nav ? <button type="button" className="cmty-link" onClick={() => window.__nav.goCollection()}>Add a record</button> : null}
          {err.code === "load" ? <button type="button" className="cmty-link" onClick={() => { setErr(null); load(); }}>Try again</button> : null}
        </p>
      ) : null}
    </section>
  ) : null;
  return { button, thread, open };
}
// What a post is, said in a few words, for a line in the inbox.
function cmtyPostName(target, mine) {
  const t = String(target || "");
  const day = (iso) => { const d = new Date(iso + "T12:00:00"); return isNaN(d) ? "" : d.toLocaleDateString("en-GB", { day: "numeric", month: "short" }); };
  if (t.indexOf("add:") === 0) return (mine ? "the records you added" : "a collector’s new records") + (day(t.split(":")[2]) ? " on " + day(t.split(":")[2]) : "");
  if (t.indexOf("tier:") === 0) return "the market moves" + (day(t.split(":")[1]) ? " of " + day(t.split(":")[1]) : "");
  if (t.indexOf("dive:") === 0) {
    const d = window.bbrDiveFor ? window.bbrDiveFor(t.slice(5)) : null;
    return d && d.title ? "the deep dive on " + d.title : "a deep dive";
  }
  if (t.indexOf("post:") === 0) return mine ? "your post" : "a post";
  return "a post";
}

// ---- what happened on your shelf --------------------------------------------
// community_inbox() for the signed-in reader, shared by the nav badge and the
// panel at the top of the feed. Opening the feed reads it AGAIN and marks seen
// only as far as it actually showed: it used to be read once per page load and
// marked seen with the server's clock, so a like that landed in between was
// marked seen without ever being shown, and (the email only sends what is
// unseen) was never emailed either (QA, 12 Oct 2026).
const cmtyInbox = { uid: null, data: null, subs: new Set(), req: 0, at: 0, failed: false };
function cmtyInboxSet(data) { cmtyInbox.data = data; cmtyInbox.subs.forEach((f) => f(data)); }
function cmtyInboxLoad(uid, again) {
  uid = uid || null;
  const same = cmtyInbox.uid === uid;
  if (same && !cmtyInbox.failed && !(again && Date.now() - cmtyInbox.at > 5000)) return;
  cmtyInbox.uid = uid;
  if (!same) cmtyInboxSet(null);
  if (!uid || !window.BBR_supabase) return;
  const n = ++cmtyInbox.req;
  cmtyInbox.at = Date.now();
  cmtyInbox.failed = false;
  Promise.resolve(window.BBR_supabase.rpc("community_inbox", {})).then((out) => {
    if (cmtyInbox.uid !== uid || n !== cmtyInbox.req) return;
    // A failed read is remembered so the next mount asks again, not never.
    if (!out || out.error || !out.data) { cmtyInbox.failed = true; return; }
    cmtyInboxSet({ unseen: Number(out.data.unseen) || 0, items: out.data.items || [] });
  }, () => { if (n === cmtyInbox.req) cmtyInbox.failed = true; });
}
function useCmtyInbox(uid) {
  const [data, setData] = useCmState(cmtyInbox.uid === (uid || null) ? cmtyInbox.data : null);
  useCmEffect(() => {
    cmtyInbox.subs.add(setData);
    cmtyInboxLoad(uid);
    setData(cmtyInbox.data);
    return () => { cmtyInbox.subs.delete(setData); };
  }, [uid]);
  return data;
}
// The count beside "Community" in the nav. Nothing at all when there is nothing new.
function CommunityNavBadge({ userId }) {
  const data = useCmtyInbox(userId || null);
  if (!data || !data.unseen) return null;
  return <span className="cmty-navbadge"><span aria-hidden="true">{data.unseen > 9 ? "9+" : data.unseen}</span><span className="cmty-vh"> ({data.unseen} new for you)</span></span>;
}
function cmtyInboxLine(it) {
  if (it.kind === "follow") return "started following you";
  if (it.kind === "comment") return "commented on " + cmtyPostName(it.target, true);
  if (it.kind === "also") return "also commented on " + cmtyPostName(it.target, false);
  if (it.kind === "reply") return "replied to your comment on " + cmtyPostName(it.target, false);
  if (it.kind === "mention") return "tagged you in a post";
  if (it.kind === "mention_comment") return "tagged you in a comment on " + cmtyPostName(it.target, false);
  const t = String(it.target || "");
  if (t.indexOf("post:") === 0) return "liked your post";
  if (t.indexOf("comment:") === 0) return "liked your comment";
  if (t.indexOf("add:") === 0) {
    const d = new Date(t.split(":")[2] + "T12:00:00");
    if (!isNaN(d)) return "liked the records you added on " + d.toLocaleDateString("en-GB", { day: "numeric", month: "short" });
  }
  return "liked your shelf";
}
// Where a line leads (14 Oct 2026, Ric: a notification has to take you to
// the thing it is about). A follow: the follower's shelf. A like on your
// shelf: your shelf. Anything on a post: that post, and the comment when the
// line is about one, shown and lit.
function cmtyInboxGo(it, meId) {
  if (it.kind === "follow") return { shelf: it.actor && it.actor.user_id };
  const t = String(it.target || "");
  if (it.kind === "like" && t.indexOf("shelf:") === 0) return { shelf: meId };
  const post = it.post || (t.indexOf("comment:") === 0 ? null : t);
  return post ? { post, cid: it.comment_id || null } : null;
}
const CMTY_INBOX_K = { like: "♥", follow: "+", comment: "“", also: "“", reply: "↩", mention: "@", mention_comment: "@" };
const CMTY_INBOX_FIRST = 3;
// Kept for the way back: "Show all" stays open, and the line that was tapped
// gets focus again (UX review, 14 Oct 2026: Back landed mid-feed, collapsed).
const cmtyInboxKeep = { all: false, from: -1 };
function cmtyInboxReturn() {
  const i = cmtyInboxKeep.from;
  const btn = i >= 0 ? document.querySelectorAll(".cmty-inbox-list > li")[i] : null;
  const el = (btn && btn.querySelector(".cmty-inbox-row")) || document.getElementById("cmty-inbox-h");
  if (!el) return;
  try { el.scrollIntoView({ block: "center" }); } catch (e) {}
  if (el.focus) el.focus({ preventScroll: true });
}
function CmtyInboxPanel({ meId, onViewCollection, onOpenPost }) {
  const data = useCmtyInbox(meId || null);
  const [all, setAllState] = useCmState(cmtyInboxKeep.all);
  const setAll = (v) => { cmtyInboxKeep.all = v; setAllState(v); };
  useCmEffect(() => { if (meId) cmtyInboxLoad(meId, true); }, [meId]);
  // ON SCREEN, not merely in the page (a reader who never scrolled to it has
  // not seen it), and only once every new line is showing: marking seen
  // clears everything up to the newest, so new lines folded under "Show all"
  // would have been cleared unread.
  const boxRef = useCmRef(null);
  const [inView, setInView] = useCmState(false);
  useCmEffect(() => {
    if (inView || !boxRef.current) return;
    return cmtyWhenVisible(boxRef.current, () => setInView(true));
  }, [inView, !!(data && data.items.length)]);
  const items = (data && data.items) || [];
  const fresh = items.filter((it) => it.new).length;
  // Short by default (Ric, 14 Oct 2026: on a phone it ran a screen and more).
  const rows = all ? items : items.slice(0, CMTY_INBOX_FIRST);
  const allNewShown = rows.filter((it) => it.new).length >= fresh;
  const newest = items[0] ? items[0].at : null;
  useCmEffect(() => {
    if (!data || !data.unseen || !newest || !window.BBR_supabase || !inView || !allNewShown) return;
    const t = setTimeout(() => {
      Promise.resolve(window.BBR_supabase.rpc("community_inbox_seen", { p_upto: newest })).then((out) => {
        if (out && !out.error && cmtyInbox.data) cmtyInboxSet({ ...cmtyInbox.data, unseen: 0 });
      }, () => {});
    }, 1500);
    return () => clearTimeout(t);
  }, [data && data.unseen, newest, inView, allNewShown]);
  // A member with nothing yet learns what will show here.
  if (!items.length) {
    return data ? (
      <section className="cmty-inbox cmty-inbox-empty" aria-labelledby="cmty-inbox-h">
        <div className="cmty-inbox-top"><h2 id="cmty-inbox-h">For you</h2></div>
        <p className="cmty-meta">When someone follows you, likes your post, replies to you or tags you, it shows here.</p>
      </section>
    ) : null;
  }
  const go = (it, i) => {
    const to = cmtyInboxGo(it, meId);
    if (!to) return;
    cmtyInboxKeep.from = i;
    if (to.shelf) onViewCollection(to.shelf, "");
    else if (onOpenPost) onOpenPost(to.post, to.cid, true);
  };
  // "For you", not "On your shelf": it carries replies on threads as well as
  // likes and follows, and an account with no shelf at all can be in a thread.
  return (
    <section className="cmty-inbox" aria-labelledby="cmty-inbox-h" ref={boxRef}>
      <div className="cmty-inbox-top">
        <h2 id="cmty-inbox-h">For you</h2>
        {data.unseen ? <span className="cmty-inbox-n">{data.unseen > 99 ? "99+" : data.unseen} new</span> : null}
      </div>
      <ul className="cmty-inbox-list">
        {rows.map((it, i) => {
          const to = cmtyInboxGo(it, meId);
          const who = cmtyName(it.actor, null);
          const inner = (
            <React.Fragment>
              <span className="cmty-inbox-av" aria-hidden="true">
                <CmtyAvatar actor={it.actor} size={36} />
                <span className={"cmty-inbox-k k-" + it.kind}>{CMTY_INBOX_K[it.kind] || "•"}</span>
              </span>
              <span className="cmty-inbox-txt">
                <span className="cmty-inbox-l"><b>{who}</b> {cmtyInboxLine(it)}</span>
                {it.text ? <span className="cmty-inbox-q" dir="auto">“{it.text}”</span> : null}
                <span className="cmty-inbox-when">{cmtyTalkWhen(it.at)}{it.new ? <span className="cmty-vh"> (new)</span> : null}</span>
              </span>
            </React.Fragment>
          );
          return (
            <li key={i} className={it.new ? "new" : ""}>
              {to ? <button type="button" className="cmty-inbox-row" onClick={() => go(it, i)}>{inner}</button>
                  : <div className="cmty-inbox-row">{inner}</div>}
            </li>
          );
        })}
      </ul>
      {items.length > CMTY_INBOX_FIRST ? (
        <button type="button" className="cmty-link cmty-inbox-more" aria-expanded={all} onClick={() => setAll(!all)}>
          {all ? "Show less" : "Show all " + items.length + (fresh > rows.filter((it) => it.new).length ? " (" + (fresh - rows.filter((it) => it.new).length) + " more new)" : "")}
        </button>
      ) : null}
    </section>
  );
}

// The three tabs. Real links, so each is crawlable and cmd-clicks like the nav.
function CommunityTabs({ tab }) {
  const nav = window.__nav || {};
  const to = (href, fn) => ({
    href,
    onClick: (e) => {
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0 || !fn) return;
      e.preventDefault();
      fn();
    },
  });
  const cls = (k) => "cmty-tab" + (tab === k ? " active" : "");
  const cur = (k) => (tab === k ? "page" : undefined);
  return (
    <nav className="cmty-tabs" aria-label="Community">
      <a className={cls("feed")} aria-current={cur("feed")} {...to("/community", nav.goCommunity)}>Activity</a>
      <a className={cls("collectors")} aria-current={cur("collectors")} {...to("/community/collectors", nav.goCollectors)}>Collectors</a>
      <a className={cls("leaderboards")} aria-current={cur("leaderboards")} {...to("/leaderboards", nav.goLeaderboards)}>Leaderboards</a>
    </nav>
  );
}

// "Scarce → Rare", with the same thing in words for a screen reader: the old
// tier was a strikethrough on a wide screen and not there at all on a phone.
function CmtyTierMove({ it }) {
  return (
    <span className="cmty-tiermove">
      <span className="cmty-vh">Moved from {cmtyTier(it.from)} to {cmtyTier(it.to)}</span>
      <span className="cmty-tier-from" aria-hidden="true">{cmtyTier(it.from)}</span>
      <span className="cmty-tier-arr" aria-hidden="true">→</span>
      <span className={"tier-chip tier-chip-" + it.to} aria-hidden="true">{cmtyTier(it.to)}</span>
    </span>
  );
}

// ---- collector posts (13 Oct 2026) -------------------------------------------
// Ric: collectors should be able to post to the feed, with ideas for what to
// post about, and with photos and videos. A post is live at once; the author
// deletes it, anyone signed in reports it, a moderator removes it. Up to four
// photos, or one video of at most a minute and 50 MB; optionally a record
// from the author's shelf or a deep dive. The server's rules are in
// supabase/migrations/community_posts.sql (community_post_add).
const CMTY_PROMPTS = [
  { k: "spinning", label: "Now spinning", ask: "What’s on the turntable right now?" },
  { k: "bought", label: "Just bought", ask: "What did you pick up, and where did you find it?" },
  { k: "opinion", label: "Hot take", ask: "A record, a pressing, an artist: what do you really think?" },
  { k: "setup", label: "My setup", ask: "Show us where the records live and what plays them." },
  { k: "question", label: "Ask collectors", ask: "What would you like to ask other collectors?" },
];
const CMTY_POST_MAX = 2000;
const CMTY_POST_ERR = {
  slow_down: "That’s a lot of posts in a short while. Try again later.",
  too_long: "That’s over 2,000 characters.",
  empty: "Write something, or add a photo, a video or a record.",
  bad_media: "One of the files didn’t upload properly. Remove it and try again.",
  too_long_video: "Videos can be up to a minute long.",
  not_your_record: "That record isn’t on your shelf any more.",
  bad_record: "That record can’t be added. Choose another.",
  sign_in: "Sign in again to post.",
  not_allowed: "This account can’t post.",
};
// What Storage says when an upload is refused, in words: too big, or (the
// policy's daily limit) too many today. Null when it is something else.
function cmtyUploadErr(e) {
  const m = String((e && e.message) || ""), c = String((e && (e.statusCode || e.status)) || "");
  if (c === "413" || /too large|exceeded the maximum/i.test(m)) return "That file is too big. Videos can be up to 50 MB.";
  // A session that has run out reads as a refusal too; say what it is.
  if (/jwt|PGRST301|token.*expired/i.test(m)) return "You’ve been signed out. Sign in again and try once more.";
  if (/row-level security|violates/i.test(m)) return "That upload was refused. If you’ve uploaded a lot today, try again tomorrow.";
  return null;
}
function cmtyPostErr(e) {
  const m = String((e && e.message) || "");
  return CMTY_POST_ERR[m] || cmtyUploadErr(e) || "That didn’t post. Try again in a moment.";
}

// Photos and a video, full screen. Arrow keys and a swipe move between photos.
function CmtyMediaViewer({ media, start, onClose }) {
  const list = (media || []).filter((m) => m && m.path);
  const [i, setI] = useCmState(Math.max(0, Math.min(start || 0, list.length - 1)));
  const boxRef = useCmRef(null);
  useCmtyDialog(boxRef, onClose, "bbrCmtyMedia");
  const go = (d) => setI((n) => (n + d + list.length) % list.length);
  useCmEffect(() => {
    const k = (e) => { if (e.key === "ArrowRight") go(1); else if (e.key === "ArrowLeft") go(-1); };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [list.length]);
  const touch = useCmRef(null);
  const m = list[i];
  if (!m) return null;
  const portal = window.bbrOverlayPortal || ((n) => n);
  return portal(
    <div className="cmty-mv" role="dialog" aria-modal="true" aria-label={list.length > 1 ? "Photo " + (i + 1) + " of " + list.length : "Photo"} tabIndex={-1} ref={boxRef}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      onTouchStart={(e) => { touch.current = e.touches[0] ? e.touches[0].clientX : null; }}
      onTouchEnd={(e) => { const x0 = touch.current, x1 = e.changedTouches[0] ? e.changedTouches[0].clientX : null; touch.current = null; if (x0 != null && x1 != null && Math.abs(x1 - x0) > 50 && list.length > 1) go(x1 < x0 ? 1 : -1); }}>
      <button className="cmty-mv-x" aria-label="Close" onClick={onClose}>×</button>
      {m.kind === "video"
        ? <video className="cmty-mv-m" src={cmtyMediaUrl(m.path)} poster={m.poster ? cmtyMediaUrl(m.poster) : undefined} controls playsInline autoPlay />
        : <img className="cmty-mv-m" src={cmtyMediaUrl(m.path)} alt="" />}
      {list.length > 1 ? (
        <React.Fragment>
          <button className="cmty-mv-p" aria-label="Previous photo" onClick={() => go(-1)}>‹</button>
          <button className="cmty-mv-n" aria-label="Next photo" onClick={() => go(1)}>›</button>
          <span className="cmty-mv-c" aria-hidden="true">{i + 1} / {list.length}</span>
        </React.Fragment>
      ) : null}
    </div>
  );
}

// In the post: one video as it is, or up to four photos in a grid, each of
// which opens full screen.
function CmtyMediaGallery({ media, onOpen, label }) {
  const list = (media || []).filter((m) => m && m.path);
  if (!list.length) return null;
  const ratio = (m) => (m.w && m.h ? m.w + " / " + m.h : undefined);
  if (list[0].kind === "video") {
    const m = list[0];
    return (
      <div className="cmty-vid" style={{ "--ar": ratio(m) || "16 / 9" }}>
        <video src={cmtyMediaUrl(m.path)} poster={m.poster ? cmtyMediaUrl(m.poster) : undefined} controls playsInline preload="metadata"
          aria-label={"Video" + (label ? " from " + label : "")} />
      </div>
    );
  }
  const shown = list.slice(0, 4);
  return (
    <div className={"cmty-gal n" + shown.length} style={shown.length === 1 ? { "--ar": ratio(shown[0]) || "4 / 3" } : undefined}>
      {shown.map((m, i) => (
        <button key={m.path} className="cmty-gal-i" onClick={() => onOpen(i)}
          aria-label={"Open photo " + (i + 1) + " of " + shown.length + (label ? " from " + label : "")}>
          <img src={cmtyMediaUrl(m.path)} alt="" loading="lazy" decoding="async" />
        </button>
      ))}
    </div>
  );
}

// A record named in a post: a small card that opens the record sheet.
function CmtyPostRecord({ rec, onOpen }) {
  return (
    <button className="cmty-up-rec" onClick={onOpen} aria-label={rec.title + " by " + rec.artist + ". Open"}>
      <CmtySleeve item={rec} size={52} />
      <span className="cmty-up-rec-t">
        <b>{rec.title}</b>
        <span className="cmty-meta">{rec.artist}{rec.year ? " · " + rec.year : ""}{rec.owned === false ? " · Deep dive" : ""}</span>
      </span>
      <span className="cmty-up-rec-go" aria-hidden="true">›</span>
    </button>
  );
}

// Who the writer will appear as, from the store when it is theirs.
function cmtyMeLabel(meId) {
  const st = window.BBR_store;
  if (!st || !meId || String(st.userId) !== String(meId) || !st.profileLoaded) return "";
  return st.isPublic && st.username ? st.username : "Anonymous " + (st.anonAlias || "collector");
}

// WRITING A POST. Closed, it is a line to tap and five ideas; open, a box, the
// attachments and Post. `items` are the writer's own records, for "about a
// record"; when not given, the store's are used if they are the writer's.
function CmtyComposer({ meId, authReady, items, onPosted, where }) {
  const [open, setOpen] = useCmState(false);
  const [prompt, setPrompt] = useCmState(null);
  const [text, setText] = useCmState("");
  const [files, setFiles] = useCmState([]);       // [{ id, kind, blob|file, url, w, h, dur, poster, type }]
  const [rec, setRec] = useCmState(null);          // { kind: "item"|"dive", ... }
  const [recOpen, setRecOpen] = useCmState(false);
  const [q, setQ] = useCmState("");
  const [busy, setBusy] = useCmState(false);
  const [stage, setStage] = useCmState("");
  const [err, setErr] = useCmState("");
  const [picking, setPicking] = useCmState(false);
  const [said, setSaid] = useCmState("");
  // Which press of Post (or which reading of a file) is current. Cancel moves
  // it on, so an upload still under way from before can neither post nor put
  // its files back: one shared "stopped" flag was reset by the next Post, and a
  // cancelled post went out while the new one was dropped (QA, 14 Oct 2026).
  const runRef = useCmRef(0);
  const [discard, setDiscard] = useCmState(false);
  const keepRef = useCmRef(null);
  const taRef = useCmRef(null), photoRef = useCmRef(null), videoRef = useCmRef(null), fakeRef = useCmRef(null);
  const tag = useCmtyTag(taRef, text, setText, null, meId);
  // The writer's own picture beside the box, in place of "Posting as …"
  // (Ric, 14 Oct 2026); the name is still said to a screen reader.
  const meActor = useCmtyMeActor(meId || null);
  const filesRef = useCmRef(files); filesRef.current = files;
  // Object URLs for the previews are let go when the box is.
  useCmEffect(() => () => { (filesRef.current || []).forEach((f) => { if (f.url) URL.revokeObjectURL(f.url); }); }, []);
  const gate = () => { if (authReady === false) return; window.__bbrRequireAuth && window.__bbrRequireAuth("community"); };
  const begin = (k) => {
    if (!meId) { gate(); return; }
    setOpen(true); setSaid("");
    if (k !== undefined) setPrompt((p) => (p === k ? null : k));
    setTimeout(() => { if (taRef.current) taRef.current.focus(); }, 30);
    window.BBR_track && window.BBR_track("community_compose", { prompt: k || "none", where: where || "feed" });
  };
  const pr = CMTY_PROMPTS.find((p) => p.k === prompt);
  const hasVideo = files.some((f) => f.kind === "video");
  const nPhotos = files.filter((f) => f.kind === "image").length;

// Records to choose from: your shelf, then the deep dives.
  const mine = items || ((window.BBR_store && meId && String(window.BBR_store.userId) === String(meId) && window.BBR_store.collectionV2) || []);
  const recMatches = useCmMemo(() => {
    const t = q.trim().toLowerCase();
    if (t.length < 2) return [];
    const has = (r) => ((r.title || "") + " " + (r.artist || "")).toLowerCase().includes(t);
    const own = (mine || []).filter(has).slice(0, 5).map((r) => ({ kind: "item", id: r.id, title: r.title, artist: r.artist, year: r.year, slug: r.slug || null, discogs_release_id: r.discogs_release_id || null, cover: r.cover || (r.album && r.album.coverUrl) || null }));
    const dives = ((window.bbrDivesNow && window.bbrDivesNow()) || []).filter((d) => d.published_at && d.slug && has(d)).slice(0, 3)
      .map((d) => ({ kind: "dive", slug: d.slug, title: d.title, artist: d.artist, year: d.year }));
    return own.concat(dives);
  }, [q, mine]);

// One post of any kind.
function CmtyPostOf(props) {
  const k = props.ev && props.ev.kind;
  if (k === "adds") return <CmtyAddsPost {...props} />;
  if (k === "tier") return <CmtyTierPost {...props} />;
  if (k === "dive") return <CmtyDivePost {...props} />;
  if (k === "post") return <CmtyUserPost {...props} />;
  return null;
}

// "following" is answered by the server (p_following); the rest filter what is loaded.
const CMTY_FILTERS = [["all", "Everything"], ["following", "Following"], ["post", "Posts"], ["adds", "New records"], ["tier", "Market"], ["dive", "Deep dives"]];

// THE FEED SURVIVES LEAVING IT. Opening a shelf, or the Collectors tab, unmounts
// this page; coming back used to mean a fresh first page at the top, the
// reader's place, filter and every "earlier activity" page gone, and the
// heaviest read on the site run again. What is loaded is kept here and put back
// when the page is re-entered within ten minutes by the same reader. The scroll
// position is put back too, but only for Back and Forward: a click on a tab or
// the nav means "take me there", which is the top.
const cmtyFeedKeep = { meId: null, filter: "all", events: null, wall: null, more: false, stats: null, y: 0, at: 0 };
let cmtyPoppedAt = 0;
window.addEventListener("popstate", () => { cmtyPoppedAt = Date.now(); });
function cmtyFeedRestorable(meId) {
  return !!cmtyFeedKeep.events && cmtyFeedKeep.meId === (meId || null) && Date.now() - cmtyFeedKeep.at < 10 * 60 * 1000;
}

// ONE POST, BROUGHT TO THE TOP: from a line in the inbox, or a link in an
  // email (/community?post=<key>). It may be far down the feed or off the first
  // page, so it is read on its own (community_post()) and shown with its
  // comments open. The key is taken out of the address once read, or it would
  // ride along onto the next page the reader opens.
  const [focus, setFocus] = useCmState(() => {
    try {
      const sp = new URLSearchParams(location.search), k = sp.get("post");
      if (!k) return null;
      sp.delete("post");
      history.replaceState(history.state, "", location.pathname + (sp.toString() ? "?" + sp.toString() : "") + location.hash);
      return { key: k.slice(0, 120), ev: null, state: "wait" };
    } catch (e) { return null; }
  });
  const focusRef = useCmRef(null);
  // Scroll to it and put focus on its heading, so a keyboard or screen-reader
  // user lands where the page has just moved to.
  const toFocus = () => setTimeout(() => {
    const el = focusRef.current;
    if (!el) return;
    if (el.scrollIntoView) el.scrollIntoView({ block: "start", behavior: "smooth" });
    const h = el.querySelector("h2");
    if (h) h.focus({ preventScroll: true });
  }, 60);
  // A second line in the inbox about the post that is already open must not
  // throw the conversation (and a half-written reply) away: asking for the
  // same post again only goes back to it. `n` asks for a fresh read when the
  // last one failed.
  // `cid`: the comment a notification is about, shown and lit once the
  // thread is open (14 Oct 2026, Ric: it took you to the post, not the comment).
  // From For you (`step`), the post is a step in history: Back closes it and
  // returns to the line that was tapped, rather than leaving Community (UX
  // review, 14 Oct 2026). A second post opened from there replaces the step.
  const openPost = (key, cid, step) => {
    if (step) {
      const st = Object.assign({}, history.state || {}, { bbrCmtyPost: key });
      if (history.state && history.state.bbrCmtyPost) history.replaceState(st, "", location.pathname + location.search + location.hash);
      else history.pushState(st, "", location.pathname + location.search + location.hash);
    }
    setFocus((f) => (f && f.key === key && f.state !== "gone" && f.state !== "err"
      ? Object.assign({}, f, { cid: cid || null, hit: (f.hit || 0) + 1, step: !!step || f.step })
      : { key, cid: cid || null, hit: 1, ev: null, state: "wait", n: ((f && f.n) || 0) + 1, step: !!step }));
    if (!cid) toFocus();
  };
  const closePost = () => {
    // The step is ours: go back over it (the listener below closes the post).
    if (history.state && history.state.bbrCmtyPost) { history.back(); return; }
    setFocus(null);
    setTimeout(cmtyInboxReturn, 0);
  };
  const stepOpen = useCmRef(false);
  stepOpen.current = !!(focus && focus.step);
  useCmEffect(() => {
    const onPop = () => {
      // Only the step For you made: a dialog closing pops its own entry too.
      if (!stepOpen.current || (history.state && history.state.bbrCmtyPost)) return;
      stepOpen.current = false;
      setFocus(null);
      setTimeout(cmtyInboxReturn, 0);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  const focusCid = focus && focus.state === "ok" ? focus.cid : null, focusHit = focus ? focus.hit : 0;
  useCmEffect(() => {
    if (!focusCid) return undefined;
    // The thread reads its comments after the post is shown: look for the
    // comment for a few seconds, then fall back to the top of the post.
    let tries = 0, done = false;
    const t = setInterval(() => {
      const box = focusRef.current;
      const el = box && box.querySelector('[data-cid="' + focusCid + '"]');
      if (el) {
        clearInterval(t); done = true;
        try { el.scrollIntoView({ block: "center", behavior: "smooth" }); } catch (e) { el.scrollIntoView(); }
        el.classList.remove("cmty-c-hit"); void el.offsetWidth; el.classList.add("cmty-c-hit");
        el.focus({ preventScroll: true });
      } else if (++tries > 30) { clearInterval(t); done = true; toFocus(); }
    }, 150);
    return () => { if (!done) clearInterval(t); };
  }, [focusCid, focusHit]);
  const focusKey = focus ? focus.key : null, focusN = focus ? (focus.n || 0) : 0;
  useCmEffect(() => {
    // `waited`, not authReady: if the session never answers, the post is read
    // signed-out after two and a half seconds, as the feed is.
    if (!focusKey || !waited) return;
    if (!window.BBR_supabase) { setFocus((f) => (f && f.key === focusKey ? Object.assign({}, f, { state: "err" }) : f)); return; }
    let live = true;
    Promise.resolve(window.BBR_supabase.rpc("community_post", { p_key: focusKey })).then((out) => {
      if (!live) return;
      // A refusal or a dropped connection is not "that post is gone".
      if (!out || out.error) { setFocus((f) => (f && f.key === focusKey ? Object.assign({}, f, { ev: null, state: "err" }) : f)); return; }
      const ev = out.data || null;
      setFocus((f) => (f && f.key === focusKey ? Object.assign({}, f, { ev, state: ev ? "ok" : "gone" }) : f));
      toFocus();
    }, () => { if (live) setFocus((f) => (f && f.key === focusKey ? Object.assign({}, f, { ev: null, state: "err" }) : f)); });
    return () => { live = false; };
  }, [focusKey, focusN, meId || null, waited]);
  // Signed in from the line under a thread: bring that post back to the top,
  // because the feed is about to be read again as this reader and a post from
  // beyond the first page would go with it (see cmtyTalkWant).
  useCmEffect(() => {
    if (!meId || !cmtyTalkWant.key) return;
    const k = cmtyTalkWant.key, fresh = Date.now() - cmtyTalkWant.at < 3 * 60 * 1000;
    cmtyTalkWant.key = null;
    if (fresh) openPost(k);
  }, [meId || null]);
  // A comment posted or removed changes the post it sits on, wherever that
  // post is being shown: in the list, and in the one brought to the top.
  const onTalk = (key, patch) => {
    setEvents((es) => (es ? es.map((e) => (e.key === key ? Object.assign({}, e, patch) : e)) : es));
    setFocus((f) => (f && f.ev && f.key === key ? Object.assign({}, f, { ev: Object.assign({}, f.ev, patch) }) : f));
  };
  // A post deleted or reported here stays on screen as its one-line notice and
  // is left out of what is kept for the way back.
  const goneKeys = useCmRef({});
  const onGone = (key) => { goneKeys.current[key] = true; };
  const postOf = (ev, isFocus) => <CmtyPostOf ev={ev} meId={meId} soc={soc} onViewCollection={onViewCollection} onTalk={onTalk} focus={isFocus} onGone={onGone} />;
  // A post just written goes to the top at once, whatever the filter (it is
  // the writer's own); the next read brings it in its place.
  const onPosted = (ev) => {
    if (!ev || !ev.key) return;
    setEvents((es) => [ev].concat((es || []).filter((e) => e.key !== ev.key)));
    if (filter !== "all" && filter !== "post" && filter !== "following") setFilter("all");
  };
  const following = filter === "following";
  // Which reader and filter the posts on screen belong to.
  const shownFor = useCmRef(keep ? { meId: keep.meId, following: keep.filter === "following" } : null);
  // ONLY THE NEWEST REQUEST MAY WRITE. Switching Following on and off quickly, or
  // signing in while the first read was in flight, left two requests racing, and
  // whichever answered LAST won: the page showed the Following feed under
  // "Everything", or lost the reader's likes to the signed-out answer. Every
  // load takes a number; an answer that is no longer the newest is dropped,
  // including a "show earlier" page for a feed that has since changed.
  const reqRef = useCmRef(0);
  const load = (after) => {
    const id = ++reqRef.current;
    const top = !after;
    setBusy(true); setErr(false);
    if (top) setSwapping(true);
    return Promise.resolve(window.BBR_supabase.rpc("community_feed", {
      p_limit: CMTY_PAGE, p_following: following,
      // The key breaks a tie: two posts with the same timestamp on a page edge
      // used to lose one.
      p_before: after ? after.at : null, p_before_key: after ? after.key : null,
    }))
      .then((out) => {
        if (id !== reqRef.current) return;
        if (!out || out.error || !out.data) throw (out && out.error) || new Error("no data");
        const rows = out.data.events || [];
        setEvents((prev) => (!top && prev ? prev.concat(rows) : rows));
        setMore(!!out.data.more);
        if (top) {
          shownFor.current = { meId: meId || null, following };
          if (!following) setWall(rows);
          if (out.data.stats) { setStats(out.data.stats); onStats && onStats(out.data.stats); }
        }
      })
      .catch((e) => {
        if (id !== reqRef.current) return;
        console.error("[community] feed", e);
        setErr(true);
        // A failed reload keeps what was on screen, unless what is on screen
        // belongs to a different filter or reader: those posts would be a lie
        // under the chip that is now lit.
        const s = shownFor.current;
        if (top && s && (s.following !== following || s.meId !== (meId || null))) { setEvents(null); shownFor.current = null; }
      })
      .then(() => { if (id === reqRef.current) { setBusy(false); setSwapping(false); } });
  };
  // Reload from the top when the reader changes (their likes and follows ride
  // on the rows) or when Following is switched on or off. Not on the first pass
  // of a restored feed: that one already has its posts.
  useCmEffect(() => {
    if (!waited) return;
    if (restored.current) {
      // Only if the kept posts really are this reader's, under this filter. The
      // flag must not swallow the reload that a reader arriving later needs.
      restored.current = false;
      const s = shownFor.current;
      if (s && s.meId === (meId || null) && s.following === following) return;
    }
    setFresh(false);
    if (window.BBR_supabase) load(null); else setErr(true);
  }, [meId, following, waited]);
  // Keep what is loaded, and where the reader is, for the way back.
  useCmEffect(() => {
    Object.assign(cmtyFeedKeep, { meId: meId || null, filter, events: events ? events.filter((e) => !goneKeys.current[e.key]) : events, wall, more, stats, at: Date.now() });
  }, [meId, filter, events, wall, more, stats]);
  // LIVE. Ask for the newest post's key; if it is not the one at the top of
  // this feed, offer it. Never splice posts in under the reader's thumb.
  const topKey = events && events[0] ? events[0].key : null;
  const check = (isLive) => {
    if (document.hidden || !window.BBR_supabase) return;
    Promise.resolve(window.BBR_supabase.rpc("community_feed", { p_limit: 1, p_before: null, p_following: following })).then((out) => {
      const k = out && out.data && out.data.events && out.data.events[0] && out.data.events[0].key;
      if (isLive() && k && k !== topKey) setFresh(true);
    }, () => {});
  };
  useCmEffect(() => {
    if (keep && keep.stats && onStats) onStats(keep.stats);
    // Back and Forward return to where the reader was; a restored feed may be
    // minutes old, so it is checked for news straight away.
    if (keep && Date.now() - cmtyPoppedAt < 1500) requestAnimationFrame(() => window.scrollTo(0, cmtyFeedKeep.y));
    let live = true;
    if (keep) check(() => live);
    let raf = 0;
    // Not while a dialog holds the page still (the body is fixed and the
    // window reads 0): that was kept as the reader's place.
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(() => { raf = 0; if (document.body.style.position !== "fixed") cmtyFeedKeep.y = window.scrollY || 0; }); };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { live = false; window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); reqRef.current = -1; };
  }, []);
  useCmEffect(() => {
    if (!topKey) return;
    // `live` goes false when the filter or the top post changes, so an answer
    // already on its way cannot light the pill for a feed that has moved on.
    let live = true;
    const t = setInterval(() => check(() => live), CMTY_POLL_MS);
    return () => { live = false; clearInterval(t); };
  }, [topKey, following]);
  const pick = (k) => {
    if (k === "following" && !meId) { soc.gate(); return; }
    setFilter(k);
    window.BBR_track && window.BBR_track("community_filter", { filter: k });
  };

const shown = useCmMemo(() => (events || []).filter((e) => filter === "all" || following || e.kind === filter), [events, filter]);

return (
    <div className="cmty-cols">
      <div className="cmty-feed">
        {/* First, for a signed-in reader: on a phone it sat under the figures
            and the wall of sleeves, two screens down (Ric, 14 Oct 2026). */}
        <CmtyInboxPanel meId={meId} onViewCollection={onViewCollection} onOpenPost={openPost} />
        {/* A member's post box comes next, not under the site's figures and the
            wall of sleeves, a screen and a half down on a phone (UX review). */}
        {meId ? <CmtyComposer meId={meId} authReady={authReady} onPosted={onPosted} where="feed" /> : null}
        {stats ? (
          <div className="lb-stats cmty-stats">
            <div className="lb-stat lb-stat-hero">
              <div className="lb-stat-n"><span className="cur">£</span><CmtyCount value={stats.total_value} /></div>
              <div className="lb-stat-l">Across all shelves</div>
            </div>
            <div className="lb-stat"><div className="lb-stat-n"><CmtyCount value={stats.records} /></div><div className="lb-stat-l">Records logged</div></div>
            <div className="lb-stat"><div className="lb-stat-n"><CmtyCount value={stats.added_7d} /></div><div className="lb-stat-l">Added this week</div></div>
            <div className="lb-stat"><div className="lb-stat-n"><CmtyCount value={stats.tier_moves_7d} /></div><div className="lb-stat-l">Up a tier this week</div></div>
            <div className="lb-stat"><div className="lb-stat-n"><CmtyCount value={stats.collectors} /></div><div className="lb-stat-l">Collectors</div></div>
          </div>
        ) : null}
        <CmtyWall events={wall || (following ? null : events)} onViewCollection={onViewCollection} />
        {meId ? null : <CmtyComposer meId={meId} authReady={authReady} onPosted={onPosted} where="feed" />}
        {focus ? (
          <section className="cmty-focus" ref={focusRef} aria-label="The post you opened">
            <div className="cmty-focus-h">
              <h2 className="cmty-day" tabIndex={-1}>The conversation</h2>
              <button className="cmty-link" onClick={closePost}>Back to all activity</button>
            </div>
            {focus.state === "wait" ? <p className="cmty-empty">Finding that post…</p> : null}
            {focus.state === "gone" ? <p className="cmty-empty">That post isn’t in the feed any more.</p> : null}
            {focus.state === "err" ? <p className="cmty-empty">That post didn’t load. <button className="cmty-link" onClick={() => setFocus((f) => (f ? { key: f.key, ev: null, state: "wait", n: (f.n || 0) + 1 } : f))}>Try again</button></p> : null}
            {focus.ev ? <div key={focus.key}>{postOf(focus.ev, true)}</div> : null}
          </section>
        ) : null}
        <div className="cmty-chips" role="group" aria-label="Show">
          {CMTY_FILTERS.map(([k, label]) => (
            <button key={k} className={"cmty-chip" + (filter === k ? " on" : "")} aria-pressed={filter === k}
              onClick={() => pick(k)}>{label}</button>
          ))}
        </div>
        {err && !events ? <p className="cmty-empty">{CMTY_LOAD_ERR}</p> : null}
        {!events && !err ? <p className="cmty-empty">Loading the feed…</p> : null}
        {fresh ? (
          // The posts stay where they are until the new ones arrive. This used to
          // empty the feed first, so a failed request took the page with it.
          <button className="cmty-fresh" onClick={() => { setFresh(false); load(null); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
            <span className="cmty-pulse" aria-hidden="true" /> New activity. Show it now
          </button>
        ) : null}
        {err && events ? <p className="cmty-empty">{CMTY_LOAD_ERR}</p> : null}
        <div className={"cmty-list" + (swapping && events ? " is-swapping" : "")} aria-busy={swapping ? "true" : undefined}>
          {events && !shown.length && !swapping ? (
            <p className="cmty-empty">
              {following ? "Nothing yet from the collectors you follow. Follow a few and their posts and new records land here. " : "Nothing like that in the latest activity. Choose Everything, or come back later."}
              {following && window.__nav ? <button className="cmty-link" onClick={() => window.__nav.goCollectors()}>Find collectors</button> : null}
            </p>
          ) : null}
          {shown.map((ev, i) => {
            const head = i === 0 || cmtyDayKey(shown[i - 1].at) !== cmtyDayKey(ev.at);
            return (
              <React.Fragment key={ev.key}>
                {head ? <h2 className="cmty-day">{cmtyDayLabel(ev.at)}</h2> : null}
                <div className="cmty-in" style={{ "--i": Math.min(i, 8) }}>
                {postOf(ev, false)}
                </div>
              </React.Fragment>
            );
          })}
        </div>
        {events && more ? (
          <button className="cmty-loadmore" disabled={busy}
            onClick={() => { load(events[events.length - 1]); window.BBR_track && window.BBR_track("community_more", {}); }}>
            {busy ? "Loading…" : "Show earlier activity"}
          </button>
        ) : null}
      </div>
    </div>
  );
}

// ---- the tile's one-line description ---------------------------------------
// Written from what the shelf holds (its genres, decades and rarity tiers), all
// of which the public item view already shows. It is NOT the owner's Collection
// DNA read: that is addressed to them ("Your collection…") and is theirs alone.
const CMTY_GENRE_WORDS = {
  "Rock": "rock", "Electronic": "electronic", "Pop": "pop", "Jazz": "jazz", "Soul / R&B": "soul and R&B",
  "Hip-Hop": "hip-hop", "Folk / Country": "folk and country", "Stage & Screen": "soundtracks",
  "Classical": "classical", "Reggae": "reggae", "Reggae / Dub": "reggae and dub", "Children's": "children’s records",
  "Blues": "blues", "Metal": "metal", "Punk / Indie": "punk and indie", "Latin": "Latin",
  "Krautrock": "krautrock", "Ambient": "ambient", "Brass & Military": "brass and military bands",
};
function cmtyGenreWord(g) { return CMTY_GENRE_WORDS[g] || String(g || "").toLowerCase().replace(" / ", " and ").replace(" & ", " and "); }
function cmtyDescribe(c) {
  const count = Number(c.item_count) || 0;
  // Shares are of the WHOLE shelf, classified or not: ten rock records among a
  // hundred with no genre is "some rock", and used to read "Mostly rock".
  const gs = (c.genres || []).map((g) => ({ w: cmtyGenreWord(g.genre), s: g.n / (count || 1) }));
  let first = "";
  if (gs.length) {
    if (gs[0].s >= 0.7) first = "Almost all " + gs[0].w;
    else if (gs[0].s >= 0.45) first = "Mostly " + gs[0].w + (gs[1] && gs[1].s >= 0.15 ? ", with a strong line in " + gs[1].w : "");
    else if (gs.length >= 3 && gs[2].s >= 0.1) first = "A mix of " + gs[0].w + ", " + gs[1].w + " and " + gs[2].w;
    else if (gs.length >= 2 && gs[1].s >= 0.1) first = "A mix of " + gs[0].w + " and " + gs[1].w;
    else first = "Some " + gs[0].w;
  }
  const ds = c.decades || [], dated = Number(c.dated) || 0;
  let when = "";
  if (ds.length && dated >= 5) {
    const s0 = ds[0].n / dated, s1 = ds[1] ? ds[1].n / dated : 0;
    if (ds[1] && s0 >= 0.25 && s1 >= 0.25 && Math.abs(ds[0].decade - ds[1].decade) === 10) {
      const lo = Math.min(ds[0].decade, ds[1].decade);
      when = "centred on the " + lo + "s and " + (lo + 10) + "s";
    } else if (s0 >= 0.35) when = "weighted to the " + ds[0].decade + "s";
  }
  let out = first ? first + (when ? ", " + when : "") + "." : (when ? "A shelf " + when + "." : "");
  const t = c.tiers || {};
  if (t.grail > 0) out += " " + cmtyPlural(t.grail, "Grail pressing") + " on the shelf.";
  else if (t.rare > 0) out += " " + cmtyPlural(t.rare, "Rare pressing") + " on the shelf.";
  // A size, not a history. "Just getting started" said when the shelf began,
  // which is the one thing this page may not say of an anonymous collector, and
  // was wrong for an old small shelf anyway.
  else if (count < 10) out += " A small shelf.";
  return out.trim() || "A shelf in the making.";
}
// The shelf's genre mix as one bar: its top three genres in their own colours,
// the remainder in grey. Widths are shares of the whole shelf.
function CmtyGenreBar({ c }) {
  const count = Number(c.item_count) || 0, gs = c.genres || [];
  if (!count || !gs.length) return null;
  const used = gs.reduce((n, g) => n + g.n, 0);
  return (
    <div className="cmty-mix">
      <div className="cmty-mix-bar" role="img" aria-label={"Genre mix: " + gs.map((g) => g.genre + " " + Math.round(100 * g.n / count) + "%").join(", ")}>
        {gs.map((g) => <span key={g.genre} style={{ width: (100 * g.n / count) + "%", background: cmtyGenreHue(g.genre) }} />)}
        {used < count ? <span style={{ width: (100 * (count - used) / count) + "%", background: "var(--rule)" }} /> : null}
      </div>
      <div className="cmty-mix-key" aria-hidden="true">
        {gs.slice(0, 2).map((g) => <span key={g.genre}><i style={{ background: cmtyGenreHue(g.genre) }} />{g.genre} {Math.round(100 * g.n / count)}%</span>)}
      </div>
    </div>
  );
}
// Scarce first: a badge nobody lacks is not a badge. Four at most.
function cmtyBadges(c) {
  const out = [];
  if (c.rank_value === 1) out.push({ label: "Top shelf", hot: true, title: "The most valuable shelf on The Lead-In" });
  if (c.rank_count === 1) out.push({ label: "Biggest shelf", hot: true, title: "The most records on The Lead-In" });
  const t = c.tiers || {};
  if (t.grail > 0) out.push({ label: cmtyPlural(t.grail, "Grail"), title: "Grail pressings: about £400 or more at Near Mint, and hard to find" });
  const leads = c.leads || [];
  if (leads.length) out.push({ label: leads[0] + " leader" + (leads.length > 1 ? " +" + (leads.length - 1) : ""), title: "Holds the most valuable " + leads.join(", ") + " shelf" });
  if (c.is_public && c.member_since && String(c.member_since).slice(0, 10) < CMTY_FOUNDING_BEFORE) out.push({ label: "Founding member", title: "Here since the first month" });
  const level = cmtyLevel(c.item_count);
  if (level && Number(c.item_count) >= 10) out.push({ label: level, title: c.item_count + " records. Level is by record count, not value" });
  return out.slice(0, 4);
}

const CMTY_SORTS = [
  ["active", "Recently active", (a, b) => String(b.last_add || "").localeCompare(String(a.last_add || ""))],
  ["count", "Most records", (a, b) => b.item_count - a.item_count],
  ["value", "Highest value", (a, b) => b.total_value - a.total_value],
  ["followers", "Most followed", (a, b) => (b.followers - a.followers) || String(b.last_add || "").localeCompare(String(a.last_add || ""))],
];

// `divesLoaded` is not read: it is passed so the page draws again once the dive
// catalogue has arrived, which is when "Read the deep dive" can be decided.
function Community({ tab, currentUserId, authReady, divesLoaded, onViewCollection, onRequireAuth }) {
  const soc = useCmtySocial(currentUserId || null, authReady, onRequireAuth);
  const [collectors, setCollectors] = useCmState(null);
  const [cErr, setCErr] = useCmState(false);
  const [count, setCount] = useCmState(cmtyFeedKeep.stats ? cmtyFeedKeep.stats.collectors : null);
  // The tiles are read when the Collectors tab is opened, as whoever is reading
  // (after auth has answered), and again if that changes. The feed tab used to
  // fetch all of them on every visit to print one number, which the feed's own
  // stats already carry.
  const wantFor = tab === "collectors" && authReady !== false ? (currentUserId || "anon") : null;
  const gotFor = useCmRef(null);
  useCmEffect(() => {
    if (!wantFor || gotFor.current === wantFor) return;
    if (!window.BBR_supabase) { setCErr(true); return; }
    let live = true;
    setCErr(false);
    Promise.resolve(window.BBR_supabase.rpc("community_collectors", {}))
      .then((out) => {
        if (!live) return;
        if (!out || out.error || !Array.isArray(out.data)) throw (out && out.error) || new Error("no data");
        gotFor.current = wantFor;
        setCollectors(out.data);
        setCount(out.data.length);
      })
      .catch((e) => { console.error("[community] collectors", e); if (live) setCErr(true); });
    return () => { live = false; };
  }, [wantFor]);
  useCmEffect(() => { window.BBR_track && window.BBR_track("community_tab", { tab }); }, [tab]);
  return (
    <div className="lb cmty">
      <div className="lb-head">
        <h1 className="lb-title">Community</h1>
        <p className="lb-sub">
          {tab === "collectors"
            ? "Every collector on The Lead-In and what their shelf is made of. Open any one to see their shelf; some appear under an alias."
            : "Posts, new records, new levels and pressings on the move, from every shelf on The Lead-In" + (count ? " (" + count + " collectors so far)." : ".")}
        </p>
      </div>
      <CommunityTabs tab={tab} />
      {tab === "collectors"
        ? <CmtyCollectors collectors={collectors} err={cErr} meId={currentUserId} soc={soc} onViewCollection={onViewCollection} />
        : <CmtyFeed meId={currentUserId} authReady={authReady} soc={soc} onViewCollection={onViewCollection} onRequireAuth={onRequireAuth}
            onStats={(s) => { if (s && s.collectors) setCount(s.collectors); }} />}
      <CmtySocialNote soc={soc} />
    </div>
  );
}

// ---- choosing a picture -----------------------------------------------------
// Opened from the collector's own profile. Three ways in, most personal first:
// records suggested from their own shelf (each with the reason it is offered),
// any record on the shelf by search, and the drawn labels. Nothing is saved
// until Save, so a tap is a preview.
const CMTY_AV_ERR = {
  not_your_record: "That record isn’t on your shelf any more.",
  sign_in: "Sign in again to choose a picture.",
  bad_media: "That photo didn’t upload properly. Try again.",
};
// A session that has lapsed is refused before the function runs, so it never
// raises its own 'sign_in': it arrives as a permission error.
function cmtyAvErr(e) {
  const m = String((e && e.message) || ""), c = String((e && e.code) || "");
  if (c === "42501" || c === "PGRST301" || /permission denied|JWT/i.test(m)) return CMTY_AV_ERR.sign_in;
  return CMTY_AV_ERR[m] || "That didn’t save. Try again in a moment.";
}
function CmtyAvatarPicker({ actor, current: given, auto, genres, items, onClose, onSaved }) {
  // Opened from Account settings it is not told the current picture: read it,
  // so it shows (UX review, 14 Oct 2026). And with no records, no shelf to
  // choose from: those sections are left out.
  const [current, setCurrent] = useCmState(given || null);
  useCmEffect(() => {
    if (given || !actor || !actor.user_id || !window.BBR_supabase) return undefined;
    let live = true;
    Promise.resolve(window.BBR_supabase.rpc("community_person", { p_user: actor.user_id })).then((out) => {
      if (live && out && !out.error && out.data && out.data.avatar && !out.data.avatar.auto) setCurrent(out.data.avatar);
    }, () => {});
    return () => { live = false; };
  }, []);
  const noShelf = Array.isArray(items) && items.length === 0;
  const [opts, setOpts] = useCmState(null);
  const [optsBad, setOptsBad] = useCmState(false);
  const [pick, setPick] = useCmState(null);        // { choice, avatar }, or null while untouched
  // Opens on the label they already have, if they have one, not on the colour
  // of their top genre with nothing marked.
  const has = current && current.kind === "label" ? current : null;
  const [hue, setHue] = useCmState(has ? (Number(has.hue) || 0) : cmtyHueForGenre(genres && genres[0]));
  // A double click on the link that opens this lands its second click on the
  // backdrop, which closed it again at once.
  const born = useCmRef(Date.now());
  const [q, setQ] = useCmState("");
  const [saving, setSaving] = useCmState(false);
  const [err, setErr] = useCmState("");
  const [reading, setReading] = useCmState(false);
  const fileRef = useCmRef(null);
  const onCloseRef = useCmRef(onClose); onCloseRef.current = onClose;
  // An uploaded photo (13 Oct 2026): cut to a square from the middle, 512
  // pixels, and only sent when Save is pressed.
  const photoUrl = useCmRef(null);
  useCmEffect(() => () => { if (photoUrl.current) URL.revokeObjectURL(photoUrl.current); }, []);
  const takePhoto = (f) => {
    if (!f) return;
    setErr(""); setReading(true);
    cmtyImageBlob(f, { square: 512, quality: 0.88 }).then((r) => {
      setReading(false);
      if (photoUrl.current) URL.revokeObjectURL(photoUrl.current);
      photoUrl.current = URL.createObjectURL(r.blob);
      setPick({ choice: "photo:new", avatar: { kind: "photo", url: photoUrl.current }, blob: r.blob });
    }, () => { setReading(false); setErr("That photo couldn’t be read. Try a JPEG or PNG."); });
  };

useCmEffect(() => {
    let live = true;
    Promise.resolve(window.BBR_supabase.rpc("community_avatar_options", {})).then((out) => {
      if (!live) return;
      const ok = out && !out.error && Array.isArray(out.data);
      setOpts(ok ? out.data : []); setOptsBad(!ok);
    }, () => { if (live) { setOpts([]); setOptsBad(true); } });
    return () => { live = false; };
  }, []);
  // Body lock, back gesture, Escape: as the front-ten picker.
  useCmEffect(() => {
    const y = window.scrollY || 0, b = document.body;
    const prev = { position: b.style.position, top: b.style.top, left: b.style.left, right: b.style.right, width: b.style.width, overflow: b.style.overflow };
    Object.assign(b.style, { position: "fixed", top: "-" + y + "px", left: "0", right: "0", width: "100%", overflow: "hidden" });
    return () => { Object.assign(b.style, prev); window.scrollTo(0, y); };
  }, []);
  useCmEffect(() => {
    history.pushState({ bbrAvatar: true }, "", location.pathname + location.search + location.hash);
    let popped = false;
    const onPop = () => { popped = true; onCloseRef.current(); };
    window.addEventListener("popstate", onPop);
    // Step back over our own entry only. If the page has moved on underneath
    // (a link followed while this was open), back() would undo that move.
    return () => { window.removeEventListener("popstate", onPop); if (!popped && history.state && history.state.bbrAvatar) history.back(); };
  }, []);
  // A dialog: focus comes in, Tab stays in, and focus goes back where it was.
  const boxRef = useCmRef(null);
  useCmEffect(() => {
    const was = document.activeElement, box = boxRef.current;
    if (box) box.focus({ preventScroll: true });
    const onTab = (e) => {
      if (e.key !== "Tab" || !box) return;
      const f = box.querySelectorAll("button:not([disabled]), input, a[href]");
      if (!f.length) return;
      const first = f[0], last = f[f.length - 1], at = document.activeElement;
      if (!box.contains(at)) { e.preventDefault(); first.focus(); }
      else if (e.shiftKey && (at === first || at === box)) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && at === last) { e.preventDefault(); first.focus(); }
    };
    document.addEventListener("keydown", onTab);
    return () => {
      document.removeEventListener("keydown", onTab);
      if (was && was.focus && document.contains(was)) { try { was.focus({ preventScroll: true }); } catch (e) {} }
    };
  }, []);
  useCmEffect(() => {
    const k = (e) => { if (e.key === "Escape" && !e.defaultPrevented) onCloseRef.current(); };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, []);

const asCover = (r) => ({ kind: "cover", artist: r.artist, title: r.title, year: r.year, slug: r.slug || null,
                            discogs_release_id: r.discogs_release_id || null, cover: r.cover || null });
  const matches = useCmMemo(() => {
    const t = q.trim().toLowerCase();
    if (t.length < 2) return [];
    return (items || []).filter((r) => ((r.title || "") + " " + (r.artist || "")).toLowerCase().includes(t)).slice(0, 6);
  }, [items, q]);
  const shown = pick ? pick.avatar : current;
  const isPick = (choice) => pick ? pick.choice === choice
    : !!has && choice === "label:" + has.pattern + ":" + (Number(has.hue) || 0);

const portal = window.bbrOverlayPortal || ((n) => n);
  return portal(
    <div className="av2-backdrop" onClick={() => { if (Date.now() - born.current > 450) onClose(); }}>
      <div className="av2-modal cmty-avp" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Choose your picture" tabIndex={-1} ref={boxRef}>
        <div className="av2-head">
          <div className="av2-head-left"><span className="av2-head-title">Your picture</span></div>
          <button className="av2-x" aria-label="Close" onClick={onClose}>×</button>
        </div>
        <div className="av2-body">
          <div className="cmty-avp-top">
            <CmtyAvatar actor={actor} avatar={shown} disc size={104} />
            <p>{!pick ? "This is how other collectors see you: on your shelf, beside your posts and comments, and in the notifications of people you like or follow."
                : pick.choice === "auto" && noShelf ? "The automatic picture: your initials, until you add a record. Save to keep it."
                : pick.choice === "auto" ? "The automatic picture: the first record in your front ten, or your most valuable one if you haven’t chosen a front ten. Save to keep it."
                : pick.blob ? "Your photo. Save to upload it and keep it."
                : "A preview. Save to keep it."}</p>
          </div>

<h3 className="cmty-avp-h">A photo</h3>
          <div className="cmty-avp-photo">
            <button className={"cmty-avp-opt cmty-avp-up" + (pick && pick.blob ? " on" : "")} disabled={reading || saving} onClick={() => fileRef.current && fileRef.current.click()}>
              <svg viewBox="0 0 20 20" width="22" height="22" aria-hidden="true"><rect x="2.5" y="4" width="15" height="12" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" /><circle cx="10" cy="10" r="3" fill="none" stroke="currentColor" strokeWidth="1.5" /></svg>
              <span className="cmty-avp-t">{reading ? "Reading…" : pick && pick.blob ? "Choose another" : "Upload a photo"}</span>
            </button>
            <p className="cmty-meta">A square from the middle of the photo. Anyone can see it{actor && !actor.is_public ? ", beside your alias, so a photo of yourself would say who you are" : ""}. Photos that break the rules are taken down.</p>
            <input ref={fileRef} type="file" accept="image/*" hidden onChange={(e) => { takePhoto(e.target.files && e.target.files[0]); e.target.value = ""; }} />
          </div>

{noShelf ? null : <React.Fragment>
          <h3 className="cmty-avp-h">From your shelf</h3>
          {opts === null ? <p className="cmty-meta">Looking through your records…</p> : null}
          {opts && !opts.length ? <p className="cmty-meta">{optsBad ? "Your suggestions didn’t load. You can still search your shelf or choose a label." : "Add a record and it can be your picture."}</p> : null}
          <div className="cmty-avp-grid">
            {(opts || []).map((o) => (
              <button key={o.choice} className={"cmty-avp-opt" + (isPick(o.choice) ? " on" : "")} aria-pressed={isPick(o.choice)}
                onClick={() => { setErr(""); setPick({ choice: o.choice, avatar: asCover(o) }); }}>
                <CmtyAvatar actor={actor} avatar={asCover(o)} size={64} />
                <span className="cmty-avp-t">{o.title}</span>
                <span className="cmty-meta">{o.why}</span>
              </button>
            ))}
          </div>

<h3 className="cmty-avp-h">Or any record you own</h3>
          <input className="cmty-avp-q" type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search your shelf" aria-label="Search your shelf" />
          {matches.map((r) => (
            <button key={r.id} className={"cmty-avp-row" + (isPick("item:" + r.id) ? " on" : "")} aria-pressed={isPick("item:" + r.id)}
              onClick={() => { setErr(""); setPick({ choice: "item:" + r.id, avatar: asCover(r) }); }}>
              <CmtyAvatar actor={actor} avatar={asCover(r)} size={36} />
              <span><b>{r.title}</b> <span className="cmty-meta">{r.artist}</span></span>
            </button>
          ))}
          {q.trim().length >= 2 && !matches.length ? <p className="cmty-meta">Nothing on your shelf matches that.</p> : null}
          </React.Fragment>}

<h3 className="cmty-avp-h">Or a label</h3>
          <div className="cmty-avp-hues" role="group" aria-label="Label colour">
            {CMTY_LABEL_HUES.map((c, i) => (
              <button key={i} className={"cmty-avp-hue" + (hue === i ? " on" : "")} style={{ background: c }} aria-pressed={hue === i}
                aria-label={"Colour " + (i + 1) + (CMTY_LABEL_GENRES[i] ? ", " + CMTY_LABEL_GENRES[i] : "")} title={CMTY_LABEL_GENRES[i]}
                onClick={() => { setHue(i); if (pick && pick.choice.indexOf("label:") === 0) { const p = Number(pick.choice.split(":")[1]); setPick({ choice: "label:" + p + ":" + i, avatar: { kind: "label", pattern: p, hue: i } }); } }} />
            ))}
          </div>
          <div className="cmty-avp-labels">
            {CMTY_LABEL_NAMES.map((nm, i) => {
              const choice = "label:" + (i + 1) + ":" + hue;
              return (
                <button key={nm} className={"cmty-avp-opt" + (isPick(choice) ? " on" : "")} aria-pressed={isPick(choice)}
                  onClick={() => { setErr(""); setPick({ choice, avatar: { kind: "label", pattern: i + 1, hue } }); }}>
                  <CmtyAvatar actor={actor} avatar={{ kind: "label", pattern: i + 1, hue }} size={56} />
                  <span className="cmty-meta">{nm}</span>
                </button>
              );
            })}
          </div>
        </div>
        <div className="cmty-avp-foot">
          {err ? <p className="cmty-avp-err" role="alert">{err}</p> : null}
          <button className="cmty-link" onClick={() => { setErr(""); setPick({ choice: "auto", avatar: auto || null }); }}>Use the automatic picture</button>
          <button className="cmty-follow on" disabled={saving || reading || !pick} onClick={save}>{saving ? (pick && pick.blob ? "Uploading…" : "Saving…") : "Save"}</button>
        </div>
      </div>
    </div>
  );
}

// Who is reading: undefined until the session has been read (a tap before
// then must not open the sign-up gate over a member, see useCmtySocial), then
// followed. Signing in from the gate leaves the reader on this page
// ("community" is a stay-in-place intent in App.jsx): read once, a header went
// on thinking nobody was signed in until a reload.
function useCmtyMe() {
  const [meId, setMeId] = useCmState(undefined);
  useCmEffect(() => {
    let live = true;
    if (!window.BBR_supabase || !window.BBR_supabase.auth) { setMeId(null); return; }
    window.BBR_supabase.auth.getSession().then((res) => {
      const u = res && res.data && res.data.session && res.data.session.user;
      if (live) setMeId(u ? u.id : null);
    }, () => { if (live) setMeId(null); });
    const off = window.BBR_auth && window.BBR_auth.onChange
      ? window.BBR_auth.onChange((u) => { if (live) setMeId(u ? u.id : null); }) : null;
    return () => { live = false; if (off) { try { off(); } catch (e) {} } };
  }, []);
  return meId;
}

// CHANGING THE USERNAME WHERE IT IS SHOWN (13 Oct 2026, Ric: on My collection).
// The same two calls as Account settings (username_check, set_username in
// supabase/migrations/usernames.sql), and the same words for a refusal.
const CMTY_UNAME_ERR = {
  format: "3 to 30 characters: letters, numbers, and single hyphens or underscores inside.",
  reserved: "That one isn’t available.",
  taken: "That username is taken.",
  too_often: "You’ve changed it three times this month. Try again in a few weeks.",
};
function CmtyNameEdit({ onDone }) {
  const store = window.BBR_store || {};
  const mine = store.username || "";
  const [v, setV] = useCmState(mine);
  const [hint, setHint] = useCmState(null);
  const [busy, setBusy] = useCmState(false);
  const [msg, setMsg] = useCmState("");
  const errs = window.BBR_USERNAME_ERR || CMTY_UNAME_ERR;
  const clean = v.trim().toLowerCase();
  const inRef = useCmRef(null);
  useCmEffect(() => { if (inRef.current) { inRef.current.focus(); inRef.current.select(); } }, []);
  useCmEffect(() => {
    if (!clean || clean === mine) { setHint(null); return; }
    let live = true;
    const t = setTimeout(() => {
      Promise.resolve(window.BBR_supabase.rpc("username_check", { p_username: clean })).then((out) => {
        const d = live && out && out.data;
        if (!d) return;
        setHint(d.ok ? { ok: true, text: clean + " is available." } : { ok: false, text: errs[d.error] || "That one isn’t available." });
      }, () => {});
    }, 350);
    return () => { live = false; clearTimeout(t); };
  }, [clean]);
  const save = (e) => {
    if (e) e.preventDefault();
    if (!clean || clean === mine || busy || (hint && !hint.ok)) return;
    setBusy(true); setMsg("");
    Promise.resolve(window.BBR_supabase.rpc("set_username", { p_username: clean })).then((out) => {
      const d = out && out.data;
      if (!out || out.error || !d) throw new Error("failed");
      if (!d.ok) { setBusy(false); setHint(null); setMsg(errs[d.error] || "That one isn’t available."); return; }
      // Share images print the username, and the kept feed names the collector.
      if (d.is_public && store.purgeNamedImages) store.purgeNamedImages();
      cmtyFeedKeep.events = null;
      window.BBR_track && window.BBR_track("username_change", { where: "collection" });
      return Promise.resolve(store.loadProfile ? store.loadProfile() : null).then(() => {
        if (store.notify) store.notify();
        setBusy(false);
        onDone(d.is_public ? "Saved. You now appear as " + d.username + "." : "Saved. It stays hidden while you appear under an alias.");
      });
    }).catch(() => { setBusy(false); setMsg("Couldn’t save that just now. Try again in a moment."); });
  };
  return (
    <form className="cmty-uname" onSubmit={save}>
      <label className="cmty-vh" htmlFor="cmty-uname-in">Username</label>
      <input id="cmty-uname-in" ref={inRef} value={v} maxLength={30} autoCapitalize="none" autoCorrect="off" spellCheck={false}
        placeholder="e.g. crate_digger" aria-describedby="cmty-uname-hint"
        onChange={(e) => { setV(e.target.value); setMsg(""); }}
        onKeyDown={(e) => { if (e.key === "Escape") { e.preventDefault(); onDone(""); } }} />
      <button type="submit" className="cmty-follow on" disabled={busy || !clean || clean === mine || !!(hint && !hint.ok)}>{busy ? "Saving…" : "Save"}</button>
      <button type="button" className="cmty-link" onClick={() => onDone("")}>Cancel</button>
      <div id="cmty-uname-hint" className="cmty-uname-hint" role="status">
        {hint ? <span className={hint.ok ? "ok" : "bad"}>{hint.text}</span> : null}
        {msg ? <span className="bad">{msg}</span> : null}
        {!hint && !msg ? <span className="cmty-meta">Letters, numbers, - and _. It doesn’t have to be your name. Three changes a month.</span> : null}
      </div>
    </form>
  );
}

// ---- the top of a collector's shelf -----------------------------------------
// Who this is, before what they own (12 Oct 2026, Ric): a picture, the name,
// the level, follow and like, then the figures that carry a collector's weight
// set as a band, not a row of chips: shelf value, records, how many have a
// deep dive, how much is graded, and followers. Followers sit with the others
// on purpose. Record count is why a collector's opinion counts; so is who
// chooses to follow them.
//
// Rendered by PublicCollectionV2 (Leaderboards_v2.jsx), which owns the records
// and passes the figures in, and since 13 Oct 2026 at the top of the owner's
// own My collection (MyCollectionV2.jsx) with `band` off (the value bar below
// it carries the figures) and `editName` on. This owns what the item view does
// not carry: community_profile() for the followers, the reader's own follow
// and like, the picture and its ring.
function CommunityProfileHero({ userId, name, realName, isPublic, since, isOwner, total, count, canon, graded, items, onShare, shareReady, band, editName }) {
  const meId = useCmtyMe();
  // The page works out `isOwner` once per shelf; a reader who signs in here and
  // turns out to own it must not be offered Follow on themselves.
  const mine = !!isOwner || (!!meId && meId === userId);
  const soc = useCmtySocial(meId || null, meId !== undefined, window.__bbrRequireAuth);
  const [prof, setProf] = useCmState(null);
  const [picking, setPicking] = useCmState(false);
  const [naming, setNaming] = useCmState(false);
  const renameRef = useCmRef(null), wasNaming = useCmRef(false);
  // Back to the link once the box closes (saved, cancelled or Escape).
  useCmEffect(() => { if (!naming && wasNaming.current && renameRef.current) renameRef.current.focus(); wasNaming.current = naming; }, [naming]);
  const [said, setSaid] = useCmState("");
  const [askPic, setAskPic] = useCmState(false);
  const picNoRef = useCmRef(null), picSaidRef = useCmRef(null);
  const picBtnRef = useCmRef(null);
  const [picErr, setPicErr] = useCmState("");
  useCmEffect(() => { if (askPic && picNoRef.current) picNoRef.current.focus(); }, [askPic]);
  const [picBusy, setPicBusy] = useCmState(false);
  const [picSaid, setPicSaid] = useCmState("");
  useCmEffect(() => {
    if (!userId || meId === undefined || !window.BBR_supabase) return;
    let live = true;
    setProf(null);
    Promise.resolve(window.BBR_supabase.rpc("community_profile", { p_user: userId })).then((out) => {
      if (live && out && !out.error && out.data) setProf(out.data);
    }, () => {});
    return () => { live = false; };
  }, [userId, meId]);
  // Account settings sends the owner here to choose (BBR_OPEN_AVATAR). The
  // request names the collector and the moment: one left behind (signing out
  // does not reload the page)
  // must not open the chooser later, or for the next account on this tab.
  useCmEffect(() => {
    const want = window.BBR_OPEN_AVATAR;
    if (!want) return;
    if (want.user !== userId || !(Date.now() - want.at < 20000)) { window.BBR_OPEN_AVATAR = null; return; }
    if (isOwner) { window.BBR_OPEN_AVATAR = null; setPicking(true); }
  }, [isOwner, userId]);
  useCmEffect(() => { if (!said) return; const t = setTimeout(() => setSaid(""), 8000); return () => clearTimeout(t); }, [said]);

// A COLLECTOR'S OWN ACTIVITY, on their shelf (13 Oct 2026, Ric): the posts and
// new records they put on Community, newest first, so following someone shows
// what they have been up to and a shelf feels lived in. Posts are written on
// Community only (14 Oct 2026, Ric), not here. community_feed(p_user) reads one
// collector's posts and adds.
const CMTY_ACT_FIRST = 4;
// `nameKey` changes when the owner renames themselves, so their posts are read again.
function CommunityActivity({ userId, isOwner, nameKey }) {
  const meId = useCmtyMe();
  const mine = !!isOwner || (!!meId && meId === userId);
  const soc = useCmtySocial(meId || null, meId !== undefined, window.__bbrRequireAuth);
  const [events, setEvents] = useCmState(null);
  const [more, setMore] = useCmState(false);
  const [busy, setBusy] = useCmState(false);
  const [err, setErr] = useCmState(false);
  // A screenful to start with, fading out, and the rest on request: four posts
  // with their photos and comments ran several screens (Ric, 14 Oct 2026).
  // Tabbing into what is cut off opens it, so the keyboard never lands on
  // something out of sight; what shows can be used as it is.
  const [wide, setWide] = useCmState(false);
  const [tall, setTall] = useCmState(false);
  const listRef = useCmRef(null), firstHid = useCmRef(-1), moreRef = useCmRef(null), focusAt = useCmRef(-1);
  // After "Show earlier activity", the keyboard goes on at the first new post.
  useCmEffect(() => {
    if (focusAt.current < 0 || !listRef.current) return;
    const el = listRef.current.children[focusAt.current];
    if (el) { el.focus({ preventScroll: true }); focusAt.current = -1; }
  }, [events]);
  // Read again when the window changes size (a phone turned on its side).
  const [narrow, setNarrow] = useCmState(() => typeof window !== "undefined" && window.innerWidth < 640);
  useCmEffect(() => {
    const f = () => setNarrow(window.innerWidth < 640);
    window.addEventListener("resize", f);
    return () => window.removeEventListener("resize", f);
  }, []);
  // At least the whole first post: the clip cut it mid-photo, with no way to
  // like or comment until "Show more" (UX review, 14 Oct 2026).
  const [firstH, setFirstH] = useCmState(0);
  const clip = Math.max(narrow ? 420 : 560, firstH ? firstH + 8 : 0);
  // Before paint, so a long Activity never shows in full for a frame first.
  React.useLayoutEffect(() => {
    const box = listRef.current;
    if (!box) return undefined;
    const mark = () => {
      const f = box.firstElementChild;
      if (f) setFirstH(f.offsetHeight);
      setTall(box.scrollHeight > clip + 40);
      // The first post wholly out of sight: where "Show more" takes the keyboard.
      firstHid.current = Array.from(box.children).findIndex((el) => el.offsetTop >= clip - 40);
    };
    mark();
    const ro = window.ResizeObserver ? new ResizeObserver(mark) : null;
    if (ro) Array.from(box.children).forEach((el) => ro.observe(el));
    return () => { if (ro) ro.disconnect(); };
  }, [events, wide, clip]);
  const req = useCmRef(0);
  // A link to the shelf this Activity is on goes to the records below rather
  // than opening the same page again at the top.
  const actRef = useCmRef(null);
  const onView = (uid) => {
    if (uid === userId) {
      let el = actRef.current && actRef.current.closest(".mc-activity, .cmty-act");
      el = el && el.nextElementSibling;
      if (el) { try { el.scrollIntoView({ block: "start", behavior: "smooth" }); } catch (e) { el.scrollIntoView(); } }
      return;
    }
    if (window.__nav && window.__nav.goPublicCollection) window.__nav.goPublicCollection(uid, "");
  };
  const load = (after) => {
    if (!window.BBR_supabase || !userId) return;
    const id = ++req.current;
    setBusy(true); setErr(false);
    Promise.resolve(window.BBR_supabase.rpc("community_feed", {
      p_limit: after ? 10 : CMTY_ACT_FIRST, p_following: false, p_user: userId,
      p_before: after ? after.at : null, p_before_key: after ? after.key : null,
    })).then((out) => {
      if (id !== req.current) return;
      if (!out || out.error || !out.data) throw (out && out.error) || new Error("no data");
      const rows = out.data.events || [];
      setEvents((prev) => (after && prev ? prev.concat(rows) : rows));
      setMore(!!out.data.more);
    }).catch(() => { if (id === req.current) setErr(true); })
      .then(() => { if (id === req.current) setBusy(false); });
  };
  // Read as whoever is reading, once that is known (their likes ride on the rows).
  useCmEffect(() => { if (meId === undefined) return; setEvents(null); load(null); return () => { req.current++; }; }, [userId, meId, nameKey || null]);
  // A new picture (chosen by the owner, or taken down by a moderator) shows on
  // the posts and comments here too, not only in the header (QA, 14 Oct 2026).
  useCmEffect(() => {
    if (meId === undefined) return;
    const f = (e) => { if (!e.detail || e.detail === userId) load(null); };
    window.addEventListener("bbr-cmty-avatar", f);
    return () => window.removeEventListener("bbr-cmty-avatar", f);
  }, [userId, meId]);
  const onTalk = (key, patch) => setEvents((es) => (es ? es.map((e) => (e.key === key ? Object.assign({}, e, patch) : e)) : es));
  if (!userId) return null;
  return (
    <CmtyOnShelf.Provider value={userId}>
    <section className="cmty-act" aria-labelledby={"cmty-act-h-" + userId} ref={actRef}>
      <div className="cmty-act-head">
        <h2 className="cmty-act-h" id={"cmty-act-h-" + userId}>{mine ? "Your activity" : "Activity"}</h2>
        {window.__nav && window.__nav.goCommunity ? <a className="cmty-link" href="/community" onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); window.__nav.goCommunity(); }}>All of Community</a> : null}
      </div>
      {err && !events ? <p className="cmty-empty">The activity didn’t load. <button className="cmty-link" onClick={() => load(null)}>Try again</button></p> : null}
      {!events && !err ? <p className="cmty-empty">Loading the activity…</p> : null}
      {events && !events.length ? (
        <p className="cmty-empty">{mine ? "Nothing here yet. What you post on Community, and the records you add, show here." : "Nothing here yet."}</p>
      ) : null}
      <CmtyDated.Provider value={true}>
        {events && events.length ? (
          <div className={"cmty-act-list" + (!wide && tall ? " clipped" : "")} ref={listRef} style={!wide && tall ? { maxHeight: clip } : undefined}
            onFocus={(e) => {
              // Not focus in a dialog opened from a post here: React passes it
              // up through the portal, and opening a record sheet opened this.
              if (wide || !tall || !listRef.current || !listRef.current.contains(e.target)) return;
              const box = listRef.current, b = e.target.getBoundingClientRect(), top = box.getBoundingClientRect().top;
              // The browser has already scrolled the box to show it: count that back in.
              if (b.bottom - top + box.scrollTop > clip - 20) { box.scrollTop = 0; setWide(true); }
            }}>
            {events.map((ev) => (
              <div className="cmty-in" key={ev.key} tabIndex={-1}>
                <CmtyPostOf ev={ev} meId={meId || null} soc={soc} onViewCollection={onView} onTalk={onTalk} focus={false} onGone={() => {}} />
              </div>
            ))}
          </div>
        ) : null}
      </CmtyDated.Provider>
      {events && !wide && (tall || more) ? (
        <button className="cmty-loadmore" ref={moreRef} aria-expanded="false" onClick={() => {
          // Nothing cut off, only more to fetch: fetch it now (it took two taps).
          if (!tall && more) { setWide(true); focusAt.current = events.length; load(events[events.length - 1]); return; }
          const at = firstHid.current;
          setWide(true);
          // Focus to the first post that was cut off, so the keyboard carries on there.
          setTimeout(() => {
            const kids = listRef.current ? listRef.current.children : [];
            const el = kids[at >= 0 ? at : kids.length - 1];
            if (el) el.focus({ preventScroll: true });
          }, 0);
        }}>Show more activity</button>
      ) : null}
      {events && wide && more ? (
        <button className="cmty-loadmore" disabled={busy} onClick={() => { focusAt.current = events.length; load(events[events.length - 1]); }}>{busy ? "Loading…" : "Show earlier activity"}</button>
      ) : null}
      {events && wide && tall ? (
        <button className="cmty-link cmty-act-less" aria-expanded="true" onClick={() => {
          setWide(false);
          const h = document.getElementById("cmty-act-h-" + userId);
          // Back to the heading if it has gone above the screen, clear of the
          // site's bar and My collection's section bar.
          if (h && h.getBoundingClientRect().top < 130) window.scrollTo(0, window.scrollY + h.getBoundingClientRect().top - 140);
          setTimeout(() => { if (moreRef.current) moreRef.current.focus({ preventScroll: true }); }, 0);
        }}>Show less</button>
      ) : null}
      <CmtySocialNote soc={soc} />
    </section>
    </CmtyOnShelf.Provider>
  );
}

// The feed kept for the way back names this collector on their own posts and
// comments. Account settings calls this after a change of username, name on
// show, alias or visibility, so the next visit reads it again.
function cmtyIdentityChanged() { cmtyFeedKeep.events = null; cmtyMeKeep.actor = null; }
// A collector's picture changed: what shows their posts and comments reads them again.
function cmtyAvatarChanged(user) { cmtyFeedKeep.events = null; try { window.dispatchEvent(new CustomEvent("bbr-cmty-avatar", { detail: user || null })); } catch (e) {} }
Object.assign(window, { Community, CommunityTabs, CommunityNavBadge, CommunityProfileHero, CommunityActivity, CmtyAvatar, CmtyAvatarPicker, BBR_communityStale: cmtyIdentityChanged });