{/* Primary bar */}

{isMobile && ( )} {/* Logo */}

PodcastRAG {!isMobile && beta}

{/* Desktop: main nav items inline */} {!isMobile && ( )} {/* Right: lang toggle + user / sign-in (desktop only — mobile lang is in dropdown) */} {!isMobile && (

{user ? ( ) : ( )}

)} {isMobile && user && ( )} {isMobile && !user && ( )}

{/* Mobile hamburger dropdown */} {isMobile && menuOpen && (

setMenuOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 998 }} /> ); }; const UserMenu = ({ user, lang, open, setOpen, onLogout, compact }) => { const t = lang === 'zh'; const ref = React.useRef(null); const quotaLow = user.quota_remaining === 0; React.useEffect(() => { if (!open) return; const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onClick); return () => document.removeEventListener('mousedown', onClick); }, [open, setOpen]); return (

{open && (

{user.name || user.email.split('@')[0]}

{user.email}

{t ? '角色' : 'Role'}{user.role}

{t ? '剩餘額度' : 'Remaining quota'} {user.quota_remaining}

{t ? '累計查詢' : 'Total queries'}{user.total_queries}

)}

); }; const TopNavItem = ({ icon, label, active, onClick, secondary, mobile }) => { const [hovered, setHovered] = React.useState(false); return ( ); }; // --- Confirm Modal (for destructive actions) --- const ConfirmModal = ({ open, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', danger = false, loading = false, onConfirm, onCancel }) => { const { isMobile } = useViewport(); if (!open) return null; return (

e.stopPropagation()} style={{ background: TOKEN.surface, border: `1px solid ${TOKEN.surfaceBorder}`, borderRadius: 14, padding: isMobile ? '18px 18px' : '22px 26px', width: 'min(95vw, 520px)', boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }}>

{title}

{message}

{cancelLabel} {confirmLabel}

); }; // --- Form Modal (for non-destructive form submissions) --- const FormModal = ({ open, title, children, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, submitDisabled = false }) => { const { isMobile } = useViewport(); if (!open) return null; return (

{title}

{children}

{cancelLabel} {confirmLabel}

); }; // --- OverflowMenu --- // items: [{ label, icon?, onClick, disabled?, danger? }] // Renders a "⋯" trigger button; menu opens on click, closes on backdrop click or ESC. const OverflowMenu = ({ items, ariaLabel = 'More actions' }) => { const [open, setOpen] = React.useState(false); const { isMobile } = useViewport(); React.useEffect(() => { if (!open) return undefined; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); return (

{open && (

setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'transparent' }} /> )}

); }; // --- ProgressCounts (transcription status row) --- const ProgressCounts = ({ counts, lang }) => { const t = lang === 'zh'; const labels = t ? { pending: '待處理', processing: '處理中', completed: '完成', failed: '失敗' } : { pending: 'Pending', processing: 'Processing', completed: 'Completed', failed: 'Failed' }; const colors = { pending: TOKEN.textSecondary, processing: TOKEN.accent, completed: TOKEN.success, failed: TOKEN.danger, }; return (

{['pending', 'processing', 'completed', 'failed'].map(k => (

{counts?.[k] ?? 0} {labels[k]}

))}

); }; // --- categoryToBadge: map api_health error_category to {variant, label} --- // Single source of truth for category→colour mapping shared by ScheduleTab // and ExternalApiStatusTab so one category yields one consistent colour. const categoryToBadge = (category, lang) => { const t = lang === 'zh'; const map = { quota_exceeded: { variant: 'danger', label: t ? '額度不足' : 'Quota Exceeded' }, auth_error: { variant: 'danger', label: t ? '認證錯誤' : 'Auth Error' }, rate_limited: { variant: 'warning', label: t ? '速率受限' : 'Rate Limited' }, server_error: { variant: 'warning', label: t ? '伺服器錯誤' : 'Server Error' }, network_error: { variant: 'warning', label: t ? '網路錯誤' : 'Network Error' }, unknown: { variant: 'muted', label: t ? '未知錯誤' : 'Unknown Error' }, }; return map[category] || map.unknown; }; // --- formatRelativeTime: ts_ms epoch → "2 分鐘前" / "2 minutes ago" --- const formatRelativeTime = (tsMs, lang) => { if (!tsMs) return ''; const t = lang === 'zh'; const diffSec = Math.max(0, Math.floor((Date.now() - tsMs) / 1000)); if (diffSec < 60) return t ? '剛剛' : 'just now'; const m = Math.floor(diffSec / 60); if (m < 60) return t ? `${m} 分鐘前` : `${m} minute${m === 1 ? '' : 's'} ago`; const h = Math.floor(m / 60); if (h < 24) return t ? `${h} 小時前` : `${h} hour${h === 1 ? '' : 's'} ago`; const d = Math.floor(h / 24); return t ? `${d} 天前` : `${d} day${d === 1 ? '' : 's'} ago`; }; // Episode blurb — AI summary preferred, fallback to RSS description. // Failure (`pending` / `running` / `failed`) is invisible to users — they // just see the original RSS description (D3 in episode-ai-summary design). const EpisodeBlurb = ({ episode, lang, style }) => { if (!episode) return null; const useAi = episode.ai_summary_status === 'done' && episode.ai_summary; const text = useAi ? episode.ai_summary : (episode.description || ''); if (!text) return null; const baseStyle = { color: TOKEN.textSecondary, fontSize: 12, lineHeight: 1.55, margin: 0, overflow: 'hidden', display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 3, ...(style || {}), }; // RSS description often contains HTML; AI summary is plain text. if (useAi) { return

{text}

; } return

; }; Object.assign(window, { API_BASE, TOKEN, Icon, Badge, Btn, Input, TopNav, ConfirmModal, FormModal, OverflowMenu, ProgressCounts, categoryToBadge, formatRelativeTime, useViewport, EpisodeBlurb });