From 3fabf9e658bd070688c78b5c15e8f686ccc8905a Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sun, 18 May 2025 20:58:15 +0200
Subject: [PATCH] Mark chapter as selected as long as the next chapter is not
 reached Fixes #3817

Also adds a colour to the selected chapter, to make it more clear
---
 .../table-of-contents.component.html          |  4 +--
 .../table-of-contents.component.scss          |  3 ++-
 .../table-of-contents.component.ts            | 26 +++++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.html b/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.html
index 585f3af42..ead8b3540 100644
--- a/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.html
+++ b/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.html
@@ -17,12 +17,12 @@
     } @else {
       @for (chapterGroup of chapters; track chapterGroup.title + chapterGroup.children.length) {
         <ul class="chapter-title">
-          <li class="{{chapterGroup.page === pageNum ? 'active': ''}}" (click)="loadChapterPage(chapterGroup.page, '')">
+          <li class="{{isChapterSelected(chapterGroup) ? 'active': ''}}" (click)="loadChapterPage(chapterGroup.page, '')">
             {{chapterGroup.title}}
           </li>
           @for(chapter of chapterGroup.children; track chapter.title + chapter.part) {
             <ul>
-              <li class="{{cleanIdSelector(chapter.part) === currentPageAnchor ? 'active' : ''}}">
+              <li class="{{isAnchorSelected(chapter) ? 'active' : ''}}">
                 <a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
               </li>
             </ul>
diff --git a/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.scss b/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.scss
index e556f0e78..ca8e747f4 100644
--- a/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.scss
+++ b/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.scss
@@ -3,9 +3,10 @@
 
     &.active {
         font-weight: bold;
+      color: var(--primary-color);
     }
 }
 
 .chapter-title {
     padding-inline-start: 1rem;
-}
\ No newline at end of file
+}
diff --git a/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.ts b/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.ts
index cb6417874..1fccdefbe 100644
--- a/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.ts
+++ b/UI/Web/src/app/book-reader/_components/table-of-contents/table-of-contents.component.ts
@@ -47,4 +47,30 @@ export class TableOfContentsComponent implements OnChanges {
   loadChapterPage(pageNum: number, part: string) {
     this.loadChapter.emit({pageNum, part});
   }
+
+  isChapterSelected(chapterGroup: BookChapterItem) {
+    if (chapterGroup.page === this.pageNum) {
+      return true;
+    }
+
+    const idx = this.chapters.indexOf(chapterGroup);
+    if (idx < 0) {
+      return false; // should never happen
+    }
+
+    const nextIdx = idx + 1;
+    // Last chapter
+    if (nextIdx >= this.chapters.length) {
+      return chapterGroup.page < this.pageNum;
+    }
+
+    // Passed chapter, and next chapter has not been reached
+    const next = this.chapters[nextIdx];
+    return chapterGroup.page < this.pageNum && next.page > this.pageNum;
+  }
+
+  isAnchorSelected(chapter: BookChapterItem) {
+    return this.cleanIdSelector(chapter.part) === this.currentPageAnchor
+  }
+
 }