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 &&
-            (filter.maxYear || filter.minYear || filter.favorite);
+            server?.type === ServerType.SUBSONIC && (filter.maxYear || filter.minYear);
+
+        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
-                        checked={filter?.value || false}
+                    <YesNoSelect
                         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"