// linktree.js — shared React components that render the public linktree.
// Used by view.html (read-only public profile) and edit.html (live preview).
// Mirrors the original stanmaxx.html design 1:1; the only deltas are:
// • Photo + bubble thumb accept image URLs (uploaded files) and fall back to
// the original SVG placeholders when nothing is uploaded yet.
// • Cover style is locked to "stack" (per product spec — no toggle).
// • Bubble is locked to top-right rounded (per product spec).
// • Motion is locked to "lively" (~18s drift cycle).
// Exposes window.Linktree = { App, Background, Header, Identity, EventCard,
// Links, ProfileCover, BubbleSticker, PhotoPortrait, PhotoSecondary, LinkIcon }
// so other scripts can mount a preview or just reuse a piece.
const { useState, useEffect, useRef, useCallback } = React;
// ── i18n helpers ────────────────────────────────────────────────────────────
// Linktree components are mounted both on the public profile (view.html) and
// inside the editor preview (edit.html). On view.html the owner's locale is
// applied to window.i18n before this code runs. On edit.html the editor's
// own locale (= the visitor's = the owner's) is already set. So we just call
// window.i18n.t() directly.
//
// useI18n is a tiny hook that re-renders the component when the language
// changes (the i18n module dispatches "i18n:change" on window). Without it,
// React wouldn't know to re-render translated strings after setLang().
function useI18n() {
const [, setTick] = useState(0);
useEffect(() => {
const onChange = () => setTick((n) => n + 1);
window.addEventListener("i18n:change", onChange);
return () => window.removeEventListener("i18n:change", onChange);
}, []);
return useCallback((key, params, fallback) => {
if (typeof window !== "undefined" && window.i18n) {
const v = window.i18n.t(key, params);
if (v && v !== key) return v;
}
return fallback != null ? fallback : key;
}, []);
}
// ── Background ──────────────────────────────────────────────────────────────
function Background() {
return (
{/* Optional flat-colour layer. It sits above the gradient + blobs but
below the grain, so when the owner picks a background colour it
paints over the gradient (leaving the gradient untouched, ready to
come back the moment the colour is cleared) while keeping the same
subtle grain texture on top. Driven purely by CSS variables set in
LinktreeApp — transparent / 0 opacity when no colour is chosen. */}
);
}
// ── Header ──────────────────────────────────────────────────────────────────
function Header({ rightSlot, shareUrl, housePseudo, houseEnabled, markHref }) {
const [open, setOpen] = useState(false);
const [copied, setCopied] = useState(false);
const [error, setError] = useState(false);
const wrapRef = useRef(null);
const resetRef = useRef(null);
const t = useI18n();
// The URL we share. Prefer an explicit shareUrl (passed by LinktreeApp so
// the editor's preview points at /pseudo and not /edit); fall back to the
// current page when none is provided (public profile view).
const url = shareUrl
|| (typeof location !== "undefined" ? location.href : "");
// Click-outside + Escape close the popover.
useEffect(() => {
if (!open) return;
const onDown = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onDown);
document.addEventListener("touchstart", onDown, { passive: true });
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("touchstart", onDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
const flash = (which) => {
if (which === "copied") { setCopied(true); setError(false); }
else { setError(true); setCopied(false); }
if (resetRef.current) clearTimeout(resetRef.current);
resetRef.current = setTimeout(() => {
setCopied(false); setError(false);
}, 1800);
};
const doCopy = async () => {
try {
if (navigator.clipboard) {
await navigator.clipboard.writeText(url);
flash("copied");
} else {
// Legacy fallback for older browsers.
const ta = document.createElement("textarea");
ta.value = url;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); flash("copied"); }
catch { flash("error"); }
document.body.removeChild(ta);
}
} catch {
flash("error");
}
};
const doNativeShare = async () => {
if (!navigator.share) { doCopy(); return; }
try {
await navigator.share({ url, title: document.title || "stanmaxx" });
setOpen(false);
} catch (e) {
// User dismissed the native sheet — leave popover open silently.
if (e && e.name !== "AbortError") flash("error");
}
};
const canNativeShare = typeof navigator !== "undefined" && !!navigator.share;
return (
{t("linktree.made_with", null, "cr\u00e9\u00e9 avec stanmaxx")}.com
{/* House entrance — the owner enabled a companion page, so we
offer a one-tap jump to it from the linktree header. We use
the same glass chip recipe as the share button and keep it
tucked left of share so the share button stays the right
anchor visitors know. We don't show this button on the
editor preview (rightSlot is set there), to keep the header
from getting too crowded inside the small preview pane. */}
{!rightSlot && houseEnabled && housePseudo && (
)}
{rightSlot || (
{open && (
{t("common.share_link", null, "Partager cette page")}
{url}
{canNativeShare && (
)}
)}
)}
);
}
// ── ProfileCover ────────────────────────────────────────────────────────────
// Square Liquid-Glass frame holding the profile photo, with a corner sticker
// (BubbleSticker). Click the sticker → expand its mini photo to fill the
// cover; click anywhere to collapse. The cover is locked to "stack" style
// per the product spec. The bubble can be turned off by the owner
// (bubbleEnabled === false); when it is, we render the cover on its own and
// skip the sticker entirely (so there's nothing to expand the secondary photo
// either — the cover just shows the main photo).
function ProfileCover({ photoUrl, storyUrl, bubbleText, expanded, onToggle, bubbleEnabled = true }) {
// The cover has two faces: the photo, and the story/bubble behind it. Only
// allow the flip when the back actually holds something. Without this check
// a tap swapped a real photo for an empty placeholder — which reads exactly
// like "my picture stopped loading", complete with the grey wash of the
// placeholder art showing through the gloss layer.
const hasBack = !!storyUrl || !!(bubbleText && String(bubbleText).trim());
const showBubble = bubbleEnabled !== false && hasBack;
return (
{photoUrl ? : }
{storyUrl ? : }
{showBubble && (
)}
);
}
// ── BubbleSticker ───────────────────────────────────────────────────────────
// Glass speech bubble pinned to the cover's top-right corner (locked by
// product spec). Holds bubble text + a small thumbnail of the secondary
// photo. Click → tells parent to expand.
function BubbleSticker({ text, storyUrl, active, onClick }) {
const corner = "tr";
const shape = "rounded";
const t = useI18n();
return (
);
}
// ── Identity ────────────────────────────────────────────────────────────────
function Identity({ displayName, tagline, nameColor }) {
// The owner-picked name color (when present) overrides the default white.
// We always keep the drop-shadow so the text reads on bright gradients
// even with pale colors like ivory or soft pink. nameColor comes from
// a server-enforced allowlist, so it's safe to inject as a CSS color.
// Expose the choice as a CSS variable too: themes that paint the name
// with a gradient (Y2K uses -webkit-text-fill-color, which beats plain
// `color`) can then honor an explicit pick via this var. Plain `color`
// still covers every other theme.
const nameStyle = nameColor ? { color: nameColor, "--name-color": nameColor } : undefined;
return (
{displayName}
{tagline &&
{tagline}
}
);
}
// ── HeartButton ──────────────────────────────────────────────────────────────
// "Leave a heart" on a link page. Anyone can tap it — signed in or not — and
// the server keeps one heart per visitor (toggleable). It reads its initial
// count from the profile payload, then asks the server whether *this* visitor
// already hearted (so the icon shows filled on return visits). In the editor
// preview it renders read-only (interactive=false): it shows the count without
// pinging the API or letting the owner heart their own page.
function HeartButton({ pseudo, initialCount = 0, interactive = true }) {
const t = useI18n();
const [count, setCount] = useState(initialCount || 0);
const [mine, setMine] = useState(false);
const [busy, setBusy] = useState(false);
const [pop, setPop] = useState(false);
// Keep the count in sync if the payload's number changes (e.g. live preview).
useEffect(() => { setCount(initialCount || 0); }, [initialCount]);
// On the public page, resolve the per-visitor state once on mount.
useEffect(() => {
if (!interactive || !pseudo) return;
let alive = true;
fetch("/api/u/" + encodeURIComponent(pseudo) + "/heart", { credentials: "same-origin" })
.then((r) => (r.ok ? r.json() : null))
.then((j) => { if (alive && j) { setCount(j.count || 0); setMine(!!j.mine); } })
.catch(() => {});
return () => { alive = false; };
}, [pseudo, interactive]);
const toggle = () => {
if (!interactive || busy || !pseudo) return;
const next = !mine;
setBusy(true);
// Optimistic update so the tap feels instant.
setMine(next);
setCount((c) => Math.max(0, c + (next ? 1 : -1)));
if (next) { setPop(true); setTimeout(() => setPop(false), 420); }
fetch("/api/u/" + encodeURIComponent(pseudo) + "/heart", {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/json" },
})
.then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
.then((j) => { setCount(j.count || 0); setMine(!!j.mine); })
.catch(() => {
// Roll back on failure.
setMine(!next);
setCount((c) => Math.max(0, c + (next ? -1 : 1)));
})
.finally(() => setBusy(false));
};
const label = mine
? t("linktree.heart_remove", null, "Retirer mon cœur")
: t("linktree.heart_add", null, "Laisser un cœur");
return (
);
}
// ── FollowButton ─────────────────────────────────────────────────────────────
// Lets signed-in visitors follow this page (their Discover "Suivis" tab then
// shows its activity). Hidden on your own page, in editor previews, and
// whenever the Discover feature flag is off (the status fetch 404s). Signed
// out, the button still shows and leads to login.
// "Message" button on a profile: starts (or reuses) a DM with the owner and
// jumps to /messages. Signed-out visitors are routed to login. Only shown
// when the owner accepts messages (data.dmOpen).
function MessageButton({ pseudo, interactive, overrides }) {
const t = useI18n();
const [busy, setBusy] = useState(false);
const open = () => {
if (!interactive || busy) return;
setBusy(true);
fetch("/api/messages/dm", {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ pseudo }),
})
.then((r) => {
if (r.status === 401) {
window.location.href = "/login?intent=messages";
return null;
}
if (r.status === 403) { setBusy(false); return null; }
return r.ok ? r.json() : null;
})
.then((d) => { if (d && d.id) window.location.href = "/messages?c=" + d.id; })
.catch(() => {})
.finally(() => setBusy(false));
};
return (
);
}
function FollowButton({ pseudo, interactive }) {
const t = useI18n();
const [st, setSt] = useState(null);
useEffect(() => {
if (!interactive || !pseudo) return;
fetch(`/api/u/${encodeURIComponent(pseudo)}/follow`, { credentials: "same-origin" })
.then((r) => r.ok ? r.json() : null)
.then((d) => { if (d) setSt(d); })
.catch(() => {});
}, [pseudo, interactive]);
if (!st || st.self) return null;
const toggle = () => {
if (!st.authed) { window.location.href = "/login"; return; }
const next = !st.following;
// Optimistic flip; reconciled with the server response below.
setSt((s) => ({ ...s, following: next, followers: Math.max(0, s.followers + (next ? 1 : -1)) }));
fetch(`/api/u/${encodeURIComponent(pseudo)}/follow`, {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ follow: next }),
})
.then((r) => r.ok ? r.json() : null)
.then((d) => { if (d) setSt((s) => ({ ...s, following: d.following, followers: d.followers })); })
.catch(() => {});
};
return (
);
}
// ── StanLabel ────────────────────────────────────────────────────────────────
// Owner-toggled badge shown under the profile and above the links:
// "currently stanning ". The name is the star/person the owner is a fan
// of (their own free text). Rendered only when enabled and non-empty (guarded
// by the caller too).
function StanLabel({ name, overrides }) {
const t = useI18n();
if (!name) return null;
return (
);
}
// ── LyricLine ────────────────────────────────────────────────────────────────
// Owner-toggled favourite lyric, framed by two musical notes. The text is the
// owner's own free input — we never prefill or generate it.
function LyricLine({ text }) {
if (!text) return null;
const Note = () => (
);
return (
{text}
);
}
// ── LiftsBadge ───────────────────────────────────────────────────────────────
// Owner-toggled gym PRs. A small dumbbell pill sits under the profile; tapping
// it expands a glass card listing the lifts the owner entered, each with the
// chosen unit (kg/lbs). Rendered only when there's at least one valid entry.
function LiftsBadge({ lifts, unit, label, overrides }) {
const t = useI18n();
const [open, setOpen] = useState(false);
const items = (Array.isArray(lifts) ? lifts : [])
.filter((l) => l && l.label && (l.value || l.value === 0));
if (items.length === 0) return null;
const u = unit === "lbs" ? "lbs" : "kg";
const title = t("linktree.lifts_title", null, "Mes perfs en muscu");
return (
{items.map((l, i) => (
{l.label}{l.value} {u}
))}
);
}
// ── Countries (supporter badge + /pronos) ───────────────────────────────────
// Codes are ISO 3166-1 alpha-2 (plus the UK nations flagcdn supports);
// flags render from flagcdn.com. Names in French — recognizable everywhere.
const COUNTRIES = {
fr: "France", de: "Allemagne", es: "Espagne", it: "Italie", pt: "Portugal",
nl: "Pays-Bas", be: "Belgique", hr: "Croatie", rs: "Serbie", ch: "Suisse",
at: "Autriche", pl: "Pologne", dk: "Danemark", se: "Su\u00e8de", no: "Norv\u00e8ge",
ua: "Ukraine", tr: "Turquie", "gb-eng": "Angleterre", "gb-sct": "\u00c9cosse",
"gb-wls": "Pays de Galles", ie: "Irlande", gr: "Gr\u00e8ce", cz: "Tch\u00e9quie",
ro: "Roumanie", ma: "Maroc", sn: "S\u00e9n\u00e9gal", ci: "C\u00f4te d'Ivoire",
ng: "Nigeria", gh: "Ghana", cm: "Cameroun", dz: "Alg\u00e9rie", tn: "Tunisie",
eg: "\u00c9gypte", za: "Afrique du Sud", ml: "Mali", us: "\u00c9tats-Unis",
ca: "Canada", mx: "Mexique", br: "Br\u00e9sil", ar: "Argentine", uy: "Uruguay",
co: "Colombie", cl: "Chili", pe: "P\u00e9rou", ec: "\u00c9quateur", py: "Paraguay",
ve: "Venezuela", pa: "Panama", cr: "Costa Rica", jp: "Japon", kr: "Cor\u00e9e du Sud",
au: "Australie", sa: "Arabie saoudite", qa: "Qatar", ir: "Iran", uz: "Ouzb\u00e9kistan",
jo: "Jordanie", ba: "Bosnie-Herz\u00e9govine", ht: "Ha\u00efti", cw: "Cura\u00e7ao",
nz: "Nouvelle-Z\u00e9lande", cv: "Cap-Vert", iq: "Irak", cd: "RD Congo",
};
function countryFlagUrl(code, size) {
return "https://flagcdn.com/" + (size || "w40") + "/" + code + ".png";
}
// ── SupporterBadge ───────────────────────────────────────────────────────────
// World-Cup supporter pill: the flag of the country the owner roots for.
// Links to /pronos so any page is one tap away from the predictions game.
function SupporterBadge({ country, interactive, overrides }) {
const t = useI18n();
const name = COUNTRIES[country];
if (!name) return null;
const inner = (
<>
{t("linktree.supports", null, "supporte")}{name}
);
const ov = badgeOverrideProps(overrides, "supporter") || {};
return (
);
}
// ── PronounsTag ──────────────────────────────────────────────────────────────
// Owner-toggled pronouns, as a small understated pill right under the name.
// Free text — people word their own pronouns.
function PronounsTag({ text, overrides }) {
if (!text) return null;
return (
{text}
);
}
// ── Sport icons ──────────────────────────────────────────────────────────────
// One hand-drawn line icon per whitelisted sport, shared by the public pills
// and the editor chips. 24x24 viewBox, stroked with currentColor.
const SPORT_ICONS = {
musculation: ,
running: <>,
football: <>,
basketball: <>,
tennis: <>,
natation: <>,
cyclisme: <>,
boxe: ,
yoga: ,
danse: <>,
escalade: ,
volleyball: <>,
};
function SportIcon({ sport, size }) {
const icon = SPORT_ICONS[sport];
if (!icon) return null;
return (
);
}
// ── Social icons ─────────────────────────────────────────────────────────────
// Logo-only network icons under the profile photo, Linktree-style. Types
// whitelisted server-side; simple stroked glyphs, currentColor.
// Real brand marks. Instagram through OpenSea are the official Simple Icons
// (CC0) monochrome logo paths — LinkedIn comes from Font Awesome Free
// (LinkedIn had its mark pulled from Simple Icons after a trademark
// request, hence the different source and the nested 448x512 viewBox).
// Trovo, DLive, Truth Social, Pump.fun and Magic Eden don't have a
// license-clean vector available anywhere I could verify pixel-for-pixel,
// so those five are hand-built from confirmed design descriptions of the
// real marks (see chat) rather than traced from an official source file.
const SOCIAL_ICONS = {
instagram: ,
x: ,
tiktok: ,
youtube: ,
github: ,
twitch: ,
discord: ,
linkedin: ,
spotify: ,
bluesky: ,
threads: ,
telegram: ,
signal: ,
whatsapp: ,
facebook: ,
snapchat: ,
reddit: ,
patreon: ,
kofi: ,
tumblr: ,
soundcloud: ,
pinterest: ,
kick: ,
rumble: ,
trovo: <>,
dlive: ,
truthsocial: <>,
pumpfun: ,
farcaster: ,
opensea: ,
magiceden: <>,
website: <>,
email: <>,
};
// Coconut characters placed freely on the page.
//
// Two layers rather than one: those sent behind the content, and those brought
// in front. The front layer is pointer-events: none throughout — a character
// dropped over a link must never swallow the tap that link exists for, and
// that is a decoration the owner placed for looks, not a control.
function CocoLayer({ cocos, front }) {
const items = (Array.isArray(cocos) ? cocos : []).filter((c) => c && (front ? c.f : !c.f));
if (!items.length) return null;
return (
{items.map((c, i) => (
))}
);
}
function SocialsRow({ socials, overrides }) {
const items = (Array.isArray(socials) ? socials : []).filter((s) => s && SOCIAL_ICONS[s.type]);
if (items.length === 0) return null;
return (
);
}
// ── Business mode (local business sheet) ─────────────────────────────────────
const BUSINESS_CAT_LABELS = {
restaurant: "Restaurant", ranch: "Ranch", bar: "Bar", cafe: "Caf\u00e9",
bakery: "Boulangerie", farm: "Ferme", shop: "Boutique", services: "Services",
hotel: "H\u00f4tel", venue: "Lieu", other: "",
};
// The label shown under the business name. "other" has no fixed wording —
// it uses whatever the owner typed (a gîte, a gallery, a climbing gym), so
// picking "Autre" no longer results in a blank category.
function businessCatLabel(business, t) {
if (!business) return "";
if (business.category === "other") return (business.categoryOther || "").trim();
const fallback = business.category && BUSINESS_CAT_LABELS[business.category];
if (!fallback) return "";
return t ? t("linktree.biz_cat." + business.category, null, fallback) : fallback;
}
// Where the "Directions" button points, or null when it shouldn't be shown
// at all. An explicit maps link wins over an address search, so a vague
// address (a village name) can still point at the exact spot; and the owner
// can hide the button entirely while keeping the address on display.
function businessDirectionsUrl(business) {
if (!business || business.showDirections === false) return null;
const explicit = (business.mapsUrl || "").trim();
if (explicit) return explicit;
const addr = (business.address || "").trim();
return addr ? "https://maps.google.com/?q=" + encodeURIComponent(addr) : null;
}
function BusinessSection({ business, interactive, overrides }) {
const t = useI18n();
if (!business) return null;
const mapsUrl = businessDirectionsUrl(business);
const telUrl = business.phone ? "tel:" + business.phone.replace(/[^\d+]/g, "") : null;
const cat = businessCatLabel(business, t);
// Group items by section (a section is optional; "" = ungrouped first).
const items = Array.isArray(business.items) ? business.items : [];
const sections = [];
const byName = {};
items.forEach((it) => {
const key = it.section || "";
if (!byName[key]) { byName[key] = { name: key, items: [] }; sections.push(byName[key]); }
byName[key].items.push(it);
});
return (
{/* In "whole photo" mode a blurred copy of the picture fills the
frame behind it, so nothing is cropped and we still avoid
bare letterbox bars — the rounded frame stays uniform. */}
{business.photoFit === "contain" && (
)}
: 
: