vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add refresh button to album / artist carousels

Browse Source
This commit is contained in:
jeffvli
2025-12-03 18:05:15 -08:00
parent 9d498d4ca2
commit a47f94ebb2
3 changed files with 61 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/grid-carousel/grid-carousel-v2.tsx
+49 -25
View File
@@ -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">
src/renderer/features/albums/components/album-infinite-carousel.tsx
+6
View File
@@ -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
+6
View File
@@ -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}
/>