Upload 11 files

base.py

@@ -0,0 +1,31 @@
+SUPPORTED_LANGUAGES = [
+    {'name': 'Bulgarian', 'code': 'bg', 'small': True, 'regional': False, 'flag': '🇧🇬'},
+    {'name': 'Croatian', 'code': 'hr', 'small': True, 'regional': False, 'flag': '🇭🇷'},
+    {'name': 'Czech', 'code': 'cs', 'small': True, 'regional': False, 'flag': '🇨🇿'},
+    {'name': 'Danish', 'code': 'da', 'small': True, 'regional': False, 'flag': '🇩🇰'},
+    {'name': 'Dutch', 'code': 'nl', 'small': False, 'regional': False, 'flag': '🇳🇱'},
+    {'name': 'English', 'code': 'en', 'small': False, 'regional': False, 'flag': '🇬🇧'},
+    {'name': 'Estonian', 'code': 'et', 'small': True, 'regional': False, 'flag': '🇪🇪'},
+    {'name': 'Finnish', 'code': 'fi', 'small': True, 'regional': False, 'flag': '🇫🇮'},
+    {'name': 'French', 'code': 'fr', 'small': False, 'regional': False, 'flag': '🇫🇷'},
+    {'name': 'German', 'code': 'de', 'small': False, 'regional': False, 'flag': '🇩🇪'},
+    {'name': 'Greek', 'code': 'el', 'small': True, 'regional': False, 'flag': '🇬🇷'},
+    {'name': 'Hungarian', 'code': 'hu', 'small': True, 'regional': False, 'flag': '🇭🇺'},
+    {'name': 'Irish', 'code': 'ga', 'small': True, 'regional': False, 'flag': '🇮🇪'},
+    {'name': 'Italian', 'code': 'it', 'small': False, 'regional': False, 'flag': '🇮🇹'},
+    {'name': 'Latvian', 'code': 'lv', 'small': True, 'regional': False, 'flag': '🇱🇻'},
+    {'name': 'Lithuanian', 'code': 'lt', 'small': True, 'regional': False, 'flag': '🇱🇹'},
+    {'name': 'Maltese', 'code': 'mt', 'small': True, 'regional': False, 'flag': '🇲🇹'},
+    {'name': 'Polish', 'code': 'pl', 'small': False, 'regional': False, 'flag': '🇵🇱'},
+    {'name': 'Portuguese', 'code': 'pt', 'small': False, 'regional': False, 'flag': '🇵🇹'},
+    {'name': 'Romanian', 'code': 'ro', 'small': False, 'regional': False, 'flag': '🇷🇴'},
+    {'name': 'Slovak', 'code': 'sk', 'small': True, 'regional': False, 'flag': '🇸🇰'},
+    {'name': 'Slovenian', 'code': 'sl', 'small': True, 'regional': False, 'flag': '🇸🇮'},
+    {'name': 'Spanish', 'code': 'es', 'small': False, 'regional': False, 'flag': '🇪🇸'},
+    {'name': 'Swedish', 'code': 'sv', 'small': True, 'regional': False, 'flag': '🇸🇪'},
+    {'name': 'Catalan', 'code': 'ca', 'small': True, 'regional': True, 'flag': '🏴󠁥󠁳󠁣󠁴󠁿'},
+    {'name': 'Breton', 'code': 'br', 'small': True, 'regional': True, 'flag': '🏴'},
+    {'name': 'Welsh', 'code': 'cy', 'small': True, 'regional': True, 'flag': '🏴󠁧󠁢󠁷󠁬󠁳󠁿'},
+    {'name': 'Scottish Gaelic', 'code': 'gd', 'small': True, 'regional': True, 'flag': '🏴󠁧󠁢󠁳󠁣󠁴󠁿'},
+    {'name': 'Ukrainian', 'code': 'uk', 'small': False, 'regional': False, 'flag': '🇺🇦'}
+]

book_utils.py

@@ -0,0 +1,301 @@
+"""Utilities for parsing PDF, EPUB, MOBI files and extracting/generating covers.
+
+Content is returned as a list of segments. Each segment is either:
+  {"type": "text", "content": "..."} or
+  {"type": "image", "src": "/book_images/abc123_0.png"}
+This allows the frontend to render images inline between text blocks.
+"""
+
+import os
+import base64
+import fitz  # PyMuPDF
+import ebooklib
+from ebooklib import epub
+from PIL import Image, ImageDraw, ImageFont
+from bs4 import BeautifulSoup
+import mobi
+import shutil
+
+import settings
+
+IMG_COUNTER = 0
+
+
+def ensure_dirs():
+    os.makedirs(settings.UPLOAD_DIR, exist_ok=True)
+    os.makedirs(settings.COVERS_DIR, exist_ok=True)
+    os.makedirs(settings.IMAGES_DIR, exist_ok=True)
+
+
+def _save_image_bytes(img_bytes: bytes, book_id: str, ext: str = "png") -> str:
+    """Save image bytes to disk and return the URL path."""
+    global IMG_COUNTER
+    IMG_COUNTER += 1
+    fname = f"{book_id}_{IMG_COUNTER}.{ext}"
+    fpath = os.path.join(settings.IMAGES_DIR, fname)
+    with open(fpath, "wb") as f:
+        f.write(img_bytes)
+    return f"/book_images/{fname}"
+
+
+def _clean_pdf_text(raw: str) -> str:
+    """Clean PDF text: join mid-sentence line breaks, keep paragraph breaks."""
+    import re
+    lines = raw.split("\n")
+    result = []
+    for line in lines:
+        line = line.rstrip()
+        if not line:
+            # Empty line = paragraph break
+            if result and result[-1] != "\n":
+                result.append("\n")
+            continue
+        if result and result[-1] != "\n":
+            prev = result[-1]
+            # If previous line ends with sentence-ending punctuation, start new paragraph
+            if prev and prev[-1] in '.!?:;»""\u201d\u2019':
+                result.append("\n")
+                result.append(line)
+            elif prev and prev[-1] == '-':
+                # Hyphenated word across lines: join without space, remove hyphen
+                result[-1] = prev[:-1] + line
+            else:
+                # Mid-sentence break: join with space
+                result[-1] = prev + " " + line
+        else:
+            result.append(line)
+    # Collapse multiple newlines
+    text = "\n".join(result)
+    text = re.sub(r'\n{3,}', '\n\n', text)
+    return text.strip()
+
+
+def extract_pdf_content(filepath: str, book_id: str) -> list[dict]:
+    """Extract text and images from PDF, returning ordered segments."""
+    doc = fitz.open(filepath)
+    segments = []
+    for page in doc:
+        blocks = page.get_text("dict", flags=fitz.TEXT_PRESERVE_WHITESPACE)["blocks"]
+        # Collect raw text blocks and images sorted by position
+        page_text_parts = []
+        for block in sorted(blocks, key=lambda b: (b["bbox"][1], b["bbox"][0])):
+            if block["type"] == 0:  # text block
+                text = ""
+                for line in block.get("lines", []):
+                    for span in line.get("spans", []):
+                        text += span.get("text", "")
+                    text += "\n"
+                text = text.strip()
+                if text:
+                    page_text_parts.append(text)
+            elif block["type"] == 1:  # image block
+                # Flush accumulated text before the image
+                if page_text_parts:
+                    merged = _clean_pdf_text("\n".join(page_text_parts))
+                    if merged:
+                        # Split into paragraphs
+                        for para in merged.split("\n"):
+                            para = para.strip()
+                            if para:
+                                segments.append({"type": "text", "content": para})
+                    page_text_parts = []
+                try:
+                    img_bytes = block.get("image")
+                    if img_bytes and len(img_bytes) > 500:
+                        ext = block.get("ext", "png") or "png"
+                        src = _save_image_bytes(img_bytes, book_id, ext)
+                        segments.append({"type": "image", "src": src})
+                except Exception:
+                    pass
+        # Flush remaining text from this page
+        if page_text_parts:
+            merged = _clean_pdf_text("\n".join(page_text_parts))
+            if merged:
+                for para in merged.split("\n"):
+                    para = para.strip()
+                    if para:
+                        segments.append({"type": "text", "content": para})
+    doc.close()
+    return segments
+
+
+def extract_pdf_cover(filepath: str, book_id: str) -> str | None:
+    doc = fitz.open(filepath)
+    if len(doc) == 0:
+        doc.close()
+        return None
+    page = doc[0]
+    images = page.get_images(full=True)
+    if images:
+        xref = images[0][0]
+        base_image = doc.extract_image(xref)
+        img_bytes = base_image["image"]
+        ext = base_image["ext"]
+        cover_path = os.path.join(settings.COVERS_DIR, f"{book_id}.{ext}")
+        with open(cover_path, "wb") as f:
+            f.write(img_bytes)
+        doc.close()
+        return cover_path
+    doc.close()
+    return None
+
+
+def extract_epub_content(filepath: str, book_id: str) -> list[dict]:
+    """Extract text and images from EPUB, returning ordered segments."""
+    book = epub.read_epub(filepath, options={'ignore_ncx': True})
+
+    # Build a map of image items by their file name for lookup
+    image_map = {}
+    for item in book.get_items_of_type(ebooklib.ITEM_IMAGE):
+        image_map[item.get_name()] = item
+        # Also map by basename for relative references
+        image_map[os.path.basename(item.get_name())] = item
+
+    segments = []
+    for item in book.get_items_of_type(ebooklib.ITEM_DOCUMENT):
+        soup = BeautifulSoup(item.get_content(), "html.parser")
+
+        for elem in soup.descendants:
+            if elem.name == 'img' or elem.name == 'image':
+                src_attr = elem.get('src') or elem.get('xlink:href') or elem.get('href', '')
+                # Resolve the image
+                img_name = src_attr.split('/')[-1] if src_attr else ''
+                img_item = image_map.get(src_attr) or image_map.get(img_name)
+                if img_item:
+                    try:
+                        img_bytes = img_item.get_content()
+                        if len(img_bytes) > 500:
+                            ext = img_name.rsplit('.', 1)[-1] if '.' in img_name else 'png'
+                            s = _save_image_bytes(img_bytes, book_id, ext)
+                            segments.append({"type": "image", "src": s})
+                    except Exception:
+                        pass
+            elif elem.name in ('p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'blockquote'):
+                text = elem.get_text(separator=" ", strip=True)
+                if text:
+                    seg = {"type": "text", "content": text}
+                    if elem.name in ('h1', 'h2', 'h3'):
+                        seg["heading"] = True
+                    segments.append(seg)
+
+    # Deduplicate consecutive identical text segments
+    deduped = []
+    for seg in segments:
+        if deduped and seg["type"] == "text" and deduped[-1]["type"] == "text" and deduped[-1]["content"] == seg["content"]:
+            continue
+        deduped.append(seg)
+    return deduped
+
+
+def extract_epub_cover(filepath: str, book_id: str) -> str | None:
+    book = epub.read_epub(filepath, options={'ignore_ncx': True})
+    for item in book.get_items():
+        if 'cover' in (item.get_name() or '').lower() and item.get_type() in (
+            ebooklib.ITEM_IMAGE, ebooklib.ITEM_COVER
+        ):
+            ext = item.get_name().rsplit('.', 1)[-1] if '.' in item.get_name() else 'jpg'
+            cover_path = os.path.join(settings.COVERS_DIR, f"{book_id}.{ext}")
+            with open(cover_path, "wb") as f:
+                f.write(item.get_content())
+            return cover_path
+    for item in book.get_items_of_type(ebooklib.ITEM_IMAGE):
+        ext = item.get_name().rsplit('.', 1)[-1] if '.' in item.get_name() else 'jpg'
+        cover_path = os.path.join(settings.COVERS_DIR, f"{book_id}.{ext}")
+        with open(cover_path, "wb") as f:
+            f.write(item.get_content())
+        return cover_path
+    return None
+
+
+def extract_mobi_content(filepath: str, book_id: str) -> list[dict]:
+    """Extract text from MOBI as segments."""
+    tempdir, extracted_path = mobi.extract(filepath)
+    try:
+        if extracted_path and os.path.isfile(extracted_path):
+            with open(extracted_path, "r", encoding="utf-8", errors="ignore") as f:
+                content = f.read()
+            soup = BeautifulSoup(content, "html.parser")
+            segments = []
+            for elem in soup.find_all(['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']):
+                text = elem.get_text(separator=" ", strip=True)
+                if text:
+                    segments.append({"type": "text", "content": text})
+            return segments if segments else [{"type": "text", "content": "[Empty book]"}]
+        return [{"type": "text", "content": "[Could not extract MOBI content]"}]
+    finally:
+        if tempdir and os.path.isdir(tempdir):
+            shutil.rmtree(tempdir, ignore_errors=True)
+
+
+def extract_mobi_cover(filepath: str, book_id: str) -> str | None:
+    return None
+
+
+def generate_cover(title: str, book_id: str) -> str:
+    img = Image.new("RGB", (400, 600), color=(45, 55, 72))
+    draw = ImageDraw.Draw(img)
+    try:
+        font = ImageFont.truetype("arial.ttf", 28)
+    except (OSError, IOError):
+        font = ImageFont.load_default()
+    words = title.split()
+    lines, current = [], ""
+    for w in words:
+        test = f"{current} {w}".strip()
+        bbox = draw.textbbox((0, 0), test, font=font)
+        if bbox[2] - bbox[0] > 360:
+            if current: lines.append(current)
+            current = w
+        else:
+            current = test
+    if current: lines.append(current)
+    y = 200
+    for line in lines:
+        bbox = draw.textbbox((0, 0), line, font=font)
+        w = bbox[2] - bbox[0]
+        draw.text(((400 - w) / 2, y), line, fill="white", font=font)
+        y += 40
+    cover_path = os.path.join(settings.COVERS_DIR, f"{book_id}.png")
+    img.save(cover_path)
+    return cover_path
+
+
+def parse_book(filepath: str, book_id: str, title: str) -> dict:
+    """Parse a book file and return content segments + cover path + chapters."""
+    import re
+    ext = os.path.splitext(filepath)[1].lower()
+    segments = []
+    cover = None
+
+    if ext == ".pdf":
+        segments = extract_pdf_content(filepath, book_id)
+        cover = extract_pdf_cover(filepath, book_id)
+    elif ext == ".epub":
+        segments = extract_epub_content(filepath, book_id)
+        cover = extract_epub_cover(filepath, book_id)
+    elif ext == ".mobi":
+        segments = extract_mobi_content(filepath, book_id)
+        cover = extract_mobi_cover(filepath, book_id)
+    else:
+        raise ValueError(f"Unsupported format: {ext}")
+
+    if not cover:
+        cover = generate_cover(title, book_id)
+
+    # Build chapter index from headings or chapter-like patterns
+    chapters = []
+    chapter_pattern = re.compile(
+        r'^(chapter|chapitre|capitolo|capítulo|kapitel|hoofdstuk|kapittel|rozdział)\s+\w+',
+        re.IGNORECASE
+    )
+    for i, seg in enumerate(segments):
+        if seg.get("heading"):
+            chapters.append({"title": seg["content"][:80], "segment": i})
+        elif seg["type"] == "text" and chapter_pattern.match(seg["content"].strip()):
+            chapters.append({"title": seg["content"].strip()[:80], "segment": i})
+
+    # Flat page text for DB
+    current_text = [seg["content"] for seg in segments if seg["type"] == "text"]
+    pages = ["\n\n".join(current_text)] if current_text else ["[Empty]"]
+
+    return {"pages": pages, "segments": segments, "cover": cover, "chapters": chapters}

database.py

@@ -0,0 +1,336 @@
+"""PostgreSQL (Neon) persistence layer for books and reading progress."""
+
+import json
+import os
+import uuid
+import psycopg2
+import psycopg2.extras
+import settings
+
+
+def get_db():
+    conn = psycopg2.connect(settings.DATABASE_URL)
+    return conn
+
+
+def _row_to_dict(cursor) -> dict | None:
+    """Fetch one row as a dict."""
+    row = cursor.fetchone()
+    if not row:
+        return None
+    cols = [desc[0] for desc in cursor.description]
+    return dict(zip(cols, row))
+
+
+def _rows_to_dicts(cursor) -> list[dict]:
+    """Fetch all rows as dicts."""
+    rows = cursor.fetchall()
+    cols = [desc[0] for desc in cursor.description]
+    return [dict(zip(cols, row)) for row in rows]
+
+
+def init_db():
+    """Ensure upload dirs exist. Tables should be created via SQL migration."""
+    os.makedirs(settings.UPLOAD_DIR, exist_ok=True)
+
+
+def save_book(book_id: str, title: str, filepath: str, cover: str,
+              language: str, pages: list[str], folder_id: str | None = None,
+              segments: list[dict] | None = None, chapters: list[dict] | None = None):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "INSERT INTO books (id, title, filepath, cover, language, pages, total_pages, folder_id, segments, chapters) "
+        "VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s) "
+        "ON CONFLICT (id) DO UPDATE SET title=EXCLUDED.title, filepath=EXCLUDED.filepath, "
+        "cover=EXCLUDED.cover, language=EXCLUDED.language, pages=EXCLUDED.pages, "
+        "total_pages=EXCLUDED.total_pages, folder_id=EXCLUDED.folder_id, "
+        "segments=EXCLUDED.segments, chapters=EXCLUDED.chapters",
+        (book_id, title, filepath, cover, language, json.dumps(pages), len(pages), folder_id,
+         json.dumps(segments or []), json.dumps(chapters or []))
+    )
+    cur.execute(
+        "INSERT INTO reading_progress (book_id) VALUES (%s) ON CONFLICT (book_id) DO NOTHING",
+        (book_id,)
+    )
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def get_all_books(folder_id: str | None = None) -> list[dict]:
+    conn = get_db()
+    cur = conn.cursor()
+    if folder_id:
+        cur.execute(
+            "SELECT b.id, b.title, b.filepath, b.cover, b.language, b.total_pages, b.folder_id, "
+            "COALESCE(rp.current_page, 0) as current_page, "
+            "COALESCE(rp.percent_read, 0.0) as percent_read "
+            "FROM books b LEFT JOIN reading_progress rp ON b.id = rp.book_id "
+            "WHERE b.folder_id = %s ORDER BY rp.last_read_at DESC", (folder_id,)
+        )
+    else:
+        cur.execute(
+            "SELECT b.id, b.title, b.filepath, b.cover, b.language, b.total_pages, b.folder_id, "
+            "COALESCE(rp.current_page, 0) as current_page, "
+            "COALESCE(rp.percent_read, 0.0) as percent_read "
+            "FROM books b LEFT JOIN reading_progress rp ON b.id = rp.book_id "
+            "ORDER BY rp.last_read_at DESC"
+        )
+    result = _rows_to_dicts(cur)
+    cur.close()
+    conn.close()
+    return result
+
+
+def get_book(book_id: str) -> dict | None:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT b.*, COALESCE(rp.current_page, 0) as current_page, "
+        "COALESCE(rp.percent_read, 0.0) as percent_read "
+        "FROM books b LEFT JOIN reading_progress rp ON b.id = rp.book_id "
+        "WHERE b.id = %s", (book_id,)
+    )
+    book = _row_to_dict(cur)
+    cur.close()
+    conn.close()
+    if not book:
+        return None
+    book["pages"] = json.loads(book["pages"])
+    return book
+
+
+def get_book_page(book_id: str, page_num: int) -> dict | None:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("SELECT pages, total_pages FROM books WHERE id = %s", (book_id,))
+    row = _row_to_dict(cur)
+    cur.close()
+    conn.close()
+    if not row:
+        return None
+    pages = json.loads(row["pages"])
+    if page_num < 0 or page_num >= len(pages):
+        return None
+    return {"text": pages[page_num], "total_pages": row["total_pages"]}
+
+
+def update_progress(book_id: str, current_page: int):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("SELECT total_pages FROM books WHERE id = %s", (book_id,))
+    row = _row_to_dict(cur)
+    if not row:
+        cur.close()
+        conn.close()
+        return
+    total = row["total_pages"]
+    percent = round(((current_page + 1) / total) * 100, 1) if total > 0 else 0.0
+    cur.execute(
+        "UPDATE reading_progress SET current_page = %s, percent_read = %s, "
+        "last_read_at = NOW() WHERE book_id = %s",
+        (current_page, percent, book_id)
+    )
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def update_progress_direct(book_id: str, current_page: int, percent: float):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "UPDATE reading_progress SET current_page = %s, percent_read = %s, "
+        "last_read_at = NOW() WHERE book_id = %s",
+        (current_page, round(percent, 1), book_id)
+    )
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def rename_book(book_id: str, new_title: str):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("UPDATE books SET title = %s WHERE id = %s", (new_title, book_id))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def update_book_cover(book_id: str, cover_path: str):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("UPDATE books SET cover = %s WHERE id = %s", (cover_path, book_id))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def delete_book(book_id: str) -> dict | None:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("SELECT filepath, cover FROM books WHERE id = %s", (book_id,))
+    row = _row_to_dict(cur)
+    if not row:
+        cur.close()
+        conn.close()
+        return None
+    cur.execute("DELETE FROM reading_progress WHERE book_id = %s", (book_id,))
+    cur.execute("DELETE FROM bookmarks WHERE book_id = %s", (book_id,))
+    cur.execute("DELETE FROM books WHERE id = %s", (book_id,))
+    conn.commit()
+    cur.close()
+    conn.close()
+    return row
+
+
+def get_progress(book_id: str) -> dict | None:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT current_page, percent_read, last_read_at FROM reading_progress WHERE book_id = %s",
+        (book_id,)
+    )
+    row = _row_to_dict(cur)
+    cur.close()
+    conn.close()
+    return row
+
+
+def get_book_segments(book_id: str) -> dict | None:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("SELECT segments, chapters, language, title FROM books WHERE id = %s", (book_id,))
+    row = _row_to_dict(cur)
+    cur.close()
+    conn.close()
+    if not row:
+        return None
+    return {
+        "segments": json.loads(row["segments"] or "[]"),
+        "chapters": json.loads(row["chapters"] or "[]"),
+        "language": row["language"],
+        "title": row["title"],
+    }
+
+
+# ==================== FOLDERS ====================
+
+def create_folder(name: str) -> str:
+    folder_id = uuid.uuid4().hex[:10]
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("INSERT INTO folders (id, name) VALUES (%s, %s)", (folder_id, name))
+    conn.commit()
+    cur.close()
+    conn.close()
+    return folder_id
+
+
+def get_all_folders() -> list[dict]:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT f.id, f.name, COUNT(b.id) as book_count "
+        "FROM folders f LEFT JOIN books b ON f.id = b.folder_id "
+        "GROUP BY f.id, f.name ORDER BY f.name"
+    )
+    result = _rows_to_dicts(cur)
+    cur.close()
+    conn.close()
+    return result
+
+
+def rename_folder(folder_id: str, new_name: str):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("UPDATE folders SET name = %s WHERE id = %s", (new_name, folder_id))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def delete_folder(folder_id: str):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("UPDATE books SET folder_id = NULL WHERE folder_id = %s", (folder_id,))
+    cur.execute("DELETE FROM folders WHERE id = %s", (folder_id,))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def move_book_to_folder(book_id: str, folder_id: str | None):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("UPDATE books SET folder_id = %s WHERE id = %s", (folder_id, book_id))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+# ==================== BOOKMARKS ====================
+
+def get_bookmarks(book_id: str) -> list[dict]:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT id, name, segment_index, created_at FROM bookmarks "
+        "WHERE book_id = %s ORDER BY segment_index",
+        (book_id,)
+    )
+    result = _rows_to_dicts(cur)
+    cur.close()
+    conn.close()
+    return result
+
+
+def add_bookmark(book_id: str, name: str, segment_index: int) -> int:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "INSERT INTO bookmarks (book_id, name, segment_index) VALUES (%s, %s, %s) RETURNING id",
+        (book_id, name, segment_index)
+    )
+    bm_id = cur.fetchone()[0]
+    conn.commit()
+    cur.close()
+    conn.close()
+    return bm_id
+
+
+def rename_bookmark(bookmark_id: int, new_name: str):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("UPDATE bookmarks SET name = %s WHERE id = %s", (new_name, bookmark_id))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+def delete_bookmark(bookmark_id: int):
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute("DELETE FROM bookmarks WHERE id = %s", (bookmark_id,))
+    conn.commit()
+    cur.close()
+    conn.close()
+
+
+# ==================== LAST READ ====================
+
+def get_last_read_book() -> dict | None:
+    conn = get_db()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT b.id, rp.percent_read FROM books b "
+        "JOIN reading_progress rp ON b.id = rp.book_id "
+        "WHERE rp.percent_read > 0 "
+        "ORDER BY rp.last_read_at DESC LIMIT 1"
+    )
+    row = _row_to_dict(cur)
+    cur.close()
+    conn.close()
+    return row

generate_icons.py

@@ -0,0 +1,41 @@
+"""Generate PWA icons with a book graphic."""
+from PIL import Image, ImageDraw
+
+def make_icon(size, path):
+    img = Image.new("RGB", (size, size), color=(26, 26, 46))
+    draw = ImageDraw.Draw(img)
+    
+    # Draw a simple open book shape
+    m = size // 8  # margin
+    cx = size // 2
+    cy = size // 2
+
+    # Left page
+    draw.polygon([
+        (cx, m + size // 6),
+        (m, m),
+        (m, size - m),
+        (cx, size - m - size // 6),
+    ], fill=(233, 69, 96))
+
+    # Right page
+    draw.polygon([
+        (cx, m + size // 6),
+        (size - m, m),
+        (size - m, size - m),
+        (cx, size - m - size // 6),
+    ], fill=(200, 50, 80))
+
+    # Spine line
+    draw.line([(cx, m + size // 6), (cx, size - m - size // 6)], fill=(26, 26, 46), width=max(2, size // 64))
+
+    # Page lines on left
+    for i in range(4):
+        y = m + size // 4 + i * (size // 8)
+        draw.line([(m + size // 6, y), (cx - size // 10, y)], fill=(26, 26, 46), width=max(1, size // 128))
+
+    img.save(path)
+
+make_icon(192, "static/icon-192.png")
+make_icon(512, "static/icon-512.png")
+print("Icons generated.")

llm_service.py

@@ -0,0 +1,141 @@
+"""LLM service: translation via HuggingFace (Llama / EuroLLM / Aya) and grammar analysis via Stanza API."""
+
+import requests
+from base import SUPPORTED_LANGUAGES
+import settings
+
+LLAMA_MODEL = "meta-llama/Llama-3.1-8B-Instruct"
+EUROLLM_MODEL = "utter-project/EuroLLM-22B-Instruct-2512"
+AYA_MODEL = "CohereLabs/aya-expanse-32b"
+HF_ROUTER_URL = "https://router.huggingface.co/v1/chat/completions"
+
+# Languages where EuroLLM is preferred (EU official small languages)
+EUROLLM_CODES = {
+    lang['code'] for lang in SUPPORTED_LANGUAGES
+    if lang.get('small') and not lang.get('regional')
+}
+# Regional / minority languages -> Aya
+AYA_CODES = {
+    lang['code'] for lang in SUPPORTED_LANGUAGES
+    if lang.get('regional')
+}
+
+
+def _get_lang_info(code: str) -> dict | None:
+    for lang in SUPPORTED_LANGUAGES:
+        if lang['code'] == code:
+            return lang
+    return None
+
+
+def _pick_model(source_lang_code: str) -> str:
+    """Route to the best model based on source language."""
+    if source_lang_code in AYA_CODES:
+        return AYA_MODEL
+    if source_lang_code in EUROLLM_CODES:
+        return EUROLLM_MODEL
+    return LLAMA_MODEL
+
+
+def _call_hf_chat(model: str, messages: list[dict], max_tokens: int = 1500) -> str:
+    """Call HuggingFace Router chat completions API."""
+    headers = {
+        "Authorization": f"Bearer {settings.HF_TOKEN}",
+        "Content-Type": "application/json",
+    }
+    payload = {
+        "model": model,
+        "messages": messages,
+        "max_tokens": max_tokens,
+    }
+    resp = requests.post(HF_ROUTER_URL, json=payload, headers=headers, timeout=120)
+    resp.raise_for_status()
+    data = resp.json()
+    return data["choices"][0]["message"]["content"]
+
+
+def translate_pages(text: str, source_lang_code: str) -> str:
+    """Translate text from source language to English."""
+    lang_info = _get_lang_info(source_lang_code)
+    lang_name = lang_info['name'] if lang_info else source_lang_code
+    model = _pick_model(source_lang_code)
+    messages = [
+        {"role": "system", "content": "You are a professional translator. Translate the following text to English accurately, preserving formatting and paragraph breaks. Output ONLY the translation."},
+        {"role": "user", "content": f"Translate from {lang_name} to English:\n\n{text}"},
+    ]
+    return _call_hf_chat(model, messages)
+
+
+def explain_selection(text: str, source_lang_code: str) -> str:
+    """Explain a highlighted text selection with grammatical and syntactical notes in English."""
+    lang_info = _get_lang_info(source_lang_code)
+    lang_name = lang_info['name'] if lang_info else source_lang_code
+    model = _pick_model(source_lang_code)
+    messages = [
+        {"role": "system", "content": (
+            f"You are a {lang_name} language expert. The user highlights a passage in {lang_name}. "
+            "Provide:\n1. An English translation of the passage.\n"
+            "2. Grammatical notes (parts of speech, cases, tenses, moods).\n"
+            "3. Syntactical analysis (sentence structure, clauses, word order).\n"
+            "4. Any idiomatic or cultural notes.\n"
+            "Be concise but thorough."
+        )},
+        {"role": "user", "content": text},
+    ]
+    return _call_hf_chat(model, messages)
+
+
+def word_by_word_analysis(text: str, source_lang_code: str) -> dict:
+    """Perform word-by-word morpho-syntactic analysis using Stanza API, plus full sentence translation."""
+    lang_info = _get_lang_info(source_lang_code)
+    lang_code = lang_info['code'] if lang_info else "en"
+    api_url = f"https://randusertry-stanzalazymodels.hf.space/{lang_code}/analyze"
+
+    # Translate the full selected text first
+    sentence_translation = ""
+    try:
+        sentence_translation = translate_pages(text, source_lang_code)
+    except Exception:
+        sentence_translation = "[Translation failed]"
+
+    try:
+        resp = requests.post(api_url, json={"text": text}, timeout=60)
+        if resp.status_code != 200:
+            return {"translation": sentence_translation, "words": [{"error": f"Stanza API returned {resp.status_code}"}]}
+
+        data = resp.json()
+        word_objects = []
+
+        # Flexible response handling (flat list vs nested sentences)
+        if isinstance(data, list):
+            if len(data) > 0 and isinstance(data[0], dict) and ('text' in data[0] or 'lemma' in data[0]):
+                words_to_process = data
+            else:
+                words_to_process = []
+                for sent in data:
+                    if isinstance(sent, list):
+                        words_to_process.extend(sent)
+                    elif isinstance(sent, dict) and "words" in sent:
+                        words_to_process.extend(sent["words"])
+        else:
+            words_to_process = []
+            for sent in data.get("sentences", []):
+                words_to_process.extend(sent if isinstance(sent, list) else sent.get("words", []))
+
+        for word in words_to_process:
+            if not isinstance(word, dict):
+                continue
+            upos = word.get("pos") or word.get("upos", "")
+            morph = word.get("morph") or word.get("feats", "")
+            if upos == "PUNCT":
+                continue
+            word_objects.append({
+                "form": word.get("text"),
+                "grammar_comments": f"{upos} {morph}".strip(),
+                "lemma": word.get("lemma"),
+            })
+
+        return {"translation": sentence_translation, "words": word_objects}
+
+    except Exception as e:
+        return {"translation": sentence_translation, "words": [{"error": str(e)}]}

settings.py

@@ -0,0 +1,11 @@
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+HF_TOKEN = os.getenv("HF_TOKEN", "")
+DATABASE_URL = os.getenv("DATABASE_URL", "")
+UPLOAD_DIR = os.getenv("UPLOAD_DIR", "uploads")
+COVERS_DIR = os.getenv("COVERS_DIR", "covers")
+IMAGES_DIR = os.getenv("IMAGES_DIR", "book_images")
+MAX_UPLOAD_SIZE_MB = 50

static/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "Ebook Reader",
+  "short_name": "EReader",
+  "description": "Read books in PDF, EPUB, MOBI with translation and grammar analysis",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a1a2e",
+  "theme_color": "#e94560",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/static/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

static/sw.js

@@ -0,0 +1,33 @@
+const CACHE_NAME = 'ereader-v1';
+const PRECACHE = ['/', '/static/manifest.json'];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(c => c.addAll(PRECACHE)).then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then(keys =>
+      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
+    ).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', (e) => {
+  const req = e.request;
+  // Network-first for API calls, cache-first for static assets
+  if (req.url.includes('/translate') || req.url.includes('/explain') ||
+      req.url.includes('/analyze') || req.url.includes('/upload') ||
+      req.method !== 'GET') {
+    return;
+  }
+  e.respondWith(
+    fetch(req).then(resp => {
+      const clone = resp.clone();
+      caches.open(CACHE_NAME).then(c => c.put(req, clone));
+      return resp;
+    }).catch(() => caches.match(req))
+  );
+});

templates/index.html

@@ -0,0 +1,1080 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>Ebook Reader</title>
+<link rel="manifest" href="/static/manifest.json">
+<meta name="theme-color" content="#e94560">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<link rel="apple-touch-icon" href="/static/icon-192.png">
+<style>
+  :root {
+    --bg: #1a1a2e; --surface: #16213e; --surface2: #0f3460;
+    --accent: #e94560; --text: #eee; --text-dim: #aaa;
+    --page-bg: #1e1e2e; --page-text: #d4d4d4; --page-shadow: rgba(0,0,0,0.5);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Georgia','Times New Roman',serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow: hidden; }
+
+  /* ==================== LIBRARY VIEW ==================== */
+  #library-view { padding: 2rem; max-width: 1200px; margin: 0 auto; overflow-y: auto; height: 100vh; }
+  #library-view h1 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--accent); }
+  .upload-area { background: var(--surface); border: 2px dashed var(--surface2); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
+  .upload-area label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.3rem; }
+  .upload-area input[type="text"], .upload-area select, .upload-area input[type="file"] { background: var(--bg); border: 1px solid var(--surface2); color: var(--text); padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.95rem; }
+  .btn { background: var(--accent); color: #fff; border: none; padding: 0.6rem 1.4rem; border-radius: 6px; cursor: pointer; font-size: 0.95rem; transition: opacity 0.2s; }
+  .btn:hover { opacity: 0.85; }
+  .btn-sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; }
+  .btn-secondary { background: var(--surface2); color: var(--text); }
+  .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; }
+  .book-card { background: var(--surface); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
+  .book-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
+  .book-card img { width: 100%; height: 260px; object-fit: cover; }
+  .book-card .book-info { padding: 0.8rem; }
+  .book-card .book-title { font-size: 0.95rem; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .book-card .book-pages { font-size: 0.75rem; color: var(--text-dim); }
+  .book-card .book-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
+  .book-card .resume-overlay {
+    position: absolute; top: 0; left: 0; width: 100%; height: 260px;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s; pointer-events: none;
+  }
+  .book-card:hover .resume-overlay.has-progress { opacity: 1; pointer-events: auto; }
+  .resume-overlay button {
+    background: var(--accent); border: none; color: #fff; width: 56px; height: 56px;
+    border-radius: 50%; font-size: 1.6rem; cursor: pointer; display: flex;
+    align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+    transition: transform 0.15s;
+  }
+  .resume-overlay button:hover { transform: scale(1.1); }
+  .progress-bar-bg { height: 4px; background: var(--bg); border-radius: 2px; margin-top: 0.4rem; overflow: hidden; }
+  .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
+  .library-layout { display: flex; gap: 1.5rem; }
+  .folder-sidebar { width: 200px; flex-shrink: 0; }
+  .folder-sidebar h3 { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
+  .folder-list { list-style: none; }
+  .folder-list li { padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
+  .folder-list li:hover, .folder-list li.active { background: var(--surface); }
+  .folder-list li .folder-actions { display: none; gap: 0.2rem; }
+  .folder-list li:hover .folder-actions { display: flex; }
+  .folder-list li .folder-actions button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.75rem; }
+  .folder-list li .folder-actions button:hover { color: var(--accent); }
+  .library-main { flex: 1; min-width: 0; }
+</style>
+</head>
+<body>
+<div id="library-view">
+  <h1>📚 Ebook Reader</h1>
+  <div class="upload-area">
+    <div><label for="upload-file">Book file (.pdf, .epub, .mobi)</label><input type="file" id="upload-file" accept=".pdf,.epub,.mobi"></div>
+    <div><label for="upload-title">Title (optional)</label><input type="text" id="upload-title" placeholder="Auto-detect from filename"></div>
+    <div><label for="upload-lang">Book language</label><select id="upload-lang"><option value="auto">🔍 Auto-detect</option>{% for lang in languages %}<option value="{{ lang.code }}">{{ lang.flag }} {{ lang.name }}</option>{% endfor %}</select></div>
+    <div><label for="upload-folder">Folder (optional)</label><select id="upload-folder"><option value="">— None —</option>{% for f in folders %}<option value="{{ f.id }}">📁 {{ f.name }}</option>{% endfor %}</select></div>
+    <button class="btn" onclick="uploadBook()">Upload</button>
+  </div>
+  <div class="library-layout">
+    <div class="folder-sidebar">
+      <h3>Folders</h3>
+      <ul class="folder-list">
+        <li class="{{ 'active' if not current_folder }}" onclick="filterFolder(null)"><span>📚 All Books</span></li>
+        {% for f in folders %}
+        <li class="{{ 'active' if current_folder == f.id }}" onclick="filterFolder('{{ f.id }}')">
+          <span>📁 {{ f.name }} ({{ f.book_count }})</span>
+          <span class="folder-actions">
+            <button onclick="event.stopPropagation(); renameFolderPrompt('{{ f.id }}', '{{ f.name }}')">✏️</button>
+            <button onclick="event.stopPropagation(); deleteFolderConfirm('{{ f.id }}')">🗑️</button>
+          </span>
+        </li>
+        {% endfor %}
+      </ul>
+      <button class="btn btn-sm btn-secondary" style="margin-top:0.8rem;width:100%;" onclick="createFolderPrompt()">+ New Folder</button>
+    </div>
+    <div class="library-main"><div class="book-grid" id="book-grid">
+      {% for b in books %}
+      <div class="book-card" ondblclick="openBook('{{ b.id }}')">
+        <img src="/book/{{ b.id }}/cover" alt="Cover">
+        <div class="resume-overlay {{ 'has-progress' if b.percent_read > 0 }}">
+          <button onclick="event.stopPropagation(); openBook('{{ b.id }}')" title="Resume reading ({{ b.percent_read }}%)">▶</button>
+        </div>
+        <div class="book-info">
+          <div class="book-title" title="{{ b.title }}">{{ b.title }}</div>
+          <div class="book-pages">{{ b.total_pages }} pages · {{ b.percent_read }}% read</div>
+          <div class="progress-bar-bg"><div class="progress-bar-fill" style="width:{{ b.percent_read }}%"></div></div>
+          <div class="book-actions">
+            <button class="btn btn-sm btn-secondary" onclick="event.stopPropagation(); renameBook('{{ b.id }}')">Rename</button>
+            <button class="btn btn-sm btn-secondary" onclick="event.stopPropagation(); moveBookPrompt('{{ b.id }}')">Move</button>
+            <button class="btn btn-sm btn-secondary" onclick="event.stopPropagation(); deleteBook('{{ b.id }}')">Delete</button>
+            <button class="btn btn-sm" onclick="event.stopPropagation(); openBook('{{ b.id }}')">Read</button>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div></div>
+  </div>
+</div>
+
+<!-- ==================== READER VIEW ==================== -->
+<div id="reader-view" style="display:none;">
+<style>
+  #reader-view {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    display: flex; flex-direction: column; z-index: 10; background: var(--bg);
+  }
+  /* Minimal top bar — only visible on desktop or when overlay is open */
+  .reader-topbar {
+    background: var(--surface); padding: 0.4rem 0.8rem;
+    display: flex; align-items: center; gap: 0.6rem;
+    border-bottom: 1px solid var(--surface2); flex-shrink: 0;
+    transition: transform 0.3s;
+  }
+  .reader-topbar .book-title-display {
+    font-weight: bold; font-size: 0.95rem; flex: 1;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 60px;
+  }
+  .zoom-controls { display: flex; align-items: center; gap: 0.3rem; }
+  .zoom-controls button {
+    background: var(--surface2); color: var(--text); border: none;
+    width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 1rem;
+  }
+
+  /* Page area — takes all remaining space */
+  .reader-body { flex: 1; display: flex; overflow: hidden; position: relative; }
+  .page-container {
+    flex: 1; overflow-y: auto; display: flex; justify-content: center;
+    align-items: flex-start; padding: 1.5rem;
+  }
+  .page-paper {
+    background: var(--page-bg); color: var(--page-text);
+    /* Book-like dimensions: ~60-65 characters per line ≈ physical paperback */
+    width: 100%; max-width: 600px;
+    min-height: calc(100vh - 6rem);
+    padding: 2.5rem 2.2rem;
+    border-radius: 4px; box-shadow: 0 2px 20px var(--page-shadow);
+    font-size: 1.1rem; line-height: 1.75;
+    overflow: visible; position: relative;
+  }
+  .page-paper .seg-text {
+    word-wrap: break-word; overflow-wrap: break-word;
+    margin-bottom: 0.8em; text-align: justify;
+    text-indent: 1.5em;
+  }
+  .page-paper .seg-text:first-child { text-indent: 0; }
+  .page-paper .seg-img {
+    display: block; max-width: 100%; height: auto;
+    margin: 1em auto; border-radius: 4px;
+  }
+
+  /* Bottom nav — desktop only by default */
+  .page-nav {
+    display: flex; justify-content: center; align-items: center;
+    gap: 1rem; padding: 0.5rem; background: var(--surface);
+    border-top: 1px solid var(--surface2); flex-shrink: 0;
+    transition: transform 0.3s;
+  }
+  .page-nav span { font-size: 0.9rem; color: var(--text-dim); }
+
+  /* ==================== OVERLAY MENU (single tap) ==================== */
+  .reader-overlay {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 100; display: none; flex-direction: column;
+    pointer-events: none;
+  }
+  .reader-overlay.open { display: flex; }
+  .reader-overlay .overlay-bg {
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.4); pointer-events: auto;
+  }
+  .overlay-top {
+    position: relative; z-index: 1; pointer-events: auto;
+    background: var(--surface); padding: 0.6rem 1rem;
+    display: flex; align-items: center; gap: 0.6rem;
+    border-bottom: 1px solid var(--surface2);
+  }
+  .overlay-top .book-title-overlay {
+    font-weight: bold; font-size: 0.95rem; flex: 1;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .overlay-bottom {
+    position: relative; z-index: 1; pointer-events: auto;
+    background: var(--surface); margin-top: auto;
+    border-top: 1px solid var(--surface2);
+  }
+  .overlay-nav {
+    display: flex; justify-content: center; align-items: center;
+    gap: 1rem; padding: 0.5rem 1rem;
+  }
+  .overlay-nav span { font-size: 0.9rem; color: var(--text-dim); }
+  .overlay-slider {
+    padding: 0.3rem 1rem 0.6rem; display: flex; align-items: center; gap: 0.6rem;
+  }
+  .overlay-slider input[type="range"] {
+    flex: 1; accent-color: var(--accent); cursor: pointer;
+  }
+  .overlay-slider span { font-size: 0.8rem; color: var(--text-dim); min-width: 40px; text-align: center; }
+  .overlay-actions {
+    display: flex; justify-content: center; gap: 0.5rem;
+    padding: 0.4rem 1rem 0.6rem; flex-wrap: wrap;
+  }
+
+  /* ==================== SIDE PANEL (translation etc) ==================== */
+  .side-panel {
+    overflow: hidden; background: var(--surface);
+    border-left: 1px solid var(--surface2); transition: width 0.3s, transform 0.3s;
+    display: flex; flex-direction: column;
+    /* Default: overlay mode for all but big screens */
+    position: fixed; right: 0; top: 0; bottom: 0; z-index: 150;
+    width: 400px; max-width: 100vw;
+    transform: translateX(100%);
+  }
+  .side-panel.open { transform: translateX(0); }
+  .side-panel-header {
+    padding: 0.8rem 1rem; display: flex; justify-content: space-between;
+    align-items: center; border-bottom: 1px solid var(--surface2);
+  }
+  .side-panel-header h3 { font-size: 1rem; }
+  .side-panel-content {
+    flex: 1; overflow-y: auto; padding: 1rem;
+    font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap;
+  }
+  .side-panel-tabs { display: flex; border-bottom: 1px solid var(--surface2); }
+  .side-panel-tabs button {
+    flex: 1; background: none; border: none; color: var(--text-dim);
+    padding: 0.6rem; cursor: pointer; font-size: 0.8rem;
+    border-bottom: 2px solid transparent;
+  }
+  .side-panel-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .word-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
+  .word-table th, .word-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--surface2); text-align: left; }
+  .word-table th { color: var(--accent); }
+
+  /* ==================== CHAPTER/BOOKMARK PANEL (inside overlay) ==================== */
+  .nav-panel {
+    position: fixed; top: 0; left: 0; bottom: 0; width: 320px;
+    background: var(--surface); z-index: 200; transform: translateX(-100%);
+    transition: transform 0.3s; display: flex; flex-direction: column;
+    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
+  }
+  .nav-panel.open { transform: translateX(0); }
+  .nav-panel-header {
+    padding: 0.8rem 1rem; display: flex; justify-content: space-between;
+    align-items: center; border-bottom: 1px solid var(--surface2);
+  }
+  .nav-panel-header h3 { font-size: 1rem; }
+  .nav-panel-tabs { display: flex; border-bottom: 1px solid var(--surface2); }
+  .nav-panel-tabs button {
+    flex: 1; background: none; border: none; color: var(--text-dim);
+    padding: 0.6rem; cursor: pointer; font-size: 0.85rem;
+    border-bottom: 2px solid transparent;
+  }
+  .nav-panel-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .nav-panel-body { flex: 1; overflow-y: auto; }
+  .nav-item {
+    padding: 0.7rem 1rem; cursor: pointer; font-size: 0.85rem;
+    border-bottom: 1px solid var(--surface2); color: var(--text);
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .nav-item:hover { background: var(--surface2); }
+  .nav-item .nav-item-actions { display: flex; gap: 0.3rem; }
+  .nav-item .nav-item-actions button {
+    background: none; border: none; color: var(--text-dim);
+    cursor: pointer; font-size: 0.75rem; padding: 0.2rem;
+  }
+  .nav-item .nav-item-actions button:hover { color: var(--accent); }
+  .nav-empty { padding: 1rem; color: var(--text-dim); font-size: 0.85rem; text-align: center; }
+  .nav-panel-footer { padding: 0.6rem 1rem; border-top: 1px solid var(--surface2); }
+
+  /* Spinner */
+  .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--text-dim); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* Selection tooltip */
+  .selection-tooltip {
+    position: fixed; background: var(--surface2); border-radius: 6px;
+    padding: 0.3rem; display: none; z-index: 300;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  }
+  .selection-tooltip button {
+    background: none; border: none; color: var(--text);
+    padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.8rem; border-radius: 4px;
+  }
+  .selection-tooltip button:hover { background: var(--accent); }
+
+  /* ==================== MOBILE: immersive ==================== */
+  @media (max-width: 700px) {
+    .reader-topbar { display: none; }
+    .page-nav { display: none; }
+    .reader-body { overflow: hidden; }
+    .page-container {
+      padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
+      display: block;
+    }
+    .page-paper {
+      border-radius: 0; box-shadow: none; max-width: 100%;
+      padding: 1.2rem 1rem; min-height: 100vh;
+      font-size: 1.05rem; line-height: 1.7;
+    }
+    .side-panel {
+      width: 100%; max-width: 100%;
+    }
+    .nav-panel { width: 85vw; max-width: 320px; }
+  }
+  /* Desktop: show topbar and bottom nav always */
+  @media (min-width: 701px) {
+    .reader-topbar { display: flex; }
+    .page-nav { display: flex; }
+  }
+  /* Big screens: side panel sits inline next to text */
+  @media (min-width: 1200px) {
+    .side-panel {
+      position: relative; right: auto; top: auto; bottom: auto;
+      z-index: auto; transform: none;
+      width: 0; flex-shrink: 0; transition: width 0.3s;
+    }
+    .side-panel.open { width: 400px; transform: none; }
+  }
+</style>
+
+  <!-- Top bar (desktop) -->
+  <div class="reader-topbar" id="reader-topbar">
+    <button class="btn btn-sm btn-secondary" onclick="closeReader()">← Library</button>
+    <span class="book-title-display" id="reader-title"></span>
+    <div class="zoom-controls">
+      <button onclick="changeZoom(-1)">−</button>
+      <span id="zoom-level">100%</span>
+      <button onclick="changeZoom(1)">+</button>
+    </div>
+    <button class="btn btn-sm btn-secondary" onclick="toggleNavPanel()">📑</button>
+    <button class="btn btn-sm" onclick="toggleTranslation()">🌐</button>
+  </div>
+
+  <div class="reader-body">
+    <div class="page-container" id="page-container">
+      <div class="page-paper" id="page-paper"></div>
+    </div>
+    <div class="side-panel" id="side-panel">
+      <div class="side-panel-header">
+        <h3 id="panel-title">Translation</h3>
+        <button class="btn btn-sm btn-secondary" onclick="closeSidePanel()">✕</button>
+      </div>
+      <div class="side-panel-tabs">
+        <button id="tab-translation" class="active" onclick="switchTab('translation')">Translation</button>
+        <button id="tab-explain" onclick="switchTab('explain')">Explain</button>
+        <button id="tab-words" onclick="switchTab('words')">Word-by-Word</button>
+      </div>
+      <div class="side-panel-content" id="panel-content">
+        <p style="color:var(--text-dim)">Click "Translate" or highlight text to begin.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom nav (desktop) -->
+  <div class="page-nav" id="page-nav">
+    <button class="btn btn-sm btn-secondary" onclick="prevPage()">◀ Prev</button>
+    <span id="page-indicator">1 / 1</span>
+    <button class="btn btn-sm btn-secondary" onclick="nextPage()">Next ▶</button>
+  </div>
+
+  <!-- ==================== OVERLAY (single tap on mobile) ==================== -->
+  <div class="reader-overlay" id="reader-overlay">
+    <div class="overlay-bg" onclick="closeOverlay()"></div>
+    <div class="overlay-top">
+      <button class="btn btn-sm btn-secondary" onclick="closeReader()">← Library</button>
+      <span class="book-title-overlay" id="overlay-title"></span>
+      <div class="zoom-controls">
+        <button onclick="changeZoom(-1)">−</button>
+        <span id="overlay-zoom">100%</span>
+        <button onclick="changeZoom(1)">+</button>
+      </div>
+    </div>
+    <div class="overlay-bottom">
+      <div class="overlay-slider">
+        <span id="overlay-page-num">1</span>
+        <input type="range" id="overlay-slider" min="0" max="1" value="0" oninput="onSliderInput(this.value)">
+        <span id="overlay-page-total">1</span>
+      </div>
+      <div class="overlay-nav">
+        <button class="btn btn-sm btn-secondary" onclick="prevPage()">◀ Prev</button>
+        <span id="overlay-indicator">1 / 1</span>
+        <button class="btn btn-sm btn-secondary" onclick="nextPage()">Next ▶</button>
+      </div>
+      <div class="overlay-actions">
+        <button class="btn btn-sm btn-secondary" onclick="toggleNavPanel()">📑 Chapters</button>
+        <button class="btn btn-sm" onclick="toggleTranslation()">🌐 Translate</button>
+        <button class="btn btn-sm btn-secondary" onclick="addBookmarkPrompt()">🔖 Bookmark</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ==================== NAV PANEL (chapters + bookmarks) ==================== -->
+  <div class="nav-panel" id="nav-panel">
+    <div class="nav-panel-header">
+      <h3>Navigation</h3>
+      <button class="btn btn-sm btn-secondary" onclick="closeNavPanel()">✕</button>
+    </div>
+    <div class="nav-panel-tabs">
+      <button id="navtab-chapters" class="active" onclick="switchNavTab('chapters')">📑 Chapters</button>
+      <button id="navtab-bookmarks" onclick="switchNavTab('bookmarks')">🔖 Bookmarks</button>
+    </div>
+    <div class="nav-panel-body" id="nav-panel-body"></div>
+    <div class="nav-panel-footer" id="nav-panel-footer" style="display:none;">
+      <button class="btn btn-sm" style="width:100%;" onclick="addBookmarkPrompt()">+ Add Bookmark Here</button>
+    </div>
+  </div>
+
+  <!-- Selection tooltip -->
+  <div class="selection-tooltip" id="selection-tooltip">
+    <button onclick="explainSelection()">💡 Explain</button>
+    <button onclick="analyzeSelection()">🔍 Analyze</button>
+    <button onclick="translateSelection()">🌐 Translate</button>
+  </div>
+</div>
+
+<script>
+// ==================== STATE ====================
+let currentBookId = null;
+let segments = [];
+let visiblePages = [];
+let currentPage = 0;
+let bookLanguage = 'en';
+let zoomLevel = 100;
+const MIN_ZOOM = 60, MAX_ZOOM = 200;
+let selectedText = '';
+let translationCache = {};
+let chapters = [];
+let bookmarks = [];
+let overlayOpen = false;
+let navPanelOpen = false;
+let currentNavTab = 'chapters';
+let tapTimer = null;
+let lastTapTime = 0;
+
+// ==================== LIBRARY ====================
+async function uploadBook() {
+  const fileInput = document.getElementById('upload-file');
+  if (!fileInput.files.length) return alert('Select a file first');
+  const fd = new FormData();
+  fd.append('file', fileInput.files[0]);
+  fd.append('title', document.getElementById('upload-title').value);
+  fd.append('language', document.getElementById('upload-lang').value);
+  fd.append('folder_id', document.getElementById('upload-folder').value);
+  const btn = event.target; btn.disabled = true; btn.textContent = 'Uploading...';
+  try {
+    const r = await fetch('/upload', { method: 'POST', body: fd });
+    if (!r.ok) { const e = await r.json(); throw new Error(e.detail || 'Upload failed'); }
+    location.reload();
+  } catch(e) { alert(e.message); } finally { btn.disabled = false; btn.textContent = 'Upload'; }
+}
+async function renameBook(id) { const t = prompt('New title:'); if (!t) return; const fd = new FormData(); fd.append('title', t); await fetch(`/rename/${id}`, {method:'POST',body:fd}); location.reload(); }
+async function deleteBook(id) { if (!confirm('Delete this book?')) return; await fetch(`/book/${id}`, {method:'DELETE'}); location.reload(); }
+function filterFolder(fid) { location.href = fid ? '/?folder='+fid : '/'; }
+async function createFolderPrompt() { const n = prompt('New folder name:'); if (!n) return; await fetch('/folders', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n})}); location.reload(); }
+async function renameFolderPrompt(fid, cur) { const n = prompt('Rename folder:', cur); if (!n||n===cur) return; await fetch(`/folders/${fid}/rename`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n})}); location.reload(); }
+async function deleteFolderConfirm(fid) { if (!confirm('Delete folder?')) return; await fetch(`/folders/${fid}`, {method:'DELETE'}); location.reload(); }
+async function moveBookPrompt(bookId) {
+  const folders = {{ folders | tojson }};
+  let msg = 'Move to folder:\n0 — None\n'; folders.forEach((f,i) => { msg += `${i+1} — ${f.name}\n`; });
+  const c = prompt(msg); if (c===null) return; const idx = parseInt(c);
+  const fid = (idx>0 && idx<=folders.length) ? folders[idx-1].id : null;
+  await fetch(`/book/${bookId}/move`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({folder_id:fid})}); location.reload();
+}
+</script>
+
+<script>
+// ==================== PAGINATION ====================
+function getAvailableHeight() {
+  const paper = document.getElementById('page-paper');
+  const cs = getComputedStyle(paper);
+  return paper.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
+}
+
+function paginateSegments() {
+  const paper = document.getElementById('page-paper');
+  const availH = getAvailableHeight();
+  if (!segments.length || availH <= 0) { visiblePages = []; return; }
+
+  let measurer = document.getElementById('page-measurer');
+  if (!measurer) {
+    measurer = document.createElement('div');
+    measurer.id = 'page-measurer';
+    paper.appendChild(measurer);
+  }
+  measurer.style.cssText = 'position:absolute;visibility:hidden;left:0;right:0;' +
+    'max-width:' + paper.clientWidth + 'px;' +
+    'padding:0 ' + getComputedStyle(paper).paddingLeft + ';' +
+    'word-wrap:break-word;overflow-wrap:break-word;' +
+    'line-height:' + getComputedStyle(paper).lineHeight + ';' +
+    'font-size:' + getComputedStyle(paper).fontSize + ';' +
+    'font-family:' + getComputedStyle(paper).fontFamily + ';' +
+    'margin-bottom:0.8em;text-align:justify;text-indent:1.5em;';
+
+  visiblePages = [];
+  let segIdx = 0, charOff = 0, usedH = 0;
+  let pageStart = { seg: 0, off: 0 };
+
+  while (segIdx < segments.length) {
+    const seg = segments[segIdx];
+    if (seg.type === 'image') {
+      const imgH = Math.min(availH * 0.6, 300) + 32;
+      if (usedH + imgH > availH && usedH > 0) {
+        visiblePages.push({ startSeg: pageStart.seg, startOff: pageStart.off, endSeg: segIdx, endOff: 0 });
+        pageStart = { seg: segIdx, off: 0 }; usedH = 0;
+      }
+      usedH += imgH; segIdx++; charOff = 0;
+    } else {
+      const text = seg.content.substring(charOff);
+      if (!text) { segIdx++; charOff = 0; continue; }
+      measurer.textContent = text;
+      const fullH = measurer.scrollHeight;
+      if (usedH + fullH <= availH) {
+        usedH += fullH; segIdx++; charOff = 0;
+      } else {
+        const remaining = availH - usedH;
+        if (remaining < 20) {
+          visiblePages.push({ startSeg: pageStart.seg, startOff: pageStart.off, endSeg: segIdx, endOff: charOff });
+          pageStart = { seg: segIdx, off: charOff }; usedH = 0; continue;
+        }
+        let lo = 1, hi = text.length, best = 0;
+        while (lo <= hi) {
+          const mid = (lo + hi) >> 1;
+          measurer.textContent = text.substring(0, mid);
+          if (measurer.scrollHeight <= remaining) { best = mid; lo = mid + 1; } else { hi = mid - 1; }
+        }
+        if (best < text.length && best > 0) {
+          const sub = text.substring(0, best);
+          const lastSp = Math.max(sub.lastIndexOf(' '), sub.lastIndexOf('\n'));
+          if (lastSp > best * 0.3) best = lastSp + 1;
+        }
+        if (best <= 0) best = 1;
+        const endOff = charOff + best;
+        visiblePages.push({ startSeg: pageStart.seg, startOff: pageStart.off, endSeg: segIdx, endOff: endOff });
+        pageStart = { seg: segIdx, off: endOff }; charOff = endOff; usedH = 0;
+      }
+    }
+  }
+  if (pageStart.seg < segments.length) {
+    visiblePages.push({ startSeg: pageStart.seg, startOff: pageStart.off, endSeg: segments.length, endOff: 0 });
+  }
+  measurer.textContent = '';
+  if (!visiblePages.length) visiblePages = [{ startSeg: 0, startOff: 0, endSeg: segments.length, endOff: 0 }];
+}
+
+function isMobile() { return window.innerWidth <= 700; }
+
+function renderCurrentPage() {
+  const paper = document.getElementById('page-paper');
+  Array.from(paper.children).forEach(c => { if (c.id !== 'page-measurer') paper.removeChild(c); });
+
+  if (isMobile() && visiblePages.length === 0) {
+    // Fallback: dump all segments for scroll
+    for (const seg of segments) {
+      if (seg.type === 'image') {
+        const img = document.createElement('img');
+        img.src = seg.src; img.className = 'seg-img'; img.alt = 'Book image';
+        paper.appendChild(img);
+      } else {
+        const div = document.createElement('div');
+        div.className = 'seg-text'; div.textContent = seg.content;
+        paper.appendChild(div);
+      }
+    }
+    updateAllIndicators();
+    return;
+  }
+
+  if (!visiblePages.length) return;
+  const pg = visiblePages[Math.min(currentPage, visiblePages.length - 1)];
+
+  for (let si = pg.startSeg; si < pg.endSeg && si < segments.length; si++) {
+    const seg = segments[si];
+    if (seg.type === 'image') {
+      const img = document.createElement('img');
+      img.src = seg.src; img.className = 'seg-img'; img.alt = 'Book image';
+      paper.appendChild(img);
+    } else {
+      const div = document.createElement('div');
+      div.className = 'seg-text';
+      const startOff = (si === pg.startSeg) ? pg.startOff : 0;
+      const endOff = (si === pg.endSeg - 1 && pg.endOff > 0) ? pg.endOff : seg.content.length;
+      let text = (si < pg.endSeg - 1)
+        ? ((si === pg.startSeg) ? seg.content.substring(startOff) : seg.content)
+        : seg.content.substring(startOff, endOff || seg.content.length);
+      div.textContent = text;
+      paper.appendChild(div);
+    }
+  }
+  // Handle single-segment page
+  if (pg.startSeg === pg.endSeg && pg.startSeg < segments.length) {
+    const seg = segments[pg.startSeg];
+    if (seg.type === 'text') {
+      const div = document.createElement('div');
+      div.className = 'seg-text';
+      div.textContent = seg.content.substring(pg.startOff, pg.endOff || seg.content.length);
+      paper.appendChild(div);
+    }
+  }
+  updateAllIndicators();
+}
+
+function getPageText(pageIdx) {
+  if (!visiblePages.length) return '';
+  const pg = visiblePages[pageIdx]; let text = '';
+  for (let si = pg.startSeg; si < pg.endSeg && si < segments.length; si++) {
+    if (segments[si].type !== 'text') continue;
+    const startOff = (si === pg.startSeg) ? pg.startOff : 0;
+    const endOff = (si === pg.endSeg - 1 && pg.endOff > 0) ? pg.endOff : segments[si].content.length;
+    text += (si < pg.endSeg - 1)
+      ? ((si === pg.startSeg) ? segments[si].content.substring(startOff) : segments[si].content)
+      : segments[si].content.substring(startOff, endOff || segments[si].content.length);
+    text += '\n\n';
+  }
+  return text.trim();
+}
+
+function getTotalCharCount() {
+  let total = 0;
+  for (const s of segments) if (s.type === 'text') total += s.content.length;
+  return total;
+}
+function getCharOffsetForPage(pageIdx) {
+  if (!visiblePages.length) return 0;
+  const pg = visiblePages[pageIdx]; let off = 0;
+  for (let i = 0; i < pg.startSeg && i < segments.length; i++) {
+    if (segments[i].type === 'text') off += segments[i].content.length;
+  }
+  return off + pg.startOff;
+}
+function findPageForCharOffset(charOff) {
+  for (let i = 0; i < visiblePages.length; i++) {
+    const endOff = getCharOffsetForPage(i) + getPageTextLength(i);
+    if (endOff >= charOff) return i;
+  }
+  return visiblePages.length - 1;
+}
+function findPageByStartOffset(startCharOff) {
+  let best = 0;
+  for (let i = 0; i < visiblePages.length; i++) {
+    if (getCharOffsetForPage(i) <= startCharOff) best = i; else break;
+  }
+  return best;
+}
+function getPageTextLength(pageIdx) {
+  const pg = visiblePages[pageIdx]; let len = 0;
+  for (let si = pg.startSeg; si < pg.endSeg && si < segments.length; si++) {
+    if (segments[si].type !== 'text') continue;
+    const startOff = (si === pg.startSeg) ? pg.startOff : 0;
+    const endOff = (si === pg.endSeg - 1 && pg.endOff > 0) ? pg.endOff : segments[si].content.length;
+    len += ((si < pg.endSeg - 1) ? segments[si].content.length - startOff : (endOff || segments[si].content.length) - startOff);
+  }
+  return len;
+}
+
+function updateAllIndicators() {
+  const total = visiblePages.length || 1;
+  const cur = currentPage + 1;
+  const txt = `${cur} / ${total}`;
+  const el1 = document.getElementById('page-indicator');
+  const el2 = document.getElementById('overlay-indicator');
+  const el3 = document.getElementById('overlay-page-num');
+  const el4 = document.getElementById('overlay-page-total');
+  const slider = document.getElementById('overlay-slider');
+  if (el1) el1.textContent = txt;
+  if (el2) el2.textContent = txt;
+  if (el3) el3.textContent = cur;
+  if (el4) el4.textContent = total;
+  if (slider) { slider.max = Math.max(total - 1, 0); slider.value = currentPage; }
+}
+</script>
+
+<script>
+// ==================== READER CORE ====================
+async function openBook(bookId) {
+  currentBookId = bookId;
+  translationCache = {};
+  currentPage = 0;
+  bookmarks = [];
+
+  const resp = await fetch(`/book/${bookId}/full_text`);
+  const data = await resp.json();
+  segments = data.segments || [];
+  chapters = data.chapters || [];
+  bookLanguage = data.language || 'en';
+
+  if (!segments.length && data.text) {
+    segments = [{ type: 'text', content: data.text }];
+  }
+
+  const title = data.title || 'Book';
+  document.getElementById('reader-title').textContent = title;
+  document.getElementById('overlay-title').textContent = title;
+  document.getElementById('library-view').style.display = 'none';
+  document.getElementById('reader-view').style.display = 'flex';
+  applyZoom();
+
+  // Load bookmarks
+  try {
+    const bmResp = await fetch(`/book/${bookId}/bookmarks`);
+    bookmarks = await bmResp.json();
+  } catch(e) { bookmarks = []; }
+
+  requestAnimationFrame(() => {
+    paginateSegments();
+    // Restore saved progress
+    fetch(`/book/${bookId}/progress`).then(r => r.ok ? r.json() : null).then(prog => {
+      if (prog && prog.percent_read > 0) {
+        const totalChars = getTotalCharCount();
+        const charOff = Math.floor((prog.percent_read / 100) * totalChars);
+        currentPage = findPageForCharOffset(charOff);
+      }
+      renderCurrentPage();
+    }).catch(() => renderCurrentPage());
+  });
+}
+
+function closeReader() {
+  saveProgress();
+  document.getElementById('reader-view').style.display = 'none';
+  document.getElementById('library-view').style.display = 'block';
+  closeSidePanel(); closeOverlay(); closeNavPanel();
+  currentBookId = null; segments = []; visiblePages = []; chapters = []; bookmarks = [];
+}
+
+function prevPage() {
+  if (currentPage <= 0) return;
+  currentPage--; renderCurrentPage(); saveProgress();
+}
+function nextPage() {
+  if (currentPage >= visiblePages.length - 1) return;
+  currentPage++; renderCurrentPage(); saveProgress();
+}
+
+function saveProgress() {
+  if (!currentBookId || !visiblePages.length) return;
+  const totalChars = getTotalCharCount();
+  const pageEndOff = getCharOffsetForPage(currentPage) + getPageTextLength(currentPage);
+  const percent = totalChars > 0 ? Math.round((pageEndOff / totalChars) * 1000) / 10 : 0;
+  fetch(`/book/${currentBookId}/progress`, {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ current_page: currentPage, percent_read: percent }),
+  }).catch(() => {});
+}
+
+function applyZoom() {
+  const scale = zoomLevel / 100;
+  const paper = document.getElementById('page-paper');
+  paper.style.fontSize = (1.1 * scale) + 'rem';
+  paper.style.maxWidth = (600 * scale) + 'px';
+  document.getElementById('zoom-level').textContent = zoomLevel + '%';
+  document.getElementById('overlay-zoom').textContent = zoomLevel + '%';
+}
+
+function changeZoom(dir) {
+  const newZoom = zoomLevel + dir * 10;
+  if (newZoom < MIN_ZOOM || newZoom > MAX_ZOOM) return;
+  const startCharOff = visiblePages.length ? getCharOffsetForPage(currentPage) : 0;
+  zoomLevel = newZoom;
+  applyZoom();
+  requestAnimationFrame(() => {
+    paginateSegments();
+    currentPage = findPageByStartOffset(startCharOff);
+    renderCurrentPage();
+  });
+}
+
+function onSliderInput(val) {
+  const page = parseInt(val);
+  if (page >= 0 && page < visiblePages.length) {
+    currentPage = page; renderCurrentPage(); saveProgress();
+  }
+}
+
+// ==================== OVERLAY (single tap) ====================
+function openOverlay() {
+  overlayOpen = true;
+  document.getElementById('reader-overlay').classList.add('open');
+  updateAllIndicators();
+}
+function closeOverlay() {
+  overlayOpen = false;
+  document.getElementById('reader-overlay').classList.remove('open');
+}
+function toggleOverlay() {
+  if (overlayOpen) closeOverlay(); else openOverlay();
+}
+
+// Single tap detection on page-container (not on text selection or links)
+document.addEventListener('DOMContentLoaded', () => {
+  const container = document.getElementById('page-container');
+  if (!container) return;
+
+  container.addEventListener('click', (e) => {
+    // Don't trigger overlay if user selected text
+    const sel = window.getSelection();
+    if (sel && sel.toString().trim().length > 0) return;
+    // Don't trigger if clicking a button or link
+    if (e.target.closest('button, a, .selection-tooltip')) return;
+    // Don't trigger if side panel or nav panel is open
+    if (document.getElementById('side-panel').classList.contains('open')) return;
+    if (navPanelOpen) return;
+
+    toggleOverlay();
+  });
+});
+
+// ==================== NAV PANEL (chapters + bookmarks) ====================
+function toggleNavPanel() {
+  if (navPanelOpen) closeNavPanel(); else openNavPanel();
+}
+function openNavPanel() {
+  navPanelOpen = true;
+  document.getElementById('nav-panel').classList.add('open');
+  renderNavPanel();
+}
+function closeNavPanel() {
+  navPanelOpen = false;
+  document.getElementById('nav-panel').classList.remove('open');
+}
+function switchNavTab(tab) {
+  currentNavTab = tab;
+  document.querySelectorAll('.nav-panel-tabs button').forEach(b => b.classList.remove('active'));
+  document.getElementById('navtab-' + tab)?.classList.add('active');
+  document.getElementById('nav-panel-footer').style.display = (tab === 'bookmarks') ? 'block' : 'none';
+  renderNavPanel();
+}
+
+function renderNavPanel() {
+  const body = document.getElementById('nav-panel-body');
+  body.innerHTML = '';
+
+  if (currentNavTab === 'chapters') {
+    if (!chapters.length) {
+      body.innerHTML = '<div class="nav-empty">No chapters detected</div>';
+      return;
+    }
+    chapters.forEach(ch => {
+      const item = document.createElement('div');
+      item.className = 'nav-item';
+      item.innerHTML = `<span>${esc(ch.title)}</span>`;
+      item.onclick = () => { goToSegment(ch.segment); closeNavPanel(); closeOverlay(); };
+      body.appendChild(item);
+    });
+  } else {
+    if (!bookmarks.length) {
+      body.innerHTML = '<div class="nav-empty">No bookmarks yet</div>';
+      return;
+    }
+    bookmarks.forEach(bm => {
+      const item = document.createElement('div');
+      item.className = 'nav-item';
+
+      const label = document.createElement('span');
+      label.textContent = '🔖 ' + bm.name;
+      label.onclick = () => { goToSegment(bm.segment_index); closeNavPanel(); closeOverlay(); };
+
+      const actions = document.createElement('span');
+      actions.className = 'nav-item-actions';
+
+      const renameBtn = document.createElement('button');
+      renameBtn.textContent = '✏️';
+      renameBtn.onclick = (e) => { e.stopPropagation(); renameBookmarkPrompt(bm.id, bm.name); };
+
+      const deleteBtn = document.createElement('button');
+      deleteBtn.textContent = '🗑️';
+      deleteBtn.onclick = (e) => { e.stopPropagation(); deleteBookmarkConfirm(bm.id); };
+
+      actions.appendChild(renameBtn);
+      actions.appendChild(deleteBtn);
+      item.appendChild(label);
+      item.appendChild(actions);
+      body.appendChild(item);
+    });
+  }
+}
+
+function goToSegment(segmentIdx) {
+  for (let i = 0; i < visiblePages.length; i++) {
+    if (visiblePages[i].startSeg >= segmentIdx ||
+        (visiblePages[i].startSeg <= segmentIdx && visiblePages[i].endSeg > segmentIdx)) {
+      currentPage = i; renderCurrentPage(); saveProgress(); return;
+    }
+  }
+}
+
+// ==================== BOOKMARKS ====================
+async function addBookmarkPrompt() {
+  const name = prompt('Bookmark name:');
+  if (!name || !name.trim()) return;
+  // Use the first segment of the current page as the bookmark position
+  const segIdx = visiblePages.length ? visiblePages[currentPage].startSeg : 0;
+  try {
+    const resp = await fetch(`/book/${currentBookId}/bookmarks`, {
+      method: 'POST', headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ name: name.trim(), segment_index: segIdx })
+    });
+    const bm = await resp.json();
+    bookmarks.push(bm);
+    bookmarks.sort((a, b) => a.segment_index - b.segment_index);
+    if (navPanelOpen && currentNavTab === 'bookmarks') renderNavPanel();
+  } catch(e) { alert('Failed to add bookmark'); }
+}
+
+async function renameBookmarkPrompt(bmId, currentName) {
+  const name = prompt('Rename bookmark:', currentName);
+  if (!name || !name.trim() || name === currentName) return;
+  try {
+    await fetch(`/bookmarks/${bmId}/rename`, {
+      method: 'POST', headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ name: name.trim() })
+    });
+    const bm = bookmarks.find(b => b.id === bmId);
+    if (bm) bm.name = name.trim();
+    renderNavPanel();
+  } catch(e) { alert('Failed to rename bookmark'); }
+}
+
+async function deleteBookmarkConfirm(bmId) {
+  if (!confirm('Delete this bookmark?')) return;
+  try {
+    await fetch(`/bookmarks/${bmId}`, { method: 'DELETE' });
+    bookmarks = bookmarks.filter(b => b.id !== bmId);
+    renderNavPanel();
+  } catch(e) { alert('Failed to delete bookmark'); }
+}
+</script>
+
+<script>
+// ==================== TRANSLATION ====================
+async function toggleTranslation() {
+  closeOverlay();
+  openSidePanel(); switchTab('translation');
+  await translateCurrentPage();
+}
+async function translateCurrentPage() {
+  const panel = document.getElementById('panel-content');
+  if (translationCache[currentPage]) { panel.textContent = translationCache[currentPage]; return; }
+  panel.innerHTML = '<span class="spinner"></span> Translating...';
+  const text = getPageText(currentPage);
+  try {
+    const resp = await fetch('/translate', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({text, language: bookLanguage}) });
+    const data = await resp.json();
+    translationCache[currentPage] = data.translation;
+    panel.textContent = data.translation;
+  } catch(e) { panel.textContent = 'Translation failed: ' + e.message; }
+}
+
+// ==================== SELECTION TOOLTIP ====================
+document.addEventListener('mouseup', (e) => {
+  const tooltip = document.getElementById('selection-tooltip');
+  const sel = window.getSelection();
+  const text = sel?.toString().trim();
+  if (text && text.length > 0 && document.getElementById('page-paper')?.contains(sel.anchorNode)) {
+    selectedText = text;
+    tooltip.style.display = 'flex';
+    tooltip.style.left = Math.min(e.clientX, window.innerWidth - 200) + 'px';
+    tooltip.style.top = (e.clientY - 45) + 'px';
+  } else { tooltip.style.display = 'none'; }
+});
+document.addEventListener('mousedown', (e) => {
+  const tooltip = document.getElementById('selection-tooltip');
+  if (tooltip && !tooltip.contains(e.target)) tooltip.style.display = 'none';
+});
+
+async function explainSelection() {
+  document.getElementById('selection-tooltip').style.display = 'none';
+  closeOverlay();
+  openSidePanel(); switchTab('explain');
+  const panel = document.getElementById('panel-content');
+  panel.innerHTML = '<span class="spinner"></span> Analyzing...';
+  try {
+    const resp = await fetch('/explain', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({text: selectedText, language: bookLanguage}) });
+    const data = await resp.json();
+    panel.textContent = data.explanation;
+  } catch(e) { panel.textContent = 'Failed: ' + e.message; }
+}
+async function translateSelection() {
+  document.getElementById('selection-tooltip').style.display = 'none';
+  closeOverlay();
+  openSidePanel(); switchTab('translation');
+  const panel = document.getElementById('panel-content');
+  panel.innerHTML = '<span class="spinner"></span> Translating...';
+  try {
+    const resp = await fetch('/translate', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({text: selectedText, language: bookLanguage}) });
+    const data = await resp.json();
+    panel.textContent = data.translation;
+  } catch(e) { panel.textContent = 'Failed: ' + e.message; }
+}
+async function analyzeSelection() {
+  document.getElementById('selection-tooltip').style.display = 'none';
+  closeOverlay();
+  openSidePanel(); switchTab('words');
+  const panel = document.getElementById('panel-content');
+  panel.innerHTML = '<span class="spinner"></span> Analyzing word-by-word...';
+  try {
+    const resp = await fetch('/analyze', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({text: selectedText, language: bookLanguage}) });
+    const data = await resp.json();
+    if (data.words?.length > 0 && !data.words[0].error) {
+      let html = '';
+      if (data.translation) html += `<div style="margin-bottom:1rem;padding:0.8rem;background:var(--bg);border-radius:6px;"><strong style="color:var(--accent);">Translation:</strong><br>${esc(data.translation)}</div>`;
+      html += '<table class="word-table"><tr><th>Word</th><th>Lemma</th><th>Grammar</th></tr>';
+      for (const w of data.words) html += `<tr><td>${esc(w.form)}</td><td>${esc(w.lemma)}</td><td>${esc(w.grammar_comments)}</td></tr>`;
+      html += '</table>';
+      panel.innerHTML = html;
+    } else { panel.textContent = data.words?.[0]?.error || 'No analysis available'; }
+  } catch(e) { panel.textContent = 'Failed: ' + e.message; }
+}
+
+function esc(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+// ==================== SIDE PANEL ====================
+function openSidePanel() { document.getElementById('side-panel').classList.add('open'); }
+function closeSidePanel() { document.getElementById('side-panel').classList.remove('open'); }
+function switchTab(tab) {
+  document.querySelectorAll('.side-panel-tabs button').forEach(b => b.classList.remove('active'));
+  document.getElementById('tab-' + tab)?.classList.add('active');
+  document.getElementById('panel-title').textContent = {translation:'Translation', explain:'Explanation', words:'Word-by-Word Analysis'}[tab] || 'Panel';
+}
+
+// ==================== KEYBOARD ====================
+document.addEventListener('keydown', (e) => {
+  if (!currentBookId) return;
+  if (e.key === 'ArrowLeft') prevPage();
+  if (e.key === 'ArrowRight') nextPage();
+  if (e.key === '+' || e.key === '=') changeZoom(1);
+  if (e.key === '-') changeZoom(-1);
+  if (e.key === 'Escape') { closeSidePanel(); closeOverlay(); closeNavPanel(); }
+  if (e.key === 'Home') { currentPage = 0; renderCurrentPage(); saveProgress(); }
+});
+
+// Re-paginate on resize
+let resizeTimer;
+window.addEventListener('resize', () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    if (!currentBookId) return;
+    const startCharOff = visiblePages.length ? getCharOffsetForPage(currentPage) : 0;
+    paginateSegments();
+    currentPage = findPageByStartOffset(startCharOff);
+    renderCurrentPage();
+  }, 200);
+});
+
+// ==================== AUTO-RESUME LAST READ BOOK ====================
+document.addEventListener('DOMContentLoaded', async () => {
+  try {
+    const resp = await fetch('/last-read');
+    const data = await resp.json();
+    if (data.book_id) {
+      openBook(data.book_id);
+    }
+  } catch(e) { /* stay on library */ }
+});
+</script>
+
+<script>
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/static/sw.js').catch(() => {});
+}
+</script>
+</body>
+</html>