/* Shared UI components */ const { useState, useEffect, useRef, useMemo, useCallback } = React; function Topbar({ previewCollapsed, onTogglePreview, onDemo, onClear, onDownload, onMobilePreview, completion }) { const eventConfig = window.MASARI_SEASONAL_EVENT; const seasonalEvent = eventConfig?.enabled && eventConfig.activeTheme === "saudi-nt" ? eventConfig : null; return (
{seasonalEvent ? : "م"}
مساري
صانع السيرة الذاتية
{seasonalEvent && (
{seasonalEvent.tagline} {seasonalEvent.hashtags[0]}
)}
صُنع بشغف بواسطة سلطان الفيفي
{/* Mobile preview button — inside topbar next to download */}
); } /* ============ Sidebar with drag-and-drop ============ */ function Sidebar({ sections, current, onSelect, counts, completion, onMove, onReorder, onResetOrder, onOpenGuide }) { const [dragId, setDragId] = useState(null); const [overId, setOverId] = useState(null); const handleDragStart = (e, id, isPinned) => { if (isPinned) { e.preventDefault(); return; } setDragId(id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", id); } catch {} }; const handleDragOver = (e, id, isPinned) => { if (isPinned || !dragId || dragId === id) return; e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOverId(id); }; const handleDrop = (e, id, isPinned) => { e.preventDefault(); if (isPinned || !dragId || dragId === id) { setDragId(null); setOverId(null); return; } onReorder(dragId, id); setDragId(null); setOverId(null); }; const handleDragEnd = () => { setDragId(null); setOverId(null); }; return ( ); } /* ============ Mobile bottom tab bar ============ */ function MobileTabBar({ sections, current, onSelect, onOpenSections }) { return ( ); } /* Mobile sections sheet */ function MobileSectionsSheet({ open, sections, current, counts, onSelect, onClose, onMove, onReorder, onResetOrder, onOpenGuide, onClear, onDemo }) { const [dragId, setDragId] = useState(null); const [overId, setOverId] = useState(null); const [isClosing, setIsClosing] = useState(false); useEffect(() => { if (open) setIsClosing(false); }, [open]); if (!open) return null; const closeWithAnimation = (after) => { setIsClosing(true); setTimeout(() => { if (after) after(); onClose(); setIsClosing(false); }, 240); }; const handleDragStart = (e, id, isPinned) => { if (isPinned) { e.preventDefault(); return; } setDragId(id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", id); } catch {} }; const handleDragOver = (e, id, isPinned) => { if (isPinned || !dragId || dragId === id) return; e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOverId(id); }; const handleDrop = (e, id, isPinned) => { e.preventDefault(); if (isPinned || !dragId || dragId === id) { setDragId(null); setOverId(null); return; } onReorder(dragId, id); setDragId(null); setOverId(null); }; const handleDragEnd = () => { setDragId(null); setOverId(null); }; return (
closeWithAnimation()}>
e.stopPropagation()}>
الأقسام
اضغط للفتح، واستخدم الأسهم لتغيير ترتيب الأقسام.
{sections.map((s, idx) => { const isPinned = s.pinned; return (
{ onSelect(s.id); closeWithAnimation(); }} draggable={!isPinned} onDragStart={e => handleDragStart(e, s.id, isPinned)} onDragOver={e => handleDragOver(e, s.id, isPinned)} onDragLeave={() => setOverId(o => o === s.id ? null : o)} onDrop={e => handleDrop(e, s.id, isPinned)} onDragEnd={handleDragEnd}> {!isPinned && (
e.stopPropagation()}>
)}
{s.label}
{isPinned &&
ثابت
}
{counts[s.id] > 0 && {counts[s.id]}}
); })}
بياناتك تُحفظ بأمان
صُنع بشغف بواسطة سلطان الفيفي
); } function ConfirmModal({ isOpen, title, message, onConfirm, onCancel, confirmLabel = "تأكيد", cancelLabel = "إلغاء", isDanger = false }) { const [isClosing, setIsClosing] = useState(false); useEffect(() => { if (isOpen) setIsClosing(false); }, [isOpen]); if (!isOpen && !isClosing) return null; const handleClose = (action) => { setIsClosing(true); setTimeout(() => { action(); setIsClosing(false); }, 300); }; return (
handleClose(onCancel)}>
e.stopPropagation()}>
{title}
{message}
); } Object.assign(window, { Topbar, Sidebar, MobileTabBar, MobileSectionsSheet, ConfirmModal });