fix container ref instances

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}