// Create Post page — matches the dark reference function PlatformPill({ id, selected, onClick, integration, issueCount }) { const p = Platforms[id]; const stateColor = !integration?.connected ? "var(--text-3)" : issueCount ? "var(--warn)" : "var(--accent)"; return ( ); } function MediaTile({ ph, bg, duration, active, src, type, name }) { return (
{src && type === "image" ? {name :
{ph || name}
} {active && (
)} {duration && (
{duration}
)}
); } function ContentTypeTab({ icon, label, active, onClick, disabled }) { const Ico = icon; return ( ); } function createLifecycleLabel(status) { return ({ draft: "draft", needs_approval: "approval request", changes_requested: "changes request", scheduled: "scheduled post", published: "published post", failed: "failed post", blocked: "blocked post", rejected: "rejected post" }[status] || "post"); } const PlatformLimits = { instagram: 2200, facebook: 63206, x: 280, linkedin: 3000, tiktok: 2200, youtube: 5000, pinterest: 500 }; const MediaFitOptions = [ { id: "original", label: "Original", ratio: "Default", w: 28, h: 28 }, { id: "square", label: "Square", ratio: "1:1", w: 22, h: 22 }, { id: "portrait", label: "Portrait", ratio: "4:5", w: 18, h: 22 }, { id: "vertical", label: "Vertical", ratio: "9:16", w: 14, h: 24 } ]; const PlatformMediaDefaults = { instagram: { feed: "portrait", reel: "vertical", story: "vertical", short: "vertical" }, facebook: { feed: "square", reel: "vertical", story: "vertical", short: "vertical" }, x: { feed: "original", reel: "vertical", story: "vertical", short: "vertical" }, linkedin: { feed: "square", reel: "vertical", story: "vertical", short: "vertical" }, tiktok: { feed: "vertical", reel: "vertical", story: "vertical", short: "vertical" }, youtube: { feed: "original", reel: "vertical", story: "vertical", short: "vertical" }, pinterest: { feed: "portrait", reel: "vertical", story: "vertical", short: "vertical" } }; function recommendedMediaFit(platform, contentType) { return PlatformMediaDefaults[platform]?.[contentType] || "original"; } function composerCaptionTokens(text) { return String(text || "") .toLowerCase() .replace(/https?:\/\/\S+/g, " ") .replace(/[^\p{L}\p{N}#_]+/gu, " ") .split(/\s+/) .filter((token) => token.length > 2); } function composerCaptionSimilarity(a, b) { const aTokens = new Set(composerCaptionTokens(a)); const bTokens = new Set(composerCaptionTokens(b)); if (!aTokens.size || !bTokens.size) return 0; const intersection = [...aTokens].filter((token) => bTokens.has(token)).length; const union = new Set([...aTokens, ...bTokens]).size; return union ? intersection / union : 0; } /* --- Phone preview components --- */ function PhoneFrame({ children, device = "ios" }) { const isAndroid = device === "android"; return (
{/* Notch */}
{children}
); } function StatusBar({ dark }) { return (
9:41
); } function PreviewMedia({ media, fit = "original", dark = false }) { const objectFit = fit === "original" ? "contain" : "cover"; const padding = fit === "original" ? 12 : 0; const fallback = (

{media?.name || media?.ph || "clearcast-media"}
); return (
{media?.src && media.type === "image" ? {media.name : fallback}
); } function fitAspect(fit) { return ({ square: "1 / 1", portrait: "4 / 5", vertical: "9 / 16" }[fit] || "1 / 1"); } function truncatePreview(text, max = 96) { const clean = String(text || "").replace(/\s+/g, " ").trim(); return clean.length > max ? `${clean.slice(0, max - 1)}…` : clean; } function FeedPreview({ platform, caption, media, fit }) { const platformName = Platforms[platform]?.name || "Instagram"; const aspect = fitAspect(fit); return (
{/* Post header */}
CC
clearcast.co
{platformName} preview
{/* Image */}
{fit}
{/* Actions */}
Liked by jessica and 1,234 others
clearcast.co {truncatePreview(caption)}
View all 28 comments
2 HOURS AGO
); } function StoryPreview({ platform, caption, media, fit }) { const platformName = Platforms[platform]?.name || "Instagram"; return (
CC
clearcast.co {platformName}
New
Collection
{truncatePreview(caption, 46)}
Send message
); } function CreatePostPage() { const hub = window.useClearCast(); const [editPostId, setEditPostId] = React.useState(() => new URLSearchParams(window.location.search).get("edit") || sessionStorage.getItem("clearcast-edit-post-id") || sessionStorage.getItem("sharehub-edit-post-id") || ""); const [platforms, setPlatforms] = React.useState({ facebook: false, instagram: false, x: false, linkedin: false, tiktok: false, youtube: false, pinterest: false }); const [contentType, setContentType] = React.useState("feed"); const [caption, setCaption] = React.useState(""); const platformInitRef = React.useRef(false); const [activeVariantPlatform, setActiveVariantPlatform] = React.useState("instagram"); const [variants, setVariants] = React.useState({}); const [activeMedia, setActiveMedia] = React.useState(0); const [globalMediaOverridden, setGlobalMediaOverridden] = React.useState(false); const [previewMode, setPreviewMode] = React.useState("feed"); const [previewDevice, setPreviewDevice] = React.useState("ios"); const [uploadingMedia, setUploadingMedia] = React.useState(false); const [date, setDate] = React.useState(() => new Date().toISOString().slice(0, 10)); const [time, setTime] = React.useState("09:30"); const [bestTime, setBestTime] = React.useState("09:15"); const [bestTimeRecommendations, setBestTimeRecommendations] = React.useState([]); const [activeHashtagGroup, setActiveHashtagGroup] = React.useState(""); const [suggestedHashtags, setSuggestedHashtags] = React.useState([]); const [showExtraTones, setShowExtraTones] = React.useState(false); const [submitState, setSubmitState] = React.useState(""); const [aiMediaPrompt, setAiMediaPrompt] = React.useState(""); const [aiMediaBusy, setAiMediaBusy] = React.useState(""); const [approvalOverride, setApprovalOverride] = React.useState(null); const [variantBusy, setVariantBusy] = React.useState(false); const [firstComment, setFirstComment] = React.useState(""); const editPost = (hub.data.posts || []).find((post) => post.id === editPostId); const isEditing = Boolean(editPost); const editModeLabel = !isEditing ? "New post" : editPost.status === "draft" ? "Editing draft" : `Editing ${createLifecycleLabel(editPost.status)}`; const hashtagGroups = hub.data.hashtagGroups || []; const selectedHashtagGroup = hashtagGroups.find((group) => group.id === activeHashtagGroup) || hashtagGroups[0] || null; React.useEffect(() => { const id = new URLSearchParams(window.location.search).get("edit") || sessionStorage.getItem("clearcast-edit-post-id") || sessionStorage.getItem("sharehub-edit-post-id") || ""; setEditPostId(id); }, []); React.useEffect(() => { if (!editPost) return; const current = new Set(editPost.platforms || []); setPlatforms(Object.keys(Platforms).slice(0, 7).reduce((acc, id) => ({ ...acc, [id]: current.has(id) }), {})); setContentType(editPost.contentType || "feed"); setCaption(editPost.caption || ""); setVariants(editPost.variants || {}); setActiveVariantPlatform((editPost.platforms || [])[0] || "instagram"); setDate(editPost.date || "2026-05-18"); setTime(editPost.time || "09:30"); setBestTime(editPost.bestTime || "09:15"); setActiveMedia(0); setGlobalMediaOverridden(false); setFirstComment(editPost.firstComment || ""); }, [editPost?.id]); React.useEffect(() => { if (!hashtagGroups.length || activeHashtagGroup) return; setActiveHashtagGroup(hashtagGroups[0].id); }, [hashtagGroups.length, activeHashtagGroup]); // For a new post, default the selected channels to the ones actually connected // (run once when data first arrives). New/empty businesses start with none selected. React.useEffect(() => { if (isEditing || platformInitRef.current) return; const integrations = hub.data.integrations || []; if (!integrations.length) return; platformInitRef.current = true; const connected = new Set(integrations.filter((integration) => integration.connected).map((integration) => integration.id)); if (!connected.size) return; setPlatforms(Object.keys(Platforms).slice(0, 7).reduce((acc, id) => ({ ...acc, [id]: connected.has(id) }), {})); const firstConnected = Object.keys(Platforms).slice(0, 7).find((id) => connected.has(id)); if (firstConnected) setActiveVariantPlatform(firstConnected); }, [hub.data.integrations, isEditing]); const clearEditMode = () => { sessionStorage.removeItem("clearcast-edit-post-id"); sessionStorage.removeItem("sharehub-edit-post-id"); setEditPostId(""); setPlatforms({ facebook: true, instagram: true, x: false, linkedin: true, tiktok: true, youtube: true, pinterest: true }); setContentType("feed"); setCaption("Summer launch is almost here. Meet the new collection designed\nfor sunny commutes, weekend markets, and late dinners outside. ☀️👜"); setVariants({}); setActiveVariantPlatform("instagram"); setDate("2026-05-18"); setTime("09:30"); setBestTime("09:15"); setActiveMedia(0); setGlobalMediaOverridden(false); }; const selectAllPlatforms = () => { setPlatforms(Object.keys(Platforms).slice(0, 7).reduce((acc, id) => ({ ...acc, [id]: true }), {})); hub.toast("All supported channels selected"); }; const goBackToCalendar = () => { sessionStorage.removeItem("clearcast-edit-post-id"); sessionStorage.removeItem("sharehub-edit-post-id"); window.location.hash = "calendar"; }; const toggle = (id) => setPlatforms({ ...platforms, [id]: !platforms[id] }); const selectedPlatforms = Object.keys(platforms).filter((id) => platforms[id]); React.useEffect(() => { if (selectedPlatforms.length && !selectedPlatforms.includes(activeVariantPlatform)) { setActiveVariantPlatform(selectedPlatforms[0]); } }, [selectedPlatforms.join("|"), activeVariantPlatform]); const integrationMap = Object.fromEntries((hub.data.integrations || []).map((item) => [item.id, item])); const workspaceRules = hub.data.workspace?.publishingRules || {}; const anyChannelConnected = (hub.data.integrations || []).some((integration) => integration.connected); const approvalRequired = approvalOverride != null ? approvalOverride : (workspaceRules.approvalRequired !== false); const queueStatus = approvalRequired ? "needs_approval" : "scheduled"; const approvalRouteLabel = approvalRequired ? "Approval required" : "Direct scheduling"; const approvalRouteDescription = approvalRequired ? "Posts route to Approvals before publishing." : "Ready posts go straight onto the scheduled calendar."; const hashtagCount = (caption.match(/#[\p{L}\p{N}_]+/gu) || []).length; const quietHourIssue = (() => { if (!workspaceRules.quietStart || !workspaceRules.quietEnd || !time) return ""; const start = String(workspaceRules.quietStart).slice(0, 5); const end = String(workspaceRules.quietEnd).slice(0, 5); const current = String(time).slice(0, 5); const inQuietHours = start < end ? current >= start && current < end : current >= start || current < end; return inQuietHours ? `Scheduled time ${current} falls inside workspace quiet hours (${start}-${end})` : ""; })(); const duplicateMatch = workspaceRules.duplicateDetection && caption.trim() ? (hub.data.posts || []) .filter((post) => post.id !== editPost?.id && post.caption) .map((post) => ({ post, score: composerCaptionSimilarity(caption, post.caption) })) .filter((item) => item.score >= 0.9) .sort((a, b) => b.score - a.score)[0] : null; const ruleIssues = [ Number(workspaceRules.hashtagLimit || 0) && hashtagCount > Number(workspaceRules.hashtagLimit) ? `Hashtag limit exceeded: ${hashtagCount}/${workspaceRules.hashtagLimit}` : "", workspaceRules.profanityFilter && /\b(damn|hell)\b/i.test(caption) ? "Caption contains restricted language" : "", duplicateMatch ? `Possible duplicate of ${duplicateMatch.post.id} (${Math.round(duplicateMatch.score * 100)}% match)` : "", quietHourIssue ].filter(Boolean); const platformIssues = (id, type = contentType) => { const integration = integrationMap[id]; const name = Platforms[id]?.name || id; const issues = []; if (!integration || !integration.connected) issues.push(`${name} is not connected`); if (integration?.status === "reauth") issues.push(`${name} needs re-authorization`); if (integration?.status === "limited") issues.push(`${name} has limited permissions`); if (integration && !(integration.supportedTypes || []).includes(type)) issues.push(`${name} does not support ${type} posts`); if (integration?.issues?.length) issues.push(...integration.issues.map((issue) => `${name}: ${issue}`)); return issues; }; const variantIssues = selectedPlatforms.flatMap((id) => { const current = variants[id] || {}; const variantCaption = current.useGlobalCaption === false ? current.caption || "" : caption; const limit = PlatformLimits[id] || 2200; return variantCaption.length > limit ? [`${Platforms[id]?.name || id} caption is over ${limit.toLocaleString()} characters`] : []; }); const readinessIssues = [...selectedPlatforms.flatMap((id) => platformIssues(id)), ...variantIssues, ...ruleIssues]; const readyPlatforms = selectedPlatforms.filter((id) => platformIssues(id).length === 0); const availableTypes = ["feed", "reel", "story", "short"].map((type) => ({ id: type, supported: selectedPlatforms.length > 0 && selectedPlatforms.some((id) => platformIssues(id, type).length === 0) })); const canQueue = selectedPlatforms.length > 0 && readinessIssues.length === 0; const activeVariant = variants[activeVariantPlatform] || {}; const activeUsesGlobal = activeVariant.useGlobalCaption !== false; const activeVariantCaption = activeUsesGlobal ? caption : activeVariant.caption || ""; const activeLimit = PlatformLimits[activeVariantPlatform] || 2200; const variantCount = selectedPlatforms.filter((id) => variants[id]?.useGlobalCaption === false && variants[id]?.caption?.trim()).length; const mediaVariantCount = selectedPlatforms.filter((id) => (variants[id]?.useGlobalMedia === false && (variants[id]?.media?.length || variants[id]?.mediaFit)) || Object.keys(variants[id]?.mediaEdits || {}).length).length; const setVariant = (platform, patch) => { setVariants((current) => ({ ...current, [platform]: { platform, useGlobalCaption: current[platform]?.useGlobalCaption !== false, useGlobalMedia: current[platform]?.useGlobalMedia !== false, caption: current[platform]?.caption || "", contentType, media: current[platform]?.media || [], mediaFit: current[platform]?.mediaFit || recommendedMediaFit(platform, contentType), mediaEdits: current[platform]?.mediaEdits || {}, notes: current[platform]?.notes || "", ...patch } })); }; const currentMediaId = () => { if (isEditing && !globalMediaOverridden && editPost.media?.length) return editPost.media[0]; return mediaThumbs[activeMedia]?.id || mediaThumbs[activeMedia]?.url || mediaThumbs[activeMedia]?.ph || "clearcast-media"; }; const buildVariantsPayload = () => selectedPlatforms.reduce((acc, id) => { const current = variants[id] || {}; const useGlobalCaption = current.useGlobalCaption !== false; const useGlobalMedia = current.useGlobalMedia !== false; acc[id] = { platform: id, useGlobalCaption, useGlobalMedia, caption: useGlobalCaption ? caption : current.caption || caption, contentType, media: useGlobalMedia ? [currentMediaId()] : current.media?.length ? current.media : [currentMediaId()], mediaFit: current.mediaFit || recommendedMediaFit(id, contentType), mediaEdits: current.mediaEdits || {}, notes: current.notes || "" }; return acc; }, {}); const selectReadyPlatforms = () => { const next = Object.fromEntries(Object.keys(platforms).map((id) => [id, platformIssues(id).length === 0])); setPlatforms(next); }; const applyCaption = async (tone) => { try { console.log(`ClearCast: AI caption ${tone}`); const next = await hub.actions.aiCaption(caption, tone, hub.data.workspace?.aiSettings?.voice || hub.data.workspace?.brandVoice || ""); setCaption(next); } catch (error) { console.error(error); hub.toast("AI caption failed"); } }; const appendHashtag = (tag) => { const normalized = String(tag || "").trim(); if (!normalized || caption.toLowerCase().includes(normalized.toLowerCase())) return; setCaption((current) => `${current.trim()} ${normalized}`.trim()); }; const refreshHashtagSuggestions = async () => { try { const suggestions = await hub.actions.hashtagSuggestions({ caption, platforms: selectedPlatforms, contentType }); setSuggestedHashtags(suggestions); } catch (error) { console.error(error); hub.toast("Could not suggest hashtags"); } }; const refreshBestTimes = async () => { try { const recommendations = await hub.actions.bestTimes({ platforms: selectedPlatforms, contentType, timezone: hub.data.workspace?.timezone }); setBestTimeRecommendations(recommendations); if (recommendations[0]?.time) setBestTime(recommendations[0].time); } catch (error) { console.error(error); hub.toast("Could not refresh best times"); } }; const applyBestTime = (recommendation) => { if (!recommendation?.time) return; setBestTime(recommendation.time); setTime(recommendation.time); }; const applyMediaEdit = (type) => { const patchByType = { crop: { crop: activeMediaFit === "vertical" ? "9:16 center" : activeMediaFit === "portrait" ? "4:5 center" : activeMediaFit === "square" ? "1:1 center" : "smart crop" }, resize: { resize: `${activeMediaFit === "vertical" ? "1080x1920" : activeMediaFit === "portrait" ? "1080x1350" : activeMediaFit === "square" ? "1080x1080" : "native"} ${Platforms[activeVariantPlatform]?.name || activeVariantPlatform}` }, trim: { trim: contentType === "short" || contentType === "reel" ? "0:00-0:30" : "not required" } }[type]; setVariants((current) => { const existing = current[activeVariantPlatform] || {}; const notes = new Set(String(existing.notes || "").split(" · ").filter(Boolean)); notes.add(`${type} applied`); return { ...current, [activeVariantPlatform]: { platform: activeVariantPlatform, useGlobalCaption: existing.useGlobalCaption !== false, useGlobalMedia: existing.useGlobalMedia !== false, caption: existing.caption || "", contentType, media: existing.media || [], mediaFit: existing.mediaFit || recommendedMediaFit(activeVariantPlatform, contentType), mediaEdits: { ...(existing.mediaEdits || {}), ...patchByType }, notes: [...notes].join(" · ") } }; }); hub.toast(`${type[0].toUpperCase()}${type.slice(1)} applied to ${Platforms[activeVariantPlatform]?.name || activeVariantPlatform}`); }; const saveCurrentHashtag = async () => { const tag = suggestedHashtags.find((item) => !selectedHashtagGroup?.tags?.includes(item)) || "#clearcast"; if (!selectedHashtagGroup) { const group = await hub.actions.createHashtagGroup({ name: "Saved hashtags", tags: [tag] }); setActiveHashtagGroup(group.id); return; } const nextTags = [...new Set([...(selectedHashtagGroup.tags || []), tag])]; await hub.actions.updateHashtagGroup(selectedHashtagGroup.id, { ...selectedHashtagGroup, tags: nextTags, topTag: selectedHashtagGroup.topTag || tag }); }; const addToQueue = async () => { if (submitState) return; if (!canQueue) { hub.toast(readinessIssues[0] || "Choose at least one ready channel"); return; } setSubmitState("queue"); try { console.log("ClearCast: add to queue"); const payload = { caption, platforms: selectedPlatforms, date, time, timezone: hub.data.workspace.timezone, bestTime, contentType, media: [currentMediaId()], variants: buildVariantsPayload(), firstComment, status: queueStatus, requireApproval: approvalRequired }; if (isEditing) { await hub.actions.updatePost(editPost.id, payload); goBackToCalendar(); } else { await hub.actions.createPost(payload); } } catch (error) { console.error(error); hub.toast("Could not add post to queue"); } finally { setSubmitState(""); } }; const saveDraft = async () => { if (submitState) return; setSubmitState("draft"); try { const payload = { caption, platforms: selectedPlatforms.length ? selectedPlatforms : ["instagram"], date, time, timezone: hub.data.workspace.timezone, bestTime, contentType, media: [currentMediaId()], variants: buildVariantsPayload(), firstComment, status: "draft", saveAsDraft: true, requireApproval: approvalRequired }; if (isEditing) { await hub.actions.updatePost(editPost.id, payload); goBackToCalendar(); } else { await hub.actions.createPost(payload); } } catch (error) { console.error(error); hub.toast("Could not save draft"); } finally { setSubmitState(""); } }; const duplicateFromComposer = async () => { if (!isEditing) return; try { const post = await hub.actions.duplicatePost(editPost.id); sessionStorage.setItem("clearcast-edit-post-id", post.id); setEditPostId(post.id); } catch (error) { console.error(error); hub.toast("Could not duplicate post"); } }; const mediaThumbs = (hub.data.media || []).slice(0, 8).map((asset) => ({ id: asset.id, src: asset.url, type: asset.type, ph: asset.name, name: asset.name, duration: asset.type === "video" ? "video" : null })); const uploadComposerMedia = async (event) => { const file = event.target.files?.[0]; if (!file) return; try { setUploadingMedia(true); await hub.actions.uploadMedia(file, "summer"); setActiveMedia(0); } catch (error) { console.error(error); hub.toast("Media upload failed"); } finally { setUploadingMedia(false); event.target.value = ""; } }; const tailorPerPlatform = async () => { if (!selectedPlatforms.length) { hub.toast("Select at least one channel first"); return; } if (!caption.trim()) { hub.toast("Write a caption to tailor first"); return; } setVariantBusy(true); try { const out = await hub.actions.generateVariants({ caption, platforms: selectedPlatforms, voice: hub.data.workspace?.brandVoice || "" }); Object.entries(out).forEach(([platform, text]) => setVariant(platform, { useGlobalCaption: false, caption: text })); } catch (error) { console.error(error); } finally { setVariantBusy(false); } }; const addStockPhoto = async () => { const query = aiMediaPrompt.trim() || caption.replace(/[#@].*/g, "").split(/\s+/).slice(0, 3).join(" ").trim() || "lifestyle"; try { setAiMediaBusy("stock"); await hub.actions.addStock({ query }); setActiveMedia(0); setGlobalMediaOverridden(true); } catch (error) { console.error(error); } finally { setAiMediaBusy(""); } }; const addGif = async () => { const q = window.prompt("Search GIPHY for a GIF:", aiMediaPrompt.trim() || "celebrate"); if (!q) return; try { setAiMediaBusy("gif"); const res = await hub.actions.searchGiphy(q); if (!res.gifs || !res.gifs.length) { hub.toast(res.note || "No GIFs found"); return; } await hub.actions.addMediaLink({ url: res.gifs[0].url, name: q, type: "image", source: "giphy" }); setActiveMedia(0); setGlobalMediaOverridden(true); } catch (error) { console.error(error); } finally { setAiMediaBusy(""); } }; const generateAiMedia = async (kind) => { const prompt = aiMediaPrompt.trim() || caption.replace(/\s+/g, " ").trim().slice(0, 200); if (!prompt) { hub.toast("Add a prompt or caption first"); return; } const aspect = contentType === "feed" ? "square" : "portrait"; try { setAiMediaBusy(kind); if (kind === "video") { await hub.actions.generateVideo({ prompt, aspect }); } else { await hub.actions.generateImage({ prompt, aspect }); } setActiveMedia(0); setGlobalMediaOverridden(true); setAiMediaPrompt(""); } catch (error) { console.error(error); hub.toast("AI generation failed"); } finally { setAiMediaBusy(""); } }; const activeMediaVariant = variants[activeVariantPlatform] || {}; const activeUsesGlobalMedia = activeMediaVariant.useGlobalMedia !== false; const activeMediaFit = activeMediaVariant.mediaFit || recommendedMediaFit(activeVariantPlatform, contentType); const activeRecommendedFit = recommendedMediaFit(activeVariantPlatform, contentType); const activePlatformMedia = activeUsesGlobalMedia ? currentMediaId() : activeMediaVariant.media?.[0] || currentMediaId(); const selectedMediaName = (id) => mediaThumbs.find((item) => (item.id || item.url || item.ph) === id)?.name || mediaThumbs.find((item) => (item.id || item.url || item.ph) === id)?.ph || id; const previewMedia = mediaThumbs.find((item) => (item.id || item.url || item.ph) === activePlatformMedia) || { ph: activePlatformMedia, name: activePlatformMedia }; const previewCaption = activeUsesGlobal ? caption : activeVariant.caption || caption; const previewFit = previewMode === "feed" ? activeMediaFit : activeMediaFit === "original" ? "vertical" : activeMediaFit; return (
{editModeLabel} {isEditing && {editPost.id}}
{isEditing ? "Changes here update the existing post and return you to Calendar after saving." : approvalRequired ? "Create a new post, save it as a draft, or submit it into the approval queue." : "Create a new post, save it as a draft, or schedule it directly from the composer."}
{isEditing && } {isEditing && } {isEditing && }
{/* LEFT — composer */}
{/* All platforms */}
All Platforms
{!anyChannelConnected && (
Connect a channel to get started
Link a social account and your posts will publish straight from here. You can still draft a post in the meantime.
)}
{Object.keys(Platforms).slice(0, 7).map(id => ( toggle(id)} /> ))}
Selected
{selectedPlatforms.length}
Ready
{readyPlatforms.length}
Issues
{readinessIssues.length}
{readinessIssues.length > 0 && (
Publishing readiness needs attention
{[...new Set(readinessIssues)].slice(0, 4).map((issue) =>
{issue}
)} {readinessIssues.length > 4 &&
+{readinessIssues.length - 4} more checks
}
)} {(hub.data.connectionHealth || []).some((c) => c.level !== "ok") && (
Channel health · we'll warn you before a post fails
{(hub.data.connectionHealth || []).filter((c) => c.level !== "ok").map((c) => (
{Platforms[c.id]?.name || c.name} {c.reasons[0]} {c.reconnect && }
))}
)}
{/* Caption */}
Caption