feat: chapter changing and manga scaling

apps/NwaifuAnime/src/app/components/detail/detail.component.html

@@ -3,11 +3,25 @@
     <h1>{{ detail_item.name }}</h1>
     <h2>{{ detail_item.rus_name }}</h2>
     <img [src]="detail_item.cover.default" [alt]="detail_item.slug" />
-    @for (chapter of chapters.data; track $index) {
-      <h3>
-        <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
-      </h3>
-    }
+
+    <details class="w-full">
+      <summary class="text-center sticky top-0 bg-white z-10 py-2">
+        <h3>Главы</h3>
+      </summary>
+      <div class="flex flex-col items-center pb-16">
+        @for (chapter of chapters.data; track $index) {
+          <button
+            (click)="goToReader(chapter.number, chapter.volume)"
+            [title]="chapter.name"
+            class="p-3 text-white bg-slate-600 w-[400px] mt-3 rounded-lg"
+          >
+            <h3>
+              <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
+            </h3>
+          </button>
+        }
+      </div>
+    </details>
     <button class="p-3 text-white bg-slate-600 w-[400px] mt-5 rounded-lg" (click)="goToReader()">
       Читать
     </button>

apps/NwaifuAnime/src/app/components/detail/detail.component.ts

@@ -27,6 +27,7 @@ export class DetailComponent implements AfterViewInit {
     });
     this.searchService.getChapters(url).subscribe((data) => {
       this.chapters = data;
+      console.log(data);
     });
   }
 
@@ -41,13 +42,13 @@ export class DetailComponent implements AfterViewInit {
     });
   }
 
-  goToReader() {
-    //TODO: Not only first chapter
+  goToReader(chapter: string = "1", volume: string = "1") {
+    console.log(chapter, volume);
     this.router.navigate(["/", "reader"], {
       queryParams: {
         url: this.detail_item?.slug_url,
-        chapter: this.chapters.data[0].number,
-        volume: this.chapters.data[0].volume,
+        chapter: +chapter,
+        volume: +volume,
       },
     });
   }