// fphoto.jsx — App detail page (theme-tokenized). Exports to window. function Detail({ app, locale, t, onNav, theme }) { const accent = ACCENTS[app.accent]?.base || "var(--accent)"; const c = app.content[locale]; const baseWin = app.platforms?.windows; const [downloadMeta, setDownloadMeta] = useState(null); const win = baseWin && downloadMeta ? { ...baseWin, ...downloadMeta } : baseWin; const [selectedShotId, setSelectedShotId] = useState(null); const selectedShot = app.screenshots.find((shot) => shot.id === selectedShotId); const selectedShotSrc = selectedShot ? shotSrc(selectedShot, theme) : null; useEffect(() => { if (!selectedShotId) return; const onKeyDown = (event) => { if (event.key === "Escape") setSelectedShotId(null); }; window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [selectedShotId]); useEffect(() => { if (!app.releaseApiUrl || !baseWin?.fileName) return; let cancelled = false; fetch(app.releaseApiUrl, { headers: { Accept: "application/vnd.github+json" } }) .then((response) => response.ok ? response.json() : Promise.reject(new Error("Release metadata unavailable"))) .then((release) => { const asset = release.assets?.find((item) => item.name === baseWin.fileName); if (!asset || cancelled) return; setDownloadMeta({ fileName: asset.name, fileSize: formatFileSize(asset.size), url: asset.browser_download_url || baseWin.url }); }) .catch(() => {}); return () => { cancelled = true; }; }, [app.releaseApiUrl, baseWin?.fileName, baseWin?.url]); return (
{/* ===== HERO ===== */}

{app.name}

v{app.version}

{c.tagline}

{c.longDescription}

{["windows", "macos", "linux"].filter((p) => app.platforms?.[p]).map((p) => ( ))}
{/* ===== SCREENSHOTS ===== */}
{app.screenshots.map((s) => { const src = shotSrc(s, theme); return (
{src ? : }
{s.caption[locale]}
); })}
{selectedShot && selectedShotSrc && (
setSelectedShotId(null)} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,0.58)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
event.stopPropagation()} style={{ width: "min(94vw, 1180px)", maxHeight: "88vh", background: "var(--surface)", border: "2px solid var(--ink)", boxShadow: "8px 8px 0 var(--shadow)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
{selectedShot.caption[locale]}
{selectedShot.caption[locale]}
)} {/* ===== FEATURES + USAGE ===== */}
    {c.features.map((f, i) => (
  • {f}
    • ))}
    {c.usageSteps.map((s, i) => (
  1. {i + 1} {s}
    2. ))}
{/* ===== SPECS + NOTES ===== */}
{t.detail.releaseNotes} ↗
    {c.notes.map((n, i) => (
  • ⚠️ {n}
    • ))}
{/* ===== FOOTER CTA ===== */}

{t.footerCta.title}

{t.footerCta.desc}

}>{t.footerCta.btn}
{win?.fileName} · {win?.fileSize}
); } function DownloadPanel({ app, accent, win, locale, t }) { const order = ["windows", "macos", "linux"]; return (
{t.section.download} v{app.version}
{win?.status === "available" && (
} full size="lg">{t.cta.downloadWin}
{win.fileName} · {win.fileSize}
)}
{order.filter((p) => app.platforms?.[p] && p !== "windows").map((p) => { const plat = app.platforms[p]; return (
{plat.label}
); })}
); } function SpecRow({ label, value, mono, last }) { if (!value) return null; return (
{label} {value}
); } function shotSrc(shot, theme) { return theme === "dark" ? shot.srcDark : shot.srcLight; } function formatFileSize(bytes) { if (!Number.isFinite(bytes) || bytes <= 0) return null; const mb = bytes / (1024 * 1024); return `${mb >= 100 ? mb.toFixed(1) : Math.round(mb)} MB`; } function fmtDate(iso, locale) { if (!iso) return "—"; const d = new Date(iso); return d.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { year: "numeric", month: "short", day: "numeric" }); } Object.assign(window, { Detail, DownloadPanel, SpecRow, shotSrc, formatFileSize, fmtDate });