// ───────────────────────────────────────────────────────────────── // Work detail · inline edit mode // ───────────────────────────────────────────────────────────────── // Wraps the work-detail Overview tab in editable widgets when // `editing` is true. State is held locally — no real persistence; // changes are pushed onto a history stack rendered in a side drawer. // ───────────────────────────────────────────────────────────────── const { useState, useRef, useEffect, useMemo } = React; // ───────── undo history ───────── function useEditHistory(initial) { const [data, setData] = useState(initial); // history entries: { ts, label, before, after } const [history, setHistory] = useState([]); const [cursor, setCursor] = useState(0); // points to "current" snapshot index const commit = (label, mutator) => { setData(prev => { const before = prev; const next = typeof mutator === 'function' ? mutator(prev) : mutator; // truncate any redo branches when committing new setHistory(h => { const trimmed = h.slice(0, cursor); return [...trimmed, { ts: Date.now(), label, before, after: next }]; }); setCursor(c => c + 1); return next; }); }; const undo = () => { if (cursor <= 0) return; const entry = history[cursor - 1]; setData(entry.before); setCursor(c => c - 1); }; const redo = () => { if (cursor >= history.length) return; const entry = history[cursor]; setData(entry.after); setCursor(c => c + 1); }; const revertTo = (idx) => { // idx is into history[]; revert to the "before" of history[idx], // i.e. the state as it was at history[idx].before if (idx < 0 || idx >= history.length) return; setData(history[idx].before); setCursor(idx); }; return { data, setData, commit, history, cursor, undo, redo, revertTo }; } // ───────── editable text (inline contenteditable) ───────── function InlineText({ value, onCommit, multiline=false, className='', style={}, placeholder='', as='span' }) { const ref = useRef(null); const [editing, setEditing] = useState(false); const [local, setLocal] = useState(value); useEffect(() => { setLocal(value); }, [value]); const finish = () => { setEditing(false); const trimmed = (local || '').trim(); if (trimmed !== (value||'').trim()) onCommit(trimmed); }; const Tag = as; return ( setEditing(true)} onBlur={(e)=>{ setLocal(e.currentTarget.textContent); finish(); }} onInput={(e)=>setLocal(e.currentTarget.textContent)} onKeyDown={(e)=>{ if (!multiline && e.key==='Enter') { e.preventDefault(); e.currentTarget.blur(); } if (e.key==='Escape') { e.currentTarget.textContent = value; e.currentTarget.blur(); } }} data-placeholder={placeholder} className={(className || '') + ' inline-edit'} style={{ padding: '2px 6px', margin: '-2px -6px', borderRadius: 3, cursor: 'text', background: editing ? 'var(--bg)' : 'var(--edit-fill)', boxShadow: editing ? 'inset 0 0 0 1.5px var(--ink)' : 'none', outline: 'none', transition: 'background .12s ease', ...style, }} onMouseEnter={(e)=>{ if (!editing) e.currentTarget.style.background='var(--edit-fill-hover)'; }} onMouseLeave={(e)=>{ if (!editing) e.currentTarget.style.background='var(--edit-fill)'; }}> {value || ''} ); } // ───────── editable select ───────── function InlineSelect({ value, options, onCommit, className='ff-mono', style={} }) { return ( ); } // ───────── saved-pulse marker (briefly highlights an edited node) ───────── function useSavedPulse() { const [pulseId, setPulseId] = useState(null); const trigger = (id) => { setPulseId(id); setTimeout(() => setPulseId(p => p===id ? null : p), 900); }; return { pulseId, trigger }; } // ───────── history drawer ───────── function HistoryDrawer({ open, onClose, history, cursor, onRevert, onUndo, onRedo }) { if (!open) return null; return ( <>
); } function relTime(ts) { const s = Math.floor((Date.now()-ts)/1000); if (s<5) return 'just now'; if (s<60) return s+'s ago'; if (s<3600) return Math.floor(s/60)+'m ago'; return Math.floor(s/3600)+'h ago'; } // ───────── splits-bar drag handle ───────── function DragSplits({ writers, onCommit }) { // Each writer has a share. Total must = 100. Drag the divider between two // writers to redistribute share between them. const total = writers.reduce((a,w)=>a+(+w.share||0),0); const containerRef = useRef(null); const startDrag = (i, e) => { e.preventDefault(); const rect = containerRef.current.getBoundingClientRect(); const startX = e.clientX; const a = +writers[i].share; const b = +writers[i+1].share; const onMove = (ev) => { const dx = ev.clientX - startX; const dPct = (dx / rect.width) * 100; let newA = Math.round(a + dPct); let newB = Math.round(b - dPct); newA = Math.max(0, Math.min(a+b, newA)); newB = (a+b) - newA; const next = writers.map((w,j) => j===i ? {...w, share:newA} : j===i+1 ? {...w, share:newB} : w); onCommit(next, false); // intermediate, no history entry }; const onUp = () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); onCommit(null, true); // final commit (snapshot to history) }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); }; // Distinct, harmonious palette for writer slices const PALETTE = [ 'oklch(0.62 0.16 50)', // burnt orange 'oklch(0.55 0.13 240)', // slate blue 'oklch(0.68 0.14 140)', // sage green 'oklch(0.58 0.17 25)', // terracotta 'oklch(0.50 0.10 290)', // muted violet 'oklch(0.65 0.12 85)', // ochre ]; return (
{writers.map((w,i) => { const pct = total ? ((+w.share||0)/total*100) : 0; const color = PALETTE[i % PALETTE.length]; return (
{pct >= 10 && `${Math.round(pct)}%`}
{i < writers.length-1 && (
startDrag(i,e)} style={{width:6,marginLeft:-3,marginRight:-3,cursor:'col-resize',background:'transparent', position:'relative',zIndex:2, display:'flex',alignItems:'center',justifyContent:'center'}}>
)} ); })}
); } // Export Object.assign(window, { useEditHistory, InlineText, InlineSelect, useSavedPulse, HistoryDrawer, DragSplits, relTime, });