fix(reader): stabilize chrome panels, bookmarks end-to-end, dead UI removal

Phase 0 of the reader redesign:

- Panels no longer render under the top/bottom bars: sidebars get
  measured insets (same resize/safe-area mechanism as the viewport);
  panel max-height now derives from the bounded sidebar instead of a
  100vh guess; right-side border targets the actual sidebar.
- Bookmarks work end-to-end for the first time: REST CRUD under
  /api/media-items/:id/bookmarks (create/delete route through
  AnnotationService for dedup/LWW/tombstones), fix UpdateMediaBookmark
  referencing nonexistent updated_at column, frontend posts to the
  real API with per-format position (CFI vs page), live list with
  jump + delete instead of SSR-only snapshot.
- Fix chapter matching in progress saves: boundaries were compared by
  a nonexistent tocItem property, so chapter was never persisted.
- Remove dead UI: Navigator panel stub, empty dictionary popup shell,
  unwired Chrome Behavior select; purge 160 stale build artifacts.
- Reader chrome now follows the user's app theme instead of hardcoded
  theme-tokyo-night.

internal/database/db.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.31.1
+//   sqlc v1.30.0
 
 package database
 

internal/database/models.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.31.1
+//   sqlc v1.30.0
 
 package database
 

internal/database/querier.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.31.1
+//   sqlc v1.30.0
 
 package database
 

internal/database/queries.sql.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.31.1
+//   sqlc v1.30.0
 // source: queries.sql
 
 package database
@@ -11274,7 +11274,7 @@ SET
     title = $2,
     notes = $3,
     position = $4,
-    updated_at = NOW()
+    last_modified_at = NOW()
 WHERE id = $1 AND user_id = $5
 RETURNING id, media_item_id, user_id, page_number, chapter_number, cfi_position, title, position, notes, created_at, dedup_key, last_modified_at, last_modified_source, device_sync_data, percentage_location, epubcfi_location, chapter_reference, deleted, deleted_at
 `

internal/database/queries/queries.sql

@@ -2481,7 +2481,7 @@ SET
     title = $2,
     notes = $3,
     position = $4,
-    updated_at = NOW()
+    last_modified_at = NOW()
 WHERE id = $1 AND user_id = $5
 RETURNING *;
 

internal/handlers/media.go

@@ -131,6 +131,25 @@ type UpdateMediaHighlightRequest struct {
 	NoteID        string `json:"note_id"`
 }
 
+// CreateMediaBookmarkRequest represents the request for creating a media bookmark
+type CreateMediaBookmarkRequest struct {
+	Title            string  `json:"title" validate:"required,min=1,max=255"`
+	Position         string  `json:"position" validate:"max=100"`
+	Notes            string  `json:"notes" validate:"max=10000"`
+	CfiPosition      string  `json:"cfi_position" validate:"max=255"`
+	PageNumber       int32   `json:"page_number"`
+	ChapterNumber    int32   `json:"chapter_number"`
+	Percentage       float64 `json:"percentage"`
+	ChapterReference int32   `json:"chapter_reference"`
+}
+
+// UpdateMediaBookmarkRequest represents the request for updating a media bookmark
+type UpdateMediaBookmarkRequest struct {
+	Title    string `json:"title" validate:"required,min=1,max=255"`
+	Notes    string `json:"notes" validate:"max=10000"`
+	Position string `json:"position" validate:"max=100"`
+}
+
 type MediaHandler struct {
 	db             *database.Queries
 	worker         *services.Worker
@@ -1677,6 +1696,152 @@ func (mh *MediaHandler) DeleteMediaHighlight(c *echo.Context) error {
 	return c.NoContent(http.StatusNoContent)
 }
 
+// GetMediaBookmarks handles GET /api/media-items/:id/bookmarks
+func (mh *MediaHandler) GetMediaBookmarks(c *echo.Context) error {
+	userID := c.Get("user_id").(string)
+	userUUID, err := uuid.Parse(userID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid user"})
+	}
+
+	mediaID := c.Param("id")
+	mediaUUID, err := uuid.Parse(mediaID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid media item id"})
+	}
+
+	bookmarks, err := mh.db.GetMediaBookmarks(c.Request().Context(), database.GetMediaBookmarksParams{
+		MediaItemID: pgtype.UUID{Bytes: mediaUUID, Valid: true},
+		UserID:      pgtype.UUID{Bytes: userUUID, Valid: true},
+	})
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
+	}
+
+	return c.JSON(http.StatusOK, bookmarks)
+}
+
+// CreateMediaBookmark handles POST /api/media-items/:id/bookmarks
+func (mh *MediaHandler) CreateMediaBookmark(c *echo.Context) error {
+	userID := c.Get("user_id").(string)
+	userUUID, err := uuid.Parse(userID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid user"})
+	}
+
+	mediaID := c.Param("id")
+	mediaUUID, err := uuid.Parse(mediaID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid media item id"})
+	}
+
+	var req CreateMediaBookmarkRequest
+	if err := c.Bind(&req); err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid request"})
+	}
+	if err := c.Validate(&req); err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": err.Error()})
+	}
+
+	// The sync-aware path (dedup + LWW + tombstones) is preferred; fall back
+	// to the plain query when the service isn't wired (e.g. some tests).
+	if mh.annotationSvc != nil {
+		result, err := mh.annotationSvc.SaveBookmark(c.Request().Context(), wsync.SaveBookmarkRequest{
+			MediaItemID:      pgtype.UUID{Bytes: mediaUUID, Valid: true},
+			UserID:           pgtype.UUID{Bytes: userUUID, Valid: true},
+			Title:            req.Title,
+			Position:         req.Position,
+			Notes:            req.Notes,
+			PageNumber:       req.PageNumber,
+			ChapterNumber:    req.ChapterNumber,
+			CFIPosition:      req.CfiPosition,
+			PercentageLoc:    req.Percentage,
+			ChapterReference: req.ChapterReference,
+			Source:           "web",
+			ModifiedAt:       time.Now(),
+		})
+		if err != nil {
+			return c.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
+		}
+		return c.JSON(http.StatusCreated, result.Bookmark)
+	}
+
+	bookmark, err := mh.db.CreateMediaBookmark(c.Request().Context(), database.CreateMediaBookmarkParams{
+		MediaItemID:   pgtype.UUID{Bytes: mediaUUID, Valid: true},
+		UserID:        pgtype.UUID{Bytes: userUUID, Valid: true},
+		PageNumber:    pgtype.Int4{Int32: req.PageNumber, Valid: req.PageNumber > 0},
+		ChapterNumber: pgtype.Int4{Int32: req.ChapterNumber, Valid: req.ChapterNumber > 0},
+		CfiPosition:   pgtype.Text{String: req.CfiPosition, Valid: req.CfiPosition != ""},
+		Title:         req.Title,
+		Position:      pgtype.Text{String: req.Position, Valid: req.Position != ""},
+		Notes:         pgtype.Text{String: req.Notes, Valid: req.Notes != ""},
+	})
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
+	}
+	return c.JSON(http.StatusCreated, bookmark)
+}
+
+// UpdateMediaBookmark handles PUT /api/media-items/:id/bookmarks/:bookmarkId
+func (mh *MediaHandler) UpdateMediaBookmark(c *echo.Context) error {
+	userID := c.Get("user_id").(string)
+	userUUID, err := uuid.Parse(userID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid user"})
+	}
+
+	bookmarkID := c.Param("bookmarkId")
+	bookmarkUUID, err := uuid.Parse(bookmarkID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid bookmark id"})
+	}
+
+	var req UpdateMediaBookmarkRequest
+	if err := c.Bind(&req); err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid request"})
+	}
+	if err := c.Validate(&req); err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": err.Error()})
+	}
+
+	bookmark, err := mh.db.UpdateMediaBookmark(c.Request().Context(), database.UpdateMediaBookmarkParams{
+		ID:       pgtype.UUID{Bytes: bookmarkUUID, Valid: true},
+		Title:    req.Title,
+		Notes:    pgtype.Text{String: req.Notes, Valid: req.Notes != ""},
+		Position: pgtype.Text{String: req.Position, Valid: req.Position != ""},
+		UserID:   pgtype.UUID{Bytes: userUUID, Valid: true},
+	})
+	if err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
+	}
+
+	return c.JSON(http.StatusOK, bookmark)
+}
+
+// DeleteMediaBookmark handles DELETE /api/media-items/:id/bookmarks/:bookmarkId
+func (mh *MediaHandler) DeleteMediaBookmark(c *echo.Context) error {
+	bookmarkID := c.Param("bookmarkId")
+	bookmarkUUID, err := uuid.Parse(bookmarkID)
+	if err != nil {
+		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid bookmark id"})
+	}
+
+	pgBookmarkID := pgtype.UUID{Bytes: bookmarkUUID, Valid: true}
+
+	if mh.annotationSvc != nil {
+		if err := mh.annotationSvc.TombstoneBookmarkByID(c.Request().Context(), pgBookmarkID, "web"); err != nil {
+			return c.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
+		}
+		return c.NoContent(http.StatusNoContent)
+	}
+
+	if err := mh.db.DeleteMediaBookmark(c.Request().Context(), pgBookmarkID); err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{"error": err.Error()})
+	}
+
+	return c.NoContent(http.StatusNoContent)
+}
+
 // SearchMediaItems handles GET /api/media-items/search
 // Supports two modes:
 // 1. Autocomplete: author=value, genre=value, etc. → returns field values for dropdowns

internal/router/media.go

@@ -41,6 +41,12 @@ func registerMediaRoutes(cfg *Config) {
 	protected.PUT("/media-items/:id/highlights/:highlightId", cfg.MediaHandler.UpdateMediaHighlight)
 	protected.DELETE("/media-items/:id/highlights/:highlightId", cfg.MediaHandler.DeleteMediaHighlight)
 
+	// Bookmark routes (all authenticated users)
+	protected.GET("/media-items/:id/bookmarks", cfg.MediaHandler.GetMediaBookmarks)
+	protected.POST("/media-items/:id/bookmarks", cfg.MediaHandler.CreateMediaBookmark)
+	protected.PUT("/media-items/:id/bookmarks/:bookmarkId", cfg.MediaHandler.UpdateMediaBookmark)
+	protected.DELETE("/media-items/:id/bookmarks/:bookmarkId", cfg.MediaHandler.DeleteMediaBookmark)
+
 	// Admin-only media routes
 	admin.POST("/media-items", cfg.MediaHandler.CreateMediaItem)
 	admin.PUT("/media-items/:id", cfg.MediaHandler.UpdateMediaItem)

templates/reader.templ

@@ -5,7 +5,7 @@ import (
 	"fmt"
 )
 
-func readerInitExpr(metadata ReaderMetadata, progress ReadingProgress) string {
+func readerInitExpr(metadata ReaderMetadata, progress ReadingProgress, bookmarks []Bookmark) string {
 	config := map[string]interface{}{
 		"mediaItemId":      metadata.MediaItemID,
 		"fileUrl":          metadata.FileURL,
@@ -27,6 +27,23 @@ func readerInitExpr(metadata ReaderMetadata, progress ReadingProgress) string {
 			config["savedTotalPages"] = progress.TotalPages
 		}
 	}
+	if len(bookmarks) > 0 {
+		items := make([]map[string]interface{}, 0, len(bookmarks))
+		for _, b := range bookmarks {
+			var page any
+			if b.PageNumber != nil {
+				page = *b.PageNumber
+			}
+			items = append(items, map[string]interface{}{
+				"id":            b.ID,
+				"title":         b.Title,
+				"positionLabel": b.Position,
+				"cfi":           b.CfiPosition,
+				"page":          page,
+			})
+		}
+		config["bookmarks"] = items
+	}
 	jsonBytes, _ := json.Marshal(config)
 	return fmt.Sprintf("initReader(%s)", string(jsonBytes))
 }
@@ -47,36 +64,32 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 		</head>
 		<body
 			x-data="readerShell"
-			x-init={ readerInitExpr(metadata, progress) }
+			x-init={ readerInitExpr(metadata, progress, bookmarks) }
-			class="theme-tokyo-night h-screen overflow-hidden"
+			class={ "theme-" + user.Theme + " h-screen overflow-hidden" }
 		>
 			@ReaderChrome(user, metadata, progress)
-			<!-- Dockable Panels Container -->
+		<!-- Dockable Panels Container -->
-			<div id="reader-panels" class="fixed inset-0 pointer-events-none z-30">
+		<div id="reader-panels" class="fixed inset-0 pointer-events-none z-30">
-				<!-- Left Sidebar (TOC) -->
+			<!-- Left Sidebar (TOC) -->
-				<div id="left-sidebar" class="absolute left-0 top-0 bottom-0 pointer-events-auto flex flex-col">
+			<div id="left-sidebar" class="absolute left-0 pointer-events-auto flex flex-col" style="top: 56px; bottom: 56px;">
-					<div id="toc-panel" x-show="tocOpen" x-transition class="panel-container pointer-events-auto" data-panel="toc">
+				<div id="toc-panel" x-show="tocOpen" x-transition class="panel-container pointer-events-auto" data-panel="toc">
-						@ReaderTOCPanel(metadata)
+					@ReaderTOCPanel(metadata)
-					</div>
-				</div>
-				<!-- Right Sidebar (Settings, Navigator, Bookmarks) -->
-				<div id="right-sidebar" class="absolute right-0 top-0 bottom-0 pointer-events-auto flex flex-col">
-					<div id="settings-panel" x-show="settingsOpen" x-transition class="panel-container pointer-events-auto" data-panel="settings">
-						@ReaderSettingsPanel()
-					</div>
-					<div id="navigator-panel" x-show="navigatorOpen" x-transition class="panel-container pointer-events-auto" data-panel="navigator">
-						@ReaderNavigatorPanel()
-					</div>
-					<div id="bookmarks-panel" x-show="bookmarksOpen" x-transition class="panel-container pointer-events-auto" data-panel="bookmarks">
-						@ReaderBookmarksPanel(bookmarks)
-					</div>
 				</div>
 			</div>
-			<div id="reader-viewport" class="absolute inset-x-0" style="top: 56px; bottom: 56px;">
+			<!-- Right Sidebar (Settings, Bookmarks) -->
-				<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
+			<div id="right-sidebar" class="absolute right-0 pointer-events-auto flex flex-col" style="top: 56px; bottom: 56px;">
+				<div id="settings-panel" x-show="settingsOpen" x-transition class="panel-container pointer-events-auto" data-panel="settings">
+					@ReaderSettingsPanel()
+				</div>
+				<div id="bookmarks-panel" x-show="bookmarksOpen" x-transition class="panel-container pointer-events-auto" data-panel="bookmarks">
+					@ReaderBookmarksPanel()
+				</div>
 			</div>
-			@DictionaryPopup()
+		</div>
-		</body>
+		<div id="reader-viewport" class="absolute inset-x-0" style="top: 56px; bottom: 56px;">
+			<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
+		</div>
+	</body>
 	</html>
 }
 
@@ -186,8 +199,8 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 				<!-- Action buttons -->
 				<div class="flex items-center gap-1">
 					<button @click="toggleTOC()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Table of Contents">📖</button>
-					<button @click="addBookmark()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Bookmark">🏷️</button>
+					<button @click="addBookmark()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Bookmark this position">🏷️</button>
-					<button @click="toggleBookmarks()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Notes">📝</button>
+					<button @click="toggleBookmarks()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Bookmarks">📝</button>
 				</div>
 			</div>
 		</div>
@@ -211,14 +224,6 @@ templ ReaderSettingsPanel() {
 			<!-- Display settings -->
 			<div class="mb-6">
 				<h3 class="font-semibold mb-2">Display</h3>
-				<label class="block mb-2">
-					Chrome Behavior
-					<select name="chrome_behavior" class="w-full mt-1 px-3 py-2 rounded border">
-						<option value="auto-hide">Auto Hide</option>
-						<option value="always-visible">Always Visible</option>
-						<option value="hide-on-scroll">Hide on Scroll</option>
-					</select>
-				</label>
 				<label class="block mb-2">
 					Progress Mode
 					<select name="progress_mode" x-model="progressMode" @change="applyProgressMode()" class="w-full mt-1 px-3 py-2 rounded border">
@@ -356,26 +361,7 @@ templ ReaderTOCPanel(_ ReaderMetadata) {
 	</div>
 }
 
-templ ReaderNavigatorPanel() {
+templ ReaderBookmarksPanel() {
-	<div
-		class="dockable-panel"
-		data-panel="navigator"
-		data-side="right"
-		x-ref="navigatorPanel"
-	>
-		<div class="panel-header flex items-center justify-between p-3 cursor-pointer" @click="toggleWindowShade($refs.navigatorPanel)">
-			<h3 class="panel-title font-semibold">🗺️ Navigator</h3>
-			<div class="panel-controls flex items-center gap-2">
-				<button class="window-shade-toggle">─</button>
-			</div>
-		</div>
-		<div class="panel-content p-2 overflow-hidden">
-			<div id="navigator-viewport" class="relative w-full h-full"></div>
-		</div>
-	</div>
-}
-
-templ ReaderBookmarksPanel(bookmarks []Bookmark) {
 	<div
 		class="dockable-panel"
 		data-panel="bookmarks"
@@ -389,32 +375,34 @@ templ ReaderBookmarksPanel(bookmarks []Bookmark) {
 			</div>
 		</div>
 		<div class="panel-content p-4 overflow-y-auto">
-			if len(bookmarks) > 0 {
+			<div id="bookmarks-list" class="space-y-2">
-				<div id="bookmarks-list" class="space-y-2">
+				<template x-for="bookmark in bookmarkItems" :key="bookmark.id">
-					for _, bookmark := range bookmarks {
+					<div class="flex items-center gap-1 group">
 						<a
 							href="#"
-							@click.prevent="goToBookmarkTarget($el.dataset.cfi)"
+							@click.prevent="goToBookmark(bookmark)"
-							data-cfi={ bookmark.CfiPosition }
+							class="flex-1 min-w-0 block py-2 hover:bg-gray-700 rounded px-2"
-							class="block py-2 hover:bg-gray-700 rounded px-2"
 						>
-							<span class="font-medium">{ bookmark.Title }</span>
+							<span class="font-medium block truncate" x-text="bookmark.title"></span>
-							<span class="text-xs ml-2" style="color: var(--text-secondary)">
+							<span class="text-xs block truncate" style="color: var(--text-secondary)" x-text="bookmark.positionLabel"></span>
-								{ bookmark.Position }
-							</span>
 						</a>
-					}
+						<button
-				</div>
+							@click="deleteBookmark(bookmark.id)"
-			} else {
+							class="p-2 rounded hover:bg-red-900/60 opacity-0 group-hover:opacity-100 transition-opacity"
-				<p class="text-sm" style="color: var(--text-secondary)">No bookmarks yet</p>
+							title="Delete bookmark"
-			}
+							aria-label="Delete bookmark"
+						>
+							✕
+						</button>
+					</div>
+				</template>
+				<template x-if="bookmarkItems.length === 0">
+					<p class="text-sm" style="color: var(--text-secondary)">No bookmarks yet</p>
+				</template>
+			</div>
 			<button @click="addBookmark()" class="w-full py-2 mt-4 bg-blue-600 text-white rounded hover:bg-blue-700">
 				+ Add Bookmark
 			</button>
 		</div>
 	</div>
 }
-
-templ DictionaryPopup() {
-	<div id="dictionary-popup" class="hidden fixed bg-white text-black p-4 rounded-lg shadow-xl max-w-md z-50"></div>
-}

templates/reader_templ.go

@@ -13,7 +13,7 @@ import (
 	"fmt"
 )
 
-func readerInitExpr(metadata ReaderMetadata, progress ReadingProgress) string {
+func readerInitExpr(metadata ReaderMetadata, progress ReadingProgress, bookmarks []Bookmark) string {
 	config := map[string]interface{}{
 		"mediaItemId":      metadata.MediaItemID,
 		"fileUrl":          metadata.FileURL,
@@ -35,6 +35,23 @@ func readerInitExpr(metadata ReaderMetadata, progress ReadingProgress) string {
 			config["savedTotalPages"] = progress.TotalPages
 		}
 	}
+	if len(bookmarks) > 0 {
+		items := make([]map[string]interface{}, 0, len(bookmarks))
+		for _, b := range bookmarks {
+			var page any
+			if b.PageNumber != nil {
+				page = *b.PageNumber
+			}
+			items = append(items, map[string]interface{}{
+				"id":            b.ID,
+				"title":         b.Title,
+				"positionLabel": b.Position,
+				"cfi":           b.CfiPosition,
+				"page":          page,
+			})
+		}
+		config["bookmarks"] = items
+	}
 	jsonBytes, _ := json.Marshal(config)
 	return fmt.Sprintf("initReader(%s)", string(jsonBytes))
 }
@@ -67,26 +84,48 @@ func Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookma
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(metadata.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 40, Col: 26}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 57, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Reader</title><link rel=\"manifest\" href=\"/static/manifest.json\"><link href=\"/static/reader-fonts.css\" rel=\"stylesheet\"><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/reader.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"></head><body x-data=\"readerShell\" x-init=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Reader</title><link rel=\"manifest\" href=\"/static/manifest.json\"><link href=\"/static/reader-fonts.css\" rel=\"stylesheet\"><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/reader.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"></head>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var3 string
+		var templ_7745c5c3_Var3 = []any{"theme-" + user.Theme + " h-screen overflow-hidden"}
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.ResolveAttributeValue(readerInitExpr(metadata, progress))
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 50, Col: 46}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" class=\"theme-tokyo-night h-screen overflow-hidden\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<body x-data=\"readerShell\" x-init=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.ResolveAttributeValue(readerInitExpr(metadata, progress, bookmarks))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 67, Col: 57}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.ResolveAttributeValue(templ.CSSClasses(templ_7745c5c3_Var3).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -94,7 +133,7 @@ func Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookma
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<!-- Dockable Panels Container --><div id=\"reader-panels\" class=\"fixed inset-0 pointer-events-none z-30\"><!-- Left Sidebar (TOC) --><div id=\"left-sidebar\" class=\"absolute left-0 top-0 bottom-0 pointer-events-auto flex flex-col\"><div id=\"toc-panel\" x-show=\"tocOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"toc\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- Dockable Panels Container --><div id=\"reader-panels\" class=\"fixed inset-0 pointer-events-none z-30\"><!-- Left Sidebar (TOC) --><div id=\"left-sidebar\" class=\"absolute left-0 pointer-events-auto flex flex-col\" style=\"top: 56px; bottom: 56px;\"><div id=\"toc-panel\" x-show=\"tocOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"toc\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -102,7 +141,7 @@ func Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookma
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></div><!-- Right Sidebar (Settings, Navigator, Bookmarks) --><div id=\"right-sidebar\" class=\"absolute right-0 top-0 bottom-0 pointer-events-auto flex flex-col\"><div id=\"settings-panel\" x-show=\"settingsOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"settings\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div><!-- Right Sidebar (Settings, Bookmarks) --><div id=\"right-sidebar\" class=\"absolute right-0 pointer-events-auto flex flex-col\" style=\"top: 56px; bottom: 56px;\"><div id=\"settings-panel\" x-show=\"settingsOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"settings\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -110,31 +149,15 @@ func Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookma
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div><div id=\"navigator-panel\" x-show=\"navigatorOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"navigator\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div><div id=\"bookmarks-panel\" x-show=\"bookmarksOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"bookmarks\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = ReaderNavigatorPanel().Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = ReaderBookmarksPanel().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div><div id=\"bookmarks-panel\" x-show=\"bookmarksOpen\" x-transition class=\"panel-container pointer-events-auto\" data-panel=\"bookmarks\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div></div><div id=\"reader-viewport\" class=\"absolute inset-x-0\" style=\"top: 56px; bottom: 56px;\"><foliate-view id=\"reader-view\" class=\"block w-full h-full\"></foliate-view></div></body></html>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = ReaderBookmarksPanel(bookmarks).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div></div><div id=\"reader-viewport\" class=\"absolute inset-x-0\" style=\"top: 56px; bottom: 56px;\"><foliate-view id=\"reader-view\" class=\"block w-full h-full\"></foliate-view></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = DictionaryPopup().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -158,21 +181,21 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
+		if templ_7745c5c3_Var6 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
+			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div id=\"reader-chrome\" class=\"transition-opacity duration-300\"><!-- Top bar --><div id=\"reader-topbar\" class=\"fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40 pt-[env(safe-area-inset-top)]\" style=\"background-color: var(--bg-primary);\"><div class=\"flex items-center justify-between px-3 py-2 sm:px-4 sm:py-3\"><a id=\"reader-back\" href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var5 templ.SafeURL
+		var templ_7745c5c3_Var7 templ.SafeURL
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs("/media/" + metadata.MediaItemID)
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinURLErrs("/media/" + metadata.MediaItemID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 88, Col: 63}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 101, Col: 63}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -180,12 +203,12 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var6 string
+		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(metadata.Title)
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(metadata.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 91, Col: 95}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 104, Col: 95}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -195,38 +218,38 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 		}
 		if progress.FormatGroup == "reflowable" {
 			if metadata.EstimatedPages > 0 {
-				var templ_7745c5c3_Var7 string
+				var templ_7745c5c3_Var9 string
-				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f%% · Page %d/%d", progress.Percentage, progress.CurrentPage, metadata.EstimatedPages))
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f%% · Page %d/%d", progress.Percentage, progress.CurrentPage, metadata.EstimatedPages))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 175, Col: 113}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 188, Col: 113}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				var templ_7745c5c3_Var8 string
+				var templ_7745c5c3_Var10 string
-				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f%%", progress.Percentage))
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f%%", progress.Percentage))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 177, Col: 52}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 190, Col: 52}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
 		} else {
-			var templ_7745c5c3_Var9 string
+			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages))
+			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 180, Col: 72}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 193, Col: 72}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</span></div><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Action buttons --><div class=\"flex items-center gap-1\"><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents\">📖</button> <button @click=\"addBookmark()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Bookmark\">🏷️</button> <button @click=\"toggleBookmarks()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Notes\">📝</button></div></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</span></div><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Action buttons --><div class=\"flex items-center gap-1\"><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents\">📖</button> <button @click=\"addBookmark()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Bookmark this position\">🏷️</button> <button @click=\"toggleBookmarks()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Bookmarks\">📝</button></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -250,12 +273,12 @@ func ReaderSettingsPanel() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var10 == nil {
+		if templ_7745c5c3_Var12 == nil {
-			templ_7745c5c3_Var10 = templ.NopComponent
+			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"dockable-panel\" data-panel=\"settings\" data-side=\"left\" x-ref=\"settingsPanel\"><div class=\"panel-header flex items-center justify-between p-3 cursor-pointer\" @click=\"toggleWindowShade($refs.settingsPanel)\"><h3 class=\"panel-title font-semibold\">⚙️ Settings</h3><div class=\"panel-controls flex items-center gap-2\"><button class=\"window-shade-toggle\">─</button></div></div><div class=\"panel-content p-4 overflow-y-auto\"><!-- Display settings --><div class=\"mb-6\"><h3 class=\"font-semibold mb-2\">Display</h3><label class=\"block mb-2\">Chrome Behavior <select name=\"chrome_behavior\" class=\"w-full mt-1 px-3 py-2 rounded border\"><option value=\"auto-hide\">Auto Hide</option> <option value=\"always-visible\">Always Visible</option> <option value=\"hide-on-scroll\">Hide on Scroll</option></select></label> <label class=\"block mb-2\">Progress Mode <select name=\"progress_mode\" x-model=\"progressMode\" @change=\"applyProgressMode()\" class=\"w-full mt-1 px-3 py-2 rounded border\"><option value=\"pages\">Pages</option> <option value=\"chapter\">Chapter</option> <option value=\"percentage\">Percentage</option> <option value=\"time-left\">Time Left</option></select></label></div><!-- Reading Theme (reflowable only) --><div class=\"mb-6\" x-show=\"!isFixedLayout\"><div class=\"flex items-center justify-between mb-2\"><h3 class=\"font-semibold\">Reading Theme</h3><button @click=\"toggleReadingMode()\" class=\"relative w-14 h-7 rounded-full transition-colors duration-200 flex items-center px-1\" :class=\"readingMode === 'dark' ? 'bg-blue-500' : 'bg-gray-400'\" type=\"button\" :aria-label=\"readingMode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'\"><span class=\"absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 flex items-center justify-center text-xs\" :class=\"readingMode === 'dark' ? 'translate-x-7' : 'translate-x-0'\" x-text=\"readingMode === 'dark' ? '🌙' : '☀️'\">☀️</span></button></div><label class=\"block mb-2\"><select name=\"reading_theme\" x-model=\"readingTheme\" @change=\"applyTheme()\" class=\"w-full mt-1 px-3 py-2 rounded border\"><optgroup label=\"📖 Classic Reading\"><option value=\"light\">Light</option> <option value=\"paper\">Paper</option> <option value=\"sepia\">Sepia</option> <option value=\"parchment\">Parchment</option> <option value=\"warm\">Warm</option> <option value=\"candlelight\">Candlelight</option></optgroup> <optgroup label=\"🌤️ Sky & Atmosphere\"><option value=\"azure\">Azure</option> <option value=\"sky\">Sky</option> <option value=\"arctic\">Arctic</option> <option value=\"frost\">Frost</option></optgroup> <optgroup label=\"🌅 Sunset & Warmth\"><option value=\"dusk\">Dusk</option> <option value=\"sunset\">Sunset</option> <option value=\"twilight\">Twilight</option></optgroup> <optgroup label=\"🌲 Nature & Earth\"><option value=\"forest\">Forest</option> <option value=\"moss\">Moss</option> <option value=\"slate\">Slate</option></optgroup> <optgroup label=\"⚡ High Performance\"><option value=\"oled\">OLED</option> <option value=\"solarized\">Solarized</option></optgroup></select></label></div><!-- Typography (reflowable only) --><div class=\"mb-6\" x-show=\"!isFixedLayout\"><h3 class=\"font-semibold mb-2\">Typography</h3><label class=\"block mb-2\">Reading Font <select name=\"reading_font\" x-model=\"readingFont\" @change=\"applyFont()\" class=\"w-full mt-1 px-3 py-2 rounded border\"><option value=\"literata\">Literata (Default)</option> <option value=\"crimson\">Crimson Text</option> <option value=\"source-serif\">Source Serif 4</option> <option value=\"eb-garamond\">EB Garamond</option> <option value=\"libertinus\">Libertinus Serif</option> <option value=\"noto-serif\">Noto Serif</option> <option value=\"charis-sil\">Charis SIL</option> <option value=\"ibm-plex\">IBM Plex Serif</option></select></label> <label class=\"block mb-2\">Font Size <input type=\"range\" name=\"font_size\" x-model.number=\"fontSize\" @change=\"applyFont()\" min=\"10\" max=\"40\" class=\"w-full\"> <span class=\"text-xs\" x-text=\"fontSize + 'px'\" style=\"color: var(--text-secondary)\">18px</span></label> <label class=\"block mb-2\">Line Height <input type=\"range\" name=\"line_height\" x-model.number=\"lineHeight\" @change=\"applyFont()\" min=\"0.8\" max=\"3.0\" step=\"0.1\" class=\"w-full\"> <span class=\"text-xs\" x-text=\"lineHeight\" style=\"color: var(--text-secondary)\">1.6</span></label></div><!-- Navigation --><div class=\"mb-6\" x-show=\"isFixedLayout\"><h3 class=\"font-semibold mb-2\">Navigation</h3><label class=\"flex items-center mb-2\"><input type=\"checkbox\" name=\"double_page_spread\" x-model=\"doublePageSpread\" @change=\"applyDoublePageSpread()\" class=\"mr-2\"> Double Page Spread</label></div><div class=\"flex gap-2 mt-6\"><button @click=\"restoreDefaults()\" class=\"flex-1 py-2 border rounded hoveLine truncated
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"dockable-panel\" data-panel=\"settings\" data-side=\"left\" x-ref=\"settingsPanel\"><div class=\"panel-header flex items-center justify-between p-3 cursor-pointer\" @click=\"toggleWindowShade($refs.settingsPanel)\"><h3 class=\"panel-title font-semibold\">⚙️ Settings</h3><div class=\"panel-controls flex items-center gap-2\"><button class=\"window-shade-toggle\">─</button></div></div><div class=\"panel-content p-4 overflow-y-auto\"><!-- Display settings --><div class=\"mb-6\"><h3 class=\"font-semibold mb-2\">Display</h3><label class=\"block mb-2\">Progress Mode <select name=\"progress_mode\" x-model=\"progressMode\" @change=\"applyProgressMode()\" class=\"w-full mt-1 px-3 py-2 rounded border\"><option value=\"pages\">Pages</option> <option value=\"chapter\">Chapter</option> <option value=\"percentage\">Percentage</option> <option value=\"time-left\">Time Left</option></select></label></div><!-- Reading Theme (reflowable only) --><div class=\"mb-6\" x-show=\"!isFixedLayout\"><div class=\"flex items-center justify-between mb-2\"><h3 class=\"font-semibold\">Reading Theme</h3><button @click=\"toggleReadingMode()\" class=\"relative w-14 h-7 rounded-full transition-colors duration-200 flex items-center px-1\" :class=\"readingMode === 'dark' ? 'bg-blue-500' : 'bg-gray-400'\" type=\"button\" :aria-label=\"readingMode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'\"><span class=\"absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 flex items-center justify-center text-xs\" :class=\"readingMode === 'dark' ? 'translate-x-7' : 'translate-x-0'\" x-text=\"readingMode === 'dark' ? '🌙' : '☀️'\">☀️</span></button></div><label class=\"block mb-2\"><select name=\"reading_theme\" x-model=\"readingTheme\" @change=\"applyTheme()\" class=\"w-full mt-1 px-3 py-2 rounded border\"><optgroup label=\"📖 Classic Reading\"><option value=\"light\">Light</option> <option value=\"paper\">Paper</option> <option value=\"sepia\">Sepia</option> <option value=\"parchment\">Parchment</option> <option value=\"warm\">Warm</option> <option value=\"candlelight\">Candlelight</option></optgroup> <optgroup label=\"🌤️ Sky & Atmosphere\"><option value=\"azure\">Azure</option> <option value=\"sky\">Sky</option> <option value=\"arctic\">Arctic</option> <option value=\"frost\">Frost</option></optgroup> <optgroup label=\"🌅 Sunset & Warmth\"><option value=\"dusk\">Dusk</option> <option value=\"sunset\">Sunset</option> <option value=\"twilight\">Twilight</option></optgroup> <optgroup label=\"🌲 Nature & Earth\"><option value=\"forest\">Forest</option> <option value=\"moss\">Moss</option> <option value=\"slate\">Slate</option></optgroup> <optgroup label=\"⚡ High Performance\"><option value=\"oled\">OLED</option> <option value=\"solarized\">Solarized</option></optgroup></select></label></div><!-- Typography (reflowable only) --><div class=\"mb-6\" x-show=\"!isFixedLayout\"><h3 class=\"font-semibold mb-2\">Typography</h3><label class=\"block mb-2\">Reading Font <select name=\"reading_font\" x-model=\"readingFont\" @change=\"applyFont()\" class=\"w-full mt-1 px-3 py-2 rounded border\"><option value=\"literata\">Literata (Default)</option> <option value=\"crimson\">Crimson Text</option> <option value=\"source-serif\">Source Serif 4</option> <option value=\"eb-garamond\">EB Garamond</option> <option value=\"libertinus\">Libertinus Serif</option> <option value=\"noto-serif\">Noto Serif</option> <option value=\"charis-sil\">Charis SIL</option> <option value=\"ibm-plex\">IBM Plex Serif</option></select></label> <label class=\"block mb-2\">Font Size <input type=\"range\" name=\"font_size\" x-model.number=\"fontSize\" @change=\"applyFont()\" min=\"10\" max=\"40\" class=\"w-full\"> <span class=\"text-xs\" x-text=\"fontSize + 'px'\" style=\"color: var(--text-secondary)\">18px</span></label> <label class=\"block mb-2\">Line Height <input type=\"range\" name=\"line_height\" x-model.number=\"lineHeight\" @change=\"applyFont()\" min=\"0.8\" max=\"3.0\" step=\"0.1\" class=\"w-full\"> <span class=\"text-xs\" x-text=\"lineHeight\" style=\"color: var(--text-secondary)\">1.6</span></label></div><!-- Navigation --><div class=\"mb-6\" x-show=\"isFixedLayout\"><h3 class=\"font-semibold mb-2\">Navigation</h3><label class=\"flex items-center mb-2\"><input type=\"checkbox\" name=\"double_page_spread\" x-model=\"doublePageSpread\" @change=\"applyDoublePageSpread()\" class=\"mr-2\"> Double Page Spread</label></div><div class=\"flex gap-2 mt-6\"><button @click=\"restoreDefaults()\" class=\"flex-1 py-2 border rounded hover:opacity-80\" style=\"border-color: var(--border);\">Restore Defaults</button> <button @click=\"toggleSettings()\" class=\"flex-1 py-2 bg-blue-600 text-white rounded hover:bg-blue-700\">Done</button></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -279,9 +302,9 @@ func ReaderTOCPanel(_ ReaderMetadata) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
+		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
+			templ_7745c5c3_Var13 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"dockable-panel\" data-panel=\"toc\" data-side=\"left\" x-ref=\"tocPanel\"><div class=\"panel-header flex items-center justify-between p-3 cursor-pointer\" @click=\"toggleWindowShade($refs.tocPanel)\"><h3 class=\"panel-title font-semibold\">📖 Table of Contents</h3><div class=\"panel-controls flex items-center gap-2\"><button class=\"window-shade-toggle\">─</button></div></div><div class=\"panel-content p-4 overflow-y-auto\"><nav id=\"toc-list\" class=\"space-y-1\"><template x-for=\"item in tocItems\" :key=\"item.href\"><a href=\"#\" @click.prevent=\"goToTOCItem(item)\" class=\"block py-1 px-2 rounded hover:bg-gray-700 text-sm\" :style=\"'padding-left: ' + ((item.depth || 0) * 1 + 0.5) + 'rem'\" x-text=\"item.label\"></a></template></nav></div></div>")
@@ -292,7 +315,7 @@ func ReaderTOCPanel(_ ReaderMetadata) templ.Component {
 	})
 }
 
-func ReaderNavigatorPanel() templ.Component {
+func ReaderBookmarksPanel() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -308,134 +331,12 @@ func ReaderNavigatorPanel() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var12 == nil {
+		if templ_7745c5c3_Var14 == nil {
-			templ_7745c5c3_Var12 = templ.NopComponent
+			templ_7745c5c3_Var14 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"dockable-panel\" data-panel=\"navigator\" data-side=\"right\" x-ref=\"navigatorPanel\"><div class=\"panel-header flex items-center justify-between p-3 cursor-pointer\" @click=\"toggleWindowShade($refs.navigatorPanel)\"><h3 class=\"panel-title font-semibold\">🗺️ Navigator</h3><div class=\"panel-controls flex items-center gap-2\"><button class=\"window-shade-toggle\">─</button></div></div><div class=\"panel-content p-2 overflow-hidden\"><div id=\"navigator-viewport\" class=\"relative w-full h-full\"></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"dockable-panel\" data-panel=\"bookmarks\" data-side=\"right\" x-ref=\"bookmarksPanel\"><div class=\"panel-header flex items-center justify-between p-3 cursor-pointer\" @click=\"toggleWindowShade($refs.bookmarksPanel)\"><h3 class=\"panel-title font-semibold\">🔖 Bookmarks</h3><div class=\"panel-controls flex items-center gap-2\"><button class=\"window-shade-toggle\">─</button></div></div><div class=\"panel-content p-4 overflow-y-auto\"><div id=\"bookmarks-list\" class=\"space-y-2\"><template x-for=\"bookmark in bookmarkItems\" :key=\"bookmark.id\"><div class=\"flex items-center gap-1 group\"><a href=\"#\" @click.prevent=\"goToBookmark(bookmark)\" class=\"flex-1 min-w-0 block py-2 hover:bg-gray-700 rounded px-2\"><span class=\"font-medium block truncate\" x-text=\"bookmark.title\"></span> <span class=\"text-xs block truncate\" style=\"color: var(--text-secondary)\" x-text=\"bookmark.positionLabel\"></span></a> <button @click=\"deleteBookmark(bookmark.id)\" class=\"p-2 rounded hover:bg-red-900/60 opacity-0 group-hover:opacity-100 transition-opacity\" title=\"Delete bookmark\" aria-label=\"Delete bookmark\">✕</button></div></template><template x-if=\"bookmarkItems.length === 0\"><p class=\"text-sm\" style=\"color: var(--text-secondary)\">No bookmarks yet</p></template></div><button @click=\"addBookmark()\" class=\"w-full py-2 mt-4 bg-blue-600 text-white rounded hover:bg-blue-700\">+ Add Bookmark</button></div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"dockable-panel\" data-panel=\"bookmarks\" data-side=\"right\" x-ref=\"bookmarksPanel\"><div class=\"panel-header flex items-center justify-between p-3 cursor-pointer\" @click=\"toggleWindowShade($refs.bookmarksPanel)\"><h3 class=\"panel-title font-semibold\">🔖 Bookmarks</h3><div class=\"panel-controls flex items-center gap-2\"><button class=\"window-shade-toggle\">─</button></div></div><div class=\"panel-content p-4 overflow-y-auto\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if len(bookmarks) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div id=\"bookmarks-list\" class=\"space-y-2\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			for _, bookmark := range bookmarks {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<a href=\"#\" @click.prevent=\"goToBookmarkTarget($el.dataset.cfi)\" data-cfi=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var14 string
-				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.ResolveAttributeValue(bookmark.CfiPosition)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 398, Col: 38}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" class=\"block py-2 hover:bg-gray-700 rounded px-2\"><span class=\"font-medium\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var15 string
-				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Title)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 401, Col: 49}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</span> <span class=\"text-xs ml-2\" style=\"color: var(--text-secondary)\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Position)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 403, Col: 27}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</span></a>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No bookmarks yet</p>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<button @click=\"addBookmark()\" class=\"w-full py-2 mt-4 bg-blue-600 text-white rounded hover:bg-blue-700\">+ Add Bookmark</button></div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-func DictionaryPopup() templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var17 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var17 == nil {
-			templ_7745c5c3_Var17 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<div id=\"dictionary-popup\" class=\"hidden fixed bg-white text-black p-4 rounded-lg shadow-xl max-w-md z-50\"></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

web/src/reader/reader.ts

@@ -382,7 +382,13 @@ document.addEventListener("alpine:init", () => {
     tocOpen: false,
     settingsOpen: false,
     bookmarksOpen: false,
-    navigatorOpen: false,
+    bookmarkItems: [] as {
+      id: string;
+      title: string;
+      positionLabel: string;
+      cfi: string;
+      page: number | null;
+    }[],
     tocItems: [] as any[],
     mediaItemId: "" as string,
     saveTimeout: null as ReturnType<typeof setTimeout> | null,
@@ -446,8 +452,16 @@ document.addEventListener("alpine:init", () => {
       savedCfi?: string;
       savedPage?: number;
       savedTotalPages?: number;
+      bookmarks?: {
+        id: string;
+        title: string;
+        positionLabel: string;
+        cfi: string;
+        page: number | null;
+      }[];
     }) {
       this.mediaItemId = config.mediaItemId;
+      this.bookmarkItems = config.bookmarks ?? [];
       this.settings = await loadSettings();
       if (this.settings) {
         this.progressMode = this.settings.progress_mode || "pages";
@@ -499,7 +513,7 @@ document.addEventListener("alpine:init", () => {
         this.renderer.setStyles?.(this.buildCSS());
       }
       this.view.addEventListener("load", (e: any) => {
-        const { doc, index } = e.detail;
+        const { doc } = e.detail;
         const link = doc.createElement("link");
         link.rel = "stylesheet";
         link.href = "/static/reader-fonts.css";
@@ -587,8 +601,19 @@ document.addEventListener("alpine:init", () => {
       const vp = document.getElementById("reader-viewport");
       if (!top || !bot || !vp) return;
       const margin = 6;
-      vp.style.setProperty("top", `${top.offsetHeight + margin}px`);
+      const topInset = `${top.offsetHeight + margin}px`;
-      vp.style.setProperty("bottom", `${bot.offsetHeight + margin}px`);
+      const bottomInset = `${bot.offsetHeight + margin}px`;
+      vp.style.setProperty("top", topInset);
+      vp.style.setProperty("bottom", bottomInset);
+      // Sidebars (TOC/settings/bookmarks panels) must sit below/above the
+      // chrome bars, tracking their measured heights (safe-area insets, wrap).
+      for (const id of ["left-sidebar", "right-sidebar"]) {
+        const sidebar = document.getElementById(id);
+        if (sidebar) {
+          sidebar.style.setProperty("top", topInset);
+          sidebar.style.setProperty("bottom", bottomInset);
+        }
+      }
     },
     setupViewportInsets() {
       const top = document.getElementById("reader-topbar");
@@ -639,7 +664,7 @@ document.addEventListener("alpine:init", () => {
       if (tocItem) {
         if (tocItem.label) {
           const boundaryIdx = this.chapterBoundaries.findIndex(
-            (b: any) => b.tocItem === tocItem,
+            (b: any) => b.label === tocItem.label,
           );
           if (boundaryIdx !== -1) {
             body.chapter = boundaryIdx;
@@ -730,9 +755,6 @@ document.addEventListener("alpine:init", () => {
     toggleBookmarks() {
       this.bookmarksOpen = !this.bookmarksOpen;
     },
-    toggleNavigator() {
-      this.navigatorOpen = !this.navigatorOpen;
-    },
     toggleWindowShade(panelEl: HTMLElement) {
       panelEl.classList.toggle("panel-collapsed");
     },
@@ -752,11 +774,17 @@ document.addEventListener("alpine:init", () => {
         this.tocOpen = false;
       }
     },
-    goToBookmarkTarget(cfi: string) {
+    goToBookmark(item: { cfi: string; page: number | null }) {
-      if (this.view && cfi) {
+      if (!this.view) return;
-        this.view.goTo(cfi);
+      if (item.cfi) {
-        this.bookmarksOpen = false;
+        this.view.goTo(item.cfi);
+      } else if (item.page != null && item.page > 0) {
+        // Fixed-layout/comic: sections are pages; foliate takes an index.
+        this.view.goTo(item.page - 1);
+      } else {
+        return;
       }
+      this.bookmarksOpen = false;
     },
     applyTheme() {
       const viewport = document.getElementById("reader-viewport")!;
@@ -821,27 +849,92 @@ document.addEventListener("alpine:init", () => {
       this.applyTheme();
       this.applyFont();
     },
+    async refreshBookmarks() {
+      const token = getToken();
+      if (!token || !this.mediaItemId) return;
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/bookmarks`,
+          { headers: { Authorization: `Bearer ${token}` } },
+        );
+        if (!resp.ok) return;
+        const rows = await resp.json();
+        this.bookmarkItems = (rows as any[]).map((r) => ({
+          id: r.id,
+          title: r.title ?? "",
+          positionLabel: r.position?.String ?? r.position ?? "",
+          cfi: r.cfi_position?.String ?? r.cfi_position ?? "",
+          page:
+            r.page_number != null
+              ? (r.page_number?.Int32 ?? r.page_number)
+              : null,
+        }));
+      } catch (_e) {
+        /* leave the existing list on fetch failure */
+      }
+    },
     async addBookmark() {
       const token = getToken();
-      if (!token || !this.view) return;
+      if (!token || !this.view || !this.mediaItemId) return;
       const location = this.view.lastLocation;
       if (!location) return;
+
+      const cfi = (!this.isFixedLayout && location.cfi) || "";
+      const page = this.isFixedLayout
+        ? (this.renderer?.index ?? 0) + 1
+        : 0;
+
       try {
-        await fetch("/readers/bookmarks", {
+        const resp = await fetch(
-          method: "POST",
+          `/api/media-items/${this.mediaItemId}/bookmarks`,
-          headers: {
+          {
-            Authorization: `Bearer ${token}`,
+            method: "POST",
-            "Content-Type": "application/json",
+            headers: {
+              Authorization: `Bearer ${token}`,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              title: `Bookmark at ${this.progressText || "current position"}`,
+              position: this.isFixedLayout
+                ? `page:${page}`
+                : cfi
+                  ? `cfi:${cfi}`
+                  : "",
+              cfi_position: cfi,
+              page_number: page,
+              chapter_number: this.chapterNumberForProgress() || 0,
+              percentage: location.fraction ?? 0,
+            }),
           },
-          body: JSON.stringify({
+        );
-            title: `Bookmark at ${this.progressText}`,
+        if (resp.ok) await this.refreshBookmarks();
-            position: JSON.stringify(location),
-          }),
-        });
       } catch (_e) {
         /* ignore bookmark errors for now */
       }
     },
+    async deleteBookmark(id: string) {
+      const token = getToken();
+      if (!token || !this.mediaItemId) return;
+      try {
+        const resp = await fetch(
+          `/api/media-items/${this.mediaItemId}/bookmarks/${id}`,
+          { method: "DELETE", headers: { Authorization: `Bearer ${token}` } },
+        );
+        if (resp.ok || resp.status === 204) {
+          this.bookmarkItems = this.bookmarkItems.filter((b) => b.id !== id);
+        }
+      } catch (_e) {
+        /* ignore bookmark errors for now */
+      }
+    },
+    chapterNumberForProgress(): number {
+      const tocItem = this.lastRelocateDetail?.tocItem;
+      if (!tocItem?.label) return 0;
+      const idx = this.chapterBoundaries.findIndex(
+        (b: any) => b.label === tocItem.label,
+      );
+      return idx === -1 ? 0 : idx;
+    },
     formatProgressParts(
       fraction: number,
       location: { current: number; next: number; total: number },

web/static/input.css

@@ -754,10 +754,11 @@
     background-color: var(--bg-secondary);
     border-right: 1px solid var(--border);
     width: 320px;
-    max-height: calc(100vh - 8rem);
+    max-width: calc(100vw - 1rem);
+    max-height: 100%;
     overflow-y: auto;
   }
-  .panel-container[data-side="right"] {
+  #right-sidebar .panel-container {
     border-right: none;
     border-left: 1px solid var(--border);
   }