feat: chapter list scroll areas

5rahim · Apr 1, 2024 · 730740d · 730740d
1 parent 5d5ee75
commit 730740d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/seanime-web/src/app/(main)/manga/entry/_components/manga-recommendations.tsx b/seanime-web/src/app/(main)/manga/entry/_components/manga-recommendations.tsx
@@ -16,7 +16,7 @@ export function MangaRecommendations(props: MangaRecommendationsProps) {
         ...rest
     } = props
 
-    const anime = entry?.media?.relations?.edges?.map(edge => edge?.node).find(node => node?.type === "ANIME" && node?.format === "TV")
+    const anime = entry?.media?.relations?.edges?.map(edge => edge?.node).filter(node => node?.type === "ANIME" && node?.format === "TV")?.slice(0, 3)
 
     const recommendations = details?.recommendations?.edges?.map(edge => edge?.node?.mediaRecommendation)?.filter(Boolean)?.slice(0, 6) || []
 
@@ -28,13 +28,15 @@ export function MangaRecommendations(props: MangaRecommendationsProps) {
                 <>
                     <h3>Relations</h3>
                     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
-                        <div className="col-span-1">
-                            <AnimeListItem
-                                media={anime!}
-                                showLibraryBadge
-                                showTrailer
-                            />
-                        </div>
+                        {anime?.map(media => {
+                            return <div key={media?.id!} className="col-span-1">
+                                <AnimeListItem
+                                    media={media!}
+                                    showLibraryBadge
+                                    showTrailer
+                                />
+                            </div>
+                        })}
                     </div>
                 </>
             )}

diff --git a/seanime-web/src/app/(main)/manga/entry/_containers/chapters-list.tsx b/seanime-web/src/app/(main)/manga/entry/_containers/chapters-list.tsx
@@ -15,7 +15,7 @@ import { useAtom, useSetAtom } from "jotai/react"
 import React from "react"
 import { BiBookAlt } from "react-icons/bi"
 import { FaRedo } from "react-icons/fa"
-import { FaBookOpenReader } from "react-icons/fa6"
+import { GiOpenBook } from "react-icons/gi"
 
 type ChaptersListProps = {
     mediaId: string | null
@@ -134,7 +134,7 @@ export function ChaptersList(props: ChaptersListProps) {
                                 <AccordionTrigger>
                                     <h3 className="flex gap-2 items-center"><BiBookAlt className="text-gray-300" /> All chapters</h3>
                                 </AccordionTrigger>
-                                <AccordionContent className="p-0 py-4 space-y-2">
+                                <AccordionContent className="p-0 space-y-2 max-h-[75dvh] overflow-y-auto">
                                     {chapterContainer?.chapters?.toReversed()?.map((chapter) => (
                                         <ChapterItem
                                             chapter={chapter}
@@ -151,16 +151,18 @@ export function ChaptersList(props: ChaptersListProps) {
 
 
                         <h3>Unread chapters</h3>
-                        {chapterContainer?.chapters?.filter(ch => retainUnreadChapters(ch)).map((chapter) => (
-                            <ChapterItem
-                                chapter={chapter}
-                                key={chapter.id}
-                                // chapterBackups={chapterBackups}
-                                // handleDownloadChapter={handleDownloadChapter}
-                                // downloadProgressMap={downloadProgressMap}
-                                // isSendingDownloadRequest={false}
-                            />
-                        ))}
+                        <div className="p-0 space-y-2 max-h-[75dvh] overflow-y-auto">
+                            {chapterContainer?.chapters?.filter(ch => retainUnreadChapters(ch)).map((chapter) => (
+                                <ChapterItem
+                                    chapter={chapter}
+                                    key={chapter.id}
+                                    // chapterBackups={chapterBackups}
+                                    // handleDownloadChapter={handleDownloadChapter}
+                                    // downloadProgressMap={downloadProgressMap}
+                                    // isSendingDownloadRequest={false}
+                                />
+                            ))}
+                        </div>
 
                         {chapterContainer && <ChapterDrawer
                             entry={entry}
@@ -203,7 +205,7 @@ export function ChapterItem(props: ChapterItemProps) {
             <Card
                 key={chapter.id}
                 className={cn(
-                    "p-3 flex w-full gap-2 items-center",
+                    "px-3 py-1.5 flex w-full gap-2 items-center",
                     "hover:bg-[--subtle]",
                 )}
             >
@@ -213,7 +215,7 @@ export function ChapterItem(props: ChapterItemProps) {
                     intent="gray-basic"
                     size="sm"
                     onClick={() => setSelectedChapter(chapter)}
-                    icon={<FaBookOpenReader />}
+                    icon={<GiOpenBook />}
                 />
                 {/*SHELVED*/}
                 {/*{!chapterBackups?.chapterIds[chapter.id] && <IconButton*/}