Viewer & Icon enhancements

templating/engine.go

@@ -55,13 +55,13 @@ func NewEngine(layouts, templates *fs.FS) *Engine {
 func PageIcon(iconType string) template.HTML {
 	switch iconType {
 	case "first":
-		return template.HTML(`<i class="ri-file-text-line text-black text-sm"></i>`)
+		return template.HTML(`<i class="ri-file-text-line text-black text-sm" style="display: inline-block;"></i>`)
 	case "last":
-		return template.HTML(`<i class="ri-file-text-line text-black text-sm" style="transform: scaleX(-1); display: inline-block;"></i>`)
+		return template.HTML(`<i class="ri-file-text-line text-black text-sm" style="display: inline-block; transform: scaleX(-1);"></i>`)
 	case "even":
-		return template.HTML(`<i class="ri-file-text-line text-black text-sm" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-slate-400 text-sm"></i>`)
+		return template.HTML(`<i class="ri-file-text-line text-black text-sm" style="margin-left: 1px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-slate-400 text-sm"></i>`)
 	case "odd":
-		return template.HTML(`<i class="ri-file-text-line text-slate-400 text-sm" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-black text-sm" ></i>`)
+		return template.HTML(`<i class="ri-file-text-line text-slate-400 text-sm" style="margin-left: 1px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-black text-sm" ></i>`)
 	case "single":
 		return template.HTML(`<i class="ri-file-text-line text-black text-sm"></i>`)
 	default:

viewmodels/issue_view.go

@@ -143,20 +143,27 @@ func PiecesForIssue(lib *xmlmodels.Library, issue xmlmodels.Issue) (PiecesByPage
 	defer lib.Pieces.Unlock()
 
 	for _, piece := range lib.Pieces.Array {
-		if d, ok := piece.ReferencesIssue(year, issue.Number.No); ok {
+		// Process ALL IssueRefs for this piece, not just the first match
+		for _, issueRef := range piece.IssueRefs {
+			if issueRef.Nr == issue.Number.No && issueRef.When.Year == year {
+				// DEBUG: Log piece details for specific issue
+				if year == 1771 && issue.Number.No == 29 {
+					fmt.Printf("DEBUG PiecesForIssue: Piece ID=%s, Von=%d, Bis=%d, Beilage=%d\n", piece.Identifier.ID, issueRef.Von, issueRef.Bis, issueRef.Beilage)
+				}
+
 				// Add main entry on starting page
-			p := PieceByIssue{Piece: piece, Reference: *d, IsContinuation: false}
+				p := PieceByIssue{Piece: piece, Reference: issueRef, IsContinuation: false}
-			if d.Beilage > 0 {
+				if issueRef.Beilage > 0 {
-				functions.MapArrayInsert(ppa.Items, d.Von, p)
+					functions.MapArrayInsert(ppa.Items, issueRef.Von, p)
 				} else {
-				functions.MapArrayInsert(ppi.Items, d.Von, p)
+					functions.MapArrayInsert(ppi.Items, issueRef.Von, p)
 				}
 
 				// Add continuation entries for subsequent pages (if Bis > Von)
-			if d.Bis > d.Von {
+				if issueRef.Bis > issueRef.Von {
-				for page := d.Von + 1; page <= d.Bis; page++ {
+					for page := issueRef.Von + 1; page <= issueRef.Bis; page++ {
-					pContinuation := PieceByIssue{Piece: piece, Reference: *d, IsContinuation: true}
+						pContinuation := PieceByIssue{Piece: piece, Reference: issueRef, IsContinuation: true}
-					if d.Beilage > 0 {
+						if issueRef.Beilage > 0 {
 							functions.MapArrayInsert(ppa.Items, page, pContinuation)
 						} else {
 							functions.MapArrayInsert(ppi.Items, page, pContinuation)
@@ -165,6 +172,7 @@ func PiecesForIssue(lib *xmlmodels.Library, issue xmlmodels.Issue) (PiecesByPage
 				}
 			}
 		}
+	}
 
 	ppi.Pages = slices.Collect(maps.Keys(ppi.Items))
 	ppa.Pages = slices.Collect(maps.Keys(ppa.Items))
@@ -273,6 +281,7 @@ func CreateIndividualPagesWithMetadata(pieces PiecesByPage, lib *xmlmodels.Libra
 	for _, page := range pieces.Pages {
 		pageItems := pieces.Items[page]
 
+
 		// Sort pieces according to the ordering rules
 		sortedPageItems := sortPiecesOnPage(pageItems, page)
 
@@ -366,9 +375,12 @@ func determinePageIcon(pageNum int, allPages []int) string {
 		return "first"
 	}
 
-	slices.Sort(allPages)
+	// Create a copy to avoid modifying the original slice
-	firstPage := allPages[0]
+	sortedPages := make([]int, len(allPages))
-	lastPage := allPages[len(allPages)-1]
+	copy(sortedPages, allPages)
+	slices.Sort(sortedPages)
+	firstPage := sortedPages[0]
+	lastPage := sortedPages[len(sortedPages)-1]
 
 	// Newspaper layout logic based on physical page positioning
 	if pageNum == firstPage {

viewmodels/piece_view.go

@@ -44,6 +44,13 @@ func NewPieceView(piece xmlmodels.Piece, lib *xmlmodels.Library) (*PieceVM, erro
 		IssueContexts: []string{},
 	}
 
+	// DEBUG: Log piece details
+	fmt.Printf("DEBUG PieceView: Creating view for piece ID=%s\n", piece.Identifier.ID)
+	fmt.Printf("DEBUG PieceView: Piece has %d IssueRefs\n", len(piece.IssueRefs))
+	for i, ref := range piece.IssueRefs {
+		fmt.Printf("DEBUG PieceView: IssueRef[%d]: Year=%d, Nr=%d, Von=%d, Bis=%d, Beilage=%d\n", i, ref.When.Year, ref.Nr, ref.Von, ref.Bis, ref.Beilage)
+	}
+
 	// Extract title from piece
 	if len(piece.Title) > 0 {
 		pvm.Title = piece.Title[0]
@@ -71,7 +78,13 @@ func NewPieceView(piece xmlmodels.Piece, lib *xmlmodels.Library) (*PieceVM, erro
 		pvm.IssueContexts = append(pvm.IssueContexts, issueContext)
 
 		// Add pages for this issue reference
-		for pageNum := issueRef.Von; pageNum <= issueRef.Bis; pageNum++ {
+		// Handle case where Bis=0 (should be treated as single page at Von)
+		bis := issueRef.Bis
+		if bis == 0 {
+			bis = issueRef.Von
+		}
+
+		for pageNum := issueRef.Von; pageNum <= bis; pageNum++ {
 			pageEntry := PiecePageEntry{
 				PageNumber:     pageNum,
 				IssueYear:      issueRef.When.Year,
@@ -84,7 +97,7 @@ func NewPieceView(piece xmlmodels.Piece, lib *xmlmodels.Library) (*PieceVM, erro
 			}
 
 			// Get actual image path from registry
-			pageEntry.ImagePath = getImagePathFromRegistry(issueRef.When.Year, pageNum)
+			pageEntry.ImagePath = getImagePathFromRegistryWithBeilage(issueRef.When.Year, issueRef.Nr, pageNum, issueRef.Beilage > 0)
 
 			pvm.AllPages = append(pvm.AllPages, pageEntry)
 		}
@@ -92,6 +105,10 @@ func NewPieceView(piece xmlmodels.Piece, lib *xmlmodels.Library) (*PieceVM, erro
 
 	pvm.TotalPageCount = len(pvm.AllPages)
 
+	// DEBUG: Log final counts
+	fmt.Printf("DEBUG PieceView: Final counts - %d issue contexts, %d total pages\n", len(pvm.IssueContexts), pvm.TotalPageCount)
+	fmt.Printf("DEBUG PieceView: Issue contexts: %v\n", pvm.IssueContexts)
+
 	// Load images and update availability
 	if err := pvm.loadImages(); err != nil {
 		return nil, fmt.Errorf("failed to load images: %w", err)
@@ -214,6 +231,39 @@ func getImagePathFromRegistry(year, page int) string {
 	return fmt.Sprintf("/static/pictures/%d/seite_%d.jpg", year, page)
 }
 
+// getImagePathFromRegistryWithBeilage gets the actual image path, handling both regular and Beilage pages
+func getImagePathFromRegistryWithBeilage(year, issue, page int, isBeilage bool) string {
+	// Initialize registry if needed
+	if err := initImageRegistry(); err != nil {
+		return ""
+	}
+
+	// For regular pages, use the old method
+	if !isBeilage {
+		key := fmt.Sprintf("%d-%d", year, page)
+		if imageFile, exists := imageRegistry.ByYearPage[key]; exists {
+			return imageFile.Path
+		}
+		// Fallback for regular pages
+		return fmt.Sprintf("/static/pictures/%d/seite_%d.jpg", year, page)
+	}
+
+	// For Beilage pages, search through all files for this year-issue
+	yearIssueKey := fmt.Sprintf("%d-%d", year, issue)
+	if issueFiles, exists := imageRegistry.ByYearIssue[yearIssueKey]; exists {
+		for _, file := range issueFiles {
+			if file.IsBeilage && file.Page == page {
+				fmt.Printf("DEBUG: Found Beilage image for year=%d, issue=%d, page=%d: %s\n", year, issue, page, file.Path)
+				return file.Path
+			}
+		}
+	}
+
+	// Fallback for Beilage pages
+	fmt.Printf("DEBUG: No Beilage image found for year=%d, issue=%d, page=%d\n", year, issue, page)
+	return fmt.Sprintf("/static/pictures/%d/%db-beilage-seite_%d.jpg", year, issue, page)
+}
+
 // populateOtherPieces finds and populates other pieces that appear on the same pages as this piece
 func (pvm *PieceVM) populateOtherPieces(lib *xmlmodels.Library) error {
 	fmt.Printf("DEBUG: Starting populateOtherPieces for piece %s\n", pvm.Piece.Identifier.ID)
@@ -243,12 +293,21 @@ func (pvm *PieceVM) populateOtherPieces(lib *xmlmodels.Library) error {
 			continue
 		}
 		fmt.Printf("DEBUG: Found %d total pieces for issue %d/%d\n", len(piecesForIssue.Pages), pageEntry.IssueYear, pageEntry.IssueNumber)
+		fmt.Printf("DEBUG: PiecesForIssue.Pages = %v\n", piecesForIssue.Pages)
 
 		// Create IndividualPiecesByPage using the same function as ausgabe view
 		individualPieces := CreateIndividualPagesWithMetadata(piecesForIssue, lib)
 		fmt.Printf("DEBUG: CreateIndividualPagesWithMetadata created %d pages with pieces\n", len(individualPieces.Pages))
 		fmt.Printf("DEBUG: Pages with pieces: %v\n", individualPieces.Pages)
 
+		// DEBUG: Show what pages are available in the map
+		if pageEntry.PageNumber == 113 {
+			fmt.Printf("DEBUG: Available pages in individualPieces.Items: %v\n", individualPieces.Pages)
+			for pageNum := range individualPieces.Items {
+				fmt.Printf("DEBUG: Page %d has %d pieces\n", pageNum, len(individualPieces.Items[pageNum]))
+			}
+		}
+
 		// Get pieces that appear on this specific page
 		if individualPiecesOnPage, exists := individualPieces.Items[pageEntry.PageNumber]; exists {
 			fmt.Printf("DEBUG: Found %d pieces on page %d\n", len(individualPiecesOnPage), pageEntry.PageNumber)

views/assets/scripts.js

@@ -1,4 +1,4 @@
-class B extends HTMLElement {
+class E extends HTMLElement {
   constructor() {
     super(), this.scrollHandler = null, this.scrollTimeout = null, this.clickHandlers = [], this.manualNavigation = !1;
   }
@@ -42,14 +42,14 @@ class B extends HTMLElement {
     const e = document.getElementById("scrollspy-slider"), t = document.getElementById("scrollspy-nav");
     if (!e || !t || e.style.opacity === "0")
       return;
-    const i = t.getBoundingClientRect(), n = parseFloat(e.style.top), r = parseFloat(e.style.height), s = n + r, l = t.scrollTop, a = l + i.height;
+    const i = t.getBoundingClientRect(), n = parseFloat(e.style.top), r = parseFloat(e.style.height), s = n + r, a = t.scrollTop, l = a + i.height;
-    if (s > a) {
+    if (s > l) {
       const c = s - i.height + 20;
       t.scrollTo({
         top: c,
         behavior: "smooth"
       });
-    } else if (n < l) {
+    } else if (n < a) {
       const c = n - 20;
       t.scrollTo({
         top: Math.max(0, c),
@@ -64,24 +64,24 @@ class B extends HTMLElement {
     try {
       this.sections.forEach((n) => {
         if (!n || !n.getAttribute) return;
-        const r = n.getAttribute("id"), s = n.querySelector(".akteur-werke-section"), l = n.querySelector(".akteur-beitraege-section");
+        const r = n.getAttribute("id"), s = n.querySelector(".akteur-werke-section"), a = n.querySelector(".akteur-beitraege-section");
-        let a = !1;
+        let l = !1;
         if (s) {
           const c = s.getBoundingClientRect(), d = c.top < window.innerHeight, u = c.bottom > 0;
-          d && u && (a = !0);
+          d && u && (l = !0);
         }
-        if (l && !a) {
+        if (a && !l) {
-          const c = l.getBoundingClientRect(), d = c.top < window.innerHeight, u = c.bottom > 0;
+          const c = a.getBoundingClientRect(), d = c.top < window.innerHeight, u = c.bottom > 0;
-          d && u && (a = !0);
+          d && u && (l = !0);
         }
-        if (!s && !l) {
+        if (!s && !a) {
           const c = n.querySelector("div:first-child");
           if (c) {
-            const d = c.getBoundingClientRect(), u = d.top >= 0, h = d.bottom <= window.innerHeight;
+            const d = c.getBoundingClientRect(), u = d.top >= 0, g = d.bottom <= window.innerHeight;
-            u && h && (a = !0);
+            u && g && (l = !0);
           }
         }
-        a && e.push(r);
+        l && e.push(r);
       });
     } catch {
       return;
@@ -93,13 +93,13 @@ class B extends HTMLElement {
       e.includes(r) && (n.classList.add("font-medium"), t.push(n));
     }), t.length > 0 && i) {
       const n = document.getElementById("scrollspy-nav"), r = n.getBoundingClientRect();
-      let s = 1 / 0, l = -1 / 0;
+      let s = 1 / 0, a = -1 / 0;
       t.forEach((c) => {
-        const d = c.getBoundingClientRect(), u = d.top - r.top + n.scrollTop, h = u + d.height;
+        const d = c.getBoundingClientRect(), u = d.top - r.top + n.scrollTop, g = u + d.height;
-        s = Math.min(s, u), l = Math.max(l, h);
+        s = Math.min(s, u), a = Math.max(a, g);
       });
-      let a = l - s;
+      let l = a - s;
-      i.style.top = `${s}px`, i.style.height = `${a}px`, i.style.opacity = "1", setTimeout(() => this.ensureMarkerVisibility(), 100);
+      i.style.top = `${s}px`, i.style.height = `${l}px`, i.style.opacity = "1", setTimeout(() => this.ensureMarkerVisibility(), 100);
     } else i && (i.style.opacity = "0");
     t.length > 0 && this.updateSidebarScroll(t);
   }
@@ -117,8 +117,8 @@ class B extends HTMLElement {
     if (i && (i.classList.add("font-medium"), t)) {
       const n = document.getElementById("scrollspy-nav");
       if (n) {
-        const r = n.getBoundingClientRect(), s = i.getBoundingClientRect(), l = s.top - r.top + n.scrollTop;
+        const r = n.getBoundingClientRect(), s = i.getBoundingClientRect(), a = s.top - r.top + n.scrollTop;
-        t.style.top = `${l}px`, t.style.height = `${s.height}px`, t.style.opacity = "1";
+        t.style.top = `${a}px`, t.style.height = `${s.height}px`, t.style.opacity = "1";
       }
     }
   }
@@ -132,11 +132,11 @@ class B extends HTMLElement {
       document.documentElement.clientHeight,
       document.documentElement.scrollHeight,
       document.documentElement.offsetHeight
-    ), r = window.innerHeight, s = n - r, l = s > 0 ? window.scrollY / s : 0, a = t.clientHeight, d = t.scrollHeight - a;
+    ), r = window.innerHeight, s = n - r, a = s > 0 ? window.scrollY / s : 0, l = t.clientHeight, d = t.scrollHeight - l;
     if (d > 0) {
-      const u = l * d, h = i.getBoundingClientRect(), C = t.getBoundingClientRect(), k = h.top - C.top + t.scrollTop, T = a / 2, I = k - T, b = 0.7, L = b * u + (1 - b) * I, w = Math.max(0, Math.min(d, L)), H = t.scrollTop;
+      const u = a * d, g = i.getBoundingClientRect(), h = t.getBoundingClientRect(), m = g.top - h.top + t.scrollTop, f = l / 2, I = m - f, v = 0.7, L = v * u + (1 - v) * I, x = Math.max(0, Math.min(d, L)), H = t.scrollTop;
-      Math.abs(w - H) > 10 && t.scrollTo({
+      Math.abs(x - H) > 10 && t.scrollTo({
-        top: w,
+        top: x,
         behavior: "smooth"
       });
     }
@@ -155,8 +155,8 @@ class B extends HTMLElement {
     e && (e.style.opacity = "0", e.style.height = "0"), this.sections = null, this.navLinks = null, this.clickHandlers = [], this.manualNavigation = !1;
   }
 }
-customElements.define("akteure-scrollspy", B);
+customElements.define("akteure-scrollspy", E);
-class E extends HTMLElement {
+class B extends HTMLElement {
   constructor() {
     super(), this.resizeObserver = null;
   }
@@ -257,7 +257,7 @@ class E extends HTMLElement {
 								id="single-page-image"
 								src=""
 								alt=""
-								class="w-full h-auto rounded-lg shadow-2xl cursor-pointer"
+								class="w-full h-auto rounded-lg shadow-2xl cursor-zoom-out"
 								onclick="this.closest('single-page-viewer').close()"
 								title="Klicken zum Schließen"
 							/>
@@ -265,7 +265,7 @@ class E extends HTMLElement {
 					</div>
 				</div>
 			</div>
-		`, this.setupResizeObserver();
+		`, this.setupResizeObserver(), this.setupKeyboardNavigation();
   }
   // Set up resize observer to dynamically update sidebar width
   setupResizeObserver() {
@@ -281,58 +281,67 @@ class E extends HTMLElement {
       e.style.width = t, console.log("Updated sidebar width to:", t);
     }
   }
-  show(e, t, i, n = !1, r = 0, s = null) {
+  show(e, t, i, n = !1, r = 0, s = null, a = null, l = null) {
-    const l = this.querySelector("#single-page-image"), a = this.querySelector("#page-number"), c = this.querySelector("#page-icon");
+    const c = this.querySelector("#single-page-image"), d = this.querySelector("#page-number"), u = this.querySelector("#page-icon");
-    this.querySelector("#page-indicator"), l.src = e, l.alt = t, this.currentPageNumber = i, this.currentIsBeilage = n, this.currentPartNumber = s;
+    this.querySelector("#page-indicator"), c.src = e, c.alt = t, this.currentPageNumber = i, this.currentIsBeilage = n, this.currentPartNumber = s;
-    const d = this.getIssueContext(i);
+    let g;
-    if (a.innerHTML = d ? `${d}, ${i}` : `${i}`, r && i === r) {
+    if (l)
-      a.style.position = "relative";
+      g = l;
-      const u = a.querySelector(".target-page-dot");
-      u && u.remove();
-      const h = document.createElement("span");
-      h.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", h.title = "verlinkte Seite", a.appendChild(h);
-    }
-    if (s !== null)
-      c.innerHTML = `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${s}. Teil</span>`;
     else {
-      const u = this.determinePageIconType(i, n);
+      const m = this.getIssueContext(i);
-      c.innerHTML = this.getPageIconHTML(u);
+      g = m ? `${m}, ${i}` : `${i}`;
     }
-    this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden";
+    if (d.innerHTML = g, r && i === r) {
+      d.style.position = "relative";
+      const m = d.querySelector(".target-page-dot");
+      m && m.remove();
+      const f = document.createElement("span");
+      f.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", f.title = "verlinkte Seite", d.appendChild(f);
+    }
+    a ? a === "part-number" && s !== null ? u.innerHTML = `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${s}. Teil</span>` : u.innerHTML = this.generateIconFromType(a) : u.innerHTML = this.generateFallbackIcon(i, n, s), this.updateNavigationButtons(), this.style.display = "block";
+    const h = this.querySelector(".flex-1.overflow-auto");
+    h && (h.scrollTop = 0), document.body.style.overflow = "hidden";
   }
   close() {
     this.style.display = "none", document.body.style.overflow = "";
   }
   disconnectedCallback() {
-    this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), document.body.style.overflow = "";
+    this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.keyboardHandler && (document.removeEventListener("keydown", this.keyboardHandler), this.keyboardHandler = null), document.body.style.overflow = "";
   }
-  // Determine page icon type based on page position and whether it's beilage
+  // Generate icon HTML from Go icon type - matches templating/engine.go PageIcon function
-  determinePageIconType(e, t) {
+  generateIconFromType(e) {
-    const i = t ? '.newspaper-page-container[data-beilage="true"]' : ".newspaper-page-container:not([data-beilage])", r = Array.from(document.querySelectorAll(i)).map((a) => {
-      const c = a.getAttribute("data-page-container");
-      return c ? parseInt(c) : null;
-    }).filter((a) => a !== null).sort((a, c) => a - c);
-    if (r.length === 0)
-      return "first";
-    const s = r[0], l = r[r.length - 1];
-    return e === s ? "first" : e === l ? "last" : e === s + 1 ? "even" : e === l - 1 ? "odd" : e % 2 === 0 ? "even" : "odd";
-  }
-  // Generate page icon HTML based on type (same as Go PageIcon function)
-  getPageIconHTML(e) {
-    const t = "ri-file-text-line text-lg";
     switch (e) {
       case "first":
-        return `<i class="${t} text-black"></i>`;
+        return '<i class="ri-file-text-line text-black text-lg" display: inline-block;"></i>';
       case "last":
-        return `<i class="${t} text-black" style="transform: scaleX(-1); display: inline-block;"></i>`;
+        return '<i class="ri-file-text-line text-black text-lg" style="transform: scaleX(-1); display: inline-block;"></i>';
       case "even":
-        return `<i class="${t} text-black" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="${t} text-slate-400"></i>`;
+        return '<i class="ri-file-text-line text-black text-lg" style="margin-left: 1px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-slate-400 text-lg"></i>';
       case "odd":
-        return `<i class="${t} text-slate-400" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="${t} text-black"></i>`;
+        return '<i class="ri-file-text-line text-slate-400 text-lg" style="margin-left: 1px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-black text-lg"></i>';
+      case "single":
+        return '<i class="ri-file-text-line text-black text-lg"></i>';
       default:
-        return `<i class="${t} text-black"></i>`;
+        return '<i class="ri-file-text-line text-black text-lg"></i>';
     }
   }
+  // Set up keyboard navigation
+  setupKeyboardNavigation() {
+    this.keyboardHandler && document.removeEventListener("keydown", this.keyboardHandler), this.keyboardHandler = (e) => {
+      if (this.style.display !== "none")
+        switch (e.key) {
+          case "ArrowLeft":
+            e.preventDefault(), this.goToPreviousPage();
+            break;
+          case "ArrowRight":
+            e.preventDefault(), this.goToNextPage();
+            break;
+          case "Escape":
+            e.preventDefault(), this.close();
+            break;
+        }
+    }, document.addEventListener("keydown", this.keyboardHandler);
+  }
   // Share current page
   shareCurrentPage() {
     if (typeof copyPagePermalink == "function") {
@@ -375,10 +384,10 @@ class E extends HTMLElement {
       "for",
       this.currentIsBeilage ? "beilage" : "main"
     );
-    const i = t.map((l) => {
+    const i = t.map((a) => {
-      const a = l.getAttribute("data-page-container"), c = a ? parseInt(a) : null;
+      const l = a.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
-      return console.log("Container page:", a, "parsed:", c), c;
+      return console.log("Container page:", l, "parsed:", c), c;
-    }).filter((l) => l !== null).sort((l, a) => l - a);
+    }).filter((a) => a !== null).sort((a, l) => a - l);
     console.log("All pages found:", i), console.log("Current page:", this.currentPageNumber);
     const n = i.indexOf(this.currentPageNumber);
     console.log("Current index:", n);
@@ -401,16 +410,28 @@ class E extends HTMLElement {
       `${t}[data-page-container="${e}"]`
     );
     if (i) {
-      const n = i.querySelector(".newspaper-page-image");
+      const n = i.querySelector(".newspaper-page-image, .piece-page-image");
       if (n) {
         let r = null;
-        this.currentPartNumber !== null && (r = this.getPartNumberForPage(e)), this.show(
+        this.currentPartNumber !== null && (r = this.getPartNumberForPage(e));
+        let s = null, a = null;
+        s = i.getAttribute("data-page-icon-type"), i.querySelector(".part-number") && (s = "part-number");
+        const c = i.querySelector(".page-indicator");
+        if (c) {
+          const d = c.cloneNode(!0);
+          d.querySelectorAll("i").forEach((h) => h.remove()), d.querySelectorAll(
+            '[class*="target-page-dot"], .target-page-indicator'
+          ).forEach((h) => h.remove()), a = d.textContent.trim();
+        }
+        this.show(
           n.src,
           n.alt,
           e,
           this.currentIsBeilage,
           0,
-          r
+          r,
+          s,
+          a
         );
       }
     }
@@ -428,6 +449,10 @@ class E extends HTMLElement {
     }
     return null;
   }
+  // Legacy fallback icon generation (only used when extraction fails)
+  generateFallbackIcon(e, t, i) {
+    return i !== null ? `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${i}. Teil</span>` : `<i class="ri-file-text-line text-lg ${t ? "text-amber-600" : "text-black"}"></i>`;
+  }
   // Toggle sidebar visibility
   toggleSidebar() {
     const e = this.querySelector("#sidebar-spacer"), t = this.querySelector("#sidebar-toggle-btn"), i = t.querySelector("i"), n = e.style.width, r = n === "0px" || n === "0";
@@ -449,14 +474,14 @@ class E extends HTMLElement {
           const d = c.textContent.trim(), u = d.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/);
           if (u)
             return u[1];
-          const h = d.match(/(\d{4})\s+Nr\.\s+(\d+)/);
+          const g = d.match(/(\d{4})\s+Nr\.\s+(\d+)/);
-          if (h)
+          if (g)
-            return `${h[1]} Nr. ${h[2]}`;
+            return `${g[1]} Nr. ${g[2]}`;
         }
       }
-      const a = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);
+      const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);
-      if (a)
+      if (l)
-        return `${a[1]} Nr. ${a[2]}`;
+        return `${l[1]} Nr. ${l[2]}`;
     } else
       return "";
     const n = t.match(/\/(\d{4})\/(\d+)/);
@@ -464,21 +489,21 @@ class E extends HTMLElement {
       return i ? `${n[1]} Nr. ${n[2]}` : "";
     const r = document.querySelector(".page-indicator");
     if (r) {
-      const l = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
+      const a = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
-      if (l)
+      if (a)
-        return `${l[1]} Nr. ${l[2]}`;
+        return `${a[1]} Nr. ${a[2]}`;
     }
     return "KGPZ";
   }
 }
-customElements.define("single-page-viewer", E);
+customElements.define("single-page-viewer", B);
 document.body.addEventListener("htmx:beforeRequest", function(o) {
   const e = document.querySelector("single-page-viewer");
-  e && e.style.display !== "none" && (console.log("Cleaning up single page viewer before HTMX navigation"), e.destroy());
+  e && e.style.display !== "none" && (console.log("Cleaning up single page viewer before HTMX navigation"), e.close());
 });
 window.addEventListener("beforeunload", function() {
   const o = document.querySelector("single-page-viewer");
-  o && o.destroy();
+  o && o.close();
 });
 class A extends HTMLElement {
   constructor() {
@@ -525,17 +550,26 @@ customElements.define("scroll-to-top-button", A);
 window.currentPageContainers = window.currentPageContainers || [];
 window.currentActiveIndex = window.currentActiveIndex || 0;
 window.pageObserver = window.pageObserver || null;
-function $(o, e, t, i = null) {
+function N(o, e, t, i = null) {
   let n = document.querySelector("single-page-viewer");
   n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n));
-  const r = o.closest('[data-beilage="true"]') !== null, s = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
+  const r = o.closest('[data-beilage="true"]') !== null, s = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0, a = o.closest(".newspaper-page-container, .piece-page-container");
-  n.show(o.src, o.alt, e, r, s, i);
+  let l = null, c = null;
+  if (a) {
+    l = a.getAttribute("data-page-icon-type"), a.querySelector(".part-number") && (l = "part-number");
+    const u = a.querySelector(".page-indicator");
+    if (u) {
+      const g = u.cloneNode(!0);
+      g.querySelectorAll("i").forEach((f) => f.remove()), g.querySelectorAll('[class*="target-page-dot"], .target-page-indicator').forEach((f) => f.remove()), c = g.textContent.trim();
     }
-function S() {
+  }
+  n.show(o.src, o.alt, e, r, s, i, l, c);
+}
+function C() {
   document.getElementById("pageModal").classList.add("hidden");
 }
-function N() {
+function q() {
-  if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, p(), document.querySelector(".newspaper-page-container")) {
+  if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, b(), document.querySelector(".newspaper-page-container")) {
     let e = /* @__PURE__ */ new Set();
     window.pageObserver = new IntersectionObserver(
       (t) => {
@@ -544,7 +578,7 @@ function N() {
           n !== -1 && (i.isIntersecting ? e.add(n) : e.delete(n));
         }), e.size > 0) {
           const n = Array.from(e).sort((r, s) => r - s)[0];
-          n !== window.currentActiveIndex && (window.currentActiveIndex = n, p());
+          n !== window.currentActiveIndex && (window.currentActiveIndex = n, b());
         }
       },
       {
@@ -555,12 +589,12 @@ function N() {
     });
   }
 }
-function q() {
+function $() {
   if (window.currentActiveIndex > 0) {
     let o = -1;
     const e = [];
     window.currentPageContainers.forEach((i, n) => {
-      const r = i.getBoundingClientRect(), s = window.innerHeight, l = Math.max(r.top, 0), a = Math.min(r.bottom, s), c = Math.max(0, a - l), d = r.height;
+      const r = i.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), d = r.height;
       c / d >= 0.3 && e.push(n);
     });
     const t = Math.min(...e);
@@ -570,10 +604,9 @@ function q() {
         break;
       }
     o === -1 && t > 0 && (o = t - 1), o >= 0 && (window.currentActiveIndex = o, window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
-      behavior: "smooth",
       block: "start"
     }), setTimeout(() => {
-      p();
+      b();
     }, 100));
   }
 }
@@ -582,7 +615,7 @@ function M() {
     let o = -1;
     const e = [];
     window.currentPageContainers.forEach((i, n) => {
-      const r = i.getBoundingClientRect(), s = window.innerHeight, l = Math.max(r.top, 0), a = Math.min(r.bottom, s), c = Math.max(0, a - l), d = r.height;
+      const r = i.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), d = r.height;
       c / d >= 0.3 && e.push(n);
     });
     const t = Math.max(...e);
@@ -592,33 +625,30 @@ function M() {
         break;
       }
     o === -1 && t < window.currentPageContainers.length - 1 && (o = t + 1), o >= 0 && o < window.currentPageContainers.length && (window.currentActiveIndex = o, window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
-      behavior: "smooth",
       block: "start"
     }), setTimeout(() => {
-      p();
+      b();
     }, 100));
   }
 }
 function R() {
-  if (P()) {
+  if (T()) {
     const e = document.querySelector("#newspaper-content .newspaper-page-container");
     e && e.scrollIntoView({
-      behavior: "smooth",
       block: "start"
     });
   } else {
     const e = document.querySelector('[class*="border-t-2 border-amber-200"]');
     e && e.scrollIntoView({
-      behavior: "smooth",
       block: "start"
     });
   }
 }
-function P() {
+function T() {
   const o = [];
   window.currentPageContainers.forEach((e, t) => {
-    const i = e.getBoundingClientRect(), n = window.innerHeight, r = Math.max(i.top, 0), s = Math.min(i.bottom, n), l = Math.max(0, s - r), a = i.height;
+    const i = e.getBoundingClientRect(), n = window.innerHeight, r = Math.max(i.top, 0), s = Math.min(i.bottom, n), a = Math.max(0, s - r), l = i.height;
-    l / a >= 0.3 && o.push(t);
+    a / l >= 0.3 && o.push(t);
   });
   for (const e of o) {
     const t = window.currentPageContainers[e];
@@ -627,10 +657,10 @@ function P() {
   }
   return !1;
 }
-function p() {
+function b() {
   const o = document.getElementById("prevPageBtn"), e = document.getElementById("nextPageBtn"), t = document.getElementById("beilageBtn");
-  if (o && (window.currentActiveIndex <= 0 ? o.style.display = "none" : o.style.display = "flex"), e && (window.currentActiveIndex >= window.currentPageContainers.length - 1 ? e.style.display = "none" : e.style.display = "flex"), t) {
+  if (o && (o.style.display = "flex", window.currentActiveIndex <= 0 ? (o.disabled = !0, o.classList.add("opacity-50", "cursor-not-allowed"), o.classList.remove("hover:bg-gray-200")) : (o.disabled = !1, o.classList.remove("opacity-50", "cursor-not-allowed"), o.classList.add("hover:bg-gray-200"))), e && (e.style.display = "flex", window.currentActiveIndex >= window.currentPageContainers.length - 1 ? (e.disabled = !0, e.classList.add("opacity-50", "cursor-not-allowed"), e.classList.remove("hover:bg-gray-200")) : (e.disabled = !1, e.classList.remove("opacity-50", "cursor-not-allowed"), e.classList.add("hover:bg-gray-200"))), t) {
-    const i = P(), n = t.querySelector("i");
+    const i = T(), n = t.querySelector("i");
     i ? (t.title = "Zur Hauptausgabe", t.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer", n && (n.className = "ri-file-text-line text-lg lg:text-xl")) : (t.title = "Zu Beilage", t.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer", n && (n.className = "ri-attachment-line text-lg lg:text-xl"));
   }
 }
@@ -646,24 +676,24 @@ function z() {
     title: document.title,
     url: t
   }).catch((i) => {
-    y(t, o);
+    S(t, o);
-  }) : y(t, o);
+  }) : S(t, o);
 }
-function y(o, e) {
+function S(o, e) {
   if (navigator.clipboard)
     navigator.clipboard.writeText(o).then(() => {
-      g(e, "Link kopiert!");
+      p(e, "Link kopiert!");
     }).catch((t) => {
-      g(e, "Kopieren fehlgeschlagen");
+      p(e, "Kopieren fehlgeschlagen");
     });
   else {
     const t = document.createElement("textarea");
     t.value = o, document.body.appendChild(t), t.select();
     try {
       const i = document.execCommand("copy");
-      g(e, i ? "Link kopiert!" : "Kopieren fehlgeschlagen");
+      p(e, i ? "Link kopiert!" : "Kopieren fehlgeschlagen");
     } catch {
-      g(e, "Kopieren fehlgeschlagen");
+      p(e, "Kopieren fehlgeschlagen");
     } finally {
       document.body.removeChild(t);
     }
@@ -676,24 +706,24 @@ function V() {
   const i = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), n = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}. Digital verfügbar unter: ${t} (Zugriff: ${i}).`;
   if (navigator.clipboard)
     navigator.clipboard.writeText(n).then(() => {
-      g(o, "Zitation kopiert!");
+      p(o, "Zitation kopiert!");
     }).catch((r) => {
-      g(o, "Kopieren fehlgeschlagen");
+      p(o, "Kopieren fehlgeschlagen");
     });
   else {
     const r = document.createElement("textarea");
     r.value = n, document.body.appendChild(r), r.select();
     try {
       const s = document.execCommand("copy");
-      g(o, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
+      p(o, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
     } catch {
-      g(o, "Kopieren fehlgeschlagen");
+      p(o, "Kopieren fehlgeschlagen");
     } finally {
       document.body.removeChild(r);
     }
   }
 }
-function g(o, e) {
+function p(o, e) {
   const t = document.querySelector(".simple-popup");
   t && t.remove();
   const i = document.createElement("div");
@@ -712,9 +742,9 @@ function g(o, e) {
 		white-space: nowrap;
 	`;
   const n = o.getBoundingClientRect(), r = window.innerHeight, s = window.innerWidth;
-  let l = n.left - 10, a = n.bottom + 8;
+  let a = n.left - 10, l = n.bottom + 8;
   const c = 120, d = 32;
-  l + c > s && (l = n.right - c + 10), a + d > r && (a = n.top - d - 8), i.style.left = Math.max(5, l) + "px", i.style.top = Math.max(5, a) + "px", document.body.appendChild(i), setTimeout(() => {
+  a + c > s && (a = n.right - c + 10), l + d > r && (l = n.top - d - 8), i.style.left = Math.max(5, a) + "px", i.style.top = Math.max(5, l) + "px", document.body.appendChild(i), setTimeout(() => {
     i.style.opacity = "1";
   }, 10), setTimeout(() => {
     i.style.opacity = "0", setTimeout(() => {
@@ -729,26 +759,26 @@ function O(o, e, t = !1) {
   else {
     const r = window.location.pathname.split("/");
     if (r.length >= 3) {
-      const s = r[1], l = r[2];
+      const s = r[1], a = r[2];
-      i = `${window.location.origin}/${s}/${l}/${o}`;
+      i = `${window.location.origin}/${s}/${a}/${o}`;
     } else
       i = window.location.origin + window.location.pathname + `/${o}`;
   }
   const n = i;
   if (navigator.clipboard)
     navigator.clipboard.writeText(n).then(() => {
-      g(e, "Link kopiert!");
+      p(e, "Link kopiert!");
     }).catch((r) => {
-      g(e, "Kopieren fehlgeschlagen");
+      p(e, "Kopieren fehlgeschlagen");
     });
   else {
     const r = document.createElement("textarea");
     r.value = n, document.body.appendChild(r), r.select();
     try {
       const s = document.execCommand("copy");
-      g(e, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
+      p(e, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
     } catch {
-      g(e, "Kopieren fehlgeschlagen");
+      p(e, "Kopieren fehlgeschlagen");
     } finally {
       document.body.removeChild(r);
     }
@@ -758,40 +788,40 @@ function D(o, e) {
   const t = document.title || "KGPZ", i = window.location.pathname.split("/");
   let n;
   if (i.length >= 3) {
-    const a = i[1], c = i[2];
+    const l = i[1], c = i[2];
-    n = `${window.location.origin}/${a}/${c}/${o}`;
+    n = `${window.location.origin}/${l}/${c}/${o}`;
   } else
     n = `${window.location.origin}${window.location.pathname}/${o}`;
-  const r = n, s = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), l = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${t}, Seite ${o}. Digital verfügbar unter: ${r} (Zugriff: ${s}).`;
+  const r = n, s = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), a = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${t}, Seite ${o}. Digital verfügbar unter: ${r} (Zugriff: ${s}).`;
   if (navigator.clipboard)
-    navigator.clipboard.writeText(l).then(() => {
+    navigator.clipboard.writeText(a).then(() => {
-      g(e, "Zitation kopiert!");
+      p(e, "Zitation kopiert!");
-    }).catch((a) => {
+    }).catch((l) => {
-      g(e, "Kopieren fehlgeschlagen");
+      p(e, "Kopieren fehlgeschlagen");
     });
   else {
-    const a = document.createElement("textarea");
+    const l = document.createElement("textarea");
-    a.value = l, document.body.appendChild(a), a.select();
+    l.value = a, document.body.appendChild(l), l.select();
     try {
       const c = document.execCommand("copy");
-      g(e, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
+      p(e, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
     } catch {
-      g(e, "Kopieren fehlgeschlagen");
+      p(e, "Kopieren fehlgeschlagen");
     } finally {
-      document.body.removeChild(a);
+      document.body.removeChild(l);
     }
   }
 }
-function v() {
+function k() {
-  N(), window.addEventListener("scroll", function() {
+  q(), window.addEventListener("scroll", function() {
     clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
-      p();
+      b();
     }, 50);
   }), document.addEventListener("keydown", function(o) {
-    o.key === "Escape" && S();
+    o.key === "Escape" && C();
   });
 }
-function f() {
+function w() {
   const o = window.location.pathname;
   document.querySelectorAll(".citation-link[data-citation-url]").forEach((t) => {
     const i = t.getAttribute("data-citation-url");
@@ -801,14 +831,14 @@ function f() {
     else {
       const r = o.match(/^\/(\d{4})\/(\d+)(?:\/(\d+))?$/), s = i.match(/^\/(\d{4})\/(\d+)$/);
       if (r && s) {
-        const [, l, a, c] = r, [, d, u] = s;
+        const [, a, l, c] = r, [, d, u] = s;
-        l === d && a === u && (n = !0);
+        a === d && l === u && (n = !0);
       }
     }
     n ? (t.classList.add("text-red-700", "pointer-events-none"), t.setAttribute("aria-current", "page")) : (t.classList.remove("text-red-700", "pointer-events-none"), t.removeAttribute("aria-current"));
   });
 }
-function x() {
+function P() {
   const o = window.location.pathname, e = document.body;
   e.classList.remove(
     "page-akteure",
@@ -820,13 +850,13 @@ function x() {
     "page-edition"
   ), o.includes("/akteure/") || o.includes("/autoren") ? e.classList.add("page-akteure") : o.match(/\/\d{4}\/\d+/) ? e.classList.add("page-ausgabe") : o.includes("/search") || o.includes("/suche") ? e.classList.add("page-search") : o.includes("/ort/") ? e.classList.add("page-ort") : o.includes("/kategorie/") ? e.classList.add("page-kategorie") : o.includes("/beitrag/") ? e.classList.add("page-piece") : o.includes("/edition") && e.classList.add("page-edition");
 }
-let m = [];
+let y = [];
 window.ExecuteNextSettle = function(o) {
-  typeof o == "function" && m.push(o);
+  typeof o == "function" && y.push(o);
 };
 function K() {
-  for (; m.length > 0; ) {
+  for (; y.length > 0; ) {
-    const o = m.shift();
+    const o = y.shift();
     try {
       o();
     } catch (e) {
@@ -834,9 +864,9 @@ function K() {
     }
   }
 }
-window.enlargePage = $;
+window.enlargePage = N;
-window.closeModal = S;
+window.closeModal = C;
-window.scrollToPreviousPage = q;
+window.scrollToPreviousPage = $;
 window.scrollToNextPage = M;
 window.scrollToBeilage = R;
 window.shareCurrentPage = z;
@@ -844,14 +874,14 @@ window.generateCitation = V;
 window.copyPagePermalink = O;
 window.generatePageCitation = D;
 function W() {
-  x(), f(), document.querySelector(".newspaper-page-container") && v();
+  P(), w(), document.querySelector(".newspaper-page-container") && k();
   let o = function(t) {
-    x(), f(), K(), setTimeout(() => {
+    P(), w(), K(), setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && v();
+      document.querySelector(".newspaper-page-container") && k();
     }, 50);
   }, e = function(t) {
   };
-  document.body.addEventListener("htmx:afterSettle", o), document.body.addEventListener("htmx:afterSettle", f), document.body.addEventListener("htmx:beforeRequest", e);
+  document.body.addEventListener("htmx:afterSettle", o), document.body.addEventListener("htmx:afterSettle", w), document.body.addEventListener("htmx:beforeRequest", e);
 }
 export {
   W as setup

views/routes/ausgabe/components/_inhaltsverzeichnis.gohtml

@@ -25,7 +25,7 @@
 								{{ end }}</span
 							>
 							<a
-								href="/{{ $model.Year }}/{{ $model.Number.No }}/{{ $page }}"
+								href="#page-{{ $page }}"
 								class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline relative"
 								data-page-number="{{ $page }}">
 								<span class="page-label">{{ $page }}</span>
@@ -160,7 +160,7 @@
 								{{ end }}</span
 							>
 							<a
-								href="/{{ $model.Datum.When.Year }}/{{ $model.Number.No }}/b1-{{ $page }}"
+								href="#beilage-{{ $page }}"
 								class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-amber-100 no-underline"
 								data-page-number="{{ $page }}">
 								<span class="page-label">{{ $page }}</span>

views/routes/ausgabe/components/_newspaper_layout.gohtml

@@ -125,7 +125,13 @@
 		{{ $idPrefix = "beilage-1-page" }}
 	{{ end }}
 
-	<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
+	<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}" data-page-icon-type="{{ $page.PageIcon }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
+		<!-- Anchor for navigation -->
+		{{ if $isBeilage }}
+			<div id="beilage-{{ $page.PageNumber }}"></div>
+		{{ else }}
+			<div id="page-{{ $page.PageNumber }}"></div>
+		{{ end }}
 		<!-- Page indicator row -->
 		<div class="flex {{ if $isLeft }}justify-end{{ else }}justify-start{{ end }} items-center gap-1 mb-2">
 			{{ if $isLeft }}
@@ -141,15 +147,15 @@
 				</button>
 				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
 					{{ $page.PageNumber }}
-					<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm scale-x-[-1]"></i>
+					{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
-					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
+					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
 				</span>
 			{{ else }}
 				<!-- Right page: page number then buttons -->
 				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
-					<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm"></i>
+					{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
 					{{ $page.PageNumber }}
-					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
+					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
 				</span>
 				<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
 					<i class="ri-share-line text-xs"></i>

views/routes/components/_page_link_indicator.gohtml

@@ -1,17 +1,21 @@
 {{- /*
     Red dot indicator for directly linked pages
-    Usage: {{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $targetPage) }}
+    Usage: {{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $isTargetBeilage) }}
 
     Parameters:
     - pageNumber (int): The page number being displayed
     - targetPage (int): The target page from URL (0 if none)
+    - isBeilage (bool): Whether this page is a Beilage page
+    - isTargetBeilage (bool): Whether the target page is a Beilage page
 
-    Shows a red dot with tooltip when pageNumber matches targetPage
+    Shows a red dot with tooltip when pageNumber matches targetPage and page types match (both Beilage or both regular)
 */ -}}
 
 {{ $pageNumber := .pageNumber }}
 {{ $targetPage := .targetPage }}
+{{ $isBeilage := .isBeilage }}
+{{ $isTargetBeilage := .isTargetBeilage }}
 
-{{ if and $targetPage (eq $pageNumber $targetPage) }}
+{{ if and $targetPage (eq $pageNumber $targetPage) (eq $isBeilage $isTargetBeilage) }}
 <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10" title="verlinkte Seite"></span>
 {{ end }}

views/routes/piece/components/_piece_inhaltsverzeichnis.gohtml

@@ -42,7 +42,9 @@
 				{{ range $pageEntry := $model.AllPages }}
 					<!-- Find the issue ref for this page to get date -->
 					{{ range $issueRef := $model.AllIssueRefs }}
-						{{ if and (eq $issueRef.When.Year $pageEntry.IssueYear) (eq $issueRef.Nr $pageEntry.IssueNumber) (le $issueRef.Von $pageEntry.PageNumber) (ge $issueRef.Bis $pageEntry.PageNumber) }}
+						{{ $bis := $issueRef.Bis }}
+						{{ if eq $bis 0 }}{{ $bis = $issueRef.Von }}{{ end }}
+						{{ if and (eq $issueRef.When.Year $pageEntry.IssueYear) (eq $issueRef.Nr $pageEntry.IssueNumber) (le $issueRef.Von $pageEntry.PageNumber) (ge $bis $pageEntry.PageNumber) }}
 							<!-- Individual page entry matching issue view style -->
 							<div class="mb-4 pl-4 border-l-4 border-slate-300 page-entry {{ if not $pageEntry.OtherPieces }}py-2{{ end }}"
 								 data-page-container="{{ $pageEntry.PageNumber }}">

views/routes/piece/components/_piece_sequential_layout.gohtml

@@ -18,7 +18,7 @@
 					{{- end -}}
 
 					<!-- Page container -->
-					<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}">
+					<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}" data-page-icon-type="{{ $page.PageIcon }}">
 						<!-- Page indicator row -->
 						<div class="flex justify-start items-center gap-2 mb-3">
 							<span class="part-number bg-slate-100 text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">

views/transform/issue.js

@@ -23,8 +23,38 @@ export function enlargePage(imgElement, pageNumber, isFromSpread, partNumber = n
 	const targetPage =
 		window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
 
-	// Show the page in the viewer
+	// Extract existing icon type and heading from the page container
-	viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage, partNumber);
+	const pageContainer = imgElement.closest('.newspaper-page-container, .piece-page-container');
+	let extractedIconType = null;
+	let extractedHeading = null;
+
+	if (pageContainer) {
+		// Extract icon type from data attribute
+		extractedIconType = pageContainer.getAttribute('data-page-icon-type');
+
+		// For piece view: check if part number should override icon
+		const partNumberElement = pageContainer.querySelector('.part-number');
+		if (partNumberElement) {
+			extractedIconType = 'part-number';
+		}
+
+		// Extract heading text from page indicator
+		const pageIndicator = pageContainer.querySelector('.page-indicator');
+		if (pageIndicator) {
+			// Clone the page indicator to extract text without buttons/icons
+			const indicatorClone = pageIndicator.cloneNode(true);
+			// Remove any icons to get just the text
+			const icons = indicatorClone.querySelectorAll('i');
+			icons.forEach(icon => icon.remove());
+			// Remove any link indicators
+			const linkIndicators = indicatorClone.querySelectorAll('[class*="target-page-dot"], .target-page-indicator');
+			linkIndicators.forEach(indicator => indicator.remove());
+			extractedHeading = indicatorClone.textContent.trim();
+		}
+	}
+
+	// Show the page in the viewer with extracted data
+	viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage, partNumber, extractedIconType, extractedHeading);
 }
 
 export function closeModal() {
@@ -124,7 +154,6 @@ export function scrollToPreviousPage() {
 		if (targetIndex >= 0) {
 			window.currentActiveIndex = targetIndex;
 			window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
-				behavior: "smooth",
 				block: "start",
 			});
 
@@ -176,7 +205,6 @@ export function scrollToNextPage() {
 		if (targetIndex >= 0 && targetIndex < window.currentPageContainers.length) {
 			window.currentActiveIndex = targetIndex;
 			window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
-				behavior: "smooth",
 				block: "start",
 			});
 
@@ -197,7 +225,6 @@ export function scrollToBeilage() {
 		const firstMainPage = document.querySelector("#newspaper-content .newspaper-page-container");
 		if (firstMainPage) {
 			firstMainPage.scrollIntoView({
-				behavior: "smooth",
 				block: "start",
 			});
 		}
@@ -206,7 +233,6 @@ export function scrollToBeilage() {
 		const beilageContainer = document.querySelector('[class*="border-t-2 border-amber-200"]');
 		if (beilageContainer) {
 			beilageContainer.scrollIntoView({
-				behavior: "smooth",
 				block: "start",
 			});
 		}
@@ -249,18 +275,30 @@ export function updateButtonStates() {
 	const beilageBtn = document.getElementById("beilageBtn");
 
 	if (prevBtn) {
-		if (window.currentActiveIndex <= 0) {
+		// Always show button, but disable when at first page
-			prevBtn.style.display = "none";
-		} else {
 		prevBtn.style.display = "flex";
+		if (window.currentActiveIndex <= 0) {
+			prevBtn.disabled = true;
+			prevBtn.classList.add("opacity-50", "cursor-not-allowed");
+			prevBtn.classList.remove("hover:bg-gray-200");
+		} else {
+			prevBtn.disabled = false;
+			prevBtn.classList.remove("opacity-50", "cursor-not-allowed");
+			prevBtn.classList.add("hover:bg-gray-200");
 		}
 	}
 
 	if (nextBtn) {
-		if (window.currentActiveIndex >= window.currentPageContainers.length - 1) {
+		// Always show button, but disable when at last page
-			nextBtn.style.display = "none";
-		} else {
 		nextBtn.style.display = "flex";
+		if (window.currentActiveIndex >= window.currentPageContainers.length - 1) {
+			nextBtn.disabled = true;
+			nextBtn.classList.add("opacity-50", "cursor-not-allowed");
+			nextBtn.classList.remove("hover:bg-gray-200");
+		} else {
+			nextBtn.disabled = false;
+			nextBtn.classList.remove("opacity-50", "cursor-not-allowed");
+			nextBtn.classList.add("hover:bg-gray-200");
 		}
 	}
 

views/transform/single-page-viewer.js

@@ -126,7 +126,7 @@ export class SinglePageViewer extends HTMLElement {
 								id="single-page-image"
 								src=""
 								alt=""
-								class="w-full h-auto rounded-lg shadow-2xl cursor-pointer"
+								class="w-full h-auto rounded-lg shadow-2xl cursor-zoom-out"
 								onclick="this.closest('single-page-viewer').close()"
 								title="Klicken zum Schließen"
 							/>
@@ -138,6 +138,9 @@ export class SinglePageViewer extends HTMLElement {
 
 		// Set up resize observer to handle window resizing
 		this.setupResizeObserver();
+
+		// Set up keyboard navigation
+		this.setupKeyboardNavigation();
 	}
 
 	// Set up resize observer to dynamically update sidebar width
@@ -167,7 +170,16 @@ export class SinglePageViewer extends HTMLElement {
 		}
 	}
 
-	show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0, partNumber = null) {
+	show(
+		imgSrc,
+		imgAlt,
+		pageNumber,
+		isBeilage = false,
+		targetPage = 0,
+		partNumber = null,
+		extractedIconType = null,
+		extractedHeading = null,
+	) {
 		const img = this.querySelector("#single-page-image");
 		const pageNumberSpan = this.querySelector("#page-number");
 		const pageIconSpan = this.querySelector("#page-icon");
@@ -181,11 +193,18 @@ export class SinglePageViewer extends HTMLElement {
 		this.currentIsBeilage = isBeilage;
 		this.currentPartNumber = partNumber;
 
-		// Get issue context from document title or URL
+		// Use extracted heading or fallback to generated heading
+		let headingText;
+		if (extractedHeading) {
+			headingText = extractedHeading;
+		} else {
+			// Fallback: generate heading text
 			const issueContext = this.getIssueContext(pageNumber);
+			headingText = issueContext ? `${issueContext}, ${pageNumber}` : `${pageNumber}`;
+		}
 
-		// Set page number with issue context in the box
+		// Set page number with heading text in the box
-		pageNumberSpan.innerHTML = issueContext ? `${issueContext}, ${pageNumber}` : `${pageNumber}`;
+		pageNumberSpan.innerHTML = headingText;
 
 		// Add red dot if this is the target page
 		if (targetPage && pageNumber === targetPage) {
@@ -203,14 +222,18 @@ export class SinglePageViewer extends HTMLElement {
 			pageNumberSpan.appendChild(redDot);
 		}
 
-		// Set page icon or part number based on view type
+		// Use extracted icon type or fallback to generated icon
-		if (partNumber !== null) {
+		if (extractedIconType) {
+			if (extractedIconType === "part-number" && partNumber !== null) {
 				// Piece view: Show part number instead of icon
 				pageIconSpan.innerHTML = `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${partNumber}. Teil</span>`;
 			} else {
-			// Issue view: Show icon based on position and type
+				// Use icon type from Go templates
-			const iconType = this.determinePageIconType(pageNumber, isBeilage);
+				pageIconSpan.innerHTML = this.generateIconFromType(extractedIconType);
-			pageIconSpan.innerHTML = this.getPageIconHTML(iconType);
+			}
+		} else {
+			// Fallback: generate simple icon
+			pageIconSpan.innerHTML = this.generateFallbackIcon(pageNumber, isBeilage, partNumber);
 		}
 
 		// Page indicator styling is now consistent (white background)
@@ -220,6 +243,12 @@ export class SinglePageViewer extends HTMLElement {
 
 		this.style.display = "block";
 
+		// Scroll to top of the single page viewer (no smooth scrolling)
+		const scrollContainer = this.querySelector(".flex-1.overflow-auto");
+		if (scrollContainer) {
+			scrollContainer.scrollTop = 0;
+		}
+
 		// Prevent background scrolling but allow scrolling within the viewer
 		document.body.style.overflow = "hidden";
 	}
@@ -238,74 +267,66 @@ export class SinglePageViewer extends HTMLElement {
 			this.resizeObserver = null;
 		}
 
+		// Clean up keyboard event listener
+		if (this.keyboardHandler) {
+			document.removeEventListener('keydown', this.keyboardHandler);
+			this.keyboardHandler = null;
+		}
+
 		// Restore background scrolling
 		document.body.style.overflow = "";
 	}
 
-	// Determine page icon type based on page position and whether it's beilage
+	// Generate icon HTML from Go icon type - matches templating/engine.go PageIcon function
-	determinePageIconType(pageNumber, isBeilage) {
+	generateIconFromType(iconType) {
-		// Get all page containers to determine position
-		const containerSelector = isBeilage
-			? '.newspaper-page-container[data-beilage="true"]'
-			: ".newspaper-page-container:not([data-beilage])";
-		const pageContainers = Array.from(document.querySelectorAll(containerSelector));
-
-		// Extract page numbers and sort them
-		const allPages = pageContainers
-			.map((container) => {
-				const pageAttr = container.getAttribute("data-page-container");
-				return pageAttr ? parseInt(pageAttr) : null;
-			})
-			.filter((p) => p !== null)
-			.sort((a, b) => a - b);
-
-		if (allPages.length === 0) {
-			return "first";
-		}
-
-		const firstPage = allPages[0];
-		const lastPage = allPages[allPages.length - 1];
-
-		// Same logic as Go determinePageIcon function
-		if (pageNumber === firstPage) {
-			return "first"; // Front page - normal icon
-		} else if (pageNumber === lastPage) {
-			return "last"; // Back page - mirrored icon
-		} else {
-			// For middle pages in newspaper layout
-			if (pageNumber === firstPage + 1) {
-				return "even"; // Page 2 - black + mirrored grey
-			} else if (pageNumber === lastPage - 1) {
-				return "odd"; // Page 3 - grey + black
-			} else {
-				// For newspapers with more than 4 pages, use alternating pattern
-				if (pageNumber % 2 === 0) {
-					return "even";
-				} else {
-					return "odd";
-				}
-			}
-		}
-	}
-
-	// Generate page icon HTML based on type (same as Go PageIcon function)
-	getPageIconHTML(iconType) {
-		const baseClass = "ri-file-text-line text-lg";
-
 		switch (iconType) {
 			case "first":
-				return `<i class="${baseClass} text-black"></i>`;
+				return `<i class="ri-file-text-line text-black text-lg" display: inline-block;"></i>`;
 			case "last":
-				return `<i class="${baseClass} text-black" style="transform: scaleX(-1); display: inline-block;"></i>`;
+				return `<i class="ri-file-text-line text-black text-lg" style="transform: scaleX(-1); display: inline-block;"></i>`;
 			case "even":
-				return `<i class="${baseClass} text-black" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="${baseClass} text-slate-400"></i>`;
+				return `<i class="ri-file-text-line text-black text-lg" style="margin-left: 1px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-slate-400 text-lg"></i>`;
 			case "odd":
-				return `<i class="${baseClass} text-slate-400" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="${baseClass} text-black"></i>`;
+				return `<i class="ri-file-text-line text-slate-400 text-lg" style="margin-left: 1px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-black text-lg"></i>`;
+			case "single":
+				return `<i class="ri-file-text-line text-black text-lg"></i>`;
 			default:
-				return `<i class="${baseClass} text-black"></i>`;
+				return `<i class="ri-file-text-line text-black text-lg"></i>`;
 		}
 	}
 
+	// Set up keyboard navigation
+	setupKeyboardNavigation() {
+		// Remove any existing listener to avoid duplicates
+		if (this.keyboardHandler) {
+			document.removeEventListener('keydown', this.keyboardHandler);
+		}
+
+		// Create bound handler
+		this.keyboardHandler = (event) => {
+			// Only handle keyboard events when the viewer is visible
+			if (this.style.display === 'none') return;
+
+			switch (event.key) {
+				case 'ArrowLeft':
+					event.preventDefault();
+					this.goToPreviousPage();
+					break;
+				case 'ArrowRight':
+					event.preventDefault();
+					this.goToNextPage();
+					break;
+				case 'Escape':
+					event.preventDefault();
+					this.close();
+					break;
+			}
+		};
+
+		// Add event listener
+		document.addEventListener('keydown', this.keyboardHandler);
+	}
+
 	// Share current page
 	shareCurrentPage() {
 		if (typeof copyPagePermalink === "function") {
@@ -447,7 +468,7 @@ export class SinglePageViewer extends HTMLElement {
 		);
 
 		if (targetContainer) {
-			const imgElement = targetContainer.querySelector(".newspaper-page-image");
+			const imgElement = targetContainer.querySelector(".newspaper-page-image, .piece-page-image");
 			if (imgElement) {
 				// Determine part number for piece view
 				let newPartNumber = null;
@@ -456,6 +477,35 @@ export class SinglePageViewer extends HTMLElement {
 					newPartNumber = this.getPartNumberForPage(pageNumber);
 				}
 
+				// Extract icon type and heading for the new page
+				let extractedIconType = null;
+				let extractedHeading = null;
+
+				// Extract icon type from data attribute
+				extractedIconType = targetContainer.getAttribute("data-page-icon-type");
+
+				// For piece view: check if part number should override icon
+				const partNumberElement = targetContainer.querySelector(".part-number");
+				if (partNumberElement) {
+					extractedIconType = "part-number";
+				}
+
+				// Extract heading text from page indicator
+				const pageIndicator = targetContainer.querySelector(".page-indicator");
+				if (pageIndicator) {
+					// Clone the page indicator to extract text without buttons/icons
+					const indicatorClone = pageIndicator.cloneNode(true);
+					// Remove any icons to get just the text
+					const icons = indicatorClone.querySelectorAll("i");
+					icons.forEach((icon) => icon.remove());
+					// Remove any link indicators
+					const linkIndicators = indicatorClone.querySelectorAll(
+						'[class*="target-page-dot"], .target-page-indicator',
+					);
+					linkIndicators.forEach((indicator) => indicator.remove());
+					extractedHeading = indicatorClone.textContent.trim();
+				}
+
 				// Update the current view with the new page
 				this.show(
 					imgElement.src,
@@ -464,6 +514,8 @@ export class SinglePageViewer extends HTMLElement {
 					this.currentIsBeilage,
 					0,
 					newPartNumber,
+					extractedIconType,
+					extractedHeading,
 				);
 			}
 		}
@@ -488,6 +540,19 @@ export class SinglePageViewer extends HTMLElement {
 		return null;
 	}
 
+	// Legacy fallback icon generation (only used when extraction fails)
+	generateFallbackIcon(pageNumber, isBeilage, partNumber) {
+		if (partNumber !== null) {
+			// Piece view: Show part number instead of icon
+			return `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${partNumber}. Teil</span>`;
+		} else {
+			// Issue view: Simple fallback icon
+			const baseClass = "ri-file-text-line text-lg";
+			const iconColor = isBeilage ? "text-amber-600" : "text-black";
+			return `<i class="${baseClass} ${iconColor}"></i>`;
+		}
+	}
+
 	// Toggle sidebar visibility
 	toggleSidebar() {
 		const sidebarSpacer = this.querySelector("#sidebar-spacer");
@@ -596,7 +661,7 @@ document.body.addEventListener("htmx:beforeRequest", function (event) {
 	const viewer = document.querySelector("single-page-viewer");
 	if (viewer && viewer.style.display !== "none") {
 		console.log("Cleaning up single page viewer before HTMX navigation");
-		viewer.destroy();
+		viewer.close();
 	}
 });
 
@@ -604,6 +669,6 @@ document.body.addEventListener("htmx:beforeRequest", function (event) {
 window.addEventListener("beforeunload", function () {
 	const viewer = document.querySelector("single-page-viewer");
 	if (viewer) {
-		viewer.destroy();
+		viewer.close();
 	}
 });