{/* Tab strip — switches between the three high-level views.
"Activity" is the user's stuff (works for artists, orders for
collectors, saved-works for viewers). "Edit profile" is how
others see them. "Account" is settings + sign out. */}
{/* Body */}
{/* Footer — always visible, primary action highlighted only when
there are unsaved changes. */}
{dirty && (
Unsaved changes
)}
);
}
// ─── Profile drawer helpers ────────────────────────────────────────
function ProfileTabs({ role, active, onChange }) {
// Tabs adapt to role: viewer doesn't have an Activity sub-feed beyond
// its saved-list, but the tab is still useful as a landing surface.
const tabs = [
{ id: 'activity', label: role === 'artist' ? 'Portfolio' : role === 'collector' ? 'Activity' : 'Saved', hint: role === 'artist' ? 'Your works' : role === 'collector' ? 'Your orders' : 'Your saves' },
{ id: 'profile', label: 'Edit profile', hint: 'How others see you' },
{ id: 'account', label: 'Account', hint: 'Role · sign out' },
];
return (
{tabs.map((t) => {
const sel = active === t.id;
return (
);
})}
);
}
function SectionIntro({ title, description, pad }) {
return (
{title}
{description && (
{description}
)}
);
}
function FieldGroup({ label, hint, children }) {
return (
{label}
{children}
{hint && (
{hint}
)}
);
}
function ToggleRow({ label, description, checked, onToggle }) {
return (
);
}
function PortfolioIntro({ hasAny }) {
if (hasAny) {
return (
);
}
return (
Get started
Consign your first work
Press the + Consign button in the top bar.
You'll pick an image, fill in a title and price, and the work shows up
on the atlas as soon as you finish.
);
}
function ActivityIntro({ hasAny }) {
if (hasAny) {
return (
);
}
return (
Get started
Commission an artist or save a work
Open any artwork on the atlas, click the artist's name, and you'll
see the Commission similar → button. Donations to artists
and purchases will land here too.
);
}
// Quick summary of what the collector owns — points them to Studio for full details.
function CollectorOwnedSummary({ ownerId }) {
const owned = (window.AN_STUDIO?.ownedWorksForBuyer(ownerId) || []);
const orders = (window.AN_PAY?.listOrdersForBuyer(ownerId) || []);
const purchaseCount = orders.filter((o) => o.type === 'purchase').length;
const commissionCount = orders.filter((o) => o.type === 'commission').length;
const donateCount = orders.filter((o) => o.type === 'donate').length;
if (!owned.length && !orders.length) {
return (
Get started
Commission your first work
Open any artwork on the atlas, click the artist's name, and use{' '}
Commission similar →. Owned works show up here once you check out.
{owned.slice(0, 6).map(({ order, workId, workTitle, workImage, status }) => (
{workImage && }
● {status}
{workTitle || 'Untitled'}
))}
)}
);
}
// A nudge towards the Studio drawer — keeps the profile drawer focused
// on identity while pointing to where the heavy lifting lives.
function StudioPointer({ body }) {
return (
{body}
);
}
function ViewerActivityIntro({ savedCount }) {
return (
<>
}