fix container ref instances

src/renderer/components/grid-carousel/grid-carousel-v2.tsx

@@ -44,7 +44,7 @@ const pageVariants: Variants = {
 
 export function GridCarousel(props: GridCarouselProps) {
     const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
-    const cq = useContainerQuery({
+    const { ref, ...cq } = useContainerQuery({
         lg: 900,
         md: 600,
         sm: 360,
@@ -120,7 +120,7 @@ export function GridCarousel(props: GridCarouselProps) {
     }, [handleNextPage, handlePrevPage, isNextDisabled, isPrevDisabled, x]);
 
     return (
-        <div className={styles.gridCarousel} ref={cq.ref}>
+        <div className={styles.gridCarousel} ref={ref}>
             {cq.isCalculated && (
                 <>
                     <div className={styles.navigation}>

src/renderer/features/albums/components/album-detail-content.tsx

@@ -39,7 +39,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
         albumQueries.detail({ query: { id: albumId }, serverId: server.id }),
     );
 
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
     const { externalLinks, lastFM, musicBrainz } = useGeneralSettings();
     const genreRoute = useGenreRoute();
 
@@ -96,7 +96,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
     const mbzId = detailQuery?.data?.mbzId;
 
     return (
-        <div className={styles.contentContainer} ref={cq.ref}>
+        <div className={styles.contentContainer} ref={ref}>
             <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <section>
@@ -198,7 +198,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
                     </section>
                 )}
 
-                <Stack gap="lg" mt="3rem" ref={cq.ref}>
+                <Stack gap="lg" mt="3rem">
                     {cq.height || cq.width ? (
                         <>
                             {carousels

src/renderer/features/albums/components/album-detail-header.tsx

@@ -1,12 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
-import { forwardRef, Ref, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link, useParams } from 'react-router';
 
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
 import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
-import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
@@ -26,144 +25,139 @@ interface AlbumDetailHeaderProps {
     };
 }
 
-export const AlbumDetailHeader = forwardRef(
-    ({ background }: AlbumDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
-        const { albumId } = useParams() as { albumId: string };
-        const server = useCurrentServer();
-        const detailQuery = useQuery(
-            albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
-        );
-        const cq = useContainerQuery();
-        const { t } = useTranslation();
+export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
+    const { albumId } = useParams() as { albumId: string };
+    const server = useCurrentServer();
+    const detailQuery = useQuery(
+        albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
+    );
+    const { t } = useTranslation();
 
-        const showRating =
-            detailQuery?.data?._serverType === ServerType.NAVIDROME ||
-            detailQuery?.data?._serverType === ServerType.SUBSONIC;
+    const showRating =
+        detailQuery?.data?._serverType === ServerType.NAVIDROME ||
+        detailQuery?.data?._serverType === ServerType.SUBSONIC;
 
-        const originalDifferentFromRelease =
-            detailQuery.data?.originalDate &&
-            detailQuery.data.originalDate !== detailQuery.data.releaseDate;
+    const originalDifferentFromRelease =
+        detailQuery.data?.originalDate &&
+        detailQuery.data.originalDate !== detailQuery.data.releaseDate;
 
-        const releasePrefix = originalDifferentFromRelease
-            ? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
-            : '♫';
+    const releasePrefix = originalDifferentFromRelease
+        ? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
+        : '♫';
 
-        const releaseTypes = useMemo(
-            () =>
-                normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
-                    id: type,
-                    value: titleCase(type),
-                })) || [],
-            [detailQuery.data?.releaseTypes, t],
-        );
+    const releaseTypes = useMemo(
+        () =>
+            normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
+                id: type,
+                value: titleCase(type),
+            })) || [],
+        [detailQuery.data?.releaseTypes, t],
+    );
 
-        const metadataItems = releaseTypes.concat([
-            {
-                id: 'releaseDate',
-                value:
-                    detailQuery?.data?.releaseDate &&
-                    `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`,
-            },
-            {
-                id: 'songCount',
-                value: t('entity.trackWithCount', {
-                    count: detailQuery?.data?.songCount as number,
+    const metadataItems = releaseTypes.concat([
+        {
+            id: 'releaseDate',
+            value:
+                detailQuery?.data?.releaseDate &&
+                `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`,
+        },
+        {
+            id: 'songCount',
+            value: t('entity.trackWithCount', {
+                count: detailQuery?.data?.songCount as number,
+            }),
+        },
+        {
+            id: 'duration',
+            value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
+        },
+        {
+            id: 'playCount',
+            value:
+                typeof detailQuery?.data?.playCount === 'number' &&
+                t('entity.play', {
+                    count: detailQuery?.data?.playCount,
                 }),
+        },
+        {
+            id: 'version',
+            value: detailQuery.data?.version,
+        },
+    ]);
+
+    if (originalDifferentFromRelease) {
+        const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`;
+        metadataItems.splice(0, 0, {
+            id: 'originalDate',
+            value: formatted,
+        });
+    }
+
+    const updateRatingMutation = useSetRating({});
+
+    const handleUpdateRating = (rating: number) => {
+        if (!detailQuery?.data) return;
+
+        updateRatingMutation.mutate({
+            apiClientProps: { serverId: detailQuery.data._serverId },
+            query: {
+                id: [detailQuery.data.id],
+                rating,
+                type: LibraryItem.ALBUM,
             },
-            {
-                id: 'duration',
-                value:
-                    detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
-            },
-            {
-                id: 'playCount',
-                value:
-                    typeof detailQuery?.data?.playCount === 'number' &&
-                    t('entity.play', {
-                        count: detailQuery?.data?.playCount,
-                    }),
-            },
-            {
-                id: 'version',
-                value: detailQuery.data?.version,
-            },
-        ]);
+        });
+    };
 
-        if (originalDifferentFromRelease) {
-            const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`;
-            metadataItems.splice(releaseTypes.length, 0, {
-                id: 'originalDate',
-                value: formatted,
-            });
-        }
-
-        const updateRatingMutation = useSetRating({});
-
-        const handleUpdateRating = (rating: number) => {
-            if (!detailQuery?.data) return;
-
-            updateRatingMutation.mutate({
-                apiClientProps: { serverId: detailQuery.data._serverId },
-                query: {
-                    id: [detailQuery.data.id],
-                    rating,
-                    type: LibraryItem.ALBUM,
-                },
-            });
-        };
-
-        return (
-            <Stack ref={cq.ref}>
-                <LibraryHeader
-                    imageUrl={detailQuery?.data?.imageUrl}
-                    item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
-                    ref={ref}
-                    title={detailQuery?.data?.name || ''}
-                    {...background}
-                >
-                    <Stack gap="lg">
-                        <Pill.Group>
-                            {metadataItems.map(
-                                (item, index) =>
-                                    item.value && (
-                                        <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
-                                    ),
-                            )}
-                        </Pill.Group>
-                        {showRating && (
-                            <Rating
-                                onChange={handleUpdateRating}
-                                readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
-                                value={detailQuery?.data?.userRating || 0}
-                            />
+    return (
+        <Stack>
+            <LibraryHeader
+                imageUrl={detailQuery?.data?.imageUrl}
+                item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
+                title={detailQuery?.data?.name || ''}
+                {...background}
+            >
+                <Stack gap="lg">
+                    <Pill.Group>
+                        {metadataItems.map(
+                            (item, index) =>
+                                item.value && (
+                                    <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
+                                ),
                         )}
-                        <Group
-                            gap="md"
-                            mah="4rem"
-                            style={{
-                                overflow: 'hidden',
-                                WebkitBoxOrient: 'vertical',
-                                WebkitLineClamp: 2,
-                            }}
-                        >
-                            {detailQuery?.data?.albumArtists.map((artist) => (
-                                <Text
-                                    component={Link}
-                                    fw={600}
-                                    isLink
-                                    key={`artist-${artist.id}`}
-                                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                        albumArtistId: artist.id,
-                                    })}
-                                    variant="subtle"
-                                >
-                                    {artist.name}
-                                </Text>
-                            ))}
-                        </Group>
-                    </Stack>
-                </LibraryHeader>
-            </Stack>
-        );
-    },
-);
+                    </Pill.Group>
+                    {showRating && (
+                        <Rating
+                            onChange={handleUpdateRating}
+                            readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
+                            value={detailQuery?.data?.userRating || 0}
+                        />
+                    )}
+                    <Group
+                        gap="md"
+                        mah="4rem"
+                        style={{
+                            overflow: 'hidden',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 2,
+                        }}
+                    >
+                        {detailQuery?.data?.albumArtists.map((artist) => (
+                            <Text
+                                component={Link}
+                                fw={600}
+                                isLink
+                                key={`artist-${artist.id}`}
+                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                    albumArtistId: artist.id,
+                                })}
+                                variant="subtle"
+                            >
+                                {artist.name}
+                            </Text>
+                        ))}
+                    </Group>
+                </Stack>
+            </LibraryHeader>
+        </Stack>
+    );
+};

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -5,7 +5,6 @@ import { ListMusicFolderDropdown } from '/@/renderer/features/shared/components/
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
-import { useContainerQuery } from '/@/renderer/hooks';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
@@ -13,11 +12,9 @@ import { AlbumListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-ty
 import { ItemListKey } from '/@/shared/types/types';
 
 export const AlbumListHeaderFilters = () => {
-    const cq = useContainerQuery();
-
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={cq.ref} w="100%">
+            <Group gap="sm" w="100%">
                 <ListSortByDropdown
                     defaultSortByValue={AlbumListSort.NAME}
                     itemType={LibraryItem.ALBUM}

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -32,7 +32,7 @@ import { Text } from '/@/shared/components/text/text';
 import { LibraryItem, SongDetailResponse } from '/@/shared/types/domain-types';
 
 const DummyAlbumDetailRoute = () => {
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
     const { t } = useTranslation();
 
     const { albumId } = useParams() as { albumId: string };
@@ -120,7 +120,7 @@ const DummyAlbumDetailRoute = () => {
 
     return (
         <AnimatedPage key={`dummy-album-detail-${albumId}`}>
-            <Stack ref={cq.ref}>
+            <Stack ref={ref}>
                 <LibraryHeader
                     background={background}
                     imageUrl={detailQuery?.data?.imageUrl}

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -48,7 +48,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         artistId?: string;
     };
     const routeId = (artistId || albumArtistId) as string;
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
     const handlePlayQueueAdd = usePlayQueueAdd();
     const server = useCurrentServer();
     const genrePath = useGenreRoute();
@@ -234,10 +234,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         detailQuery?.isLoading ||
         (server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading);
 
-    if (isLoading) return <div className={styles.contentContainer} ref={cq.ref} />;
+    if (isLoading) return <div className={styles.contentContainer} ref={ref} />;
 
     return (
-        <div className={styles.contentContainer} ref={cq.ref}>
+        <div className={styles.contentContainer} ref={ref}>
             <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <Group gap="md">

src/renderer/features/artists/components/album-artist-list-header-filters.tsx

@@ -12,11 +12,11 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
 import { ItemListKey } from '/@/shared/types/types';
 
 export const AlbumArtistListHeaderFilters = () => {
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
 
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={cq.ref} w="100%">
+            <Group gap="sm" ref={ref} w="100%">
                 <ListSortByDropdown
                     defaultSortByValue={AlbumArtistListSort.NAME}
                     itemType={LibraryItem.ALBUM_ARTIST}

src/renderer/features/artists/components/artist-list-header-filters.tsx

@@ -18,14 +18,14 @@ import { ArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-t
 import { ItemListKey } from '/@/shared/types/types';
 
 export const ArtistListHeaderFilters = () => {
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
     const server = useCurrentServer();
 
     const rolesQuery = useQuery(sharedQueries.roles({ query: {}, serverId: server.id }));
 
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={cq.ref} w="100%">
+            <Group gap="sm" ref={ref} w="100%">
                 <ListSortByDropdown
                     defaultSortByValue={ArtistListSort.NAME}
                     itemType={LibraryItem.ARTIST}

src/renderer/features/genres/components/genre-list-header-filters.tsx

@@ -13,11 +13,11 @@ import { GenreListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-ty
 import { ItemListKey } from '/@/shared/types/types';
 
 export const GenreListHeaderFilters = () => {
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
 
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={cq.ref} w="100%">
+            <Group gap="sm" ref={ref} w="100%">
                 <ListSortByDropdown
                     defaultSortByValue={GenreListSort.NAME}
                     itemType={LibraryItem.GENRE}

src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx

@@ -260,7 +260,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
     );
     const isSmartPlaylist = detailQuery.data?.rules;
 
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
 
     const sortByLabel =
         (server?.type &&
@@ -331,7 +331,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={cq.ref} w="100%">
+            <Group gap="sm" ref={ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button

src/renderer/features/playlists/components/playlist-list-header-filters.tsx

@@ -20,7 +20,7 @@ import { ItemListKey } from '/@/shared/types/types';
 export const PlaylistListHeaderFilters = () => {
     const { t } = useTranslation();
     const server = useCurrentServer();
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
 
     const handleCreatePlaylistModal = () => {
         openModal({
@@ -32,7 +32,7 @@ export const PlaylistListHeaderFilters = () => {
 
     return (
         <Flex justify="space-between">
-            <Group gap="sm" ref={cq.ref} w="100%">
+            <Group gap="sm" ref={ref} w="100%">
                 <ListSortByDropdown
                     defaultSortByValue={PlaylistListSort.NAME}
                     itemType={LibraryItem.PLAYLIST}

src/renderer/features/search/components/search-header.tsx

@@ -30,7 +30,7 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
     const { t } = useTranslation();
     const { itemType } = useParams() as { itemType: LibraryItem };
     const [searchParams, setSearchParams] = useSearchParams();
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
         setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
@@ -52,7 +52,7 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
     };
 
     return (
-        <Stack gap={0} ref={cq.ref}>
+        <Stack gap={0} ref={ref}>
             <PageHeader>
                 <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>

src/renderer/features/settings/components/settings-header.tsx

@@ -22,7 +22,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
     const { t } = useTranslation();
     const { reset } = useSettingsStoreActions();
     const search = useSettingSearchContext();
-    const cq = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
 
     const handleResetToDefault = () => {
         reset();
@@ -41,7 +41,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
     };
 
     return (
-        <Flex ref={cq.ref}>
+        <Flex ref={ref}>
             <PageHeader>
                 <LibraryHeaderBar>
                     <Flex align="center" justify="space-between" w="100%">

src/renderer/features/sidebar/components/action-bar.tsx

@@ -15,12 +15,12 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 
 export const ActionBar = () => {
     const { t } = useTranslation();
-    const cq = useContainerQuery({ md: 300 });
+    const { ref, ...cq } = useContainerQuery({ md: 300 });
     const navigate = useNavigate();
     const { open } = useCommandPalette();
 
     return (
-        <div className={styles.container} ref={cq.ref}>
+        <div className={styles.container} ref={ref}>
             <Grid display="flex" gutter="sm" px="1rem" w="100%">
                 <Grid.Col span={6}>
                     <TextInput