// Folio — small pieces every screen shares. Loaded first, because the screens rely on these names.
const { useState, useEffect, useRef, useMemo } = React;
const THEME = window.LocusTheme;
// type scale shared by every screen: TY.title 28 · TY.body 17 · TY.label 15 · TY.caption 13
const TY = THEME.TYPE;
const HAIR = '1px solid var(--line)';
// Enter that means "submit", not "confirm this word" in a Chinese input method. Safari reports the
// confirming Enter with keyCode 229 and isComposing already false, so both have to be checked.
const isSubmitEnter = e => e.key === 'Enter' && !e.nativeEvent.isComposing && e.keyCode !== 229;
// The grid row at the top of every page.
const headerBar = line => ({ display: 'flex', alignItems: 'stretch', height: 52, flexShrink: 0, borderTop: line, borderBottom: line });
// Tints the phone's status bar to match the page while it is open. Pages overlap during a transition and
// close in any order, so the colours are kept as a list: the newest page wins, and with none open it is the default.
const statusBarMeta = document.querySelector('meta[name="theme-color"]');
const statusBarDefault = statusBarMeta?.getAttribute('content');
const statusBarTints = [];
const paintStatusBar = () => statusBarMeta?.setAttribute('content', statusBarTints[statusBarTints.length - 1]?.color || statusBarDefault);
function useStatusBarTint(color) {
useEffect(() => {
if (!color) return;
const tint = { color };
statusBarTints.push(tint);
paintStatusBar();
return () => {
statusBarTints.splice(statusBarTints.indexOf(tint), 1);
paintStatusBar();
};
}, [color]);
}
// The paperclip: photos from one post are clipped together.
function ClipIcon({ size = 16, style }) {
return (
);
}
// A small arrow plus the phone's own picker, invisible and laid over the whole cell, so tapping
// anywhere on the cell opens it. The parent must be position: relative. 17px stops iPhones zooming in.
function Picker({ label, value, options, onChange }) {
const known = options.some(o => o.value === value); // if not, start blank so every real option counts as a change
return <>
;
}
const IconSearch = () => (
);
// The one arrow used everywhere in the app (the back button's long arrow). dir='right' mirrors it.
// Inline in text it sits on the baseline; in a header cell it is 20px.
function Arrow({ dir = 'left', size = 16, style }) {
return (
);
}
// Tags you can remove, always 4 per row whatever their length. Empty cells fill the last row so the
// hairlines stay a clean grid; long tags end in an ellipsis (full name on hover / long-press title).
function TagGrid({ tags, onRemove, line }) {
if (!tags.length) return null;
const pad = (4 - tags.length % 4) % 4;
const cell = i => ({ minWidth: 0, borderTop: line, borderRight: i % 4 === 3 ? 'none' : line });
return (
{tags.map((t, i) =>
{t}
)}
{Array.from({ length: pad }, (_, j) => )}
);
}
// Long-press (phones) or right-click (computers) on a row. The tap that ends a long-press is swallowed.
function useLongPress(onLong, ms = 500) {
const timer = useRef(null), start = useRef(null), fired = useRef(false);
const clear = () => { clearTimeout(timer.current); timer.current = null; };
return {
onPointerDown: e => { fired.current = false; start.current = { x: e.clientX, y: e.clientY }; clear();
timer.current = setTimeout(() => { fired.current = true; onLong(); }, ms); },
onPointerMove: e => { if (start.current && Math.hypot(e.clientX - start.current.x, e.clientY - start.current.y) > 8) clear(); },
onPointerUp: clear, onPointerLeave: clear, onPointerCancel: clear,
onContextMenu: e => { e.preventDefault(); clear(); fired.current = true; onLong(); },
onClickCapture: e => { if (fired.current) { e.stopPropagation(); e.preventDefault(); fired.current = false; } },
style: { WebkitTouchCallout: 'none', WebkitUserSelect: 'none', userSelect: 'none' },
};
}
function LongPressRow({ as: Tag = 'button', onLong, children, style, ...rest }) {
const lp = useLongPress(onLong);
return {children};
}
// Opens the system photo picker from any button (must run inside the tap), then hands over the files.
function usePhotoPicker(onFiles) {
const ref = useRef(null);
const input = { const files = Array.from(e.target.files); e.target.value = ''; if (files.length) onFiles(files); }}/>;
return [() => ref.current?.click(), input];
}
// Remembers how far a page was scrolled (keyed by page + id), so going back lands where you left
// and the crossfade between drawer and capture pages never shows a jump.
const scrollMemory = {};
function useRememberedScroll(key) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
el.scrollTop = scrollMemory[key] || 0;
const save = () => { scrollMemory[key] = el.scrollTop; };
el.addEventListener('scroll', save, { passive: true });
return () => el.removeEventListener('scroll', save);
}, [key]);
return ref;
}
// -------- Shot: shows the stored screenshot, or the glyph when there is none --------
function useStoredImage(imageId) {
const [src, setSrc] = useState(null);
useEffect(() => {
let alive = true;
setSrc(null);
if (imageId) window.LocusImages.get(imageId).then((v) => { if (alive) setSrc(v); });
return () => { alive = false; };
}, [imageId]);
return src;
}
// fit='natural' shows the whole image at full width and its own height (for long screenshots)
function Shot({ imageId, glyph, fontSize = 18, style = {}, fit = 'cover' }) {
const src = useStoredImage(imageId);
return (
{src
? (fit === 'natural'
?
: )
: glyph}
);
}
// Space for the phone's own status bar / notch (the real one shows through).
function StatusBar() {
return ;
}
function Toast({ message, action, onAction, onDone }) {
// A toast with a button needs time to be tapped. onDone is left out on purpose: it changes on every redraw and would restart the clock.
useEffect(()=>{ const t = setTimeout(onDone, action ? 3200 : 1500); return ()=>clearTimeout(t); },[message, action]);
if (!message) return null;
return (