// Shared components for die Deutsche Bibliothek const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- HOOKS ---------- const useHash = () => { const [hash, setHash] = useState(window.location.hash || "#/"); useEffect(() => { const onHash = () => setHash(window.location.hash || "#/"); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); return hash; }; const useStore = (key, initial) => { const [value, setValue] = useState(() => { try { const raw = localStorage.getItem("ddb:" + key); return raw ? JSON.parse(raw) : initial; } catch { return initial; } }); useEffect(() => { try { localStorage.setItem("ddb:" + key, JSON.stringify(value)); } catch {} }, [key, value]); return [value, setValue]; }; // ---------- LEVEL BADGE ---------- const Level = ({ value }) => ( {value} ); // ---------- COVER ---------- const BookCover = ({ book, size = "md" }) => { const theme = book.theme || "ink"; return (
{book.level}

{book.title}

{book.subtitle &&
{book.subtitle}
} A. Maier
); }; // ---------- THEME SWITCH ---------- const THEME_ICON = { light: ( ), dark: ( ), system: ( ), }; const ThemeSwitch = ({ value, onChange, lang }) => { const t = UI_STRINGS[lang]; const labels = { light: t.themeLight, dark: t.themeDark, system: t.themeSystem }; return (
{["light", "dark", "system"].map(k => ( ))}
); }; // ---------- HEADER ---------- const Header = ({ lang, setLang, theme, setTheme, streak, route, user, onSignInClick, onSignOut }) => { const t = UI_STRINGS[lang]; const active = (path) => route.startsWith(path) ? "nav-link active" : "nav-link"; const [menuOpen, setMenuOpen] = useState(false); const [navOpen, setNavOpen] = useState(false); const menuRef = useRef(null); useEffect(() => { const onDoc = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); // Close the mobile menu whenever the route changes. useEffect(() => { setNavOpen(false); }, [route]); const initials = user ? user.name.split(/\s+/).map(s => s[0]).join("").slice(0,2).toUpperCase() : ""; return ( ); }; // ---------- BOOK CARD ---------- const BookCard = ({ book, lang, status, progress }) => { const t = UI_STRINGS[lang]; return (
{fmtReadingTime(book.minutes, t.minutes)} · {book.pages} {t.pages}

{book.title}

{book.subtitle}
{status && status !== "new" && (
{status === "done" ? t.finished : status === "in" ? `${Math.round(progress || 0)}% · ${t.inProgress}` : t.notStarted}
)}
); }; // ---------- WORD POPUP ---------- const WordPop = ({ data, position, onClose, onHighlight, onKnown, onEdit, currentColor, isKnown, lang }) => { const t = UI_STRINGS[lang]; const ref = useRef(null); useEffect(() => { const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); }; const onEsc = (e) => { if (e.key === "Escape") onClose(); }; setTimeout(() => document.addEventListener("mousedown", onClick), 0); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("mousedown", onClick); document.removeEventListener("keydown", onEsc); }; }, [onClose]); if (!data) return null; const colors = ["yellow", "green", "pink", "blue"]; return (
{data.word}
{data.pos}
{data.lemma && data.lemma !== data.word && (
{t.baseForm} {data.lemma}
)}
EN {data.en}
RU {data.ru}
onHighlight(null)} title={t.notTranslated}>×
{colors.map(c => (
onHighlight(c)}>
))}
{onEdit && ( )}
); }; // ---------- TAP-WORD TEXT ---------- // Tokenises text into words / whitespace, then overlays any saved multi-word // phrases that occur in this paragraph. Phrases are matched longest-first // so "Guten Tag" wins over "Tag" alone. const TappableText = ({ text, onWord, onPhrase, highlights, knownWords, phrases = [] }) => { const parts = useMemo(() => { // Sort phrases longest-first; lowercase compare so case differences don't break matches. const sorted = phrases .filter(p => p && p.text && p.text.trim().length > 0) .slice() .sort((a, b) => b.text.length - a.text.length); const lowerText = text.toLowerCase(); const out = []; let i = 0; while (i < text.length) { // Try phrase match at this index let matched = null; for (const ph of sorted) { const t = ph.text.toLowerCase(); if (lowerText.startsWith(t, i)) { // Ensure phrase starts at a word boundary const prev = text[i - 1]; if (i === 0 || !/[A-Za-zÄÖÜäöüß]/.test(prev || "")) { matched = { ...ph, raw: text.slice(i, i + ph.text.length) }; break; } } } if (matched) { out.push({ kind: "phrase", t: matched.raw, color: matched.color, key: matched.key }); i += matched.raw.length; continue; } const remaining = text.slice(i); const wm = /^[A-Za-zÄÖÜäöüß]+/.exec(remaining); if (wm) { out.push({ kind: "word", t: wm[0] }); i += wm[0].length; continue; } const ws = /^[^A-Za-zÄÖÜäöüß]+/.exec(remaining); if (ws) { out.push({ kind: "ws", t: ws[0] }); i += ws[0].length; continue; } i++; } return out; }, [text, phrases]); return ( <> {parts.map((p, i) => { if (p.kind === "ws") return {p.t}; if (p.kind === "phrase") { let cls = "phrase"; if (p.color) cls += " hl-" + p.color; return ( { e.stopPropagation(); onPhrase && onPhrase(e, p.key); }} >{p.t} ); } const lookup = lookupWord(p.t); const key = lookup ? lookup.word : p.t; const color = highlights[key]; const isKnown = knownWords.has(key); let cls = "word"; if (color) cls += " hl-" + color; if (isKnown && !color) cls += " known"; return ( onWord(e, p.t)}> {p.t} ); })} ); }; // ---------- UPLOAD MODAL ---------- const UploadModal = ({ onClose, onAdd, lang }) => { const t = UI_STRINGS[lang]; const [title, setTitle] = useState(""); const [level, setLevel] = useState("A1"); const [theme, setTheme] = useState("forest"); const [subtitle, setSubtitle] = useState(""); const [blurb, setBlurb] = useState(""); const [content, setContent] = useState(""); const fileRef = useRef(null); const handleFile = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { setContent(ev.target.result); if (!title) setTitle(file.name.replace(/\.(txt|md)$/, "")); }; reader.readAsText(file); }; const submit = () => { if (!title.trim() || !content.trim()) return; const paragraphs = content.split(/\n+/).filter(Boolean); // Split into ~3 chapters const perChapter = Math.max(1, Math.ceil(paragraphs.length / 3)); const chapters = []; for (let i = 0; i < paragraphs.length; i += perChapter) { chapters.push({ title: t.chapter + " " + (chapters.length + 1), minutes: Math.max(2, Math.round(paragraphs.slice(i, i + perChapter).join(" ").split(/\s+/).length / 80)), text: paragraphs.slice(i, i + perChapter), }); } const wordCount = content.split(/\s+/).filter(Boolean).length; const book = { id: "user-" + Date.now(), title: title.trim(), subtitle: subtitle.trim() || t.uploaded, level, author: "Andrew Maier", theme, minutes: Math.max(2, Math.round(wordCount / 80)), words: wordCount, pages: Math.max(4, Math.round(wordCount / 60)), year: new Date().getFullYear(), blurb: { de: blurb || "Eigenes Buch.", en: blurb || "Custom book.", ru: blurb || "Своя книга." }, chapters, vocab: [], userAdded: true, }; onAdd(book); onClose(); }; return (
e.stopPropagation()}>

{t.addOwn}

{t.addOwnSub}

setTitle(e.target.value)} placeholder={t.titlePlaceholder} />
setSubtitle(e.target.value)} placeholder={t.subtitlePlaceholder} />
); }; // Site-wide copyright footer, rendered once below every route. const Footer = ({ lang }) => { const t = UI_STRINGS[lang]; return ( ); }; Object.assign(window, { useHash, useStore, Level, BookCover, Header, ThemeSwitch, BookCard, WordPop, TappableText, UploadModal, Footer });