// mariusson — Studio drawer (left side)
//
// The single home for everything the user *does* on the platform that
// isn't browsing the atlas:
// • Inbox — conversations with artists about open commissions
// • Receipts — every order with the original receipt panel
// • Owned — works the user has bought / commissioned (collector)
// • Payment — saved cards (collectors) or payout methods (artists)
//
// Slides in from the LEFT — deliberately mirroring The Room (which slides
// from the left for an artwork's comments). Profile drawer stays on the
// right; Studio is the place where transactions, money, and messages live.
(() => {
// ── Messages storage ────────────────────────────────────────────────
// Threads keyed by `${userId}:${counterpartyId}` — symmetric, but we
// store both perspectives so each side reads only their own thread
// ordering. Mock-only: there is no real artist on the other end, so we
// synthesize a reply from the artist after a small delay to make the
// surface feel alive.
const MSG_KEY = 'mariusson:messages';
function readThreads() {
try { return JSON.parse(localStorage.getItem(MSG_KEY) || '{}'); }
catch { return {}; }
}
function writeThreads(t) {
try { localStorage.setItem(MSG_KEY, JSON.stringify(t)); } catch {}
}
function threadKey(meId, otherId) { return `${meId}::${otherId}`; }
function listThreadsForUser(userId) {
const all = readThreads();
return Object.entries(all)
.filter(([k]) => k.startsWith(userId + '::'))
.map(([k, msgs]) => ({
key: k,
otherId: k.split('::')[1],
msgs: msgs || [],
lastTs: (msgs && msgs.length) ? msgs[msgs.length - 1].ts : 0,
}))
.sort((a, b) => b.lastTs - a.lastTs);
}
function getThread(meId, otherId) {
return (readThreads()[threadKey(meId, otherId)]) || [];
}
function postMessage(meId, otherId, otherName, text) {
const all = readThreads();
const k = threadKey(meId, otherId);
const reverseK = threadKey(otherId, meId);
const m = { id: 'm_' + Math.random().toString(36).slice(2, 10), from: meId, text, ts: Date.now() };
all[k] = [...(all[k] || []), m];
all[reverseK] = [...(all[reverseK] || []), m]; // mirror so the artist would see it
writeThreads(all);
window.dispatchEvent(new Event('an-messages-changed'));
// Mock artist auto-reply after a short delay — keeps the inbox feeling
// populated without a real backend. Skipped if otherId looks like a
// user id (starts with 'u_'); only fires for catalogue artists.
if (!String(otherId).startsWith('u_')) {
setTimeout(() => {
const replies = [
'Got it. Looking at your brief now.',
'Thank you for the note. I\'ll be back in touch within the week.',
'Interesting. Could you say a little more about scale?',
'Yes — that direction is one I\'ve been working on.',
'Let me think on it. Thanks for reaching out.',
];
const reply = {
id: 'm_' + Math.random().toString(36).slice(2, 10),
from: otherId,
fromName: otherName,
text: replies[Math.floor(Math.random() * replies.length)],
ts: Date.now(),
};
const a2 = readThreads();
a2[k] = [...(a2[k] || []), reply];
a2[reverseK] = [...(a2[reverseK] || []), reply];
writeThreads(a2);
window.dispatchEvent(new Event('an-messages-changed'));
}, 1800 + Math.random() * 2200);
}
return m;
}
function useThreads(userId) {
const [threads, setThreads] = React.useState(() => userId ? listThreadsForUser(userId) : []);
React.useEffect(() => {
if (!userId) { setThreads([]); return; }
const refresh = () => setThreads(listThreadsForUser(userId));
refresh();
window.addEventListener('an-messages-changed', refresh);
window.addEventListener('storage', (e) => { if (e.key === MSG_KEY) refresh(); });
return () => window.removeEventListener('an-messages-changed', refresh);
}, [userId]);
return threads;
}
// ── Owned works derivation ──────────────────────────────────────────
// Collector "owned" = orders of type 'commission' or 'purchase' that
// resolve to a workId in the catalogue. Donations don't count.
function ownedWorksForBuyer(buyerId) {
if (!window.AN_PAY) return [];
const orders = window.AN_PAY.listOrdersForBuyer(buyerId);
const owned = orders
.filter((o) => o.type === 'commission' || o.type === 'purchase')
.map((o) => ({
order: o,
workId: o.workId, workTitle: o.workTitle, workImage: o.workImage,
artistName: o.artistName, status: o.type === 'commission' ? 'In progress' : 'Owned',
}));
// Dedupe: latest-per-workId only (so the same work doesn't show twice)
const byId = new Map();
for (const w of owned) {
const existing = byId.get(w.workId);
if (!existing || existing.order.createdAt < w.order.createdAt) byId.set(w.workId, w);
}
return [...byId.values()].sort((a, b) => b.order.createdAt - a.order.createdAt);
}
// ── Studio drawer component ─────────────────────────────────────────
function StudioDrawer({ account, role, savedIds, catalogue, visible, onClose, onPickWork, onPickCollector }) {
const [tab, setTab] = React.useState(role === 'artist' ? 'inbox' : 'owned');
const accent = role === 'artist' ? BAU.red : role === 'collector' ? BAU.yellow : BAU.ink;
const tabsForRole = role === 'artist'
? ['inbox', 'receipts', 'payouts']
: role === 'collector'
? ['owned', 'inbox', 'receipts', 'cards', 'saved']
: ['saved', 'receipts'];
return (
{role === 'artist'
? 'Briefs from collectors, sales, and where to get paid.'
: role === 'collector'
? 'Owned works, receipts, payment methods, conversations.'
: 'Saved works and receipts.'}