From 9c5e4b599f5a5f6fbc0bb30e882faa6997859027 Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Tue, 12 Aug 2025 14:27:43 +0700
Subject: [PATCH] add filter toggle icon

---
 frontend/public/img/icon-filter.svg      |  9 +++
 frontend/src/components/Filterbar.tsx    | 77 ++++++++++++++----------
 frontend/src/stores/FilterbarTempConf.ts |  4 ++
 3 files changed, 57 insertions(+), 33 deletions(-)
 create mode 100644 frontend/public/img/icon-filter.svg

diff --git a/frontend/public/img/icon-filter.svg b/frontend/public/img/icon-filter.svg
new file mode 100644
index 00000000..aa48b16f
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Filterbar.tsx b/frontend/src/components/Filterbar.tsx
index 71b84811..7d24aefd 100644
--- a/frontend/src/components/Filterbar.tsx
+++ b/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,39 +57,48 @@ const Filterbar = ({ viewStyle, showSort = true, showTypeFilter = false }: Filte
 
   return (
     <div className="view-controls three">
-      <div>
-        <select
-          value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()}
-          onChange={event => {
-            handleUserConfigUpdate({
-              hide_watched: event.target.value === '' ? null : event.target.value === 'true',
-            });
-          }}
-        >
-          <option value="">All</option>
-          <option value="true">Watched only</option>
-          <option value="false">Unwatched only</option>
-        </select>
-        {showTypeFilter && (
-          <select
-            value={userConfig.vid_type_filter === null ? '' : userConfig.vid_type_filter}
-            onChange={event => {
-              handleUserConfigUpdate({
-                vid_type_filter:
-                  event.target.value === '' ? null : (event.target.value as VideoTypes),
-              });
-            }}
-          >
-            <option value="">All Types</option>
-            <option value="videos">Videos</option>
-            <option value="streams">Streams</option>
-            <option value="shorts">Shorts</option>
-          </select>
+      <div className="view-icons">
+        {showFilterItems && (
+          <>
+            <select
+              value={userConfig.hide_watched === null ? '' : userConfig.hide_watched.toString()}
+              onChange={event => {
+                handleUserConfigUpdate({
+                  hide_watched: event.target.value === '' ? null : event.target.value === 'true',
+                });
+              }}
+            >
+              <option value="">All watched state</option>
+              <option value="true">Watched only</option>
+              <option value="false">Unwatched only</option>
+            </select>
+            {showTypeFilter && (
+              <select
+                value={userConfig.vid_type_filter === null ? '' : userConfig.vid_type_filter}
+                onChange={event => {
+                  handleUserConfigUpdate({
+                    vid_type_filter:
+                      event.target.value === '' ? null : (event.target.value as VideoTypes),
+                  });
+                }}
+              >
+                <option value="">All Types</option>
+                <option value="videos">Videos</option>
+                <option value="streams">Streams</option>
+                <option value="shorts">Shorts</option>
+              </select>
+            )}
+            <input
+              placeholder="height in px"
+              value={filterHeight}
+              onChange={e => setFilterHeight(e.target.value)}
+            />
+          </>
         )}
-        <input
-          placeholder="height in px"
-          value={filterHeight}
-          onChange={e => setFilterHeight(e.target.value)}
+        <img
+          src={iconFilter}
+          alt="icon filter"
+          onClick={() => setShowFilterItems(!showFilterItems)}
         />
       </div>
 
diff --git a/frontend/src/stores/FilterbarTempConf.ts b/frontend/src/stores/FilterbarTempConf.ts
index 045f0691..3f32113e 100644
--- a/frontend/src/stores/FilterbarTempConf.ts
+++ b/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 }),
 }));