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

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>

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;
-}
+}

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
+  }
+
 }