refactor all navigation to one screen.

2025-11-08 23:50:49 +01:00
parent 5d3e7fae7b
commit 7518bcf835
7 changed files with 778 additions and 3 deletions
@@ -502,3 +502,136 @@ def generate_bookmarks_overlay(bookmarks: List[Dict]) -> str:
 </html>
 '''
    return html
+
+
+def generate_navigation_overlay(
+    chapters: List[Dict],
+    bookmarks: List[Dict],
+    active_tab: str = "contents",
+    page_size: tuple = (800, 1200)
+) -> str:
+    """
+    Generate HTML for the unified navigation overlay with Contents and Bookmarks tabs.
+
+    This combines TOC and Bookmarks into a single overlay with tab switching.
+    Tabs are clickable links that switch between contents (tab:contents) and bookmarks (tab:bookmarks).
+
+    Args:
+        chapters: List of chapter dictionaries with keys:
+                 - index: Chapter index
+                 - title: Chapter title
+        bookmarks: List of bookmark dictionaries with keys:
+                  - name: Bookmark name
+                  - position: Position info (optional)
+        active_tab: Which tab to show ("contents" or "bookmarks")
+        page_size: Page dimensions (width, height) for sizing the overlay
+
+    Returns:
+        HTML string for navigation overlay with tab switching
+    """
+    # Build chapter list items with clickable links
+    chapter_items = []
+    for i, chapter in enumerate(chapters):
+        title = chapter["title"]
+        link_text = f'{i+1}. {title}'
+        if len(title) <= 2:
+            link_text = f'{i+1}.  {title}  '  # Extra spaces for padding
+
+        chapter_items.append(
+            f'<p style="padding: 12px; margin: 5px 0; background-color: #f0f0f0; '
+            f'border-left: 3px solid #000;">'
+            f'<a href="chapter:{chapter["index"]}" style="text-decoration: none; color: #000;">'
+            f'{link_text}</a></p>'
+        )
+
+    # Build bookmark list items with clickable links
+    bookmark_items = []
+    for bookmark in bookmarks:
+        name = bookmark['name']
+        position_text = bookmark.get('position', 'Saved position')
+
+        bookmark_items.append(
+            f'<p style="padding: 12px; margin: 5px 0; background-color: #f0f0f0; '
+            f'border-left: 3px solid #000;">'
+            f'<a href="bookmark:{name}" style="text-decoration: none; color: #000; display: block;">'
+            f'<span style="font-weight: bold; display: block;">{name}</span>'
+            f'<span style="font-size: 11px; color: #666;">{position_text}</span>'
+            f'</a></p>'
+        )
+
+    # Determine which content to show
+    contents_display = "block" if active_tab == "contents" else "none"
+    bookmarks_display = "block" if active_tab == "bookmarks" else "none"
+
+    # Style active tab
+    contents_tab_style = "background-color: #000; color: #fff;" if active_tab == "contents" else "background-color: #f0f0f0; color: #000;"
+    bookmarks_tab_style = "background-color: #000; color: #fff;" if active_tab == "bookmarks" else "background-color: #f0f0f0; color: #000;"
+
+    chapters_html = ''.join(chapter_items) if chapter_items else '<p style="padding: 20px; text-align: center; color: #999;">No chapters available</p>'
+    bookmarks_html = ''.join(bookmark_items) if bookmark_items else '<p style="padding: 20px; text-align: center; color: #999;">No bookmarks yet</p>'
+
+    html = f'''
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Navigation</title>
+</head>
+<body style="background-color: white; margin: 0; padding: 0; font-family: Arial, sans-serif;">
+
+    <!-- Tab Bar -->
+    <div style="display: flex; border-bottom: 2px solid #ccc; background-color: #f8f8f8;">
+        <a href="tab:contents"
+           style="flex: 1; padding: 15px; text-align: center; font-weight: bold;
+                  text-decoration: none; border-right: 1px solid #ccc; {contents_tab_style}">
+            Contents
+        </a>
+        <a href="tab:bookmarks"
+           style="flex: 1; padding: 15px; text-align: center; font-weight: bold;
+                  text-decoration: none; {bookmarks_tab_style}">
+            Bookmarks
+        </a>
+    </div>
+
+    <!-- Contents Tab Content -->
+    <div id="contents-tab" style="padding: 25px; display: {contents_display};">
+        <h2 style="color: #000; margin: 0 0 15px 0; font-size: 20px; text-align: center;">
+            Table of Contents
+        </h2>
+        <p style="text-align: center; color: #666; margin: 0 0 15px 0; padding-bottom: 12px;
+                  border-bottom: 2px solid #ccc; font-size: 13px;">
+            {len(chapters)} chapters
+        </p>
+        <div style="overflow-y: auto; max-height: calc(100vh - 200px);">
+            {chapters_html}
+        </div>
+    </div>
+
+    <!-- Bookmarks Tab Content -->
+    <div id="bookmarks-tab" style="padding: 25px; display: {bookmarks_display};">
+        <h2 style="color: #000; margin: 0 0 15px 0; font-size: 20px; text-align: center;">
+            Bookmarks
+        </h2>
+        <p style="text-align: center; color: #666; margin: 0 0 15px 0; padding-bottom: 12px;
+                  border-bottom: 2px solid #ccc; font-size: 13px;">
+            {len(bookmarks)} saved
+        </p>
+        <div style="overflow-y: auto; max-height: calc(100vh - 200px);">
+            {bookmarks_html}
+        </div>
+    </div>
+
+    <!-- Close Button (bottom right) -->
+    <div style="position: fixed; bottom: 20px; right: 20px;">
+        <a href="action:close"
+           style="display: inline-block; padding: 12px 24px; background-color: #dc3545;
+                  color: white; text-decoration: none; border-radius: 4px; font-weight: bold;
+                  box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+            Close
+        </a>
+    </div>
+
+</body>
+</html>
+'''
+    return html