add filter toggle icon

frontend/public/img/icon-filter.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="131 -131 512 512" style="enable-background:new 131 -131 512 512;" xml:space="preserve">
+<g id="XMLID_2_">
+	<path id="XMLID_4_" d="M640.9-116.5c3.7,10.2,2.8,18.6-4.7,25.1L456.6,87.4v270c0,10.2-4.7,17.7-14,21.4c-2.8,0.9-6.5,1.9-9.3,1.9
+		c-6.5,0-12.1-1.9-16.8-6.5L323.4,281c-4.7-4.7-6.5-10.2-6.5-16.8V87.4L138.2-91.4c-7.4-7.4-9.3-15.8-4.7-25.1
+		c3.7-9.3,11.2-14,21.4-14h464.5C629.7-131.4,636.2-126.7,640.9-116.5z"/>
+</g>
+</svg>

frontend/src/components/Filterbar.tsx

@@ -5,6 +5,7 @@ import iconSubstract from '/img/icon-substract.svg';
 import iconGridView from '/img/icon-gridview.svg';
 import iconListView from '/img/icon-listview.svg';
 import iconTableView from '/img/icon-tableview.svg';
+import iconFilter from '/img/icon-filter.svg';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import { ViewStyleNamesType, ViewStylesEnum } from '../configuration/constants/ViewStyle';
 import updateUserConfig, { UserConfigType } from '../api/actions/updateUserConfig';
@@ -27,7 +28,8 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
   const { userConfig, setUserConfig } = useUserConfigStore();
 
   const [showHidden, setShowHidden] = useState(false);
-  const { filterHeight, setFilterHeight } = useFilterBarTempConf();
+  const { filterHeight, setFilterHeight, showFilterItems, setShowFilterItems } =
+    useFilterBarTempConf();
 
   const currentViewStyle = userConfig[viewStyle];
   const isGridView = currentViewStyle === ViewStylesEnum.Grid;
@@ -55,7 +57,9 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
 
   return (
     <div className="view-controls three">
-      <div>
+      <div className="view-icons">
+        {showFilterItems && (
+          <>
             <select
               value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()}
               onChange={event => {
@@ -64,7 +68,7 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
                 });
               }}
             >
-          <option value="">All</option>
+              <option value="">All watched state</option>
               <option value="true">Watched only</option>
               <option value="false">Unwatched only</option>
             </select>
@@ -89,6 +93,13 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
               value={filterHeight}
               onChange={e => setFilterHeight(e.target.value)}
             />
+          </>
+        )}
+        <img
+          src={iconFilter}
+          alt="icon filter"
+          onClick={() => setShowFilterItems(!showFilterItems)}
+        />
       </div>
 
       {showHidden && (

frontend/src/stores/FilterbarTempConf.ts

@@ -5,9 +5,13 @@ import { create } from 'zustand';
 interface FilterbarTempConfInterface {
   filterHeight: string;
   setFilterHeight: (filterHeight: string) => void;
+  showFilterItems: boolean;
+  setShowFilterItems: (filterItems: boolean) => void;
 }
 
 export const useFilterBarTempConf = create<FilterbarTempConfInterface>(set => ({
   filterHeight: '',
   setFilterHeight: (filterHeight: string) => set({ filterHeight }),
+  showFilterItems: false,
+  setShowFilterItems: (showFilterItems: boolean) => set({ showFilterItems }),
 }));