setMobileOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)' }} />

تکناو

{NAV_ITEMS.map(item => ( ))} {user ? (

{user.username && ( )} {user.role !== 'reader' && ( )}

) : ( )}

)} ); } function NotificationBell() { const { navigate } = useNav(); const [open, setOpen] = useState(false); const [items, setItems] = useState([]); const [unread, setUnread] = useState(0); useEffect(() => { let cancelled = false; engagementApi.listNotifications({ limit: 20 }) .then(res => { if (!cancelled) { setItems(res?.items ?? []); setUnread(res?.unread ?? 0); } }) .catch(() => {}); const es = new EventSource('/api/v1/auth/notifications/stream', { withCredentials: true }); es.addEventListener('notification', (event) => { const notification = JSON.parse(event.data); setItems(list => [notification, ...list].slice(0, 20)); setUnread(n => n + 1); }); es.onerror = () => {}; return () => { cancelled = true; es.close(); }; }, []); const openNotification = async (notification) => { if (!notification.read) { engagementApi.markNotificationRead(notification.id).catch(() => {}); setUnread(n => Math.max(0, n - 1)); setItems(list => list.map(item => item.id === notification.id ? { ...item, read: true } : item)); } const slug = notification.payload?.articleSlug; if (slug) navigate('/article/' + slug); setOpen(false); }; const markAll = async () => { await engagementApi.markNotificationsRead().catch(() => {}); setUnread(0); setItems(list => list.map(item => ({ ...item, read: true }))); }; return (

{open && (

اعلان‌ها

{items.length === 0 ? (

اعلانی وجود ندارد.

) : items.map(item => ( ))}

)}

); } function notificationText(item) { if (item.type === 'comment_reply') return `${item.payload?.actorName ?? 'کاربر'} به نظر شما پاسخ داد`; if (item.type === 'comment') return `${item.payload?.actorName ?? 'کاربر'} برای مقاله شما نظر گذاشت`; if (item.type === 'new_article') return `مقاله تازه از ${item.payload?.actorName ?? 'نویسنده'}`; return 'اعلان جدید'; } // ── Footer ────────────────────────────────────────────────────────────────── function Footer() { const { navigate } = useNav(); return ( ); } // ── Newsletter Form ───────────────────────────────────────────────────────── function NewsletterForm() { const [email, setEmail] = useState(''); const [state, setState] = useState('idle'); const [captcha, setCaptcha] = useState({ captchaId: '', userSolution: '' }); const toast = useToast(); const submit = async (e) => { e.preventDefault(); if (!email.includes('@') || !email.includes('.')) { toast('لطفاً یک ایمیل معتبر وارد کنید', 'error'); return; } if (!captcha.captchaId || !captcha.userSolution.trim()) { toast('لطفاً کد امنیتی را وارد کنید', 'error'); return; } try { const res = await contentApi.subscribeNewsletter(email, captcha.captchaId, captcha.userSolution); setState('done'); toast(res?.alreadySubscribed ? 'این ایمیل قبلاً ثبت شده است' : 'با موفقیت عضو خبرنامه شدید!', res?.alreadySubscribed ? 'warning' : 'success'); } catch (err) { if (err instanceof ApiError && err.status === 429) toast('تعداد درخواست‌ها از حد مجاز گذشت؛ کمی بعد دوباره تلاش کنید', 'warning'); else if (err instanceof ApiError && err.status === 400) toast('کد امنیتی نامعتبر است', 'error'); else toast('خطا در ثبت عضویت خبرنامه', 'error'); } }; if (state === 'done') return (

✓

عضویت شما ثبت شد!

جدیدترین مقاله‌های تکناو را در ایمیل دریافت خواهید کرد.

); return (

setEmail(e.target.value)} type="email" placeholder="آدرس ایمیل شما" style={{ flex: 1, minWidth: 200, ...inputStyle }} dir="rtl" /> ); } // ── Skeleton Loader ───────────────────────────────────────────────────────── function SkeletonLoader({ lines = 3, height = 16 }) { return (

{Array.from({ length: lines }).map((_, i) => (

))}

); } // ── Confirm Modal ─────────────────────────────────────────────────────────── function ConfirmModal({ msg, onConfirm, onCancel }) { useEffect(() => { const h = (e) => { if (e.key === 'Escape') onCancel(); }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [onCancel]); return (

تأیید عملیات

{msg}

); } // ── Empty State ───────────────────────────────────────────────────────────── function EmptyState({ title = 'نتیجه‌ای یافت نشد', subtitle = 'با فیلترهای دیگر امتحان کنید' }) { return (

◎

{title}

{subtitle}

); } // ── Reading Progress ──────────────────────────────────────────────────────── function ReadingProgress() { const [pct, setPct] = useState(0); useEffect(() => { const h = () => { const el = document.documentElement; const scroll = el.scrollTop || document.body.scrollTop; const total = el.scrollHeight - el.clientHeight; setPct(total > 0 ? (scroll / total) * 100 : 0); }; window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h); }, []); return (

); } // ── Author Avatar ─────────────────────────────────────────────────────────── function AuthorAvatar({ author, size = 40 }) { return (

{author.initials || author.name.slice(0, 2)}

); } // ── Shared styles ─────────────────────────────────────────────────────────── const iconBtnStyle = { background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 8, transition: 'background 0.15s', }; const pillBtn = { border: 'none', cursor: 'pointer', padding: '8px 18px', borderRadius: 8, fontSize: 13, fontFamily: 'Vazirmatn,sans-serif', fontWeight: 600, transition: 'all 0.15s', display: 'inline-flex', alignItems: 'center', gap: 6, }; const inputStyle = { border: '1px solid #E4DDD2', borderRadius: 8, padding: '9px 14px', fontSize: 13, fontFamily: 'Vazirmatn,sans-serif', background: '#fff', color: '#263238', outline: 'none', width: '100%', }; // ── Streak Widget ─────────────────────────────────────────────────────────── function StreakWidget() { const { user } = useAuth(); const [data, setData] = useState(null); useEffect(() => { if (user) engagementApi.getStreaks().then(setData).catch(() => {}); }, [user]); if (!user || !data || data.streak === 0) return null; return (

🔥

{data.streak.toLocaleString('fa-IR')} روز مطالعه متوالی!

به یادگیری ادامه دهید

); } // ── Continue Reading Bar ─────────────────────────────────────────────────── function ContinueReadingBar() { const { user } = useAuth(); const { navigate } = useNav(); const [data, setData] = useState(null); useEffect(() => { if (user) engagementApi.getStreaks().then(setData).catch(() => {}); }, [user]); if (!user || !data || !data.continueReading?.length) return null; return (

ادامه مطالعه: {data.continueReading.map(a => ( ))}

); } // ── Reading List Modal ────────────────────────────────────────────────────── function ReadingListModal({ articleId, onDone }) { const [lists, setLists] = useState([]); const [loading, setLoading] = useState(true); const [newListName, setNewListName] = useState(''); const toast = useToast(); const load = useCallback(() => { setLoading(true); engagementApi.listReadingLists() .then(res => setLists(res.items ?? [])) .finally(() => setLoading(false)); }, []); useEffect(() => { load(); }, [load]); const add = async (listId) => { try { await engagementApi.addToReadingList(listId, articleId); toast('به لیست اضافه شد'); onDone(); } catch (e) { toast('در این لیست موجود است', 'warning'); } }; const create = async (e) => { e.preventDefault(); if (!newListName.trim()) return; try { const res = await engagementApi.createReadingList(newListName); setNewListName(''); add(res.list.id); } catch { toast('خطا در ایجاد لیست', 'error'); } }; return (

ذخیره در لیست مطالعه

{loading ? : (

{lists.map(list => ( ))}

)}

); } // ── Push Notification Prompt ──────────────────────────────────────────────── import { pushApi } from './src/lib/engagement-api.js'; function PushNotificationPrompt({ user }) { const [visible, setVisible] = useState(false); const toast = useToast(); useEffect(() => { if ( user && 'PushManager' in window && 'serviceWorker' in navigator && typeof Notification !== 'undefined' && Notification.permission === 'default' && !localStorage.getItem('push_prompt_dismissed') ) { setVisible(true); } }, [user]); if (!visible) return null; const handleEnable = async () => { try { const perm = await Notification.requestPermission(); if (perm === 'granted') { await pushApi.subscribe(); toast('اعلان‌های مرورگر فعال شد'); } } catch { // ignore — user may have denied or push not configured } setVisible(false); }; const dismiss = () => { localStorage.setItem('push_prompt_dismissed', '1'); setVisible(false); }; return (

🔔

اعلان‌های مرورگر

مقالات جدید را از دست ندهید

); } // ── Install Prompt ────────────────────────────────────────────────────────── function InstallPrompt() { const [deferredPrompt, setDeferredPrompt] = useState(null); const [visible, setVisible] = useState(false); useEffect(() => { const handler = (e) => { e.preventDefault(); setDeferredPrompt(e); setVisible(true); }; window.addEventListener('beforeinstallprompt', handler); return () => window.removeEventListener('beforeinstallprompt', handler); }, []); const install = async () => { if (!deferredPrompt) return; deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; if (outcome === 'accepted') setVisible(false); setDeferredPrompt(null); }; if (!visible) return null; return (

نصب اپلیکیشن تکناو

دسترسی سریع‌تر و آفلاین به مقالات

); } function useViewportPrefetch(ref, slug) { useEffect(() => { if (!ref.current || !slug) return; const conn = navigator.connection; if (conn && (conn.saveData || /2g|3g/.test(conn.effectiveType))) { return; } const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const prefetch = () => { contentApi.getArticle(slug).catch(() => {}); }; if ('requestIdleCallback' in window) { window.requestIdleCallback(prefetch); } else { setTimeout(prefetch, 200); } observer.disconnect(); } }); }, { rootMargin: '100px' }); observer.observe(ref.current); return () => observer.disconnect(); }, [ref, slug]); } export { ToastProvider, useToast, NavProvider, useNav, AuthProvider, useAuth, CategoryBadge, TypeBadge, StatusBadge, RoleBadge, AuthorAvatar, Header, Footer, NewsletterForm, SkeletonLoader, ConfirmModal, EmptyState, ReadingProgress, StreakWidget, ContinueReadingBar, ReadingListModal, InstallPrompt, PushNotificationPrompt, iconBtnStyle, pillBtn, inputStyle, useViewportPrefetch, };