From 928b0b6f4d221527b9c7d556fec8e0bba2a80843 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 02:15:13 -0800
Subject: [PATCH] add a limit of 20 albums per section

---
 .../album-artist-detail-content.module.css       |  1 -
 .../components/album-artist-detail-content.tsx   | 16 +++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/renderer/features/artists/components/album-artist-detail-content.module.css b/src/renderer/features/artists/components/album-artist-detail-content.module.css
index dd046e398..1c509b051 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.module.css
+++ b/src/renderer/features/artists/components/album-artist-detail-content.module.css
@@ -47,5 +47,4 @@
     align-items: center;
     width: 100%;
     min-width: 0;
-    margin-bottom: var(--theme-spacing-md);
 }
diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index bca49ade4..e3df2779f 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -691,12 +691,19 @@ interface AlbumSectionProps {
     title: React.ReactNode | string;
 }
 
+const MAX_SECTION_CARDS = 20;
+
 const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps) => {
+    const { t } = useTranslation();
     const span = cq.isXl ? 3 : cq.isLg ? 4 : cq.isMd ? 6 : cq.isSm ? 8 : cq.isXs ? 12 : 12;
     const albumCount = albums.length;
+    const [showAll, setShowAll] = useState(false);
     const player = usePlayer();
     const serverId = useCurrentServerId();
 
+    const displayedAlbums = showAll ? albums : albums.slice(0, MAX_SECTION_CARDS);
+    const hasMoreAlbums = albums.length > MAX_SECTION_CARDS;
+
     const handlePlay = useCallback(
         (playType: Play) => {
             if (albums.length === 0) return;
@@ -787,7 +794,7 @@ const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps)
                 </div>
             </div>
             <Grid columns={24} gutter="md" type="container">
-                {albums.map((album) => (
+                {displayedAlbums.map((album) => (
                     <Grid.Col key={album.id} span={span}>
                         <MemoizedItemCard
                             controls={controls}
@@ -801,6 +808,13 @@ const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps)
                     </Grid.Col>
                 ))}
             </Grid>
+            {hasMoreAlbums && !showAll && (
+                <Group justify="center" w="100%">
+                    <Button onClick={() => setShowAll(true)} variant="subtle">
+                        {t('action.viewMore', { postProcess: 'sentenceCase' })}
+                    </Button>
+                </Group>
+            )}
         </Stack>
     );
 };