From cf74625bfc436f60db487f8264a35436210208bc Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sun, 18 May 2025 10:59:45 -0700
Subject: [PATCH] warn if a value in select no longer exists

---
 src/i18n/locales/en.json                      |  1 +
 .../select-with-invalid-data/index.tsx        | 78 +++++++++++++++++++
 src/renderer/components/select/index.tsx      |  2 +-
 .../components/navidrome-album-filters.tsx    |  9 ++-
 .../components/jellyfin-song-filters.tsx      |  7 +-
 .../components/navidrome-song-filters.tsx     |  7 +-
 6 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 src/renderer/components/select-with-invalid-data/index.tsx

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 (
+        <Select
+            data={fullData}
+            defaultValue={defaultValue}
+            error={
+                hasError
+                    ? t('error.badValue', { postProcess: 'sentenceCase', value: defaultValue })
+                    : undefined
+            }
+            {...props}
+        />
+    );
+};
+
+export const MultiSelectWithInvalidData = ({ data, defaultValue, ...props }: MultiSelectProps) => {
+    const { t } = useTranslation();
+    const [fullData, missing] = useMemo(() => {
+        if (defaultValue?.length) {
+            const validValues = new Set<string>();
+            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 (
+        <MultiSelect
+            data={fullData}
+            defaultValue={defaultValue}
+            error={
+                missing.length
+                    ? t('error.badValue', { postProcess: 'sentenceCase', value: missing })
+                    : undefined
+            }
+            {...props}
+        />
+    );
+};
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<AlbumListFilter>;
@@ -251,7 +252,7 @@ export const NavidromeAlbumFilters = ({
                     min={0}
                     onChange={(e) => handleYearFilter(e)}
                 />
-                <Select
+                <SelectWithInvalidData
                     clearable
                     searchable
                     data={genreList}
@@ -261,7 +262,7 @@ export const NavidromeAlbumFilters = ({
                 />
             </Group>
             <Group grow>
-                <Select
+                <SelectWithInvalidData
                     clearable
                     searchable
                     data={selectableAlbumArtists}
@@ -281,7 +282,7 @@ export const NavidromeAlbumFilters = ({
                         key={tag.name}
                         grow
                     >
-                        <Select
+                        <SelectWithInvalidData
                             clearable
                             searchable
                             data={tag.options}
diff --git a/src/renderer/features/songs/components/jellyfin-song-filters.tsx b/src/renderer/features/songs/components/jellyfin-song-filters.tsx
index 409be224..010362a6 100644
--- a/src/renderer/features/songs/components/jellyfin-song-filters.tsx
+++ b/src/renderer/features/songs/components/jellyfin-song-filters.tsx
@@ -2,11 +2,12 @@ import { ChangeEvent, useMemo } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/renderer/api/types';
-import { MultiSelect, NumberInput, Switch, Text } from '/@/renderer/components';
+import { NumberInput, Switch, Text } from '/@/renderer/components';
 import { SongListFilter, useListFilterByKey, useListStoreActions } from '/@/renderer/store';
 import { useTranslation } from 'react-i18next';
 import { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
 import { useGenreList } from '/@/renderer/features/genres';
+import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 
 interface JellyfinSongFiltersProps {
     customFilters?: Partial<SongListFilter>;
@@ -201,7 +202,7 @@ export const JellyfinSongFilters = ({
             </Group>
             {!isGenrePage && (
                 <Group grow>
-                    <MultiSelect
+                    <MultiSelectWithInvalidData
                         clearable
                         searchable
                         data={genreList}
@@ -214,7 +215,7 @@ export const JellyfinSongFilters = ({
             )}
             {tagsQuery.data?.boolTags?.length && (
                 <Group grow>
-                    <MultiSelect
+                    <MultiSelectWithInvalidData
                         clearable
                         searchable
                         data={tagsQuery.data.boolTags}
diff --git a/src/renderer/features/songs/components/navidrome-song-filters.tsx b/src/renderer/features/songs/components/navidrome-song-filters.tsx
index 7deb0dd4..ee542c3a 100644
--- a/src/renderer/features/songs/components/navidrome-song-filters.tsx
+++ b/src/renderer/features/songs/components/navidrome-song-filters.tsx
@@ -2,11 +2,12 @@ import { ChangeEvent, useMemo } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/renderer/api/types';
-import { NumberInput, Select, Switch, Text } from '/@/renderer/components';
+import { NumberInput, Switch, Text } from '/@/renderer/components';
 import { useGenreList } from '/@/renderer/features/genres';
 import { SongListFilter, useListFilterByKey, useListStoreActions } from '/@/renderer/store';
 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 NavidromeSongFiltersProps {
     customFilters?: Partial<SongListFilter>;
@@ -149,7 +150,7 @@ export const NavidromeSongFilters = ({
                     onChange={(e) => handleYearFilter(e)}
                 />
                 {!isGenrePage && (
-                    <Select
+                    <SelectWithInvalidData
                         clearable
                         searchable
                         data={genreList}
@@ -166,7 +167,7 @@ export const NavidromeSongFilters = ({
                         key={tag.name}
                         grow
                     >
-                        <Select
+                        <SelectWithInvalidData
                             clearable
                             searchable
                             data={tag.options}