Improve Jellyfin/Navidrome Album/Song filter, Navidrome artist recent release

- Use `compilation=false` for Navidrome recent releases with artist credit
- Add `YesNoSelect` (yes, no, undefined) for `favorite` for Navidrome/Jellyfin `album`/`track`, and Navidrome `compilation`
- Fix folderButton translation

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

@@ -414,18 +414,23 @@ export const AlbumListHeaderFilters = ({
             Object.values(filter?._custom?.jellyfin).some((value) => value !== undefined);
 
         const isSubsonicFilterApplied =
-            server?.type === ServerType.SUBSONIC &&
+            server?.type === ServerType.SUBSONIC && (filter.maxYear || filter.minYear);
-            (filter.maxYear || filter.minYear || filter.favorite);
+
+        const isCompilationFilterApplied =
+            server?.type === ServerType.NAVIDROME && filter.compilation !== undefined;
 
         return (
             isNavidromeFilterApplied ||
             isJellyfinFilterApplied ||
             isSubsonicFilterApplied ||
-            filter.genres?.length
+            filter.genres?.length ||
+            filter.favorite !== undefined ||
+            isCompilationFilterApplied
         );
     }, [
         filter?._custom?.jellyfin,
         filter?._custom?.navidrome,
+        filter.compilation,
         filter.favorite,
         filter.genres?.length,
         filter.maxYear,

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -12,8 +12,8 @@ import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import {
     AlbumArtistListSort,
     AlbumListQuery,
@@ -72,15 +72,15 @@ export const JellyfinAlbumFilters = ({
         return filter?._custom?.jellyfin?.Tags?.split('|');
     }, [filter?._custom?.jellyfin?.Tags]);
 
-    const toggleFilters = [
+    const yesNoFilter = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            onChange: (favorite?: boolean) => {
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
                         _custom: filter?._custom,
-                        favorite: e.currentTarget.checked ? true : undefined,
+                        favorite,
                     },
                     itemType: LibraryItem.ALBUM,
                     key: pageKey,
@@ -189,16 +189,16 @@ export const JellyfinAlbumFilters = ({
 
     return (
         <Stack p="0.8rem">
-            {toggleFilters.map((filter) => (
+            {yesNoFilter.map((filter) => (
                 <Group
                     justify="space-between"
                     key={`nd-filter-${filter.label}`}
                 >
                     <Text>{filter.label}</Text>
-                    <Switch
+                    <YesNoSelect
-                        checked={filter?.value || false}
                         onChange={filter.onChange}
                         size="xs"
+                        value={filter.value}
                     />
                 </Group>
             ))}
@@ -250,7 +250,7 @@ export const JellyfinAlbumFilters = ({
                     searchValue={albumArtistSearchTerm}
                 />
             </Group>
-            {tagsQuery.data?.boolTags?.length && (
+            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
                 <Group grow>
                     <MultiSelectWithInvalidData
                         clearable

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -14,6 +14,7 @@ import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import {
     AlbumArtistListSort,
     AlbumListQuery,
@@ -78,6 +79,41 @@ export const NavidromeAlbumFilters = ({
         serverId,
     });
 
+    const yesNoUndefinedFilters = [
+        {
+            label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
+            onChange: (favorite?: boolean) => {
+                const updatedFilters = setFilter({
+                    customFilters,
+                    data: {
+                        _custom: filter._custom,
+                        favorite,
+                    },
+                    itemType: LibraryItem.ALBUM,
+                    key: pageKey,
+                }) as AlbumListFilter;
+                onFilterChange(updatedFilters);
+            },
+            value: filter.favorite,
+        },
+        {
+            label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
+            onChange: (compilation?: boolean) => {
+                const updatedFilters = setFilter({
+                    customFilters,
+                    data: {
+                        _custom: filter._custom,
+                        compilation,
+                    },
+                    itemType: LibraryItem.ALBUM,
+                    key: pageKey,
+                }) as AlbumListFilter;
+                onFilterChange(updatedFilters);
+            },
+            value: filter.compilation,
+        },
+    ];
+
     const toggleFilters = [
         {
             label: t('filter.isRated', { postProcess: 'sentenceCase' }),
@@ -100,38 +136,6 @@ export const NavidromeAlbumFilters = ({
             },
             value: filter._custom?.navidrome?.has_rating,
         },
-        {
-            label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                const updatedFilters = setFilter({
-                    customFilters,
-                    data: {
-                        _custom: filter._custom,
-                        favorite: e.currentTarget.checked ? true : undefined,
-                    },
-                    itemType: LibraryItem.ALBUM,
-                    key: pageKey,
-                }) as AlbumListFilter;
-                onFilterChange(updatedFilters);
-            },
-            value: filter.favorite,
-        },
-        {
-            label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                const updatedFilters = setFilter({
-                    customFilters,
-                    data: {
-                        _custom: filter._custom,
-                        compilation: e.currentTarget.checked ? true : undefined,
-                    },
-                    itemType: LibraryItem.ALBUM,
-                    key: pageKey,
-                }) as AlbumListFilter;
-                onFilterChange(updatedFilters);
-            },
-            value: filter.compilation,
-        },
         {
             label: t('filter.isRecentlyPlayed', { postProcess: 'sentenceCase' }),
             onChange: (e: ChangeEvent<HTMLInputElement>) => {
@@ -236,6 +240,19 @@ export const NavidromeAlbumFilters = ({
 
     return (
         <Stack p="0.8rem">
+            {yesNoUndefinedFilters.map((filter) => (
+                <Group
+                    justify="space-between"
+                    key={`nd-filter-${filter.label}`}
+                >
+                    <Text>{filter.label}</Text>
+                    <YesNoSelect
+                        onChange={filter.onChange}
+                        size="xs"
+                        value={filter.value}
+                    />
+                </Group>
+            ))}
             {toggleFilters.map((filter) => (
                 <Group
                     justify="space-between"

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

@@ -103,6 +103,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         },
         query: {
             artistIds: [routeId],
+            compilation: false,
             limit: 15,
             sortBy: AlbumListSort.RELEASE_DATE,
             sortOrder: SortOrder.DESC,

src/renderer/features/shared/components/folder-button.tsx

@@ -18,7 +18,7 @@ export const FolderButton = ({ isActive, ...props }: FolderButtonProps) => {
                 ...props.iconProps,
             }}
             tooltip={{
-                label: t('entity.folder', { postProcess: 'sentenceCase' }),
+                label: t('entity.folder', { count: 1, postProcess: 'sentenceCase' }),
                 ...props.tooltip,
             }}
             variant="subtle"

src/renderer/features/songs/components/jellyfin-song-filters.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -10,8 +10,8 @@ import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
 
 interface JellyfinSongFiltersProps {
@@ -69,10 +69,10 @@ export const JellyfinSongFilters = ({
         return filter?._custom?.jellyfin?.Tags?.split('|');
     }, [filter?._custom?.jellyfin?.Tags]);
 
-    const toggleFilters = [
+    const yesNoFilters = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            onChange: (favorite?: boolean) => {
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
@@ -83,7 +83,7 @@ export const JellyfinSongFilters = ({
                                 IncludeItemTypes: 'Audio',
                             },
                         },
-                        favorite: e.currentTarget.checked ? true : undefined,
+                        favorite,
                     },
                     itemType: LibraryItem.SONG,
                     key: pageKey,
@@ -174,15 +174,16 @@ export const JellyfinSongFilters = ({
 
     return (
         <Stack p="0.8rem">
-            {toggleFilters.map((filter) => (
+            {yesNoFilters.map((filter) => (
                 <Group
                     justify="space-between"
                     key={`nd-filter-${filter.label}`}
                 >
                     <Text>{filter.label}</Text>
-                    <Switch
+                    <YesNoSelect
-                        checked={filter?.value || false}
                         onChange={filter.onChange}
+                        size="xs"
+                        value={filter.value}
                     />
                 </Group>
             ))}
@@ -218,7 +219,7 @@ export const JellyfinSongFilters = ({
                     />
                 </Group>
             )}
-            {tagsQuery.data?.boolTags?.length && (
+            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
                 <Group grow>
                     <MultiSelectWithInvalidData
                         clearable

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -10,8 +10,8 @@ import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
 
 interface NavidromeSongFiltersProps {
@@ -93,12 +93,12 @@ export const NavidromeSongFilters = ({
     const toggleFilters = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            onChange: (favorite: boolean | undefined) => {
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
                         _custom: filter._custom,
-                        favorite: e.currentTarget.checked ? true : undefined,
+                        favorite,
                     },
                     itemType: LibraryItem.SONG,
                     key: pageKey,
@@ -137,10 +137,10 @@ export const NavidromeSongFilters = ({
                     key={`nd-filter-${filter.label}`}
                 >
                     <Text>{filter.label}</Text>
-                    <Switch
+                    <YesNoSelect
-                        checked={filter?.value || false}
                         onChange={filter.onChange}
                         size="xs"
+                        value={filter.value}
                     />
                 </Group>
             ))}

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -467,7 +467,7 @@ export const SongListHeaderFilters = ({
                 .filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
                 .some((value) => value !== undefined);
 
-        const isGenericFilterApplied = filter?.favorite || filter?.genreIds?.length;
+        const isGenericFilterApplied = filter?.favorite !== undefined || filter?.genreIds?.length;
 
         return isNavidromeFilterApplied || isJellyfinFilterApplied || isGenericFilterApplied;
     }, [

src/renderer/features/songs/components/subsonic-song-filter.tsx

@@ -69,7 +69,7 @@ export const SubsonicSongFilters = ({
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
-                        favorite: e.target.checked,
+                        favorite: e.target.checked ? true : undefined,
                     },
                     itemType: LibraryItem.SONG,
                     key: pageKey,

src/shared/components/yes-no-select/yes-no-select.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+
+import { Select, SelectProps } from '/@/shared/components/select/select';
+
+export interface YesNoSelectProps extends Omit<SelectProps, 'data' | 'onChange' | 'value'> {
+    onChange: (e?: boolean) => void;
+    value?: boolean;
+}
+
+export const YesNoSelect = ({ onChange, value, ...props }: YesNoSelectProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <Select
+            clearable
+            data={[
+                {
+                    label: t('common.no', { postProcess: 'sentenceCase' }),
+                    value: 'false',
+                },
+                {
+                    label: t('common.yes', { postProcess: 'sentenceCase' }),
+                    value: 'true',
+                },
+            ]}
+            onChange={(e) => {
+                onChange(e ? e === 'true' : undefined);
+            }}
+            value={value !== undefined ? value.toString() : undefined}
+            {...props}
+        />
+    );
+};