/* App shell — sidebar nav, header, screen routing, tweaks */
const { useState, useCallback, useEffect, useRef } = React;
/* ── Content language (內文 EN ↔ 中文) ──
A lightweight global toggle shared by the editor-only Notes + Discussion
pages. Persisted in localStorage; changes broadcast via a window event so
every mounted page re-renders. Only switches AUTHORED prose — live tweet
text and weekly LLM captions stay in their original language. */
window.__contentLang = window.__contentLang || (function () {
try { return localStorage.getItem('xw-content-lang') || 'en'; } catch (e) { return 'en'; }
})();
function setContentLang(l) {
window.__contentLang = l;
try { localStorage.setItem('xw-content-lang', l); } catch (e) {}
window.dispatchEvent(new Event('xw-content-lang-change'));
}
function useContentLang() {
var [lang, setLang] = useState(window.__contentLang || 'en');
useEffect(function () {
function onChange() { setLang(window.__contentLang || 'en'); }
window.addEventListener('xw-content-lang-change', onChange);
return function () { window.removeEventListener('xw-content-lang-change', onChange); };
}, []);
return lang;
}
/* Segmented EN | 中 toggle, matches the scatter toolbar pill style. */
function LangToggle() {
var lang = useContentLang();
return (
{[{ v: 'en', l: 'EN' }, { v: 'zh', l: '中' }].map(function (o) {
var active = lang === o.v;
return ;
})}
);
}
window.useContentLang = useContentLang;
window.LangToggle = LangToggle;
/* ── Hash routing ──
Each screen (and its sub-view) gets its own URL so visitors can deep-link,
bookmark, and use browser back/forward as prev/next. Format: #screen/sub,
e.g. #overview, #activity/timeline, #directory/methodology. */
var SUBVIEWS = {
directory: { valid: ['list', 'compare', 'scatter', 'diet', 'methodology'], def: 'list' },
activity: { valid: ['timeline', 'topics', 'frequency', 'heatmap'], def: 'timeline' },
attention: { valid: ['follows'], def: '' },
};
function isScreenAllowed(s) {
if (s === 'overview' || s === 'directory' || s === 'network' || s === 'attention' || s === 'activity') return true;
if ((s === 'editor' || s === 'discussion') && window.IS_EDITOR_MODE) return true;
return false;
}
function parseHash() {
var raw = (location.hash || '').replace(/^#\/?/, '');
var parts = raw.split('/').filter(Boolean);
return { screen: parts[0] || '', sub: parts[1] || '' };
}
function subFor(screen, dirView, actView, attnView) {
if (screen === 'directory') return dirView;
if (screen === 'activity') return actView;
if (screen === 'attention') return attnView;
return '';
}
/* ── SVG Icons ── */
function IconOverview() { return ; }
function IconDirectory() { return ; }
function IconNetwork() { return ; }
function IconAttention() { return ; }
function IconDigest() { return ; }
function IconActivity() { return ; }
function IconNotes() { return ; }
function IconDiscussion() { return ; }
/* ── Nav Item ── */
function NavItem({ icon, label, active, disabled, onClick }) {
var [hov, setHov] = useState(false);
return (
{active && }
{icon}
{label}
{disabled && Soon}
);
}
/* ── Header Sub-Tab ── */
function HeaderTab({ label, active, onClick }) {
var [hov, setHov] = useState(false);
return (
);
}
/* ── Tweak Defaults ── */
var TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "comfortable",
"accentScheme": "emerald-amber-rose",
"showExternalHighlight": true,
"emptyBioStyle": "dimmed"
}/*EDITMODE-END*/;
/* ── Error boundary ──
The frontend is transformed in-browser by @babel/standalone, so a runtime
throw inside any screen would otherwise blank the whole panel ("black
screen") with no hint of what failed. This catches it, shows the error +
stack, and — because we key it by route in App — clears itself when the
user navigates to another tab. */
class ScreenErrorBoundary extends React.Component {
constructor(props) { super(props); this.state = { error: null }; }
static getDerivedStateFromError(error) { return { error: error }; }
componentDidCatch(error, info) {
if (window.console) console.error('[ScreenErrorBoundary]', error, info && info.componentStack);
}
render() {
if (!this.state.error) return this.props.children;
var e = this.state.error;
return (
This view hit a runtime error.
The rest of the app still works — switch tabs in the sidebar, or reload. Details below.
);
}
}
/* Renders a children-producing function as a *descendant* of the boundary above.
Why: an error boundary cannot catch an "Element type is invalid" thrown when
one of its OWN direct children is undefined (e.g. a view whose