various clean up and fixes

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

@@ -221,10 +221,10 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
                 (a) => a.id !== detailQuery?.data?.id,
             ).length,
             loading: relatedAlbumGenresQuery?.isLoading || relatedAlbumGenresQuery.isFetching,
-            title: t('page.albumDetail.moreFromGeneric', {
+            title: `${t('page.albumDetail.moreFromGeneric', {
-                item: detailQuery?.data?.genres?.[0]?.name,
+                item: '',
                 postProcess: 'sentenceCase',
-            }),
+            })} ${detailQuery?.data?.genres?.[0]?.name}`,
             uniqueId: 'relatedGenres',
         },
     ];

src/renderer/features/albums/routes/album-list-route.tsx

@@ -2,7 +2,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 
 import isEmpty from 'lodash/isEmpty';
 import { useCallback, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import { api } from '/@/renderer/api';
@@ -17,7 +16,6 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { queryClient } from '/@/renderer/lib/react-query';
 import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
-import { sentenceCase, titleCase } from '/@/renderer/utils';
 import {
     AlbumListQuery,
     GenreListSort,
@@ -27,7 +25,6 @@ import {
 import { Play } from '/@/shared/types/types';
 
 const AlbumListRoute = () => {
-    const { t } = useTranslation();
     const gridRef = useRef<null | VirtualInfiniteGridRef>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
@@ -135,11 +132,7 @@ const AlbumListRoute = () => {
     }, [albumArtistId, customFilters, genreId, handlePlay, pageKey]);
 
     const artist = searchParams.get('artistName');
-    const title = artist
+    const title = artist ? artist : genreId ? genreTitle : undefined;
-        ? sentenceCase(t('page.albumList.artistAlbums', { artist }))
-        : genreId
-          ? sentenceCase(t('page.albumList.genreAlbums', { genre: titleCase(genreTitle) }))
-          : undefined;
 
     return (
         <AnimatedPage>

src/renderer/features/shared/components/library-header.tsx

@@ -26,7 +26,7 @@ interface LibraryHeaderProps {
 
 export const LibraryHeader = forwardRef(
     (
-        { background, blur, children, imageUrl, item, loading, title }: LibraryHeaderProps,
+        { background, blur, children, imageUrl, item, title }: LibraryHeaderProps,
         ref: Ref<HTMLDivElement>,
     ) => {
         const { t } = useTranslation();
@@ -107,10 +107,11 @@ export const LibraryHeader = forwardRef(
                     style={{ cursor: 'pointer' }}
                     tabIndex={0}
                 >
-                    {!loading && imageUrl && !isImageError && (
+                    {!isImageError && (
                         <Image
                             alt="cover"
                             className={styles.image}
+                            loading="eager"
                             onError={onImageError}
                             src={imageUrl || ''}
                         />

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -303,7 +303,6 @@ export const SidebarSharedPlaylistList = () => {
 
         for (const playlist of data.items) {
             if (playlist.owner && playlist.owner !== server.username) {
-                console.log(playlist.owner, server.username);
                 shared.push(playlist);
             }
         }

src/renderer/features/songs/routes/song-list-route.tsx

@@ -2,7 +2,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 
 import isEmpty from 'lodash/isEmpty';
 import { useCallback, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
@@ -14,12 +13,10 @@ import { SongListContent } from '/@/renderer/features/songs/components/song-list
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
 import { useSongListCount } from '/@/renderer/features/songs/queries/song-list-count-query';
 import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
-import { sentenceCase, titleCase } from '/@/renderer/utils';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 const TrackListRoute = () => {
-    const { t } = useTranslation();
     const gridRef = useRef<null | VirtualInfiniteGridRef>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
@@ -123,15 +120,7 @@ const TrackListRoute = () => {
     }, [albumArtistId, customFilters, genreId, handlePlay, pageKey]);
 
     const artist = searchParams.get('artistName');
-    const title = artist
+    const title = artist ? artist : genreId ? genreTitle : undefined;
-        ? sentenceCase(t('page.trackList.artistTracks', { artist }))
-        : genreId
-          ? sentenceCase(
-                t('page.trackList.genreTracks', {
-                    genre: titleCase(genreTitle),
-                }),
-            )
-          : undefined;
 
     return (
         <AnimatedPage>

src/renderer/hooks/use-fast-average-color.tsx

@@ -63,7 +63,5 @@ export const useFastAverageColor = (args: {
         };
     }, [algorithm, srcLoaded, src, id]);
 
-    console.log('background :>> ', background);
-
     return { background, colorId: idRef.current };
 };