RomanNum3ral
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add filter toggle icon

This commit is contained in:
Simon 2025-08-12 14:27:43 +07:00
parent f2da730aa2
commit 9c5e4b599f
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
3 changed files with 57 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/public/img/icon-filter.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 603 B

77
frontend/src/components/Filterbar.tsx
View File

@ -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>

4
frontend/src/stores/FilterbarTempConf.ts
View File

@ -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 }),
}));