/* ============================================================ CONSUMER PAGES — Article, Category, Login, Bookmarks, Account window: Article, Category, Login, Bookmarks, Account ============================================================ */ (function () { const { useApp, H, Icon, ArticleCard, ImgPH, MediaFrame, Views, ReactionBar } = window; const HTML_RX = /<\/?[a-z][\s\S]*?>/i; /* ---------------- Article detail ---------------- The list/featured endpoints return summaries (no body), so when the user opens an article we fetch the full detail. We keep the summary as a fast placeholder, then merge the body+media when the detail arrives. */ function Article({ id }) { const app = useApp(); const summary = app.state.articles.find(x => x.id === id) || null; const [detail, setDetail] = React.useState(null); const [loading, setLoading] = React.useState(true); const viewedRef = React.useRef(false); React.useEffect(() => { let cancelled = false; setLoading(true); setDetail(null); window.API.publicArticles.detail(id) .then(d => { if (cancelled) return; // mapArticle normalises field names (titleBn → bn, etc). const mapped = window.AppStore && window.AppStore.mapDetail ? window.AppStore.mapDetail(d) : d; setDetail(mapped); // the list endpoints carry no reaction counts; the detail DTO does — // push them into articleState so ReactionBar shows persisted counts app.syncArticleState(id, { views: mapped.views, reactions: mapped.reactions }); }) .catch(() => { /* leave detail null; we render the summary fallback */ }) .finally(() => { if (!cancelled) setLoading(false); }); return () => { cancelled = true; }; }, [id]); React.useEffect(() => { if (!viewedRef.current && (detail || summary)) { viewedRef.current = true; app.addView(id); } }, [id, detail, summary]); const a = detail || summary; if (!a && loading) return

{H.t("loading")}

; if (!a) return

{H.t("notFound")}

; const st = app.state.articleState[a.id] || { views: a.views || 0 }; const cat = H.catBy(a.cat); const marked = app.state.bookmarks.includes(a.id); const related = app.state.articles.filter(x => x.cat === a.cat && x.id !== a.id).slice(0, 3); const more = app.state.articles.filter(x => x.id !== a.id).slice(0, 4); const en = app.state.lang === "en"; const primaryBody = (en ? a.body_en : a.body_bn) || ""; const secondaryBody = (en ? a.body_bn : a.body_en) || ""; const body = primaryBody.trim() ? primaryBody : secondaryBody; const fellBack = !primaryBody.trim() && !!secondaryBody.trim(); const isHtmlBody = HTML_RX.test(body); const plainParas = (!isHtmlBody && body) ? body.split("\n\n") : []; // Summary-only articles (feeds that ship 1-2 sentences and extraction // failed): the body just duplicates the excerpt, so we suppress it and // point readers at the source instead. bodySource comes from the backend; // the string comparison covers articles ingested before that field existed. const excerptText = (H.pick(a, "excerpt") || "").trim(); const isSummaryOnly = a.bodySource === "summary" || (!!body && !isHtmlBody && body.trim() === excerptText); const showBody = !!body && !isSummaryOnly; return (
{/* breadcrumb */}
{a.source === "rss" && {H.t("source")}: {a.feed}}

{H.pick(a, "title")}

{H.pick(a, "excerpt")}

{/* byline */}
{H.pick(a, "author").charAt(0)}
{H.pick(a, "author")}
{H.rel(a.ts)}{H.num(a.mins)} {H.t("minRead")}
{/* hero media (image, video, embed, or audio) */}
{H.t("imageCaption")}
{/* body */}
{fellBack && showBody && (

{en ? "Source language: Bengali" : "উৎস ভাষা: ইংরেজি"}

)} {!body && loading && (

{H.t("loading")}

)} {!showBody && !loading && !a.sourceLink && !isSummaryOnly && (

{en ? "Full story not available." : "সম্পূর্ণ প্রতিবেদন পাওয়া যায়নি।"}

)} {showBody && isHtmlBody && (
)} {showBody && !isHtmlBody && (
{plainParas.map((p, idx) => (

{p}

))}
)} {!showBody && !loading && a.sourceLink && (

{en ? "Only a summary of this story is available here." : "এখানে এই প্রতিবেদনের শুধু সারসংক্ষেপ পাওয়া যাচ্ছে।"}

{en ? `Read the full article at ${a.feed || "the source"}` : `${a.feed || "উৎস"}-এ সম্পূর্ণ প্রতিবেদন পড়ুন`}
)}
{/* reactions */}
{H.t("yourReaction")}
{/* related */}

{H.t("related")}

{related.map(r => )}
{/* sidebar */}
); } /* ---------------- Category page ---------------- */ function Category({ slug }) { const app = useApp(); const cat = H.catBy(slug); const [sort, setSort] = React.useState("new"); let list = app.state.articles.filter(a => a.cat === slug); if (sort === "new") list = [...list].sort((a, b) => b.ts - a.ts); else list = [...list].sort((a, b) => ((app.state.articleState[b.id] || {}).views || 0) - ((app.state.articleState[a.id] || {}).views || 0)); const lead = list[0], rest = list.slice(1); return (
{app.state.lang === "en" ? cat.bn : cat.en}

{H.pick(cat, "label")}

{[["new", H.t("sortNew")], ["top", H.t("sortTop")]].map(([k, l]) => ( ))}
{!list.length ?

{H.t("noCategoryNews")}

: (
{rest.map(a => )}
)}
); } /* ---------------- Login / Signup ---------------- */ function Login() { const app = useApp(); const [mode, setMode] = React.useState("login"); const [name, setName] = React.useState(""); const [email, setEmail] = React.useState(""); const [pw, setPw] = React.useState(""); const submit = async (e) => { e.preventDefault(); try { await app.login(mode === "signup" ? name : (name || "পাঠক"), email || "reader@example.com", pw || "probhat_demo", mode); app.nav("home"); } catch (_) { /* toast shown by store */ } }; return (
{app.state.lang === "en" ? "Probhat" : "প্রভাত"}.

{app.state.lang === "en" ? <>Read. React.
Save. : <>পড়ুন। প্রতিক্রিয়া দিন।
সংরক্ষণ করুন।}

{app.state.lang === "en" ? "Create an account to save your favourite stories, react, and get news tuned to your interests." : "একটি অ্যাকাউন্ট খুলে প্রিয় সংবাদ সংরক্ষণ করুন, প্রতিক্রিয়া জানান এবং নিজের পছন্দ অনুযায়ী খবর পান।"}

© {H.num(2026)} {app.state.lang === "en" ? "Probhat" : "প্রভাত"}

{mode === "login" ? H.t("welcomeBack") : H.t("newAccount")}

{mode === "login" ? H.t("loginSubtitle") : H.t("signupSubtitle")}

{mode === "signup" && ( )}
{H.t("or")}

{mode === "login" ? H.t("noAccount") + " " : H.t("haveAccount") + " "}

); } /* ---------------- Bookmarks ---------------- */ function Bookmarks() { const app = useApp(); const list = app.state.bookmarks.map(id => app.state.articles.find(a => a.id === id)).filter(Boolean); return (

{H.t("bookmarks")}

{H.num(list.length)}
{!list.length ? (

{H.t("noBookmarks")}

{H.t("bookmarkHint")}

) : (
{list.map(a => )}
)}
); } /* ---------------- Account ---------------- */ function Account() { const app = useApp(); const u = app.state.user; if (!u) { app.nav("login"); return null; } const reactCount = Object.keys(app.state.myReactions).length; return (
{u.initials}

{u.name}

{u.email}

{[[H.t("bookmarks"), app.state.bookmarks.length], [H.t("reactions"), reactCount], [H.t("read"), 12]].map(([l, v]) => (
{H.num(v)}
{l}
))}
); } /* ---------------- Static org pages (about/contact/…) ---------------- */ function StaticPage({ slug }) { const app = useApp(); const p = (window.SEED.ORG_PAGES || []).find(x => x.slug === slug); if (!p) { return (

{H.t("notFound")}

); } const body = app.state.lang === "en" ? (p.body_en || p.body_bn) : (p.body_bn || p.body_en); return (

{H.pick(p, "label")}

{body.split(/\n\n+/).map((para, i) => (

{para}

))}
); } Object.assign(window, { Article, Category, Login, Bookmarks, Account, StaticPage }); })();