From 22c5fee48ee1b2b92babe359def708ebd2ec74f2 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Thu, 5 Jan 2023 23:07:11 +0100
Subject: [PATCH] Make chapters identifiable

When long chapter names are being used, it may easily happen that parts
of the name is cut off. If this part identifies the latest chapter name
or number, it may make chapters indistinguishable from one another. This
makes it near imposible to select a specific chapter if the book has
many chapters.

This patch addresses the issue by starting each item in the list of
chapters with an index number.

This fixes #479
---
 components/modals/ChaptersModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/modals/ChaptersModal.vue b/components/modals/ChaptersModal.vue
index 2eb5fadb..1e4ca318 100644
--- a/components/modals/ChaptersModal.vue
+++ b/components/modals/ChaptersModal.vue
@@ -9,10 +9,10 @@
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
       <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-          <template v-for="chapter in chapters">
+          <template v-for="(chapter, index) in chapters">
             <li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="currentChapterId === chapter.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
               <div class="relative flex items-center pl-3 pr-20">
-                <p class="font-normal block truncate text-sm text-white text-opacity-80">{{ chapter.title }}</p>
+                <p class="font-normal block truncate text-sm text-white text-opacity-80">{{ index + 1 }} - {{ chapter.title }}</p>
                 <div class="absolute top-0 right-3 -mt-0.5">
                   <span class="font-mono text-white text-opacity-90 leading-3 text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start) }}</span>
                 </div>