Add music folders query

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

@@ -7,6 +7,7 @@ import { AlbumListSort, SortOrder } from '/@/renderer/api/types';
 import { Button, DropdownMenu, PageHeader } from '/@/renderer/components';
 import { useCurrentServer, useAppStoreActions, useAlbumRouteStore } from '/@/renderer/store';
 import { CardDisplayType } from '/@/renderer/types';
+import { useMusicFolders } from '/@/renderer/features/shared';
 
 const FILTERS = {
   jellyfin: [
@@ -44,6 +45,8 @@ export const AlbumListHeader = () => {
   const page = useAlbumRouteStore();
   const filters = page.list.filter;
 
+  const musicFoldersQuery = useMusicFolders();
+
   const sortByLabel =
     (server?.type &&
       (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
@@ -78,6 +81,22 @@ export const AlbumListHeader = () => {
     [page.list, setPage],
   );
 
+  const handleSetMusicFolder = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      setPage('albums', {
+        list: {
+          ...page.list,
+          filter: {
+            ...page.list.filter,
+            musicFolderId: e.currentTarget.value,
+          },
+        },
+      });
+    },
+    [page.list, setPage],
+  );
+
   const handleSetOrder = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value) return;
@@ -236,19 +255,18 @@ export const AlbumListHeader = () => {
               Folder
             </Button>
           </DropdownMenu.Target>
-          {/* <DropdownMenu.Dropdown>
-          {serverFolders?.map((folder) => (
-            <DropdownMenu.Item
-              key={folder.id}
-              $isActive={filters.serverFolderId.includes(folder.id)}
-              closeMenuOnClick={false}
-              value={folder.id}
-              onClick={handleSetServerFolder}
-            >
-              {folder.name}
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Dropdown> */}
+          <DropdownMenu.Dropdown>
+            {musicFoldersQuery.data?.map((folder) => (
+              <DropdownMenu.Item
+                key={`musicFolder-${folder.id}`}
+                $isActive={filters.musicFolderId === folder.id}
+                value={folder.id}
+                onClick={handleSetMusicFolder}
+              >
+                {folder.name}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Dropdown>
         </DropdownMenu>
       </Group>
     </PageHeader>

src/renderer/features/albums/routes/album-list-route.tsx

@@ -29,6 +29,7 @@ const AlbumListRoute = () => {
 
   const albumListQuery = useAlbumList({
     limit: 1,
+    musicFolderId: filters.musicFolderId,
     sortBy: filters.sortBy,
     sortOrder: filters.sortOrder,
     startIndex: 0,
@@ -46,6 +47,7 @@ const AlbumListRoute = () => {
         controller.getAlbumList({
           query: {
             limit: take,
+            musicFolderId: filters.musicFolderId,
             sortBy: filters.sortBy,
             sortOrder: filters.sortOrder,
             startIndex: skip,
@@ -111,6 +113,7 @@ const AlbumListRoute = () => {
                 itemSize={150 + page.list?.size}
                 itemType={LibraryItem.ALBUM}
                 minimumBatchSize={40}
+                refresh={filters.musicFolderId}
                 route={{
                   route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                   slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],

src/renderer/features/shared/index.ts

@@ -1 +1,2 @@
 export * from './components/animated-page';
+export * from './queries/music-folders-query';

src/renderer/features/shared/queries/music-folders-query.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { useCurrentServer } from '/@/renderer/store';
+import { RawMusicFolderListResponse } from '/@/renderer/api/types';
+
+export const useMusicFolders = () => {
+  const server = useCurrentServer();
+
+  const query = useQuery({
+    enabled: !!server?.id,
+    queryFn: ({ signal }) => api.controller.getMusicFolderList({ server, signal }),
+    queryKey: queryKeys.musicFolders.list(server?.id || ''),
+    select: useCallback(
+      (data: RawMusicFolderListResponse | undefined) => {
+        return api.normalize.musicFolderList(data, server);
+      },
+      [server],
+    ),
+  });
+
+  return query;
+};