feat(frontend): persist page filters in query params

src/components/FilterBar.tsx

@@ -1,6 +1,5 @@
-import { Search, ArrowUpDown } from 'lucide-react';
-import { Select } from './ui/Select'; 
-import { Input } from './ui/input';
+import { Search, ArrowUpDown } from 'lucide-react';
+import { Select } from './ui/Select'; 
 
 interface FilterBarProps {
   searchQuery: string;
@@ -18,20 +17,19 @@ export default function FilterBar({
   setOrdering, 
   orderingOptions, 
   searchPlaceholder 
-}: FilterBarProps) {
-  
-  return (
+}: FilterBarProps) {
+  return (
     <div className="flex flex-col sm:flex-row gap-4 mb-6">
       <div className="relative flex-1">
         <Search className="absolute left-3 rtl:left-auto rtl:right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
         <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={searchPlaceholder || "Search..."}
-          className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
-        />
-      </div>
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={searchPlaceholder || "Search..."}
+          className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
+        />
+      </div>
       
       <div className="flex w-full items-center gap-2 sm:w-auto">
         <ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />

src/components/InfiniteScroll.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
+import { useTranslation } from "../hooks/useTranslation";
 
 interface InfiniteScrollProps {
   children: React.ReactNode;
@@ -16,8 +17,9 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   isLoading,
   className = "",
   loader,
-}) => {
-  const observerTarget = useRef<HTMLDivElement>(null);
+}) => {
+  const { t } = useTranslation();
+  const observerTarget = useRef<HTMLDivElement>(null);
   const onLoadMoreRef = useRef(onLoadMore);
   const hasMoreRef = useRef(hasMore);
   const isLoadingRef = useRef(isLoading);
@@ -56,11 +58,11 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
       
       {isLoading && (
         loader || (
-          <div className="py-2 text-center text-xs text-slate-500 dark:text-slate-400">
-            Loading...
-          </div>
-        )
-      )}
+          <div className="py-2 text-center text-xs text-slate-500 dark:text-slate-400">
+            {t.loading || "Loading..."}
+          </div>
+        )
+      )}
     </div>
   );
 };

src/components/ui/SearchableSelect.tsx

@@ -27,8 +27,8 @@ export function SearchableSelect({
   onChange,
   options,
   placeholder = "",
-  searchPlaceholder = "Search...",
-  emptyLabel = "No results",
+  searchPlaceholder,
+  emptyLabel,
   disabled = false,
   className = "",
   buttonClassName = "",
@@ -111,7 +111,7 @@ export function SearchableSelect({
                 <Input
                   value={query}
                   onChange={(event) => setQuery(event.target.value)}
-                  placeholder={searchPlaceholder}
+                  placeholder={searchPlaceholder || "Search..."}
                   className="h-9 pl-9"
                   autoFocus
                 />
@@ -138,7 +138,9 @@ export function SearchableSelect({
                 </button>
               ))}
               {filteredOptions.length === 0 && (
-                <div className="px-3 py-3 text-sm text-slate-500 dark:text-slate-400">{emptyLabel}</div>
+                <div className="px-3 py-3 text-sm text-slate-500 dark:text-slate-400">
+                  {emptyLabel || "No results"}
+                </div>
               )}
             </div>
           </div>,