// recording-results.jsx — dot+ Recording Detail, redesigned
// dot+ Base v1.1 dark tokens. No emoji (per project rule); SF-symbol-style line icons.
const DOT = {
bg:'#0F0F14', s2:'#18181F', s3:'#222229', s4:'#2A2A33',
c1:'#FFFFFF', c2:'#C8C8D4', c3:'#6B6B78', cdis:'#3A3A44',
border:'#2E2E38', borderSub:'#222229',
info:'#276EF1', pos:'#05944F', warn:'#BB7A00', neg:'#E11900',
};
const MONO = "'JetBrains Mono', ui-monospace, monospace";
const SANS = "'Inter', -apple-system, system-ui, sans-serif";
// speaker avatar palette (identity, not state) — consistent chroma via oklch
const SPK_COLORS = ['#276EF1', '#1F9E6E', '#C2603A', '#8A5CD6'];
// ─────────────────────────────────────────── icons (24-grid, 1.5 stroke)
function Icon({ d, size = 20, stroke = 1.6, fill = 'none', color = 'currentColor', children, vb = 24, style }) {
return (
{d ? : children}
);
}
const I = {
x: (p)=>
{icon}
{dot && {text}
);
}
const SumDot = () =>
{named ? fmtInitial(name) : ? }
);
}
// ─────────────────────────────────────────── audio player
function Player() {
const [playing, setPlaying] = React.useState(false);
const [t, setT] = React.useState(0);
const total = 19;
React.useEffect(() => {
if (!playing) return;
const id = setInterval(() => setT(p => { if (p >= total) { setPlaying(false); return total; } return p + 0.25; }), 250);
return () => clearInterval(id);
}, [playing]);
const mmss = (s) => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(Math.floor(s%60)).padStart(2,'0')}`;
const pct = (t/total)*100;
return (
{ if(t>=total) setT(0); setPlaying(p=>!p); }} style={{
width:44, height:44, borderRadius:'50%', border:'none', background:DOT.s3, color:DOT.c1,
display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0,
}}>
{playing ? : }
);
}
// ─────────────────────────────────────────── organize disclosure row
function OrgRow({ icon, label, children, onClick, last }) {
return (
{icon}
{label}
{children}
);
}
// ─────────────────────────────────────────── tabs
function Tabs({ active, onChange }) {
const tabs = ['Summary','Transcript','Key Points','Next Steps'];
return (
{tabs.map(tb => {
const on = active === tb;
return (
onChange(tb)} style={{
background:'none', border:'none', cursor:'pointer', padding:'0 0 12px', position:'relative',
fontFamily:SANS, fontSize:15, fontWeight:on?600:500, color:on?DOT.c1:DOT.c3,
}}>
{tb}
{on &&
);
})}
);
}
// ─────────────────────────────────────────── tab content
function Card({ children, pad = 16 }) {
return {children}
;
}
function CardHead({ icon, label, color }) {
return (
{icon}
{label}
);
}
function SummaryTab({ meeting }) {
return (
} label="AI Summary" color={DOT.info}/>
The speaker is conducting a microphone test, checking the recording process, and contemplating whether to change colors, indicating dissatisfaction with the current ones.
);
}
function TranscriptTab({ speakers, segments }) {
return (
} label="Full Transcript"/>
{segments.map((s,i) => {
const spk = speakers.find(x=>x.id===s.spk);
return (
{spk.name || spk.label}
{s.text}
);
})}
);
}
function KeyPointsTab() {
const pts = ['Microphone and recording pipeline confirmed working.','Current color palette feels off and may be revised.','Decision on new colors deferred to a follow-up review.'];
return (
{pts.map((p,i)=>(
{p}
))}
{items.map((it,i)=>(
setItems(a=>a.map((x,j)=>j===i?{...x,done:!x.done}:x))} style={{
background:DOT.s2, border:'none', borderRadius:12, padding:14, display:'flex', gap:12, alignItems:'center',
cursor:'pointer', textAlign:'left', width:'100%',
}}>
{it.done?:}
{it.t}
@{it.o}
))}
);
}
// ─────────────────────────────────────────── bottom sheet shell
function Sheet({ open, title, onClose, children, height }) {
return (
);
}
function PickRow({ icon, iconBg, title, sub, selected, onClick, last }) {
return (
{icon && {icon} }
{title}
{sub && {sub} }
{selected &&
);
}
function SectionLabel({ children }) {
return {children}
;
}
// ─────────────────────────────────────────── ORIGINAL (before) header
function CarouselBefore({ meeting }) {
const pill = (icon, text, action) => (
{icon}{text}
);
return (
{pill(, 'Jun 26, 2026 at 4:03 PM')}
{pill(, '00:18')}
{pill(, '2 Speakers')}
{pill(, Add to Project , true)}
{pill(, Set Category , true)}
{pill(, 'Verónica', true)}
);
}
// ─────────────────────────────────────────── main screen
function RecordingScreen({ t }) {
const before = t.view === 'Before';
const mono = t.speakerColor === 'Mono';
const FOLDERS = [
{ id:'aprocap', name:'APROCAP', sub:'Client work · 12', color:'#276EF1', icon: },
{ id:'q3', name:'Q3 Launch', sub:'8 recordings', color:'#1F9E6E', icon: },
{ id:'personal', name:'Personal', sub:'3 recordings', color:'#C2603A', icon: },
];
const CONTACTS = [
{ id:'vero', name:'Verónica Salas', sub:'Xhinola · Design Lead' },
{ id:'rod', name:'Rodrigo Arvizu', sub:'Xhinola · Engineering' },
{ id:'maya', name:'Maya Chen', sub:'Product' },
];
const CATS = [
{ persona:'General Purpose', icon:, items:[{id:'gen', name:'General Meeting', icon:}] },
{ persona:'Developer / Tech', icon:, items:[
{id:'standup', name:'Standup', icon:},
{id:'bug', name:'Bug Report', icon:},
{id:'feature', name:'New Feature', icon:},
]},
{ persona:'Creative / Other', icon:, items:[{id:'casual', name:'Casual Chat', icon:}] },
];
const [tab, setTab] = React.useState('Summary');
const [folder, setFolder] = React.useState('aprocap');
const [catId, setCatId] = React.useState(null);
const [speakers, setSpeakers] = React.useState([
{ id:'s1', idx:0, label:'Speaker 1', name: t.named?'Verónica':null },
{ id:'s2', idx:1, label:'Speaker 2', name: t.named?'You':null },
]);
React.useEffect(()=>{ // react to "named speakers" tweak
setSpeakers([
{ id:'s1', idx:0, label:'Speaker 1', name: t.named?'Verónica':null },
{ id:'s2', idx:1, label:'Speaker 2', name: t.named?'You':null },
]);
}, [t.named]);
const segments = [
{ spk:'s1', text:'Okay, testing one two — is this picking up? Looks like the levels are good.' },
{ spk:'s2', text:'Yeah it sounds clean. Recording is running.' },
{ spk:'s1', text:"I'm not sure about these colors though. They feel a little off to me." },
];
const [sheet, setSheet] = React.useState(null); // 'folder' | 'category' | 'speakers' | 'assign'
const [assignId, setAssignId] = React.useState(null);
const [orgOpen, setOrgOpen] = React.useState(false); // organize: collapsed summary vs edit rows
const cat = CATS.flatMap(c=>c.items).find(c=>c.id===catId);
const fol = FOLDERS.find(f=>f.id===folder);
const namedCount = speakers.filter(s=>s.name).length;
return (
{/* scroll area */}
{/* nav */}
{/* title */}
Anualidad + Web APROCAP
{before ? (
) : (
/* quiet metadata line — facts, not buttons */
Jun 26, 2026 · 5:57 PM ·
0:02 ·
Higüey, La Altagracia
)}
{/* player */}
{/* organize — collapsed summary (default) or expanded edit rows */}
{!before && (
{!orgOpen ? (
setOrgOpen(true)} style={{
width:'100%', display:'flex', alignItems:'center', gap:10, background:DOT.s2, border:'none',
borderRadius:12, padding:'13px 12px 13px 14px', cursor:'pointer', textAlign:'left',
}}>
{/* truncating zone: folder + category */}
} set={!!fol}
dot={fol&&fol.color} text={fol?fol.name:'Project'}/>
} set={!!cat} text={cat?cat.name:'Category'}/>
{/* fixed zone: avatars + expand affordance, never clip */}
{speakers.map((s,i)=>(
))}
{namedCount>0 && (
{namedCount===speakers.length ? 'Named' : `${namedCount} named`}
)}
) : (
Details
setOrgOpen(false)} style={{
display:'flex', alignItems:'center', gap:5, background:'transparent', border:'none', cursor:'pointer',
color:DOT.info, fontFamily:SANS, fontSize:13, fontWeight:600,
}}>Done
} label="Project" onClick={()=>setSheet('folder')}>
{fol
? {fol.name}
: None }
} label="Category" onClick={()=>setSheet('category')}>
{cat
? {cat.name}
: None }
} label="Speakers" onClick={()=>setSheet('speakers')} last>
{speakers.map((s,i)=>(
))}
{namedCount===speakers.length ? 'Named' : namedCount? `${namedCount} named` : 'Tap to name'}
)}
)}
{/* tabs */}
{/* content */}
{tab==='Summary' && }
{tab==='Key Points' &&
{/* ── sheets ── */}
setSheet(null)}>
{setFolder(null); setSheet(null);}}/>
Your projects
{FOLDERS.map((f,i)=>(
{setFolder(f.id); setSheet(null);}} last={i===FOLDERS.length-1}/>
))}
setSheet(null)}>
{setCatId(null); setSheet(null);}}/>
{CATS.map(group=>(
{group.persona}
{group.items.map((c,i)=>(
{setCatId(c.id); setSheet(null);}} last={i===group.items.length-1}/>
))}
))}
setSheet(null)}>
{namedCount} of {speakers.length} identified. Tap a speaker to link them to a contact — names update across the transcript.
{speakers.map((s)=>{
const sample = segments.find(g=>g.spk===s.id);
return (
{ setAssignId(s.id); setSheet('assign'); }} style={{
width:'100%', display:'flex', alignItems:'center', gap:12, background:DOT.s2, border:'none',
borderRadius:12, padding:14, marginTop:10, cursor:'pointer', textAlign:'left',
}}>
{s.name||s.label}
{!s.name && Unnamed }
{sample && “{sample.text}” }
{s.name ? : <>Assign }
);
})}
s.id===assignId)?.name || speakers.find(s=>s.id===assignId)?.label || ''}?`} onClose={()=>setSheet('speakers')}>
} iconBg="rgba(39,110,241,0.18)" title="Import from Contacts" onClick={()=>setSheet('speakers')}/>
} iconBg="rgba(39,110,241,0.18)" title="Create new contact" onClick={()=>setSheet('speakers')} last/>
Saved contacts
{CONTACTS.map((c,i)=>(
{fmtInitial(c.name)}}
iconBg={SPK_COLORS[i%4]} title={c.name} sub={c.sub} last={i===CONTACTS.length-1}
onClick={()=>{
setSpeakers(arr=>arr.map(s=>s.id===assignId?{...s, name:c.name.split(' ')[0]}:s));
setSheet('speakers');
}}/>
))}
setTweak('view', v)}/>
setTweak('speakerColor', v)}/>
setTweak('named', v)}/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(