From a47f94ebb2e583969442c7872dfa134e83a448f2 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 3 Dec 2025 18:05:15 -0800
Subject: [PATCH] add refresh button to album / artist carousels

---
 .../grid-carousel/grid-carousel-v2.tsx        | 74 ++++++++++++-------
 .../components/album-infinite-carousel.tsx    |  6 ++
 .../album-artist-infinite-carousel.tsx        |  6 ++
 3 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/src/renderer/components/grid-carousel/grid-carousel-v2.tsx b/src/renderer/components/grid-carousel/grid-carousel-v2.tsx
index 41aa457e2..14d4aa10c 100644
--- a/src/renderer/components/grid-carousel/grid-carousel-v2.tsx
+++ b/src/renderer/components/grid-carousel/grid-carousel-v2.tsx
@@ -22,6 +22,7 @@ interface GridCarouselProps {
     loadNextPage?: () => void;
     onNextPage: (page: number) => void;
     onPrevPage: (page: number) => void;
+    onRefresh?: () => void;
     rowCount?: number;
     title?: ReactNode | string;
 }
@@ -43,7 +44,16 @@ const pageVariants: Variants = {
 };
 
 function BaseGridCarousel(props: GridCarouselProps) {
-    const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
+    const {
+        cards,
+        hasNextPage,
+        loadNextPage,
+        onNextPage,
+        onPrevPage,
+        onRefresh,
+        rowCount = 1,
+        title,
+    } = props;
     const { ref, ...cq } = useContainerQuery({
         '2xl': 1280,
         '3xl': 1440,
@@ -128,30 +138,44 @@ function BaseGridCarousel(props: GridCarouselProps) {
             {cq.isCalculated && (
                 <>
                     <div className={styles.navigation}>
-                        {typeof title === 'string' ? (
-                            <TextTitle fw={700} isNoSelect order={3}>
-                                {title}
-                            </TextTitle>
-                        ) : (
-                            title
-                        )}
-                        <Group gap="xs" justify="end">
-                            <ActionIcon
-                                disabled={isPrevDisabled}
-                                icon="arrowLeftS"
-                                iconProps={{ size: 'lg' }}
-                                onClick={handlePrevPage}
-                                size="xs"
-                                variant="subtle"
-                            />
-                            <ActionIcon
-                                disabled={isNextDisabled}
-                                icon="arrowRightS"
-                                iconProps={{ size: 'lg' }}
-                                onClick={handleNextPage}
-                                size="xs"
-                                variant="subtle"
-                            />
+                        <Group gap="xs" justify="space-between" w="100%">
+                            <Group gap="xs">
+                                {typeof title === 'string' ? (
+                                    <TextTitle fw={700} isNoSelect order={3}>
+                                        {title}
+                                    </TextTitle>
+                                ) : (
+                                    title
+                                )}
+                                {onRefresh && (
+                                    <ActionIcon
+                                        icon="refresh"
+                                        iconProps={{ size: 'md' }}
+                                        onClick={onRefresh}
+                                        size="xs"
+                                        tooltip={{ label: 'Refresh' }}
+                                        variant="transparent"
+                                    />
+                                )}
+                            </Group>
+                            <Group gap="xs" justify="end">
+                                <ActionIcon
+                                    disabled={isPrevDisabled}
+                                    icon="arrowLeftS"
+                                    iconProps={{ size: 'lg' }}
+                                    onClick={handlePrevPage}
+                                    size="xs"
+                                    variant="subtle"
+                                />
+                                <ActionIcon
+                                    disabled={isNextDisabled}
+                                    icon="arrowRightS"
+                                    iconProps={{ size: 'lg' }}
+                                    onClick={handleNextPage}
+                                    size="xs"
+                                    variant="subtle"
+                                />
+                            </Group>
                         </Group>
                     </div>
                     <AnimatePresence custom={currentPage} initial={false} mode="wait">
diff --git a/src/renderer/features/albums/components/album-infinite-carousel.tsx b/src/renderer/features/albums/components/album-infinite-carousel.tsx
index c0a647af5..0ff6ca6aa 100644
--- a/src/renderer/features/albums/components/album-infinite-carousel.tsx
+++ b/src/renderer/features/albums/components/album-infinite-carousel.tsx
@@ -34,6 +34,7 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
         data: albums,
         fetchNextPage,
         hasNextPage,
+        refetch,
     } = useAlbumListInfinite(sortBy, sortOrder, 20, additionalQuery);
 
     const controls = useDefaultItemListControls();
@@ -65,6 +66,10 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
 
     const handlePrevPage = useCallback(() => {}, []);
 
+    const handleRefresh = useCallback(() => {
+        refetch();
+    }, [refetch]);
+
     const firstPageItems = excludeIds
         ? albums.pages[0]?.items.filter((album) => !excludeIds.includes(album.id)) || []
         : albums.pages[0]?.items || [];
@@ -80,6 +85,7 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
             loadNextPage={fetchNextPage}
             onNextPage={handleNextPage}
             onPrevPage={handlePrevPage}
+            onRefresh={handleRefresh}
             rowCount={rowCount}
             title={title}
         />
diff --git a/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx b/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx
index 646228b1c..229abd939 100644
--- a/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx
+++ b/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx
@@ -34,6 +34,7 @@ export const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps)
         data: albumArtists,
         fetchNextPage,
         hasNextPage,
+        refetch,
     } = useAlbumArtistListInfinite(sortBy, sortOrder, 20, additionalQuery);
 
     const controls = useDefaultItemListControls();
@@ -65,6 +66,10 @@ export const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps)
 
     const handlePrevPage = useCallback(() => {}, []);
 
+    const handleRefresh = useCallback(() => {
+        refetch();
+    }, [refetch]);
+
     const firstPageItems = excludeIds
         ? albumArtists.pages[0]?.items.filter(
               (albumArtist) => !excludeIds.includes(albumArtist.id),
@@ -82,6 +87,7 @@ export const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps)
             loadNextPage={fetchNextPage}
             onNextPage={handleNextPage}
             onPrevPage={handlePrevPage}
+            onRefresh={handleRefresh}
             rowCount={rowCount}
             title={title}
         />