// Variant C: Issue list drawer // A "Review queue" chip lives at the top of the resume; a swipe-up drawer from the bottom // shows the full list of issues. Tapping one focuses it inline (highlight + inline accept/dismiss row). function VariantDrawer({ ctx }) { const { issueStates, setIssueStates, activeId, setActiveId, score, openIssues, handleFixAll, version, setVersion, undo, canUndo } = ctx; const [drawerOpen, setDrawerOpen] = React.useState(true); const scrollRef = React.useRef(null); const issue = activeId ? window.ISSUES[activeId] : null; // Scroll the active issue into view React.useEffect(() => { if (!activeId) return; const el = document.querySelector(`[data-issue="${activeId}"]`); if (el && scrollRef.current) { const s = scrollRef.current.getBoundingClientRect(); const r = el.getBoundingClientRect(); scrollRef.current.scrollBy({ top: r.top - s.top - 180, behavior: "smooth" }); } }, [activeId]); const accept = (id) => { const iss = window.ISSUES[id]; setIssueStates(prev => ({ ...prev, [id]: { state: "accepted", replaced: iss.suggestion } })); // auto-advance to next open issue const next = openIssues.find(x => x !== id); setActiveId(next || null); }; const dismiss = (id) => { setIssueStates(prev => ({ ...prev, [id]: { state: "dismissed" } })); const next = openIssues.find(x => x !== id); setActiveId(next || null); }; const originalFor = (id) => { const all = [ ...window.RESUME.summary.fragments, ...window.RESUME.experience.flatMap(e => e.bullets.flatMap(b => b.fragments)), ...window.RESUME.skills.fragments, ]; return all.find(f => f.issue === id)?.text || ""; }; return (
{ setActiveId(id); setDrawerOpen(false); }} issueStates={issueStates} activeId={activeId} variantStyle="underline" /> {/* Inline action bar that appears under the currently-focused issue */} {activeId && issue && accept(activeId)} onDismiss={() => dismiss(activeId)} onClose={() => setActiveId(null)} original={originalFor(activeId)} />}
{/* Floating drawer toggle (when collapsed) */} {!drawerOpen && openIssues.length > 0 && ( )} {/* Drawer */}

Review queue

{openIssues.length} left ยท tap to focus
{openIssues.length === 0 ? (
All clear.
Your resume's at its strongest.
) : openIssues.map(id => { const iss = window.ISSUES[id]; const meta = window.ISSUE_META[iss.type]; const tint = window.TINTS[meta.tint]; const active = activeId === id; return ( ); })}
); } window.VariantDrawer = VariantDrawer; // ---------- Inline action bar (appears next to focused issue) ---------- function InlineActionFor({ id, scrollRef, onAccept, onDismiss, onClose, original }) { const iss = window.ISSUES[id]; const meta = window.ISSUE_META[iss.type]; const tint = window.TINTS[meta.tint]; const [pos, setPos] = React.useState(null); React.useLayoutEffect(() => { const el = document.querySelector(`[data-issue="${id}"]`); if (!el || !scrollRef.current) return; const scroll = scrollRef.current; const update = () => { const r = el.getBoundingClientRect(); const s = scroll.getBoundingClientRect(); setPos({ top: r.bottom - s.top + scroll.scrollTop + 6, left: 16, right: 16 }); }; update(); scroll.addEventListener("scroll", update); return () => scroll.removeEventListener("scroll", update); }, [id]); if (!pos) return null; return (
{meta.label}
{iss.title}
{iss.why}
{iss.suggestion}
); } window.InlineActionFor = InlineActionFor;