+
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 (
+
+ );
+}
+
+// ── 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,
+};
+