diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 5d3a21a6..6154d651 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -160,6 +160,7 @@
"audioDeviceFetchError": "an error occurred when trying to get audio devices",
"authenticationFailed": "authentication failed",
"badAlbum": "you are seeing this page because this song is not part of an album. you are most likely seeing this issue if you have a song at the top level of your music folder. jellyfin only groups tracks if they are in a folder.",
+ "badValue": "invalid option \"{{value}}\". this value no longer exists",
"credentialsRequired": "credentials required",
"endpointNotImplementedError": "endpoint {{endpoint}} is not implemented for {{serverType}}",
"genericError": "an error occurred",
diff --git a/src/renderer/components/select-with-invalid-data/index.tsx b/src/renderer/components/select-with-invalid-data/index.tsx
new file mode 100644
index 00000000..46053094
--- /dev/null
+++ b/src/renderer/components/select-with-invalid-data/index.tsx
@@ -0,0 +1,78 @@
+import { MultiSelect, MultiSelectProps, Select, SelectProps } from '/@/renderer/components/select';
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+
+export const SelectWithInvalidData = ({ data, defaultValue, ...props }: SelectProps) => {
+ const { t } = useTranslation();
+
+ const [fullData, hasError] = useMemo(() => {
+ if (typeof defaultValue === 'string') {
+ const missingField =
+ data.find((item) =>
+ typeof item === 'string' ? item === defaultValue : item.value === defaultValue,
+ ) === undefined;
+
+ if (missingField) {
+ return [data.concat(defaultValue), true];
+ }
+ }
+
+ return [data, false];
+ }, [data, defaultValue]);
+
+ return (
+
+ );
+};
+
+export const MultiSelectWithInvalidData = ({ data, defaultValue, ...props }: MultiSelectProps) => {
+ const { t } = useTranslation();
+ const [fullData, missing] = useMemo(() => {
+ if (defaultValue?.length) {
+ const validValues = new Set();
+ for (const item of data) {
+ if (typeof item === 'string') {
+ validValues.add(item);
+ } else {
+ validValues.add(item.value);
+ }
+ }
+
+ const missingFields: string[] = [];
+
+ for (const value of defaultValue) {
+ if (!validValues.has(value)) {
+ missingFields.push(value);
+ }
+ }
+
+ if (missingFields.length > 0) {
+ return [data.concat(missingFields), missingFields];
+ }
+ }
+
+ return [data, []];
+ }, [data, defaultValue]);
+
+ return (
+
+ );
+};
diff --git a/src/renderer/components/select/index.tsx b/src/renderer/components/select/index.tsx
index 975b103d..a5cfc952 100644
--- a/src/renderer/components/select/index.tsx
+++ b/src/renderer/components/select/index.tsx
@@ -5,7 +5,7 @@ import type {
import { Select as MantineSelect, MultiSelect as MantineMultiSelect } from '@mantine/core';
import styled from 'styled-components';
-interface SelectProps extends MantineSelectProps {
+export interface SelectProps extends MantineSelectProps {
maxWidth?: number | string;
width?: number | string;
}
diff --git a/src/renderer/features/albums/components/navidrome-album-filters.tsx b/src/renderer/features/albums/components/navidrome-album-filters.tsx
index a3c1a156..2676cd85 100644
--- a/src/renderer/features/albums/components/navidrome-album-filters.tsx
+++ b/src/renderer/features/albums/components/navidrome-album-filters.tsx
@@ -1,6 +1,6 @@
import { ChangeEvent, useMemo, useState } from 'react';
import { Divider, Group, Stack } from '@mantine/core';
-import { NumberInput, Switch, Text, Select, SpinnerIcon } from '/@/renderer/components';
+import { NumberInput, Switch, Text, SpinnerIcon } from '/@/renderer/components';
import { AlbumListFilter, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres';
@@ -14,6 +14,7 @@ import {
} from '/@/renderer/api/types';
import { useTranslation } from 'react-i18next';
import { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
+import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
interface NavidromeAlbumFiltersProps {
customFilters?: Partial;
@@ -251,7 +252,7 @@ export const NavidromeAlbumFilters = ({
min={0}
onChange={(e) => handleYearFilter(e)}
/>
-
-
{!isGenrePage && (
-
- ;
@@ -149,7 +150,7 @@ export const NavidromeSongFilters = ({
onChange={(e) => handleYearFilter(e)}
/>
{!isGenrePage && (
-
-