feat: TitlesFilterPanel component

modules/frontend/src/pages/TitlesPage/TitlesPage.tsx

@@ -8,6 +8,7 @@ import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal"
 import type { CursorObj, Title, TitleSort } from "../../api";
 import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
 import { Link } from "react-router-dom";
+import { type TitlesFilter, TitlesFilterPanel } from "../../components/TitlesFilterPanel/TitlesFilterPanel";
 
 const PAGE_SIZE = 10;
 
@@ -22,6 +23,14 @@ export default function TitlesPage() {
   const [sortForward, setSortForward] = useState(true);
   const [layout, setLayout] = useState<"square" | "horizontal">("square");
 
+  const [filters, setFilters] = useState<TitlesFilter>({
+    extSearch: false,
+    status: "",
+    rating: "",
+    releaseYear: "",
+    releaseSeason: "",
+  });
+
   const fetchPage = async (cursorObj: CursorObj | null) => {
     const cursorStr = cursorObj ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') : "";
 
@@ -30,13 +39,14 @@ export default function TitlesPage() {
         cursorStr,
         sort,
         sortForward,
+        filters.extSearch,
         search.trim() || undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
+        filters.status ? [filters.status] : undefined,
+        filters.rating || undefined,
+        filters.releaseYear || undefined,
+        filters.releaseSeason || undefined,
+        PAGE_SIZE,
         PAGE_SIZE,
-        undefined,
         "all"
       );
 
@@ -73,7 +83,7 @@ export default function TitlesPage() {
     };
 
     initLoad();
-  }, [search, sort, sortForward]);
+  }, [search, sort, sortForward, filters]);
 
 
 const handleLoadMore = async () => {
@@ -121,6 +131,7 @@ const handleLoadMore = async () => {
           setSortForward={setSortForward}
         />
       </div>
+       <TitlesFilterPanel filters={filters} setFilters={setFilters} />
 
       {loading && <div className="mt-20 font-medium text-black">Loading...</div>}