// popover.jsx — dot+ menu bar popover + all states.
// Relies on globals from core.jsx (loaded first).
// ── sample data ───────────────────────────────────────────────────────────────
const RECENTS = [
{ id:'r1', title:'Anualidad + Web APROCAP', when:'Today · 5:57 PM', dur:'24:08', folder:'APROCAP', spk:[{name:'Verónica',idx:0},{name:'You',idx:1}], status:'done' },
{ id:'r2', title:'Microphone Test and Color Review', when:'Today · 4:03 PM', dur:'00:19', folder:null, spk:[{name:'You',idx:1}], status:'done' },
{ id:'r3', title:'Q3 Launch — Eng sync', when:'Yesterday · 10:02 AM', dur:'42:15', folder:'Q3 Launch', spk:[{name:'Maya',idx:2},{name:'Rodrigo',idx:3},{name:null,idx:0}], status:'done' },
{ id:'r4', title:'Sales discovery — Altagracia', when:'Mon · 2:30 PM', dur:'31:44', folder:'APROCAP', spk:[{name:null,idx:0},{name:null,idx:1}], status:'processing' },
];
const LIVE_LINES = [
{ at:1, spk:'Verónica', idx:0, text:'Okay — so for the annuity page, the hero should lead with the renewal CTA.' },
{ at:4, spk:'You', idx:1, text:'Agreed. Can we pull the APROCAP numbers from last quarter into it?' },
{ at:8, spk:'Verónica', idx:0, text:'Yes, I have them. I will share the deck right after this.' },
{ at:12, spk:'You', idx:1, text:'Perfect. Let us also confirm the launch date before we wrap.' },
{ at:16, spk:'Verónica', idx:0, text:'The 14th works on my end. I will hold it.' },
];
// ── helpers ───────────────────────────────────────────────────────────────────
const dens = (t) => t.density === 'Compact'
? { rowPad:'8px 10px', gap:8, listGap:2 }
: { rowPad:'11px 12px', gap:12, listGap:6 };
function SectionLabel({ children, action, onAction }) {
return (
{children}
{action && {action} }
);
}
function SearchField() {
return (
Search recordings
⌘ K
);
}
// recent recording row
function RecentRow({ r, t, onClick }) {
const d = dens(t);
return (
e.currentTarget.style.background='var(--s2)'}
onMouseLeave={(e)=>e.currentTarget.style.background='transparent'}
>
{r.status==='processing' ? : }
{r.title}
{r.when} · {r.dur}
{r.status==='processing'
? Processing
:
{r.spk.slice(0,3).map((s,i)=> }
);
}
// source selector pill
function SourceChip({ icon, label, active, meter, onClick }) {
return (
{icon}
{label}
{meter && }
);
}
// ── popover shell ──────────────────────────────────────────────────────────────
function PopShell({ width, detached, children, dragHandlers }) {
return (
{detached && (
)}
{children}
dot+
} title="Ask dot+" active={screen==='ai'} onClick={()=>go('ai')}/>
} title={detached ? 'Re-attach to menu bar' : 'Detach window'} active={detached} onClick={toggleDetach}/>
} title="Settings" active={screen==='settings'} onClick={()=>go('settings')}/>
RA
);
}
// brand monogram: square chip with disc + plus tick (from brand lockup)
function Monogram({ size = 20 }) {
return (
);
}
// ── HOME ─────────────────────────────────────────────────────────────────────
function HomeView({ t, go, startRec, openApp }) {
const d = dens(t);
const focused = t.homeLayout === 'Focused';
const recAtTop = t.recordButton === 'Top';
const RecordBlock = (
⌃ ⌥ R
} label="System audio" active onClick={()=>{}}/>
} label="Microphone" active onClick={()=>{}}/>
Auto-detect meeting audio
);
return (
{/* calendar-aware next meeting */}
Design Review
in 12 min · Google Meet
Record
{recAtTop && RecordBlock}
{/* recent list */}
{focused ? 'Jump back in' : 'Recent'}
{(focused ? RECENTS.slice(0,2) : RECENTS).map(r => (
go('detail')}/>
))}
{!recAtTop && {RecordBlock}
}
{/* footer */}
Open dot+
14 recordings · 6.2 hrs
);
}
// ── RECORDING ─────────────────────────────────────────────────────────────────
function RecordingView({ t, elapsed, stopRec, go, detached, toggleDetach }) {
const wave = t.recordingStyle === 'Waveform';
const lines = LIVE_LINES.filter(l => l.at <= elapsed);
const streamRef = React.useRef(null);
React.useEffect(() => { if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight; }, [lines.length]);
const [min, setMin] = React.useState(false);
const [showSources, setShowSources] = React.useState(false);
// compact recording bar (minimized) — timer + live level + controls only
if (min) {
return (
{mm(elapsed)}
} size={30} title="Pause"/>
Stop } size={30} active={detached} title={detached ? 'Re-attach to menu bar' : 'Float window'} onClick={toggleDetach}/>
} size={30} title="Expand" onClick={()=>setMin(false)}/>
);
}
return (
Recording
{mm(elapsed)}
} size={30} active={detached} title={detached ? 'Re-attach to menu bar' : 'Float window'} onClick={toggleDetach}/>
} size={30} title="Minimize" onClick={()=>setMin(true)}/>
{/* capture status — slim by default, per-source meters on demand */}
setShowSources(s=>!s)} style={{ width:'100%', display:'flex', alignItems:'center', gap:10, padding:'9px 11px', background:'transparent', border:'none', cursor:'pointer', textAlign:'left' }}>
System audio + Microphone
{wave ? }
{showSources && (
{[['System audio',
], ['Microphone', ]].map(([label, ic], i) => (
{ic}
{label}
{wave ? }
))}
)}
{/* recording to */}
Saving to
APROCAP
Change
{/* live transcript */}
Live transcript
Beta
{lines.length === 0 &&
Listening… }
{lines.map((l, i) => (
))}
{/* controls */}
Marker
Stop & save
);
}
function WaveLine({ active }) {
const [s, setS] = React.useState(0);
React.useEffect(() => { if (!active) return; const id = setInterval(()=>setS(x=>x+1), 110); return ()=>clearInterval(id); }, [active]);
const pts = Array.from({ length: 22 }).map((_, i) => {
const v = 8 + Math.abs(Math.sin((s + i*0.8)*0.7)) * (i%3===0?8:5);
return `${i*2.4},${16 - v} ${i*2.4},${16 + v}`;
});
return (
{pts.map((p, i) =>
);
}
// ── PROCESSING ─────────────────────────────────────────────────────────────────
function ProcessingView({ go }) {
const steps = [
{ label:'Transcribing audio', state:'done' },
{ label:'Identifying speakers', state:'active' },
{ label:'Summarizing & extracting steps', state:'pending' },
];
return (
Anualidad + Web APROCAP
24:08 · processing on-device
{steps.map((s, i) => (
{s.state==='done' ?
{s.label}
))}
You can close this — dot+ keeps working in the menu bar and will notify you when the summary is ready.
go('detail')} style={{ marginTop:14 }}>Preview when ready
);
}
function Spinner({ size = 30, thin }) {
return
} title="Copy summary"/>
} title="Share"/>
} title="Open in dot+" onClick={openApp}/>
Anualidad + Web APROCAP
·
·
{/* mini player */}
{/* speakers + project chips */}
{[{name:'Verónica',idx:0},{name:'You',idx:1}].map((s,i)=>
Named
APROCAP
{/* tabs */}
{tabs.map(tb => {
const on = tab===tb;
return setTab(tb)} style={{ background:'none', border:'none', cursor:'pointer', padding:'0 0 10px', position:'relative', whiteSpace:'nowrap', fontFamily:SANS, fontSize:13, fontWeight:on?600:500, color:on?'var(--c1)':'var(--c3)' }}>{tb}{on && ;
})}
{tab==='Summary' && (
AI Summary
Verónica and the team aligned the APROCAP annuity page around a renewal-first hero, agreed to pull last quarter's figures into it, and confirmed a launch hold for the 14th.
)}
{tab==='Transcript' && (
{LIVE_LINES.map((l,i)=>(
))}
)}
{tab==='Key Points' && (
{['Renewal CTA leads the annuity hero.','Pull last quarter APROCAP figures into the page.','Launch date held for the 14th.'].map((p,i)=>(
{p}
))}
)}
{tab==='Next Steps' && (
{[['Share Q3 figures deck','Verónica',false],['Hold launch date — the 14th','You',true],['Draft renewal hero copy','You',false]].map(([txt,who,done],i)=>(
{done?:}
{txt}
@{who}
))}
)}
);
}
function MiniPlayer() {
const [playing, setPlaying] = React.useState(false);
const [pct, setPct] = React.useState(18);
React.useEffect(() => { if (!playing) return; const id = setInterval(()=>setPct(p=>p>=100?(setPlaying(false),100):p+1.2), 200); return ()=>clearInterval(id); }, [playing]);
return (
setPlaying(p=>!p)} style={{ width:34, height:34, borderRadius:'50%', border:'none', background:'var(--s3)', color:'var(--c1)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0 }}>{playing?:
);
}
// ── AI ASK ─────────────────────────────────────────────────────────────────────
function AiView({ t, go }) {
return (
Ask dot+
14 recordings
What did we decide about the APROCAP launch date?
dot+
You held the launch for the 14th . Verónica confirmed it works on her end and said she'd hold the date.
go('detail')} style={{ display:'flex', alignItems:'center', gap:8, marginTop:9, width:'100%', background:'var(--s1)', border:'1px solid var(--border-sub)', borderRadius:10, padding:'9px 11px', cursor:'pointer', textAlign:'left' }}>
Anualidad + Web APROCAP
16:24 · cited
{['Open next steps','Summarize this week','Who joined?'].map(s=>(
{s}
))}
Ask across your recordings…
);
}
// ── SETTINGS (mini) ──────────────────────────────────────────────────────────
function MiniSettings({ t, go, openApp }) {
const [v, setV] = React.useState({ login:true, timer:true, sys:true, both:true, auto:true });
const tog = (k) => setV(s=>({ ...s, [k]:!s[k] }));
const Row = ({ label, sub, k, right }) => (
{label}
{sub && {sub} }
{right || tog(k)}/>}
);
return (
Settings
All settings Quit dot+
);
}
function Toggle({ on, onClick }) {
return (
);
}
// ── ONBOARDING / PERMISSIONS ───────────────────────────────────────────────────
function Onboarding({ go }) {
const perms = [
{ icon:, label:'Microphone', sub:'Record your voice and in-person meetings', state:'granted' },
{ icon:, label:'System Audio & Screen', sub:'Capture audio from calls on your Mac', state:'grant' },
{ icon:, label:'Calendar', sub:'Know your next meeting, auto-record', state:'grant' },
{ icon:, label:'Accessibility', sub:'Enable the global record hotkey', state:'optional' },
];
return (
Welcome to dot+
Grant a few permissions and dot+ will live in your menu bar — one click to capture any meeting.
{perms.map((p,i)=>(
{p.icon}
{p.label}
{p.sub}
{p.state==='granted'
? On {p.state==='optional'?'Later':'Grant'} }
))}
go('home')} style={{ marginTop:16 }}>Continue
);
}
// ── ROUTER ─────────────────────────────────────────────────────────────────────
function Popover({ t, screen, go, elapsed, startRec, stopRec, openApp, detached, toggleDetach, width, dragHandlers }) {
// pass header context to HomeView via t shim
const tt = { ...t, __detached:detached, __toggleDetach:toggleDetach };
return (
{/* non-home screens get a header inside their own view; home renders full header */}
{screen==='home' && }
{screen==='recording' && }
{screen==='processing' && }
{screen==='detail' && }
{screen==='ai' && }
{screen==='settings' && }
{screen==='onboarding' && }
);
}
Object.assign(window, { Popover, Monogram, RECENTS, LIVE_LINES });