Update filters styling

- Add reset button for each section
- Focus check picker search bar on open
- Remove default reset button
- Prevent overflow of filter window
- Move filter button to sidetitle
- Move album count to title
- Move filter button to separate file

src/components/library/AdvancedFilters.tsx

@@ -167,7 +167,28 @@ const AdvancedFilters = ({ filteredData, originalData, filter, setAdvancedFilter
         Is favorite
       </StyledCheckbox>
       <Divider />
-      <FilterHeader>Genres</FilterHeader>
+      <FilterHeader>
+        <FlexboxGrid justify="space-between">
+          <FlexboxGrid.Item>Genres</FlexboxGrid.Item>
+          <FlexboxGrid.Item>
+            <StyledButton
+              size="xs"
+              appearance={filter.properties.genre.list.length > 0 ? 'primary' : 'subtle'}
+              disabled={filter.properties.genre.list.length === 0}
+              onClick={() => {
+                dispatch(
+                  setAdvancedFilters({
+                    filter: 'genre',
+                    value: { ...filter.properties.genre, list: [] },
+                  })
+                );
+              }}
+            >
+              Reset
+            </StyledButton>
+          </FlexboxGrid.Item>
+        </FlexboxGrid>
+      </FilterHeader>
       <RadioGroup
         inline
         defaultValue={filter.properties.genre.type}
@@ -200,6 +221,10 @@ const AdvancedFilters = ({ filteredData, originalData, filter, setAdvancedFilter
             labelKey="title"
             valueKey="title"
             virtualized
+            cleanable={false}
+            onEntered={() => {
+              (document.querySelectorAll('.rs-picker-search-bar-input')[0] as HTMLElement).focus();
+            }}
             renderMenuItem={(label: string, item: any) => {
               return (
                 <div>
@@ -221,7 +246,28 @@ const AdvancedFilters = ({ filteredData, originalData, filter, setAdvancedFilter
         </ButtonToolbar>
       </StyledInputPickerContainer>
       <Divider />
-      <FilterHeader>Artists</FilterHeader>
+      <FilterHeader>
+        <FlexboxGrid justify="space-between">
+          <FlexboxGrid.Item>Artists</FlexboxGrid.Item>
+          <FlexboxGrid.Item>
+            <StyledButton
+              size="xs"
+              appearance={filter.properties.artist.list.length > 0 ? 'primary' : 'subtle'}
+              disabled={filter.properties.artist.list.length === 0}
+              onClick={() => {
+                dispatch(
+                  setAdvancedFilters({
+                    filter: 'artist',
+                    value: { ...filter.properties.artist, list: [] },
+                  })
+                );
+              }}
+            >
+              Reset
+            </StyledButton>
+          </FlexboxGrid.Item>
+        </FlexboxGrid>
+      </FilterHeader>
       <RadioGroup
         inline
         defaultValue={filter.properties.artist.type}
@@ -257,6 +303,10 @@ const AdvancedFilters = ({ filteredData, originalData, filter, setAdvancedFilter
             labelKey="title"
             valueKey="id"
             virtualized
+            cleanable={false}
+            onEntered={() => {
+              (document.querySelectorAll('.rs-picker-search-bar-input')[0] as HTMLElement).focus();
+            }}
             renderMenuItem={(label: string, item: any) => {
               return (
                 <div>
@@ -284,7 +334,12 @@ const AdvancedFilters = ({ filteredData, originalData, filter, setAdvancedFilter
           <FlexboxGrid.Item>
             <StyledButton
               size="xs"
-              appearance="primary"
+              appearance={
+                filter.properties.year.from === 0 && filter.properties.year.to === 0
+                  ? 'subtle'
+                  : 'primary'
+              }
+              disabled={filter.properties.year.from === 0 && filter.properties.year.to === 0}
               onClick={() => {
                 dispatch(
                   setAdvancedFilters({

src/components/library/AlbumList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import _ from 'lodash';
 import settings from 'electron-settings';
-import { ButtonToolbar, Icon, Whisper } from 'rsuite';
+import { ButtonToolbar, Whisper } from 'rsuite';
 import { useQuery, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import GridViewType from '../viewtypes/GridViewType';
@@ -18,12 +18,12 @@ import {
   clearSelected,
 } from '../../redux/multiSelectSlice';
 import {
-  StyledIconButton,
   StyledInputPicker,
   StyledInputPickerContainer,
   StyledPopover,
+  StyledTag,
 } from '../shared/styled';
-import { RefreshButton } from '../shared/ToolbarButtons';
+import { FilterButton, RefreshButton } from '../shared/ToolbarButtons';
 import { setActive, setAdvancedFilters } from '../../redux/albumSlice';
 import { setSearchQuery } from '../../redux/miscSlice';
 import { apiController } from '../../api/controller';
@@ -229,7 +229,14 @@ const AlbumList = () => {
       hideDivider
       header={
         <GenericPageHeader
-          title="Albums"
+          title={
+            <>
+              Albums{' '}
+              <StyledTag style={{ verticalAlign: 'middle', cursor: 'default' }}>
+                {filteredData?.length || '...'}
+              </StyledTag>
+            </>
+          }
           subtitle={
             <StyledInputPickerContainer ref={albumFilterPickerContainerRef}>
               <ButtonToolbar>
@@ -257,41 +264,43 @@ const AlbumList = () => {
                     setIsRefresh(false);
                   }}
                 />
-                <Whisper
-                  trigger="click"
-                  enterable
-                  placement="bottom"
-                  speaker={
-                    <StyledPopover width="275px" opacity={0.97}>
-                      <AdvancedFilters
-                        filteredData={{
-                          filteredData,
-                          byArtistData,
-                          byArtistBaseData,
-                          byGenreData,
-                          byStarredData,
-                          byYearData,
-                        }}
-                        originalData={albums}
-                        filter={album.advancedFilters}
-                        setAdvancedFilters={setAdvancedFilters}
-                      />
-                    </StyledPopover>
-                  }
-                >
-                  <StyledIconButton size="sm" icon={<Icon icon="filter" />} />
-                </Whisper>
-                <RefreshButton
-                  onClick={handleRefresh}
-                  size="sm"
-                  loading={isRefreshing}
-                  width={100}
-                />{' '}
-                {filteredData?.length}
+                <RefreshButton onClick={handleRefresh} size="sm" loading={isRefreshing} />
               </ButtonToolbar>
             </StyledInputPickerContainer>
           }
           subsidetitle={<></>}
+          sidetitle={
+            <>
+              <Whisper
+                trigger="click"
+                enterable
+                placement="bottomEnd"
+                preventOverflow
+                speaker={
+                  <StyledPopover width="275px" opacity={0.97}>
+                    <AdvancedFilters
+                      filteredData={{
+                        filteredData,
+                        byArtistData,
+                        byArtistBaseData,
+                        byGenreData,
+                        byStarredData,
+                        byYearData,
+                      }}
+                      originalData={albums}
+                      filter={album.advancedFilters}
+                      setAdvancedFilters={setAdvancedFilters}
+                    />
+                  </StyledPopover>
+                }
+              >
+                <FilterButton
+                  size="sm"
+                  appearance={album.advancedFilters.enabled ? 'primary' : 'subtle'}
+                />
+              </Whisper>
+            </>
+          }
           showViewTypeButtons
           viewTypeSetting="album"
           handleListClick={() => setViewType('list')}

src/components/shared/ToolbarButtons.tsx

@@ -133,6 +133,15 @@ export const RefreshButton = ({ ...rest }) => {
   );
 };
 
+export const FilterButton = ({ ...rest }) => {
+  return (
+    <StyledButton tabIndex={0} {...rest}>
+      <Icon icon="filter" style={{ marginRight: '10px' }} />
+      Filter
+    </StyledButton>
+  );
+};
+
 export const AutoPlaylistButton = ({ noText, ...rest }: any) => {
   return (
     <CustomTooltip text="Auto playlist">