{typeLabels}

{item?.text}

{onEdit && ( )}

); return ReactDOM.createPortal(menu, document.body); } // ── Focus Overlay (fullscreen) ─────────────────────────────────── function FocusOverlay({ item, onClose, onMinimize, running, secs, duration, onToggleRun, onReset, onChangeDuration, }) { const [taskDone, setTaskDone] = useFState(false); const [showSettings, setShowSettings] = useFState(false); const [bgIndex, setBgIndex] = useFState(2); const [customMin, setCustomMin] = useFState(30); const mm = String(Math.floor(secs / 60)).padStart(2, '0'); const ss = String(secs % 60).padStart(2, '0'); const pct = duration > 0 ? (duration * 60 - secs) / (duration * 60) : 0; const R = 76; const circ = 2 * Math.PI * R; const { label: typeLabel, color: tColor } = FOCUS_TYPE[item?.type] || { label: 'FOKUS', color: '#00d4aa' }; const fbg = FOCUS_BG[bgIndex]; function applyDuration(min) { onChangeDuration && onChangeDuration(min); setShowSettings(false); } return (

{fbg.extra && (

)}

{/* Minimize */} {/* Close */} {typeLabel}

34 ? 15 : 20, fontWeight: 700, color: taskDone ? '#6a7394' : '#e4e8f1', letterSpacing: '-0.3px', lineHeight: 1.35, textAlign: 'center', margin: 0, textDecoration: taskDone ? 'line-through' : 'none', transition: 'color 0.3s', }}>{item?.text}

{showSettings ? (

Velg varighet

{[25, 45, 60].map(min => ( ))}

setCustomMin(Math.max(1, Math.min(120, parseInt(e.target.value) || 1)))} style={{ flex: 1, padding: '10px 12px', borderRadius: 10, border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.06)', color: '#e4e8f1', fontFamily: 'inherit', fontSize: 14, fontWeight: 700, outline: 'none', textAlign: 'center', }} />

) : ( <>

{mm}:{ss} {running ? 'FOKUSERER' : 'KLAR'}

{(running || secs < duration * 60) && ( )}

)}

{FOCUS_BG.map((b, i) => { const isCenter = i === 2; const isActive = i === bgIndex; return (

); } // ── Mini timer bubble (minimized state) ────────────────────────── function FocusMiniBubble({ item, running, secs, duration, onMaximize, onClose }) { const mm = String(Math.floor(secs / 60)).padStart(2, '0'); const ss = String(secs % 60).padStart(2, '0'); const pct = duration > 0 ? (duration * 60 - secs) / (duration * 60) : 0; const r = 18; const circ = 2 * Math.PI * r; const tColor = FOCUS_TYPE[item?.type]?.color || '#00d4aa'; return ReactDOM.createPortal(

{item?.text}

{mm}:{ss}

, document.body ); } // ══════════════════════════════════════════════════════════════════ // FocusModeRoot — orchestrates context menu, overlay, mini bubble. // Lives at App-root level. Listens for `el-focus-open` and `el-focus-menu` events. // ══════════════════════════════════════════════════════════════════ function FocusModeRoot() { const [item, setItem] = useFState(null); const [minimized, setMinimized] = useFState(false); const [duration, setDuration] = useFState(25); const [secs, setSecs] = useFState(25 * 60); const [running, setRunning] = useFState(false); const [contextMenu, setContextMenu] = useFState(null); // { x, y, item } // Tick useFEffect(() => { if (!running) return; const id = setInterval(() => { setSecs(s => { if (s <= 0) { setRunning(false); return duration * 60; } return s - 1; }); }, 1000); return () => clearInterval(id); }, [running, duration]); // Reset secs when duration changes useFEffect(() => { if (!running) setSecs(duration * 60); }, [duration]); // Listen for events from anywhere in app useFEffect(() => { function onOpen(e) { const it = e.detail?.item; if (!it) return; setItem(it); setMinimized(false); setSecs(duration * 60); setRunning(false); setContextMenu(null); } function onMenu(e) { const { x, y, item: it } = e.detail || {}; if (!it) return; setContextMenu({ x, y, item: it }); } window.addEventListener('el-focus-open', onOpen); window.addEventListener('el-focus-menu', onMenu); return () => { window.removeEventListener('el-focus-open', onOpen); window.removeEventListener('el-focus-menu', onMenu); }; }, [duration]); function handleClose() { setItem(null); setRunning(false); setMinimized(false); setSecs(duration * 60); } return ( <> {contextMenu && ( setContextMenu(null)} onFocus={(it) => { setItem(it); setMinimized(false); setSecs(duration * 60); setRunning(false); }} onEdit={(it) => { window.dispatchEvent(new CustomEvent('el-edit-item', { detail: { item: it } })); }} /> )} {item && !minimized && ( setMinimized(true)} running={running} secs={secs} duration={duration} onToggleRun={() => setRunning(r => !r)} onReset={() => setSecs(duration * 60)} onChangeDuration={(d) => { setDuration(d); setSecs(d * 60); }} /> )} {item && minimized && ( setMinimized(false)} onClose={handleClose} /> )} ); } // ── Helper for trigger from anywhere ───────────────────────────── // Usage: window.openFocusMenu(event, { id, text, type }) window.openFocusMenu = function (e, item) { e.preventDefault(); window.dispatchEvent(new CustomEvent('el-focus-menu', { detail: { x: e.clientX, y: e.clientY, item }, })); }; window.openFocus = function (item) { window.dispatchEvent(new CustomEvent('el-focus-open', { detail: { item } })); };