add refresh button to album / artist carousels

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,6 +138,8 @@ function BaseGridCarousel(props: GridCarouselProps) {
             {cq.isCalculated && (
                 <>
                     <div className={styles.navigation}>
+                        <Group gap="xs" justify="space-between" w="100%">
+                            <Group gap="xs">
                                 {typeof title === 'string' ? (
                                     <TextTitle fw={700} isNoSelect order={3}>
                                         {title}
@@ -135,6 +147,17 @@ function BaseGridCarousel(props: GridCarouselProps) {
                                 ) : (
                                     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}
@@ -153,6 +176,7 @@ function BaseGridCarousel(props: GridCarouselProps) {
                                     variant="subtle"
                                 />
                             </Group>
+                        </Group>
                     </div>
                     <AnimatePresence custom={currentPage} initial={false} mode="wait">
                         <motion.div

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}
         />

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}
         />