adjust top songs / favorite songs sections

- use table row height configuration for container calculation
- add wrapper component and use for both Top Songs and Favorite Songs
- remove the view more button, show all items by default

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

@@ -225,6 +225,39 @@ const AlbumArtistMetadataBiography = ({
     );
 };
 
+const TABLE_ROW_HEIGHT = {
+    compact: 40,
+    default: 64,
+    large: 88,
+} as const;
+
+const TABLE_HEADER_HEIGHT = 40;
+
+interface SongTableListContainerProps {
+    children: React.ReactNode;
+    enableHeader?: boolean;
+    itemCount: number;
+    maxRows?: number;
+    tableSize?: 'compact' | 'default' | 'large';
+}
+
+function getTableRowHeight(size: 'compact' | 'default' | 'large' | undefined): number {
+    return size ? TABLE_ROW_HEIGHT[size] : TABLE_ROW_HEIGHT.default;
+}
+
+const SongTableListContainer = ({
+    children,
+    enableHeader = true,
+    itemCount,
+    maxRows = 5,
+    tableSize = 'default',
+}: SongTableListContainerProps) => {
+    const rowHeight = getTableRowHeight(tableSize);
+    const headerOffset = enableHeader ? TABLE_HEADER_HEIGHT : 0;
+    const height = headerOffset + rowHeight * Math.min(itemCount, maxRows);
+    return <div style={{ height }}>{children}</div>;
+};
+
 interface AlbumArtistMetadataTopSongsProps {
     detailQuery: ReturnType<typeof useSuspenseQuery<AlbumArtistDetailResponse>>;
     routeId: string;
@@ -237,7 +270,6 @@ const AlbumArtistMetadataTopSongsContent = ({
     const { t } = useTranslation();
     const [searchTerm, setSearchTerm] = useState('');
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
-    const [showAll, setShowAll] = useState(false);
     const [topSongsQueryType, setTopSongsQueryType] = useLocalStorage<'community' | 'personal'>({
         defaultValue: 'community',
         key: 'album-artist-top-songs-query-type',
@@ -269,13 +301,8 @@ const AlbumArtistMetadataTopSongsContent = ({
     }, [tableConfig?.columns]);
 
     const filteredSongs = useMemo(() => {
-        const filtered = searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG);
+        return searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG);
-        // When searching, show all results. Otherwise, limit to 5 if not showing all
+    }, [songs, debouncedSearchTerm]);
-        if (debouncedSearchTerm?.trim() || showAll) {
-            return filtered;
-        }
-        return filtered.slice(0, 5);
-    }, [songs, debouncedSearchTerm, showAll]);
 
     const { handleColumnReordered } = useItemListColumnReorder({
         itemListKey: ItemListKey.SONG,
@@ -459,35 +486,35 @@ const AlbumArtistMetadataTopSongsContent = ({
                                 tableColumnsData={SONG_TABLE_COLUMNS}
                             />
                         </Group>
-                        <ItemTableList
+                        <SongTableListContainer
-                            activeRowId={currentSongId}
-                            autoFitColumns={tableConfig.autoFitColumns}
-                            CellComponent={ItemTableListColumn}
-                            columns={columns}
-                            data={filteredSongs}
-                            enableAlternateRowColors={tableConfig.enableAlternateRowColors}
-                            enableDrag
-                            enableDragScroll={false}
-                            enableExpansion={false}
                             enableHeader={tableConfig.enableHeader}
-                            enableHorizontalBorders={tableConfig.enableHorizontalBorders}
+                            itemCount={filteredSongs.length}
-                            enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
+                            maxRows={5}
-                            enableSelection
+                            tableSize={tableConfig.size}
-                            enableSelectionDialog={false}
+                        >
-                            enableVerticalBorders={tableConfig.enableVerticalBorders}
+                            <ItemTableList
-                            itemType={LibraryItem.SONG}
+                                activeRowId={currentSongId}
-                            onColumnReordered={handleColumnReordered}
+                                autoFitColumns={tableConfig.autoFitColumns}
-                            onColumnResized={handleColumnResized}
+                                CellComponent={ItemTableListColumn}
-                            overrideControls={overrideControls}
+                                columns={columns}
-                            size={tableConfig.size}
+                                data={filteredSongs}
-                        />
+                                enableAlternateRowColors={tableConfig.enableAlternateRowColors}
-                        {!searchTerm.trim() && songs.length > 5 && !showAll && (
+                                enableDrag
-                            <Group justify="center" w="100%">
+                                enableDragScroll={false}
-                                <Button onClick={() => setShowAll(true)} variant="subtle">
+                                enableExpansion={false}
-                                    {t('action.viewMore', { postProcess: 'sentenceCase' })}
+                                enableHeader={tableConfig.enableHeader}
-                                </Button>
+                                enableHorizontalBorders={tableConfig.enableHorizontalBorders}
-                            </Group>
+                                enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
-                        )}
+                                enableSelection
+                                enableSelectionDialog={false}
+                                enableVerticalBorders={tableConfig.enableVerticalBorders}
+                                itemType={LibraryItem.SONG}
+                                onColumnReordered={handleColumnReordered}
+                                onColumnResized={handleColumnResized}
+                                overrideControls={overrideControls}
+                                size={tableConfig.size}
+                            />
+                        </SongTableListContainer>
                     </>
                 ) : null}
             </Stack>
@@ -523,7 +550,6 @@ const AlbumArtistMetadataFavoriteSongs = ({ routeId }: AlbumArtistMetadataFavori
     const { t } = useTranslation();
     const [searchTerm, setSearchTerm] = useState('');
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
-    const [showAll, setShowAll] = useState(false);
     const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.SONG]?.table);
     const currentSong = usePlayerSong();
     const player = usePlayer();
@@ -548,13 +574,8 @@ const AlbumArtistMetadataFavoriteSongs = ({ routeId }: AlbumArtistMetadataFavori
     }, [tableConfig?.columns]);
 
     const filteredSongs = useMemo(() => {
-        const filtered = searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG);
+        return searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG);
-        // When searching, show all results. Otherwise, limit to 5 if not showing all
+    }, [songs, debouncedSearchTerm]);
-        if (debouncedSearchTerm?.trim() || showAll) {
-            return filtered;
-        }
-        return filtered.slice(0, 5);
-    }, [songs, debouncedSearchTerm, showAll]);
 
     const { handleColumnReordered } = useItemListColumnReorder({
         itemListKey: ItemListKey.SONG,
@@ -717,35 +738,35 @@ const AlbumArtistMetadataFavoriteSongs = ({ routeId }: AlbumArtistMetadataFavori
                                 tableColumnsData={SONG_TABLE_COLUMNS}
                             />
                         </Group>
-                        <ItemTableList
+                        <SongTableListContainer
-                            activeRowId={currentSongId}
-                            autoFitColumns={tableConfig.autoFitColumns}
-                            CellComponent={ItemTableListColumn}
-                            columns={columns}
-                            data={filteredSongs}
-                            enableAlternateRowColors={tableConfig.enableAlternateRowColors}
-                            enableDrag
-                            enableDragScroll={false}
-                            enableExpansion={false}
                             enableHeader={tableConfig.enableHeader}
-                            enableHorizontalBorders={tableConfig.enableHorizontalBorders}
+                            itemCount={filteredSongs.length}
-                            enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
+                            maxRows={5}
-                            enableSelection
+                            tableSize={tableConfig.size}
-                            enableSelectionDialog={false}
+                        >
-                            enableVerticalBorders={tableConfig.enableVerticalBorders}
+                            <ItemTableList
-                            itemType={LibraryItem.SONG}
+                                activeRowId={currentSongId}
-                            onColumnReordered={handleColumnReordered}
+                                autoFitColumns={tableConfig.autoFitColumns}
-                            onColumnResized={handleColumnResized}
+                                CellComponent={ItemTableListColumn}
-                            overrideControls={overrideControls}
+                                columns={columns}
-                            size={tableConfig.size}
+                                data={filteredSongs}
-                        />
+                                enableAlternateRowColors={tableConfig.enableAlternateRowColors}
-                        {!searchTerm.trim() && songs.length > 5 && !showAll && (
+                                enableDrag
-                            <Group justify="center" w="100%">
+                                enableDragScroll={false}
-                                <Button onClick={() => setShowAll(true)} variant="subtle">
+                                enableExpansion={false}
-                                    {t('action.viewMore', { postProcess: 'sentenceCase' })}
+                                enableHeader={tableConfig.enableHeader}
-                                </Button>
+                                enableHorizontalBorders={tableConfig.enableHorizontalBorders}
-                            </Group>
+                                enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
-                        )}
+                                enableSelection
+                                enableSelectionDialog={false}
+                                enableVerticalBorders={tableConfig.enableVerticalBorders}
+                                itemType={LibraryItem.SONG}
+                                onColumnReordered={handleColumnReordered}
+                                onColumnResized={handleColumnResized}
+                                overrideControls={overrideControls}
+                                size={tableConfig.size}
+                            />
+                        </SongTableListContainer>
                     </>
                 ) : null}
             </Stack>

src/renderer/features/shared/utils.ts

@@ -124,23 +124,12 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
         });
     }
 
-    const sampleItem = items[0];
+    const stringKeys: string[] = [];
-
-    const stringKeys = Object.keys(sampleItem).filter(
-        (key) =>
-            typeof sampleItem[key as keyof T] === 'string' &&
-            !key.startsWith('_') &&
-            key !== 'id' &&
-            key !== 'albumId' &&
-            key !== 'streamUrl' &&
-            key !== 'serverId' &&
-            key !== 'ownerId',
-    ) as string[];
-
     const nestedKeys: Array<{ getFn: (item: T) => string; name: string }> = [];
 
     switch (itemType) {
         case LibraryItem.ALBUM: {
+            stringKeys.push('name', 'releaseType');
             nestedKeys.push(
                 {
                     getFn: (item) => {
@@ -168,6 +157,7 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
         }
 
         case LibraryItem.ALBUM_ARTIST: {
+            stringKeys.push('name');
             nestedKeys.push({
                 getFn: (item) => {
                     const aa = item as AlbumArtist;
@@ -181,9 +171,10 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
         case LibraryItem.ARTIST:
         case LibraryItem.GENRE:
         case LibraryItem.RADIO_STATION:
+            stringKeys.push('name');
             break;
-
         case LibraryItem.PLAYLIST: {
+            stringKeys.push('name');
             nestedKeys.push({
                 getFn: (item) => {
                     const p = item as Playlist;
@@ -196,7 +187,8 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
 
         case LibraryItem.PLAYLIST_SONG:
         case LibraryItem.QUEUE_SONG:
-        case LibraryItem.SONG: {
+        case LibraryItem.SONG:
+            stringKeys.push('album', 'name');
             nestedKeys.push(
                 {
                     getFn: (item) => {
@@ -214,7 +206,6 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
                 },
             );
             break;
-        }
     }
 
     return new Fuse(items, {