// Vanday DAM — publish composer + crops grid + published view // Tiny outlined aspect-ratio glyph used on the publish crop chips. Draws a // max-15px rectangle in the chip's ratio so the shape reads at a glance. function CropGlyph({ w, h }) { const max = 15; let bw, bh; if (w >= h) { bw = max; bh = Math.round((max * h) / w); } else { bh = max; bw = Math.round((max * w) / h); } return ; } function CropsGrid({ asset, onOpenVariant, highlightId }) { const parent = getParent(asset); const siblings = parent ? VARIANTS.filter((v) => v.parentId === parent.id) : []; return (
{siblings.map((v) => { const [rw, rh] = v.ratio.split(":").map(parseFloat); const aspect = `${rw} / ${rh}`; const isHere = highlightId === v.id; return (
onOpenVariant && onOpenVariant(v)} >
{v.ratio} {`${v.name}
{v.ratioName}
{v.w} × {v.h}
); })}
); } // Mark a publication as "deleted on the platform" — keeps the record in // Vanday so the user's history is preserved, but shows the post as no // longer live (grayed-out, no "View" link). Use case: the user manually // took the post down on the social platform. function MarkDeletedButton({ asset, pub }) { const [busy, setBusy] = React.useState(false); if (pub.status !== "live") return null; const click = async () => { const platform = (window.SITES || []).find((s) => s.id === pub.site)?.name || pub.site; const ok = window.confirm( `Mark this ${platform} post as deleted in Vanday?\n\n` + `Use this if you've already taken the post down on ${platform}. ` + `The Vanday record stays as a history entry.`, ); if (!ok) return; setBusy(true); try { const r = await fetch( `/api/assets/${encodeURIComponent(asset.id)}/publications`, { method: "PATCH", headers: { "Content-Type": "application/json", ...(window.Clerk?.session ? { Authorization: `Bearer ${await window.Clerk.session.getToken()}` } : {}), }, body: JSON.stringify({ site: pub.site, platformPostId: pub.platformPostId || null, postedAt: pub.postedAt || null, status: "deleted", }), }, ); if (!r.ok) { const body = await r.json().catch(() => ({})); window.alert("Couldn't update: " + (body.error || `HTTP ${r.status}`)); return; } const { publications } = await r.json(); asset.publications = publications || []; try { VandayServer.bumpRev && VandayServer.bumpRev(); } catch {} } catch { window.alert("Couldn't reach the server. Try again in a moment."); } finally { setBusy(false); } }; return ( ); } // Removes a single publication entry from Vanday's record. Does NOT take the // post down on the actual social platform — Upload-Post has no API for that. // We make that distinction explicit in the confirmation prompt. function RemovePubButton({ asset, pub }) { const [busy, setBusy] = React.useState(false); const remove = async () => { const platform = (window.SITES || []).find((s) => s.id === pub.site)?.name || pub.site; const ok = window.confirm( `Remove this ${platform} post from Vanday?\n\n` + `This only removes Vanday's record. The actual post will stay live on ${platform} ` + `until you delete it there.`, ); if (!ok) return; setBusy(true); try { const r = await fetch( `/api/assets/${encodeURIComponent(asset.id)}/publications`, { method: "DELETE", headers: { "Content-Type": "application/json", ...(window.Clerk?.session ? { Authorization: `Bearer ${await window.Clerk.session.getToken()}` } : {}), }, body: JSON.stringify({ site: pub.site, platformPostId: pub.platformPostId || null, postedAt: pub.postedAt || null, }), }, ); if (!r.ok) { const body = await r.json().catch(() => ({})); window.alert("Couldn't remove: " + (body.error || `HTTP ${r.status}`)); return; } const { remaining } = await r.json(); asset.publications = remaining || []; try { VandayServer.bumpRev && VandayServer.bumpRev(); } catch {} } catch (err) { window.alert("Couldn't reach the server. Try again in a moment."); } finally { setBusy(false); } }; return ( ); } // Some social posts come back Live from Upload-Post WITHOUT a permalink (the // platform confirmed the post but didn't return its URL). Rather than leave // those with no "View" link — while Shopify always has one — we fall back to a // link to the connected account's profile on that platform, so the user can // still click through to where the post lives. The profile URL is built // SERVER-SIDE (it knows each platform's right handle field — Instagram needs // the @handle, Facebook the numeric id, etc.), returned by the // social-connections endpoint; cached at module level so we fetch it once. let _socialProfiles = null; // { instagram: "https://…/profile", ... } let _socialProfilesLoading = null; function loadSocialProfiles() { if (_socialProfiles) return Promise.resolve(_socialProfiles); if (_socialProfilesLoading) return _socialProfilesLoading; _socialProfilesLoading = (async () => { try { const t = window.Clerk?.session ? await window.Clerk.session.getToken() : null; const r = await fetch("/api/social/connections", { headers: t ? { Authorization: "Bearer " + t } : {} }); const j = await r.json(); const m = {}; for (const [id, v] of Object.entries(j.platforms || {})) { if (v && v.status === "connected" && v.profileUrl) m[id] = v.profileUrl; } _socialProfiles = m; return m; } catch { _socialProfiles = {}; return {}; } })(); return _socialProfilesLoading; } function PublicationList({ asset }) { VandayServer.useServerRev(); // re-render when publications change // Everyone can SEE where an asset went (incl. the Shopify link); only // publishers (admin/editor) can mutate the records. const canPublish = (typeof window.useVandayFeatures === "function") ? window.useVandayFeatures().canPublish : true; const pubs = asset.publications || []; // Load connected-account handles once, so live social posts that lack a // permalink can still link to the account's profile. const [profiles, setProfiles] = React.useState(_socialProfiles); React.useEffect(() => { if (_socialProfiles) { if (!profiles) setProfiles(_socialProfiles); return; } const needsFallback = pubs.some((p) => p.site !== "shopify" && !p.url && p.status !== "failed" && p.status !== "deleted" && p.status !== "pending"); if (needsFallback) loadSocialProfiles().then(setProfiles); }, [asset.id]); // eslint-disable-line if (pubs.length === 0) { return (
Not yet published. Use Publish to schedule a post.
); } return (
{pubs.map((p, i) => { const site = SITES.find((s) => s.id === p.site) || (window.DESTINATIONS && window.DESTINATIONS[p.site]) || { id: p.site, name: p.site || "Unknown", short: "?", color: "var(--text-faint)" }; const isPending = p.status === "pending"; const isFailed = p.status === "failed"; const isScheduled = p.status === "scheduled"; const isDeleted = p.status === "deleted"; const rowStyle = isFailed ? { borderColor: "oklch(0.85 0.07 24)", background: "oklch(0.97 0.02 24)" } : isDeleted ? { opacity: 0.6 } : undefined; return (
{site.name} {isFailed ? : isPending ? : isScheduled ? : isDeleted ? : } {isFailed ? "Failed" : isPending ? "Publishing…" : isScheduled ? "Scheduled" : isDeleted ? "Deleted" : "Live"}
{isFailed ? (p.error || "Failed to post") : isDeleted ? `Deleted on platform · was posted ${p.postedAt}` : p.postedAt}
{p.site === "shopify" && p.caption && !isFailed && (
on “{p.caption}”
)}
{(() => { // Prefer the real permalink; for a live social post that lacks // one, fall back to the connected account's profile so there's // always a way to click through. Shopify always has p.url, so // it's unaffected. const canFallback = p.site !== "shopify" && !isFailed && !isPending; const fallbackUrl = (!p.url && canFallback && profiles) ? (profiles[p.site] || null) : null; const viewUrl = p.url || fallbackUrl; if (!viewUrl || isDeleted) return null; return ( View ); })()} {canPublish && } {canPublish && }
); })}
); } // Build a believable "live post" URL per site. These don't reach a real // server — they just match each platform's URL shape so the "Open post" // link inside the DAM looks like a real outbound link the user can verify. function fakePublishUrl(siteId) { const slug = () => Math.random().toString(36).slice(2, 12); switch (siteId) { case "instagram": return `https://www.instagram.com/p/${slug().toUpperCase()}/`; case "facebook": return `https://www.facebook.com/share/p/${slug()}/`; case "linkedin": return `https://www.linkedin.com/feed/update/urn:li:share:${Date.now()}${Math.floor(Math.random() * 1000)}/`; case "x": return `https://x.com/vanday/status/${Date.now()}`; case "tiktok": return `https://www.tiktok.com/@vanday/video/${Date.now()}`; case "pinterest": return `https://www.pinterest.com/pin/${slug()}/`; default: return `https://vanday.com/p/${slug()}`; } } // Platforms we'd pre-select for the user once we know they're connected, // in priority order. We never auto-select an account that isn't connected. const PREFERRED_DEFAULTS = ["instagram", "facebook", "linkedin"]; function PublishModal({ asset, onClose }) { // Start with nothing selected. Defaulting to a fixed list here caused a flash // where unconnected accounts briefly showed as selected before the // connection status loaded; instead we pick sensible defaults once we know // what's actually connected (see the init effect below). const [selected, setSelected] = React.useState([]); const [activeTab, setActiveTab] = React.useState(null); const [captions, setCaptions] = React.useState({ instagram: "", x: "", linkedin: "", facebook: "", tiktok: "", pinterest: "", }); const today = new Date(); const defaultDate = today.toISOString().slice(0, 10); const [date, setDate] = React.useState(defaultDate); const [time, setTime] = React.useState("09:00"); const [scheduleMode, setScheduleMode] = React.useState("now"); // 'now' | 'schedule' // After Publish is hit we flip to a success state with live links. // `null` until publish; then an array of { site, status, url, postedAt }. const [published, setPublished] = React.useState(null); const [publishing, setPublishing] = React.useState(false); // Background-publish poll: publishing returns immediately with "pending" // records; we poll the asset until they resolve to live/failed. The ref lets // us stop the loop if the modal closes mid-flight. const pollStop = React.useRef(false); React.useEffect(() => () => { pollStop.current = true; }, []); // Per-platform connection state from Upload-Post. null until loaded. // Shape: { instagram: "connected"|"not_connected", facebook: ..., ... } const [connStatus, setConnStatus] = React.useState(null); const [openingConnect, setOpeningConnect] = React.useState(false); // Which crop gets published. "auto" = send the full image and let each // platform crop as it likes; otherwise a ratio slug (e.g. "1x1", "16x9") // which we generate server-side and send to every selected destination. const [cropChoice, setCropChoice] = React.useState("auto"); // Video can't be cropped server-side (Sharp is image-only), so we always // send the full video and let each platform auto-crop to its best aspect. // NOTE: this hook must live above the early `if (published)` return so the // hook order stays stable across renders (moving it below blanks the app). const isVideo = !!(window.assetIsVideo && window.assetIsVideo(asset)); React.useEffect(() => { if (isVideo && cropChoice !== "auto") setCropChoice("auto"); }, [isVideo, cropChoice]); const authHeaders = React.useCallback(async () => { try { const t = window.Clerk?.session ? await window.Clerk.session.getToken() : null; return t ? { Authorization: `Bearer ${t}` } : {}; } catch { return {}; } }, []); const loadConnections = React.useCallback(async () => { try { const r = await fetch("/api/social/connections", { headers: await authHeaders() }); const data = await r.json(); const map = {}; for (const [pid, info] of Object.entries(data?.platforms || {})) { map[pid] = info?.status || "unknown"; } setConnStatus(map); } catch { setConnStatus({}); } }, [authHeaders]); React.useEffect(() => { loadConnections(); }, [loadConnections]); // If user comes back from the Upload-Post connect tab, refresh status. React.useEffect(() => { const onFocus = () => loadConnections(); window.addEventListener("focus", onFocus); return () => window.removeEventListener("focus", onFocus); }, [loadConnections]); // Once we know which platforms are connected, drop any pre-selected // destination that isn't connected — users can only publish to connected // accounts, so they shouldn't stay checked. React.useEffect(() => { if (!connStatus) return; setSelected((sel) => { const next = sel.filter((id) => connStatus[id] === "connected"); return next.length === sel.length ? sel : next; }); }, [connStatus]); // Once we know what's connected, pre-select sensible defaults — the preferred // platforms that are connected, or (if none of those are) every connected // account. Runs once; after that the user's checkbox choices are respected. const didInitSelection = React.useRef(false); React.useEffect(() => { if (!connStatus || didInitSelection.current) return; didInitSelection.current = true; const connected = Object.keys(connStatus).filter((id) => connStatus[id] === "connected"); const preferred = PREFERRED_DEFAULTS.filter((id) => connected.includes(id)); const initial = preferred.length ? preferred : connected; if (initial.length) { setSelected(initial); setActiveTab(initial[0]); } }, [connStatus]); // Keep the active caption tab pointing at a platform that's still selected. // Without this, pruning unconnected platforms (above) can leave activeTab on // a dropped platform — e.g. the caption header reads "Caption for Instagram" // when Facebook is the only destination left. React.useEffect(() => { if (selected.length && !selected.includes(activeTab)) setActiveTab(selected[0]); }, [selected, activeTab]); const openConnectFlow = React.useCallback(async (platformArg) => { // Accepts a single platform id or an array of them. Passing several lets // the Upload-Post hosted page show all of them at once so the user can // authorize everything in one trip. const platforms = Array.isArray(platformArg) ? platformArg : [platformArg]; if (platforms.length === 0) return; setOpeningConnect(true); try { const redirectUrl = `${window.location.origin}/?back_from=connect`; const r = await fetch("/api/social/connect-link", { method: "POST", headers: { "Content-Type": "application/json", ...(await authHeaders()) }, body: JSON.stringify({ platforms, redirectUrl }), }); const body = await r.json(); if (!r.ok || !body.accessUrl) { window.alert(body.error === "social_at_capacity" ? (body.message || "Social publishing is temporarily at capacity while we add more seats. Please check back shortly.") : "Couldn't generate the connect link: " + (body.error || `HTTP ${r.status}`)); setOpeningConnect(false); return; } // Navigate the whole tab (not a new tab) so the Upload-Post redirect // lands us right back on Vanday. We remember which asset's Publish // modal to reopen on return, and the remounted modal re-fetches the // connection status — so the just-connected platform shows as live. try { sessionStorage.setItem("vanday_publish_return", asset.id); } catch {} window.location.href = body.accessUrl; } catch { window.alert("Couldn't reach the server. Try again in a moment."); setOpeningConnect(false); } }, [authHeaders, asset.id]); // Pinterest needs a board to pin to. Fetched lazily when Pinterest is in // the selected platforms; cached for the rest of the modal lifetime. const [pinterestBoards, setPinterestBoards] = React.useState(null); // null = not loaded const [pinterestBoardId, setPinterestBoardId] = React.useState(""); const [pinterestBoardsError, setPinterestBoardsError] = React.useState(null); React.useEffect(() => { if (!selected.includes("pinterest")) return; if (pinterestBoards !== null) return; (async () => { try { const r = await fetch("/api/social/pinterest-boards", { headers: window.Clerk?.session ? { Authorization: `Bearer ${await window.Clerk.session.getToken()}` } : {}, }); const data = await r.json(); if (!r.ok) { setPinterestBoardsError(data?.detail?.message || data?.error || "Couldn't load Pinterest boards"); setPinterestBoards([]); return; } // Upload-Post returns { boards: [...] } or just an array — handle both. const boards = Array.isArray(data) ? data : (data.boards || data.results || []); setPinterestBoards(boards); if (boards.length > 0 && !pinterestBoardId) setPinterestBoardId(boards[0].id); } catch (err) { setPinterestBoardsError("Couldn't reach the server."); setPinterestBoards([]); } })(); }, [selected, pinterestBoards, pinterestBoardId]); const toggle = (id) => { setSelected((sel) => { const next = sel.includes(id) ? sel.filter((x) => x !== id) : [...sel, id]; // keep activeTab valid if (!next.includes(activeTab) && next.length) setActiveTab(next[0]); return next; }); }; const activeSite = SITES.find((s) => s.id === activeTab) || SITES[0]; const caption = captions[activeTab] || ""; const captionMax = activeSite.caption.max; const remaining = captionMax - caption.length; const counterClass = remaining < 0 ? "over" : remaining < captionMax * 0.1 ? "warn" : ""; // Poll the asset until this publish batch's pending records resolve, then // update the success view + in-memory asset. Gives up quietly after ~60s // (the post still finishes server-side; it'll show resolved next time the // asset is opened). Stops immediately if the modal closes. const pollPublishBatch = (batchId, assetIdToPoll) => { pollStop.current = false; let tries = 0; const tick = async () => { if (pollStop.current || tries++ > 24) return; try { const r = await fetch(`/api/assets/${encodeURIComponent(assetIdToPoll)}`, { headers: { ...(window.Clerk?.session ? { Authorization: `Bearer ${await window.Clerk.session.getToken()}` } : {}) }, }); if (r.ok) { const a = await r.json(); const batch = (a.publications || []).filter((p) => p.batchId === batchId); if (batch.length && batch.every((p) => p.status !== "pending")) { asset.publications = a.publications; try { VandayServer.bumpRev && VandayServer.bumpRev(); } catch {} if (!pollStop.current) setPublished(batch); return; // resolved — stop polling } } } catch {/* transient — keep trying */} if (!pollStop.current) setTimeout(tick, 2500); }; setTimeout(tick, 2500); }; // Push the asset to the selected social platforms via our /api/publish // endpoint (which proxies to Upload-Post). The server records the result // in publications_json and returns the per-platform outcome, which we use // to drive the success view — including any per-platform failures. const doPublish = async () => { if (selected.length === 0) return; setPublishing(true); const isNow = scheduleMode === "now"; // Combine per-platform captions into a single "title" the server sends. // Upload-Post supports a shared caption; per-platform tailoring would // need its own X-specific / FB-specific fields. For v1 we send the // first non-empty caption (or the active tab's) as the shared title. const sharedCaption = Object.values(captions).find((c) => c && c.trim()) || captions[activeTab] || ""; // Per-platform captions: build a map of just the selected platforms so // each can have its own copy (X stays under 280, LinkedIn can be longer, // etc.). The server uses these to set Upload-Post's per-platform title // fields like `x_title` for X. Anything not customized falls back to // the shared caption. const perPlatformCaptions = {}; for (const id of selected) { const c = captions[id]; if (c && c.trim()) perPlatformCaptions[id] = c; } // Resolve the crop to publish. "auto" sends the full original (each // platform crops as it likes); a specific ratio sends that crop variant // id ("--") which the server generates on the fly. const parentId = asset.parentId || String(asset.id).replace(/--.+$/, ""); const publishAssetId = cropChoice === "auto" ? parentId : `${parentId}--${cropChoice}`; let newPubs = []; try { const r = await fetch("/api/publish", { method: "POST", headers: { "Content-Type": "application/json", ...(window.Clerk?.session ? { Authorization: `Bearer ${await window.Clerk.session.getToken()}` } : {}), }, body: JSON.stringify({ assetId: publishAssetId, caption: sharedCaption, captions: perPlatformCaptions, platforms: selected, pinterestBoardId: selected.includes("pinterest") ? pinterestBoardId : null, // scheduled_date passed through when the user picked Schedule: scheduledDate: isNow ? null : new Date(`${date}T${time}:00`).toISOString(), }), }); const data = await r.json(); if (!r.ok) { // Plan paywall — server tells us which plan to upgrade to. Pop the // global paywall modal and bail out of the publish flow before // recording any failed pubs (the action just didn't run). if (r.status === 403 && data.error === "publishing_not_available" && data.upgradeTo) { window.openVandayPaywall?.({ title: "Social publishing is on Growth", plan: data.plan, upgradeTo: data.upgradeTo, message: data.message, }); return; // exit handler — no published records to render } // Surface a single "failed" pub per selected platform so the user // sees what went wrong instead of a silent close. For 429 quota // errors we also include the usage stats Upload-Post returned. let errMsg = data.message || data.error || `Server returned ${r.status}`; if (data.usage) { errMsg += ` (Upload-Post usage: ${data.usage.count}/${data.usage.limit})`; } newPubs = selected.map((siteId) => ({ site: siteId, status: "failed", postedAt: new Date().toLocaleString(), url: null, caption: captions[siteId] || "", error: errMsg, })); } else { newPubs = data.publications || []; // Keep the in-memory asset in sync so the preview's Publications // tab re-renders without a full reload. asset.publications = [...(asset.publications || []), ...newPubs]; try { VandayServer.bumpRev && VandayServer.bumpRev(); } catch {} // Background publish: records come back "pending". Poll the asset until // they resolve so the success view flips from "Publishing…" to the // final Live / Failed state on its own. if (data.pending && data.batchId) { pollPublishBatch(data.batchId, parentId); } } } catch (err) { newPubs = selected.map((siteId) => ({ site: siteId, status: "failed", postedAt: new Date().toLocaleString(), url: null, caption: captions[siteId] || "", error: "Couldn't reach the server. Try again in a moment.", })); } setPublished(newPubs); setPublishing(false); }; // ---------- Success view ---------- if (published) { const liveCount = published.filter((p) => p.status === "live").length; const failedCount = published.filter((p) => p.status === "failed").length; const scheduledCount = published.filter((p) => p.status === "scheduled").length; const pendingCount = published.filter((p) => p.status === "pending").length; // Name the actual platforms ("Facebook", "Facebook and Instagram") rather // than a bare count ("1 site"), which reads awkwardly and tells the user // less than the names do. const nameOf = (id) => (SITES.find((s) => s.id === id) || {}).name || id || "the site"; const joinNames = (arr) => { if (arr.length <= 1) return arr[0] || ""; if (arr.length === 2) return `${arr[0]} and ${arr[1]}`; return `${arr.slice(0, -1).join(", ")} and ${arr[arr.length - 1]}`; }; const liveNames = published.filter((p) => p.status === "live").map((p) => nameOf(p.site)); const failedNames = published.filter((p) => p.status === "failed").map((p) => nameOf(p.site)); const scheduledNames = published.filter((p) => p.status === "scheduled").map((p) => nameOf(p.site)); const pendingNames = published.filter((p) => p.status === "pending").map((p) => nameOf(p.site)); // Title reflects what actually happened, not what was requested: // - all failed → "Couldn't post to Facebook" // - all live → "Posted to Facebook and Instagram" // - all scheduled→ "Scheduled for Facebook" // - mixed → "Posted to Facebook · 1 failed" let title; if (pendingCount > 0) { // Still sending in the background — the rows below flip to Live/Failed // as each platform confirms (or when the user reopens the asset). title = `Publishing to ${joinNames(pendingNames)}…`; } else if (liveCount === 0 && failedCount > 0 && scheduledCount === 0) { title = `Couldn't post to ${joinNames(failedNames)}`; } else if (scheduledCount === published.length) { title = `Scheduled for ${joinNames(scheduledNames)}`; } else if (failedCount === 0) { title = `Posted to ${joinNames(liveNames)}`; } else { title = `Posted to ${joinNames(liveNames)} · ${failedCount} failed`; } return (
e.stopPropagation()} style={{ maxWidth: 520 }}>

{title}

{asset.name}
{published.map((p, i) => { const site = SITES.find((s) => s.id === p.site) || { id: p.site, name: p.site || "Unknown", color: "var(--text-faint)" }; const isPending = p.status === "pending"; const isFailed = p.status === "failed"; const isScheduled = p.status === "scheduled"; const isLive = !isPending && !isFailed && !isScheduled; return (
{site.name}
{isFailed ? (p.error || "Upload-Post couldn't post this") : isPending ? "Sending to your account…" : p.postedAt}
{/* Secondary note lives under the timestamp so it never collides with the status badge / action buttons. */} {isLive && !p.url ? (
Posted — check your account for the link
) : isScheduled && !p.url ? (
Publishes on schedule
) : null}
{isFailed ? : isPending ? : isScheduled ? : } {isFailed ? "Failed" : isPending ? "Publishing…" : isScheduled ? "Scheduled" : "Live"} {p.url ? ( Open post ) : null} {!isPending && } {!isPending && }
); })}
{pendingCount > 0 ? <>You can close this — publishing keeps going in the background. : <>Also visible in Published in the sidebar.}
); } // ---------- Destination rows + grouped sections ---------- // A single selectable destination row (checkbox, mark, name, connection // indicator). Shared by the loading flat-list and the two grouped sections. const renderSiteRow = (s) => { const isConnected = connStatus?.[s.id] === "connected"; // Selectable while we're still loading status, or once it's confirmed // connected. Unconnected platforms can't be checked — the user must // connect them first (via the Connect button on the row). const selectable = connStatus == null || isConnected; const sel = selected.includes(s.id); return (
toggle(s.id) : undefined} style={selectable ? undefined : { cursor: "default" }} title={selectable ? undefined : `${s.name} isn't connected — connect it to publish here`} > {sel && } {s.name} {connStatus == null ? ( {s.caption.max} chr ) : isConnected ? ( ) : ( <> )}
); }; // Group header: label + a monospaced count badge. const renderSiteGroup = (title, count) => (
{title}{count}
); const connectedSites = SITES.filter((s) => connStatus?.[s.id] === "connected"); const notConnectedSites = SITES.filter((s) => connStatus && (connStatus[s.id] || "not_connected") !== "connected"); // Available crop ratios, deduped across platforms. Each maps to a server // crop the user can publish everywhere. const cropOptions = (window.UNIQUE_RATIOS || []).map((r) => ({ slug: window.shortRatioSlug ? window.shortRatioSlug(r.r) : String(r.r).replace(":", "x"), label: r.name, ratio: r.r, w: r.w, h: r.h, })); const activeCrop = cropOptions.find((c) => c.slug === cropChoice) || null; // True once we know at least one platform is connected. While connStatus is // still loading (null) this stays false, so we never let a publish fire // before we know there's somewhere to send it. const anyConnected = !!connStatus && Object.values(connStatus).some((v) => v === "connected"); // Connection status has loaded and nothing is wired up — show the centered // connect prompt instead of the compose form, and disable Publish. const showConnectPrompt = !!connStatus && !anyConnected; return (
e.stopPropagation()}> {(() => { // Unconnected platforms among the user's current selection. Drives // both the inline header-pill and which platform the click-to-fix // action opens. const unconnected = connStatus ? selected.filter((id) => (connStatus[id] || "not_connected") !== "connected") : []; return (

Publish to social

{asset.name} {selected.length} selected {unconnected.length > 0 && ( <> )}
); })()}
{showConnectPrompt ? (
Connect an account to publish
No social accounts are connected yet. Connect at least one to start publishing from Vanday.
) : ( <>
{isVideo ? (