From 5c06624f8c287d306e5f7467499cf50742a710a7 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sun, 18 Jan 2026 21:53:34 +0000
Subject: [PATCH] Initial work: support showing studios for jellyfin, allow
 pill to be clickable (#1566)

---
 src/renderer/api/jellyfin/jellyfin-api.ts     |   9 ++
 .../api/jellyfin/jellyfin-controller.ts       |  39 +++++-
 .../api/navidrome/navidrome-controller.ts     |   5 +-
 .../components/album-detail-content.tsx       |  34 +++--
 .../components/jellyfin-album-filters.tsx     |  35 +----
 .../components/navidrome-album-filters.tsx    | 121 +----------------
 .../features/shared/components/tag-filter.tsx | 124 ++++++++++++++++++
 .../components/jellyfin-song-filters.tsx      |  36 +----
 .../components/navidrome-song-filters.tsx     | 124 ++----------------
 src/shared/api/jellyfin/jellyfin-types.ts     |  12 ++
 src/shared/types/domain-types.ts              |   4 +-
 11 files changed, 228 insertions(+), 315 deletions(-)
 create mode 100644 src/renderer/features/shared/components/tag-filter.tsx

diff --git a/src/renderer/api/jellyfin/jellyfin-api.ts b/src/renderer/api/jellyfin/jellyfin-api.ts
index 6de03ccd6..449a2d61e 100644
--- a/src/renderer/api/jellyfin/jellyfin-api.ts
+++ b/src/renderer/api/jellyfin/jellyfin-api.ts
@@ -248,6 +248,15 @@ export const contract = c.router({
             404: jfType._response.error,
         },
     },
+    getStudioList: {
+        method: 'GET',
+        path: 'studios',
+        query: jfType._parameters.studioList,
+        responses: {
+            200: jfType._response.studioList,
+            400: jfType._response.error,
+        },
+    },
     getTopSongsList: {
         method: 'GET',
         path: 'users/:userId/items',
diff --git a/src/renderer/api/jellyfin/jellyfin-controller.ts b/src/renderer/api/jellyfin/jellyfin-controller.ts
index cc43cbe20..f4066bea9 100644
--- a/src/renderer/api/jellyfin/jellyfin-controller.ts
+++ b/src/renderer/api/jellyfin/jellyfin-controller.ts
@@ -25,6 +25,7 @@ import {
     songListSortMap,
     SortOrder,
     sortOrderMap,
+    Tag,
 } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
 
@@ -1233,12 +1234,38 @@ export const JellyfinController: InternalControllerEndpoint = {
             throw new Error('failed to get tags');
         }
 
-        return {
-            boolTags: res.body.Tags?.sort((a, b) =>
-                a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()),
-            ),
-            excluded: { album: [], song: [] },
-        };
+        const studioRes = await jfApiClient(apiClientProps).getStudioList({
+            query: {
+                EnableTotalRecordCount: true,
+                IncludeItemTypes: query.type === LibraryItem.SONG ? 'Audio' : 'MusicAlbum',
+                ParentId: query.folder,
+            },
+        });
+
+        if (studioRes.status !== 200) {
+            throw new Error('failed to get studios');
+        }
+
+        const tags: Tag[] = [];
+        if (res.body.Tags?.length) {
+            tags.push({
+                name: 'Tags',
+                options: res.body.Tags.sort((a, b) =>
+                    a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()),
+                ).map((tag) => ({ id: tag, name: tag })),
+            });
+        }
+
+        if (studioRes.body.Items.length) {
+            tags.push({
+                name: 'Studios',
+                options: studioRes.body.Items.sort((a, b) =>
+                    a.Name.toLocaleLowerCase().localeCompare(b.Name.toLocaleLowerCase()),
+                ).map((option) => ({ id: option.Name, name: option.Name })),
+            });
+        }
+
+        return { excluded: { album: [], song: [] }, tags };
     },
     getTopSongs: async (args) => {
         const { apiClientProps, query } = args;
diff --git a/src/renderer/api/navidrome/navidrome-controller.ts b/src/renderer/api/navidrome/navidrome-controller.ts
index 0fb63c70c..b51da1596 100644
--- a/src/renderer/api/navidrome/navidrome-controller.ts
+++ b/src/renderer/api/navidrome/navidrome-controller.ts
@@ -778,7 +778,7 @@ export const NavidromeController: InternalControllerEndpoint = {
             }
         }
 
-        const enumTags = Array.from(tagsToValues)
+        const tags = Array.from(tagsToValues)
             .map((data) => ({
                 name: data[0],
                 options: data[1]
@@ -793,12 +793,11 @@ export const NavidromeController: InternalControllerEndpoint = {
         const excludedSongTags = Array.from(EXCLUDED_SONG_TAGS.values());
 
         return {
-            boolTags: undefined,
-            enumTags,
             excluded: {
                 album: excludedAlbumTags,
                 song: excludedSongTags,
             },
+            tags,
         };
     },
     getTopSongs: SubsonicController.getTopSongs,
diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx
index 2fad55b76..ae101d8eb 100644
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@@ -49,6 +49,7 @@ import {
     AlbumListSort,
     ExplicitStatus,
     LibraryItem,
+    ServerType,
     Song,
     SongListSort,
     SortOrder,
@@ -152,8 +153,15 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
         if (!album?.recordLabels || album.recordLabels.length === 0) return [];
 
         return album.recordLabels.map((label) => {
+            if (album._serverType === ServerType.SUBSONIC) {
+                return { id: label, label: label, url: null };
+            }
+
             const searchParams = new URLSearchParams();
-            const customFilters = { recordlabel: [label] };
+            const customFilters =
+                album._serverType === ServerType.JELLYFIN
+                    ? { Studios: [label] }
+                    : { recordlabel: [label] };
             const paramsWithCustom = setJsonSearchParam(
                 searchParams,
                 FILTER_KEYS.ALBUM._CUSTOM,
@@ -183,15 +191,21 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
                     </Text>
                     <div className={styles['pill-group-wrapper']}>
                         <Pill.Group>
-                            {recordLabels.map((recordLabel) => (
-                                <PillLink
-                                    key={`recordlabel-${recordLabel.id}`}
-                                    size="md"
-                                    to={recordLabel.url}
-                                >
-                                    {recordLabel.label}
-                                </PillLink>
-                            ))}
+                            {recordLabels.map((recordLabel) =>
+                                recordLabel.url ? (
+                                    <PillLink
+                                        key={`recordlabel-${recordLabel.id}`}
+                                        size="md"
+                                        to={recordLabel.url}
+                                    >
+                                        {recordLabel.label}
+                                    </PillLink>
+                                ) : (
+                                    <Pill key={`recordlabel-${recordLabel.id}`} size="md">
+                                        {recordLabel.label}
+                                    </Pill>
+                                ),
+                            )}
                         </Pill.Group>
                     </div>
                 </Stack>
diff --git a/src/renderer/features/albums/components/jellyfin-album-filters.tsx b/src/renderer/features/albums/components/jellyfin-album-filters.tsx
index 5597d81b4..f21ae6b4e 100644
--- a/src/renderer/features/albums/components/jellyfin-album-filters.tsx
+++ b/src/renderer/features/albums/components/jellyfin-album-filters.tsx
@@ -3,16 +3,15 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
 import { useCurrentServerId } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
 import { Button } from '/@/shared/components/button/button';
@@ -78,19 +77,6 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
         }));
     }, [genreListQuery.data]);
 
-    const tagsQuery = useQuery(
-        sharedQueries.tagList({
-            options: {
-                gcTime: 1000 * 60 * 2,
-                staleTime: 1000 * 60 * 1,
-            },
-            query: {
-                type: LibraryItem.ALBUM,
-            },
-            serverId,
-        }),
-    );
-
     const yesNoFilter = useMemo(() => {
         const filters = [
             {
@@ -204,13 +190,6 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
         [setAlbumArtist],
     );
 
-    const handleTagFilter = useCallback(
-        (e: null | string[]) => {
-            setCustom({ Tags: e && e.length > 0 ? e.join('|') : null });
-        },
-        [setCustom],
-    );
-
     const debouncedHandleMinYearFilter = useDebouncedCallback(handleMinYearFilter, 300);
     const debouncedHandleMaxYearFilter = useDebouncedCallback(handleMaxYearFilter, 300);
 
@@ -358,17 +337,7 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
                     value={query.maxYear ?? undefined}
                 />
             </Group>
-            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
-                <MultiSelectWithInvalidData
-                    clearable
-                    data={tagsQuery.data.boolTags}
-                    label={t('common.tags', { postProcess: 'sentenceCase' })}
-                    onChange={handleTagFilter}
-                    searchable
-                    value={query._custom?.[tagsQuery.data.boolTags.join('|')] || []}
-                    width={250}
-                />
-            )}
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.ALBUM} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}
diff --git a/src/renderer/features/albums/components/navidrome-album-filters.tsx b/src/renderer/features/albums/components/navidrome-album-filters.tsx
index 2b755dfec..a5ba13ed0 100644
--- a/src/renderer/features/albums/components/navidrome-album-filters.tsx
+++ b/src/renderer/features/albums/components/navidrome-album-filters.tsx
@@ -1,22 +1,19 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
-import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
+import { useCurrentServer } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
-import { titleCase } from '/@/renderer/utils';
-import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
@@ -50,6 +47,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
         query,
         setAlbumArtist,
         setCompilation,
+        setCustom,
         setFavorite,
         setGenreId,
         setHasRating,
@@ -355,8 +353,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
                 onChange={(e) => debouncedHandleYearFilter(e)}
                 value={query.minYear ?? undefined}
             />
-            <Divider my="md" />
-            <TagFilters />
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.ALBUM} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}
@@ -364,111 +361,3 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
         </Stack>
     );
 };
-
-interface TagFilterItemProps {
-    label: string;
-    onChange: (value: null | string[]) => void;
-    options: Array<{ id: string; name: string }>;
-    tagValue: string;
-    value: string | string[] | undefined;
-}
-
-const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
-    const selectData = useMemo(
-        () =>
-            options.map((option) => ({
-                label: option.name,
-                value: option.id,
-            })),
-        [options],
-    );
-
-    const currentValue = useMemo(() => {
-        if (!value) return [];
-        return Array.isArray(value) ? value : [value];
-    }, [value]);
-
-    const handleChange = useCallback(
-        (e: null | string[]) => {
-            if (e && e.length > 0) {
-                onChange(e);
-            } else {
-                onChange(null);
-            }
-        },
-        [onChange],
-    );
-
-    return (
-        <MultiSelectWithInvalidData
-            clearable
-            data={selectData}
-            key={tagValue}
-            label={label}
-            limit={100}
-            onChange={handleChange}
-            searchable
-            value={currentValue}
-        />
-    );
-};
-
-TagFilterItem.displayName = 'TagFilterItem';
-
-const TagFilters = () => {
-    const { query, setCustom } = useAlbumListFilters();
-
-    const serverId = useCurrentServerId();
-
-    const tagsQuery = useSuspenseQuery(
-        sharedQueries.tagList({
-            options: {
-                gcTime: 1000 * 60 * 60,
-                staleTime: 1000 * 60 * 60,
-            },
-            query: {
-                type: LibraryItem.ALBUM,
-            },
-            serverId,
-        }),
-    );
-
-    const handleTagFilter = useMemo(
-        () => (tag: string, e: null | string[]) => {
-            setCustom({ [tag]: e });
-        },
-        [setCustom],
-    );
-
-    const tags = useMemo(() => {
-        const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
-            [];
-
-        for (const tag of tagsQuery.data?.enumTags || []) {
-            if (!tagsQuery.data?.excluded.album.includes(tag.name)) {
-                results.push({
-                    label: NDSongQueryFieldsLabelMap[tag.name] ?? titleCase(tag.name),
-                    options: tag.options,
-                    value: tag.name,
-                });
-            }
-        }
-
-        return results;
-    }, [tagsQuery.data]);
-
-    return (
-        <>
-            {tags.map((tag) => (
-                <TagFilterItem
-                    key={tag.value}
-                    label={tag.label}
-                    onChange={(e) => handleTagFilter(tag.value, e)}
-                    options={tag.options}
-                    tagValue={tag.value}
-                    value={query._custom?.[tag.value] as string | string[] | undefined}
-                />
-            ))}
-        </>
-    );
-};
diff --git a/src/renderer/features/shared/components/tag-filter.tsx b/src/renderer/features/shared/components/tag-filter.tsx
new file mode 100644
index 000000000..32f3d0fd6
--- /dev/null
+++ b/src/renderer/features/shared/components/tag-filter.tsx
@@ -0,0 +1,124 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+
+import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
+import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
+import { useCurrentServerId } from '/@/renderer/store';
+import { titleCase } from '/@/renderer/utils';
+import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+interface TagFilterItemProps {
+    label: string;
+    onChange: (value: null | string[]) => void;
+    options: Array<{ id: string; name: string }>;
+    tagValue: string;
+    value: string | string[] | undefined;
+}
+
+const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
+    const selectData = useMemo(
+        () =>
+            options.map((option) => ({
+                label: option.name,
+                value: option.id,
+            })),
+        [options],
+    );
+
+    const defaultValue = useMemo(() => {
+        if (!value) return [];
+        return Array.isArray(value) ? value : [value];
+    }, [value]);
+
+    const handleChange = useCallback(
+        (e: null | string[]) => {
+            if (e && e.length > 0) {
+                onChange(e);
+            } else {
+                onChange(null);
+            }
+        },
+        [onChange],
+    );
+
+    return (
+        <MultiSelectWithInvalidData
+            clearable
+            data={selectData}
+            defaultValue={defaultValue}
+            key={tagValue}
+            label={label}
+            limit={100}
+            onChange={handleChange}
+            searchable
+        />
+    );
+};
+
+TagFilterItem.displayName = 'TagFilterItem';
+
+interface TagFiltersProps {
+    query: Record<string, any | undefined>;
+    setCustom: (value: null | Record<string, any>) => void;
+    type: LibraryItem.ALBUM | LibraryItem.SONG;
+}
+
+export const TagFilters = ({ query, setCustom, type }: TagFiltersProps) => {
+    const serverId = useCurrentServerId();
+
+    const tagsQuery = useSuspenseQuery(
+        sharedQueries.tagList({
+            options: {
+                gcTime: 1000 * 60 * 60,
+                staleTime: 1000 * 60 * 60,
+            },
+            query: { type },
+            serverId,
+        }),
+    );
+
+    const handleTagFilter = useMemo(
+        () => (tag: string, e: null | string[]) => {
+            setCustom({ [tag]: e || undefined });
+        },
+        [setCustom],
+    );
+
+    const enumTags = useMemo(() => {
+        const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
+            [];
+
+        const excluded =
+            type === LibraryItem.ALBUM
+                ? tagsQuery.data?.excluded.album
+                : tagsQuery.data?.excluded.song;
+
+        for (const tag of tagsQuery.data?.tags || []) {
+            if (!excluded.includes(tag.name)) {
+                results.push({
+                    label: NDSongQueryFieldsLabelMap[tag.name] ?? titleCase(tag.name),
+                    options: tag.options,
+                    value: tag.name,
+                });
+            }
+        }
+
+        return results;
+    }, [tagsQuery.data?.tags, tagsQuery.data?.excluded.album, tagsQuery.data?.excluded.song, type]);
+
+    return (
+        <>
+            {enumTags.map((tag) => (
+                <TagFilterItem
+                    key={tag.value}
+                    label={tag.label}
+                    onChange={(e) => handleTagFilter(tag.value, e)}
+                    options={tag.options}
+                    tagValue={tag.value}
+                    value={query._custom?.[tag.value] as string | string[] | undefined}
+                />
+            ))}
+        </>
+    );
+};
diff --git a/src/renderer/features/songs/components/jellyfin-song-filters.tsx b/src/renderer/features/songs/components/jellyfin-song-filters.tsx
index 104ab45ba..a706513c7 100644
--- a/src/renderer/features/songs/components/jellyfin-song-filters.tsx
+++ b/src/renderer/features/songs/components/jellyfin-song-filters.tsx
@@ -1,17 +1,16 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { useCurrentServer } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
@@ -87,25 +86,12 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
         }));
     }, [albumArtistListQuery.data?.items]);
 
-    const tagsQuery = useQuery(
-        sharedQueries.tagList({
-            query: {
-                type: LibraryItem.SONG,
-            },
-            serverId,
-        }),
-    );
-
     const selectedArtistIds = useMemo(() => query.artistIds || [], [query.artistIds]);
 
     const selectedGenres = useMemo(() => {
         return query._custom?.GenreIds?.split(',') || [];
     }, [query._custom?.GenreIds]);
 
-    const selectedTags = useMemo(() => {
-        return query._custom?.Tags?.split('|');
-    }, [query._custom?.Tags]);
-
     const yesNoFilters = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
@@ -181,13 +167,6 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
         [setCustom],
     );
 
-    const handleTagFilter = useCallback(
-        (e: null | string[]) => {
-            setCustom({ Tags: e && e.length > 0 ? e.join('|') : null });
-        },
-        [setCustom],
-    );
-
     const artistSelectMode = useAppStore((state) => state.artistSelectMode);
     const genreSelectMode = useAppStore((state) => state.genreSelectMode);
     const { setArtistSelectMode, setGenreSelectMode } = useAppStoreActions();
@@ -339,16 +318,7 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
                     value={query.maxYear ?? undefined}
                 />
             </Group>
-            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
-                <MultiSelectWithInvalidData
-                    clearable
-                    data={tagsQuery.data.boolTags}
-                    label={t('common.tags', { postProcess: 'sentenceCase' })}
-                    onChange={handleTagFilter}
-                    searchable
-                    value={selectedTags}
-                />
-            )}
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.SONG} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}
diff --git a/src/renderer/features/songs/components/navidrome-song-filters.tsx b/src/renderer/features/songs/components/navidrome-song-filters.tsx
index 30beefbb6..08ace9c80 100644
--- a/src/renderer/features/songs/components/navidrome-song-filters.tsx
+++ b/src/renderer/features/songs/components/navidrome-song-filters.tsx
@@ -3,20 +3,17 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
-import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     ArtistMultiSelectRow,
     GenreMultiSelectRow,
 } from '/@/renderer/features/shared/components/multi-select-rows';
+import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
-import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
+import { useCurrentServer } from '/@/renderer/store';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
-import { titleCase } from '/@/renderer/utils';
-import { NDSongQueryFieldsLabelMap } from '/@/shared/api/navidrome/navidrome-types';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
@@ -32,8 +29,16 @@ export const NavidromeSongFilters = () => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const serverId = server.id;
-    const { clear, query, setArtistIds, setFavorite, setGenreId, setMaxYear, setMinYear } =
-        useSongListFilters();
+    const {
+        clear,
+        query,
+        setArtistIds,
+        setCustom,
+        setFavorite,
+        setGenreId,
+        setMaxYear,
+        setMinYear,
+    } = useSongListFilters();
 
     const { customFilters } = useListContext();
 
@@ -292,8 +297,7 @@ export const NavidromeSongFilters = () => {
                 onChange={(e) => debouncedHandleYearFilter(e)}
                 value={query.minYear ?? undefined}
             />
-            <Divider my="md" />
-            <TagFilters />
+            <TagFilters query={query} setCustom={setCustom} type={LibraryItem.SONG} />
             <Divider my="md" />
             <Button fullWidth onClick={clear} variant="subtle">
                 {t('common.reset', { postProcess: 'sentenceCase' })}
@@ -301,105 +305,3 @@ export const NavidromeSongFilters = () => {
         </Stack>
     );
 };
-
-interface TagFilterItemProps {
-    label: string;
-    onChange: (value: null | string[]) => void;
-    options: Array<{ id: string; name: string }>;
-    tagValue: string;
-    value: string | string[] | undefined;
-}
-
-const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
-    const selectData = useMemo(
-        () =>
-            options.map((option) => ({
-                label: option.name,
-                value: option.id,
-            })),
-        [options],
-    );
-
-    const currentValue = useMemo(() => {
-        if (!value) return [];
-        return Array.isArray(value) ? value : [value];
-    }, [value]);
-
-    const handleChange = useCallback(
-        (e: null | string[]) => {
-            if (e && e.length > 0) {
-                onChange(e);
-            } else {
-                onChange(null);
-            }
-        },
-        [onChange],
-    );
-
-    return (
-        <MultiSelectWithInvalidData
-            clearable
-            data={selectData}
-            key={tagValue}
-            label={label}
-            limit={100}
-            onChange={handleChange}
-            searchable
-            value={currentValue}
-        />
-    );
-};
-
-TagFilterItem.displayName = 'TagFilterItem';
-
-const TagFilters = () => {
-    const { query, setCustom } = useSongListFilters();
-
-    const serverId = useCurrentServerId();
-
-    const tagsQuery = useSuspenseQuery(
-        sharedQueries.tagList({
-            query: { type: LibraryItem.SONG },
-            serverId,
-        }),
-    );
-
-    const handleTagFilter = useMemo(
-        () => (tag: string, e: null | string[]) => {
-            setCustom({ [tag]: e });
-        },
-        [setCustom],
-    );
-
-    const tags = useMemo(() => {
-        const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
-            [];
-
-        for (const tag of tagsQuery.data?.enumTags || []) {
-            if (!tagsQuery.data?.excluded.song.includes(tag.name)) {
-                results.push({
-                    label: NDSongQueryFieldsLabelMap[tag.name] ?? titleCase(tag.name),
-                    options: tag.options,
-                    value: tag.name,
-                });
-            }
-        }
-
-        return results;
-    }, [tagsQuery.data]);
-
-    return (
-        <>
-            {tags.map((tag) => (
-                <TagFilterItem
-                    key={tag.value}
-                    label={tag.label}
-                    onChange={(e) => handleTagFilter(tag.value, e)}
-                    options={tag.options}
-                    tagValue={tag.value}
-                    value={query._custom?.[tag.value] as string | string[] | undefined}
-                />
-            ))}
-        </>
-    );
-};
diff --git a/src/shared/api/jellyfin/jellyfin-types.ts b/src/shared/api/jellyfin/jellyfin-types.ts
index ef24db32b..be2e0d6ce 100644
--- a/src/shared/api/jellyfin/jellyfin-types.ts
+++ b/src/shared/api/jellyfin/jellyfin-types.ts
@@ -830,6 +830,16 @@ const getSessions = z.array(
     ),
 );
 
+const studioListParameters = paginationParameters.merge(
+    baseParameters.extend({
+        NameStartsWithOrGreater: z.string().optional(),
+    }),
+);
+
+const studioList = z.object({
+    Items: z.array(studio),
+});
+
 export const jfType = {
     _enum: {
         albumArtistList: albumArtistListSort,
@@ -866,6 +876,7 @@ export const jfType = {
         similarSongs: similarSongsParameters,
         songDetail: songDetailParameters,
         songList: songListParameters,
+        studioList: studioListParameters,
         updatePlaylist: updatePlaylistParameters,
     },
     _response: {
@@ -899,6 +910,7 @@ export const jfType = {
         similarSongs,
         song,
         songList,
+        studioList,
         topSongsList,
         updatePlaylist,
         user,
diff --git a/src/shared/types/domain-types.ts b/src/shared/types/domain-types.ts
index 8b36a3277..aec6754a6 100644
--- a/src/shared/types/domain-types.ts
+++ b/src/shared/types/domain-types.ts
@@ -1616,7 +1616,6 @@ export type StructuredUnsyncedLyric = Omit<FullLyricsMetadata, 'lyrics'> & {
 };
 
 export type Tag = {
-    id: string;
     name: string;
     options: { id: string; name: string }[];
 };
@@ -1632,12 +1631,11 @@ export type TagListQuery = {
 };
 
 export type TagListResponse = {
-    boolTags?: string[];
-    enumTags?: { name: string; options: { id: string; name: string }[] }[];
     excluded: {
         album: string[];
         song: string[];
     };
+    tags?: Tag[];
 };
 
 export type UserInfoArgs = BaseEndpointArgs & { query: UserInfoQuery };