// ---------- Apps directory — integrations for studio workspaces ---------- const AppsPage = ({ onOpenMobileMenu }) => { const [category, setCategory] = React.useState("All"); const [query, setQuery] = React.useState(""); const [appsState, setAppsState] = React.useState(HD.apps); const [focused, setFocused] = React.useState(null); // app id for connect modal const filtered = appsState.filter(a => (category === "All" || a.category === category) && (!query || a.name.toLowerCase().includes(query.toLowerCase()) || a.tagline.toLowerCase().includes(query.toLowerCase())) ); const connected = appsState.filter(a => a.status === "connected" || a.status === "needs-attention"); const connectedCount = appsState.filter(a => a.status === "connected").length; const needsAttention = appsState.filter(a => a.status === "needs-attention").length; const toggleConnect = (id, asConnected) => { setAppsState(prev => prev.map(a => a.id === id ? { ...a, status: asConnected ? "connected" : "available", account: asConnected ? (a.account || "Connected just now") : null, lastSync: asConnected ? "Just now" : null } : a )); const app = appsState.find(a => a.id === id); if (asConnected) { window.ToastEvents.emit({ kind: "success", title: `${app.name} connected`, body: "Auth handshake complete — events will start flowing within a minute." }); } else { window.ToastEvents.emit({ kind: "info", title: `${app.name} disconnected`, body: "Existing data is preserved; reconnect any time." }); } }; return (
} />
{/* Hero strip — what apps do */}
WINTERHILL MEDIA · APPS

Connect the rest of your studio.
Keep everything in HarborDock.

Bring drafts in from your NLE, mirror client folders from Drive, pipe approvals into Slack, and trigger Stripe invoices on final delivery — without leaving the dock.

a.featured)} />
{/* Filter row */}
setQuery(e.target.value)} placeholder="Search apps…" style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--white)", fontSize: 13, fontFamily: "var(--sans)", }} />
{HD.appCategories.map(cat => ( ))}
{/* Connected section */} {connected.length > 0 && category === "All" && !query && (
}>Sync all} />
{connected.map(a => ( setFocused(a.id)} onDisconnect={() => toggleConnect(a.id, false)} /> ))}
)} {/* Directory */}
{filtered.length === 0 ? ( } onClick={() => setQuery("")}>Clear search} /> ) : (
{filtered.map(a => ( setFocused(a.id)} onConnect={() => toggleConnect(a.id, true)} /> ))}
)}
{/* Activity feed */}
{HD.appActivity.map((a, i, arr) => { const tone = STATUS_TONES[a.accent]; const IconComp = window.Icon[a.icon] || window.Icon.Apps; return (
{a.app} — {a.action}
{a.at}
); })}
{/* Developer / API panel */}
BUILDING SOMETHING CUSTOM?
Webhooks, REST API, and a public events stream.

Every upload, comment, approval, and delivery emits a signed event you can POST anywhere. Pair it with Zapier for low-code, or roll your own.

{focused && ( a.id === focused)} onClose={() => setFocused(null)} onToggle={(asConnected) => { toggleConnect(focused, asConnected); setFocused(null); }} /> )}
); }; const AppMetric = ({ label, value, tone }) => { const t = STATUS_TONES[tone]; return (
{label}
{value}
); }; const AppHeroDiagram = ({ apps }) => { // Visual: HarborDock anchor in the center with app icons orbiting const featured = apps.slice(0, 6); return (
{/* concentric rings */}
{featured.map((a, i) => { const total = featured.length; const angle = (i / total) * Math.PI * 2 - Math.PI / 2; const r = 92; const x = Math.cos(angle) * r; const y = Math.sin(angle) * r; const tone = STATUS_TONES[a.accent]; const IconComp = window.Icon[a.icon] || window.Icon.Apps; return (
); })}
); }; const AppCard = ({ app, onOpen, onConnect }) => { const tone = STATUS_TONES[app.accent || "neutral"]; const IconComp = window.Icon[app.icon] || window.Icon.Apps; const isConnected = app.status === "connected" || app.status === "needs-attention"; return (
{app.name}
{app.status === "needs-attention" && } {app.syncing && ( live )}
{app.category.toUpperCase()}

{app.tagline}

{isConnected ? (app.account || "Connected") : "Not connected"}
{isConnected ? ( ) : ( )}
); }; const ConnectedAppCard = ({ app, onOpen, onDisconnect }) => { const tone = STATUS_TONES[app.accent || "neutral"]; const IconComp = window.Icon[app.icon] || window.Icon.Apps; return (
{app.name}
{app.account}
{app.status === "needs-attention" ? : }
Synced {app.lastSync}
 ); }; const AppDetailModal = ({ app, onClose, onToggle }) => { if (!app) return null; const tone = STATUS_TONES[app.accent || "neutral"]; const IconComp = window.Icon[app.icon] || window.Icon.Apps; const isConnected = app.status === "connected" || app.status === "needs-attention"; const exampleScopes = { "Storage": ["Read folder contents", "Mirror new files into intake", "Write back delivery archives"], "Review": ["Read comments + state", "Write timecoded replies", "Trigger draft sync"], "Communication":["Post into chosen channel", "DM mentioned reviewers", "Read read-receipts for replies"], "NLE": ["Receive renders via local agent", "Tag exports with project ID", "Open project in editor"], "Productivity": ["Read project docs", "Sync briefs both ways", "Read-only calendar push"], "Billing": ["Create invoices on delivery", "Read invoice status", "Send paid receipts to studio"], "Capture": ["Receive recorded clips", "Attach as comments", "Read clip thumbnails"], "Automation": ["Subscribe to webhook events", "Trigger on uploads, approvals, deliveries", "Sign payloads with HMAC"], }[app.category] || ["Read public data", "Write events back"]; return ( ) : ( <> )} >
{app.tagline}
{isConnected && app.account && (
Connected as {app.account} · Synced {app.lastSync}
)}
PERMISSIONS WE'LL ASK FOR
{exampleScopes.map((s, i) => (
{s}
))}
{isConnected && (
SCOPE
)}
); }; const ToggleRow = ({ label, defaultOn }) => { const [on, setOn] = React.useState(defaultOn); return ( ); }; window.AppsPage = AppsPage;