diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx
index 725ed0d75..77c6da1af 100644
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@@ -1,5 +1,5 @@
import { useQuery } from '@tanstack/react-query';
-import { Suspense, useMemo } from 'react';
+import { Suspense, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link, useParams } from 'react-router';
@@ -17,6 +17,7 @@ import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { PlayButton } from '/@/renderer/features/shared/components/play-button';
+import { searchLibraryItems } from '/@/renderer/features/shared/utils';
import { useContainerQuery } from '/@/renderer/hooks';
import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
import { useCurrentServer } from '/@/renderer/store';
@@ -30,9 +31,11 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { Spoiler } from '/@/shared/components/spoiler/spoiler';
import { Stack } from '/@/shared/components/stack/stack';
+import { TextInput } from '/@/shared/components/text-input/text-input';
import { Text } from '/@/shared/components/text/text';
import { AlbumListSort, LibraryItem, Song, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
@@ -149,17 +152,6 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
/>
-
{showGenres && (
@@ -273,12 +265,17 @@ interface AlbumDetailSongsTableProps {
const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
const { t } = useTranslation();
+ const [searchTerm, setSearchTerm] = useState('');
const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.ALBUM_DETAIL]?.table);
const columns = useMemo(() => {
return tableConfig?.columns || [];
}, [tableConfig?.columns]);
+ const filteredSongs = useMemo(() => {
+ return searchLibraryItems(songs, searchTerm, LibraryItem.SONG);
+ }, [songs, searchTerm]);
+
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM_DETAIL,
});
@@ -288,7 +285,7 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
});
const discGroups = useMemo(() => {
- if (songs.length === 0) return [];
+ if (filteredSongs.length === 0) return [];
const groups: Array<{
discNumber: number;
@@ -298,7 +295,7 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
let lastDiscNumber = -1;
let currentGroupStartIndex = 0;
- songs.forEach((song, index) => {
+ filteredSongs.forEach((song, index) => {
if (song.discNumber !== lastDiscNumber) {
// If we have a previous group, calculate its item count
if (groups.length > 0) {
@@ -317,44 +314,18 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
// Set item count for the last group
if (groups.length > 0) {
- groups[groups.length - 1].itemCount = songs.length - currentGroupStartIndex;
+ groups[groups.length - 1].itemCount = filteredSongs.length - currentGroupStartIndex;
}
return groups;
- }, [songs]);
-
- // const maxHeight = useMemo(() => {
- // if (!tableConfig) return undefined;
-
- // const headerHeight = 40;
- // const rowHeights = {
- // compact: 40,
- // default: 64,
- // large: 88,
- // };
- // const rowHeight = rowHeights[tableConfig.size || 'default'];
- // const maxRows = 20;
-
- // return headerHeight + maxRows * rowHeight;
- // }, [tableConfig]);
-
- // Uncomment to enable static table height
- // const containerHeight = useMemo(() => {
- // if (!tableConfig || !maxHeight) return undefined;
-
- // const headerHeight = 40;
- // const rowHeights = {
- // compact: 40,
- // default: 64,
- // large: 88,
- // };
- // const rowHeight = rowHeights[tableConfig.size || 'default'];
- // const actualRows = Math.min(songs.length, 20);
-
- // return Math.min(headerHeight + actualRows * rowHeight, maxHeight);
- // }, [tableConfig, maxHeight, songs.length]);
+ }, [filteredSongs]);
const groups = useMemo(() => {
+ // Remove groups when filtering
+ if (searchTerm.trim()) {
+ return undefined;
+ }
+
if (discGroups.length <= 1) {
return undefined;
}
@@ -439,33 +410,66 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
},
rowHeight: 40,
}));
- }, [discGroups, t]);
+ }, [discGroups, t, searchTerm]);
if (!tableConfig || columns.length === 0) {
return null;
}
return (
-
+
+
+ }
+ onChange={(e) => setSearchTerm(e.target.value)}
+ placeholder={t('common.search', { postProcess: 'sentenceCase' })}
+ radius="xl"
+ rightSection={
+ searchTerm ? (
+ setSearchTerm('')}
+ size="sm"
+ variant="transparent"
+ />
+ ) : null
+ }
+ value={searchTerm}
+ />
+
+
+
+
);
};