Adjust album list header/filters

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

@@ -136,7 +136,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
   );
 
   const handleFilterChange = useCallback(
-    async (filters: any) => {
+    async (filters: AlbumListFilter) => {
       gridRef.current?.scrollTo(0);
       gridRef.current?.resetLoadMoreItemsCache();
 
@@ -185,14 +185,11 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
     [handleFilterChange, page.filter.musicFolderId, setFilter],
   );
 
-  const handleSetOrder = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-      const updatedFilters = setFilter({ sortOrder: e.currentTarget.value as SortOrder });
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter({ sortOrder: newSortOrder });
     handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, setFilter],
-  );
+  }, [filters.sortOrder, handleFilterChange, setFilter]);
 
   const handleSetViewType = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
@@ -210,7 +207,9 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
   );
 
   const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-    const updatedFilters = setFilter({ searchTerm: e.target.value });
+    const updatedFilters = setFilter({
+      searchTerm: e.target.value === '' ? undefined : e.target.value,
+    });
     handleFilterChange(updatedFilters);
   }, 500);
 
@@ -222,7 +221,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
           gap="md"
           justify="center"
         >
-          <DropdownMenu position="bottom">
+          <DropdownMenu position="bottom-start">
             <DropdownMenu.Target>
               <Button
                 compact
@@ -240,6 +239,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
               </Button>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
+              <DropdownMenu.Label>Item size</DropdownMenu.Label>
               <DropdownMenu.Item>
                 <Slider
                   defaultValue={page.grid.size || 0}
@@ -248,16 +248,17 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
                 />
               </DropdownMenu.Item>
               <DropdownMenu.Divider />
+              <DropdownMenu.Label>Display type</DropdownMenu.Label>
               <DropdownMenu.Item
-                $isActive={page.display === CardDisplayType.CARD}
-                value={CardDisplayType.CARD}
+                $isActive={page.display === ListDisplayType.CARD}
+                value={ListDisplayType.CARD}
                 onClick={handleSetViewType}
               >
                 Card
               </DropdownMenu.Item>
               <DropdownMenu.Item
-                $isActive={page.display === CardDisplayType.POSTER}
-                value={CardDisplayType.POSTER}
+                $isActive={page.display === ListDisplayType.POSTER}
+                value={ListDisplayType.POSTER}
                 onClick={handleSetViewType}
               >
                 Poster
@@ -272,7 +273,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
               </DropdownMenu.Item>
             </DropdownMenu.Dropdown>
           </DropdownMenu>
-          <DropdownMenu position="bottom">
+          <DropdownMenu position="bottom-start">
             <DropdownMenu.Target>
               <Button
                 compact
@@ -295,12 +296,12 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
               ))}
             </DropdownMenu.Dropdown>
           </DropdownMenu>
-          <DropdownMenu position="bottom">
-            <DropdownMenu.Target>
           <Button
             compact
             fw="normal"
+            tooltip={!cq.isMd ? { label: sortOrderLabel } : undefined}
             variant="subtle"
+            onClick={handleToggleSortOrder}
           >
             {cq.isMd ? (
               sortOrderLabel
@@ -314,26 +315,13 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
               </>
             )}
           </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              {ORDER.map((sort) => (
-                <DropdownMenu.Item
-                  key={`sort-${sort.value}`}
-                  $isActive={sort.value === filters.sortOrder}
-                  value={sort.value}
-                  onClick={handleSetOrder}
-                >
-                  {sort.name}
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
           {server?.type === ServerType.JELLYFIN && (
-            <DropdownMenu position="bottom">
+            <DropdownMenu position="bottom-start">
               <DropdownMenu.Target>
                 <Button
                   compact
                   fw="normal"
+                  tooltip={!cq.isMd ? { label: 'Folder' } : undefined}
                   variant="subtle"
                 >
                   {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
@@ -353,11 +341,15 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
               </DropdownMenu.Dropdown>
             </DropdownMenu>
           )}
-          <Popover>
+          <Popover
+            closeOnClickOutside={false}
+            position="bottom-start"
+          >
             <Popover.Target>
               <Button
                 compact
                 fw="normal"
+                tooltip={!cq.isMd ? { label: 'Filters' } : undefined}
                 variant="subtle"
               >
                 {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
@@ -365,23 +357,17 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
             </Popover.Target>
             <Popover.Dropdown>
               {server?.type === ServerType.NAVIDROME ? (
-                <NavidromeAlbumFilters />
+                <NavidromeAlbumFilters handleFilterChange={handleFilterChange} />
               ) : (
-                <JellyfinAlbumFilters />
+                <JellyfinAlbumFilters handleFilterChange={handleFilterChange} />
               )}
             </Popover.Dropdown>
           </Popover>
-        </Flex>
-        <Flex gap="md">
-          <SearchInput
-            defaultValue={page.filter.searchTerm}
-            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
-            onChange={handleSearch}
-          />
-          <DropdownMenu>
+          <DropdownMenu position="bottom-start">
             <DropdownMenu.Target>
               <Button
-                px="sm"
+                compact
+                tooltip={{ label: 'More' }}
                 variant="subtle"
               >
                 <RiMoreFill size={15} />
@@ -395,6 +381,13 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
             </DropdownMenu.Dropdown>
           </DropdownMenu>
         </Flex>
+        <Flex gap="md">
+          <SearchInput
+            defaultValue={page.filter.searchTerm}
+            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
+            onChange={handleSearch}
+          />
+        </Flex>
       </HeaderItems>
     </PageHeader>
   );

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -1,11 +1,15 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
 import { MultiSelect, NumberInput, Switch, Text } from '/@/renderer/components';
-import { useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
+import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
 import debounce from 'lodash/debounce';
 import { useGenreList } from '/@/renderer/features/genres';
 
-export const JellyfinAlbumFilters = () => {
+interface JellyfinAlbumFiltersProps {
+  handleFilterChange: (filters: AlbumListFilter) => void;
+}
+
+export const JellyfinAlbumFilters = ({ handleFilterChange }: JellyfinAlbumFiltersProps) => {
   const { filter } = useAlbumListStore();
   const setFilters = useSetAlbumFilters();
 
@@ -28,9 +32,10 @@ export const JellyfinAlbumFilters = () => {
     {
       label: 'Is favorited',
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        setFilters({
+        const updatedFilters = setFilters({
           jfParams: { ...filter.jfParams, isFavorite: e.currentTarget.checked ? true : undefined },
         });
+        handleFilterChange(updatedFilters);
       },
       value: filter.jfParams?.isFavorite,
     },
@@ -38,36 +43,77 @@ export const JellyfinAlbumFilters = () => {
 
   const handleMinYearFilter = debounce((e: number | undefined) => {
     if (e && (e < 1700 || e > 2300)) return;
-    setFilters({
+    const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
         minYear: e,
       },
     });
+    handleFilterChange(updatedFilters);
   }, 500);
 
   const handleMaxYearFilter = debounce((e: number | undefined) => {
     if (e && (e < 1700 || e > 2300)) return;
-    setFilters({
+    const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
         maxYear: e,
       },
     });
+    handleFilterChange(updatedFilters);
   }, 500);
 
   const handleGenresFilter = debounce((e: string[] | undefined) => {
     const genreFilterString = e?.join(',');
-    setFilters({
+    const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
         genreIds: genreFilterString,
       },
     });
+    handleFilterChange(updatedFilters);
   }, 250);
 
   return (
     <Stack p="0.8rem">
+      <Group position="apart">
+        <Text>Year range</Text>
+        <Group>
+          <NumberInput
+            required
+            hideControls={false}
+            max={2300}
+            min={1700}
+            value={filter.jfParams?.minYear}
+            width={80}
+            onChange={handleMinYearFilter}
+          />
+          <NumberInput
+            hideControls={false}
+            max={2300}
+            min={1700}
+            value={filter.jfParams?.maxYear}
+            width={80}
+            onChange={handleMaxYearFilter}
+          />
+        </Group>
+      </Group>
+      <Divider my="0.5rem" />
+      <Group
+        position="apart"
+        spacing={20}
+      >
+        <Text>Genres</Text>
+        <MultiSelect
+          clearable
+          searchable
+          data={genreList}
+          defaultValue={selectedGenres}
+          width={250}
+          onChange={handleGenresFilter}
+        />
+      </Group>
+      <Divider my="0.5rem" />
       {toggleFilters.map((filter) => (
         <Group
           key={`nd-filter-${filter.label}`}
@@ -81,49 +127,14 @@ export const JellyfinAlbumFilters = () => {
           />
         </Group>
       ))}
-      <Divider my="0.5rem" />
-      <Group position="apart">
-        <Text>Year range</Text>
-        <Group>
-          <NumberInput
-            required
-            max={2300}
-            min={1700}
-            size="sm"
-            value={filter.jfParams?.minYear}
-            width={60}
-            onChange={handleMinYearFilter}
-          />
-          <NumberInput
-            max={2300}
-            min={1700}
-            size="sm"
-            value={filter.jfParams?.maxYear}
-            width={60}
-            onChange={handleMaxYearFilter}
-          />
-        </Group>
-      </Group>
-      <Divider my="0.5rem" />
-      <Stack>
-        <Text>Genres</Text>
-        <MultiSelect
-          clearable
-          searchable
-          data={genreList}
-          defaultValue={selectedGenres}
-          width={250}
-          onChange={handleGenresFilter}
-        />
-      </Stack>
-      <Divider my="0.5rem" />
+      {/* <Divider my="0.5rem" />
       <Stack>
         <Text>Tags</Text>
         <MultiSelect
           disabled
           data={[]}
         />
-      </Stack>
+      </Stack> */}
     </Stack>
   );
 };

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -1,66 +1,123 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useMemo } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
-import { NumberInput, Switch, Text } from '/@/renderer/components';
-import { useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
+import { NumberInput, Switch, Text, Select } from '/@/renderer/components';
+import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
 import debounce from 'lodash/debounce';
+import { useGenreList } from '/@/renderer/features/genres';
 
-export const NavidromeAlbumFilters = () => {
+interface NavidromeAlbumFiltersProps {
+  handleFilterChange: (filters: AlbumListFilter) => void;
+}
+
+export const NavidromeAlbumFilters = ({ handleFilterChange }: NavidromeAlbumFiltersProps) => {
   const { filter } = useAlbumListStore();
   const setFilters = useSetAlbumFilters();
 
+  const genreListQuery = useGenreList(null);
+
+  const genreList = useMemo(() => {
+    if (!genreListQuery?.data) return [];
+    return genreListQuery.data.map((genre) => ({
+      label: genre.name,
+      value: genre.id,
+    }));
+  }, [genreListQuery.data]);
+
+  const handleGenresFilter = debounce((e: string | null) => {
+    const updatedFilters = setFilters({
+      ndParams: {
+        ...filter.ndParams,
+        genre_id: e || undefined,
+      },
+    });
+    handleFilterChange(updatedFilters);
+  }, 250);
+
   const toggleFilters = [
     {
       label: 'Is rated',
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        setFilters({
+        const updatedFilters = setFilters({
           ndParams: { ...filter.ndParams, has_rating: e.currentTarget.checked ? true : undefined },
         });
+        handleFilterChange(updatedFilters);
       },
       value: filter.ndParams?.has_rating,
     },
     {
       label: 'Is favorited',
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        setFilters({
+        const updatedFilters = setFilters({
           ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
         });
+        handleFilterChange(updatedFilters);
       },
       value: filter.ndParams?.starred,
     },
     {
       label: 'Is compilation',
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        setFilters({
+        const updatedFilters = setFilters({
           ndParams: { ...filter.ndParams, compilation: e.currentTarget.checked ? true : undefined },
         });
+        handleFilterChange(updatedFilters);
       },
       value: filter.ndParams?.compilation,
     },
     {
       label: 'Is recently played',
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        setFilters({
+        const updatedFilters = setFilters({
           ndParams: {
             ...filter.ndParams,
             recently_played: e.currentTarget.checked ? true : undefined,
           },
         });
+        handleFilterChange(updatedFilters);
       },
       value: filter.ndParams?.recently_played,
     },
   ];
 
   const handleYearFilter = debounce((e: number | undefined) => {
-    setFilters({
+    const updatedFilters = setFilters({
       ndParams: {
         ...filter.ndParams,
         year: e,
       },
     });
+    handleFilterChange(updatedFilters);
   }, 500);
 
   return (
     <Stack p="0.8rem">
+      <Group position="apart">
+        <Text>Year</Text>
+        <NumberInput
+          hideControls={false}
+          max={5000}
+          min={0}
+          value={filter.ndParams?.year}
+          width={80}
+          onChange={handleYearFilter}
+        />
+      </Group>
+      <Divider my="0.5rem" />
+      <Group
+        position="apart"
+        spacing={20}
+      >
+        <Text>Genre</Text>
+        <Select
+          clearable
+          searchable
+          data={genreList}
+          defaultValue={filter.ndParams?.genre_id}
+          width={150}
+          onChange={handleGenresFilter}
+        />
+      </Group>
+      <Divider my="0.5rem" />
       {toggleFilters.map((filter) => (
         <Group
           key={`nd-filter-${filter.label}`}
@@ -69,23 +126,10 @@ export const NavidromeAlbumFilters = () => {
           <Text>{filter.label}</Text>
           <Switch
             checked={filter?.value || false}
-            size="xs"
             onChange={filter.onChange}
           />
         </Group>
       ))}
-      <Divider my="0.5rem" />
-      <Group position="apart">
-        <Text>Year</Text>
-        <NumberInput
-          max={5000}
-          min={0}
-          size="xs"
-          value={filter.ndParams?.year}
-          width={50}
-          onChange={handleYearFilter}
-        />
-      </Group>
     </Stack>
   );
 };