✨ feat: Refactored file list to use local storage to preserve row height and filter settings.

web/src/components/file-list.tsx

@@ -31,7 +31,7 @@ import { useFiles } from "@/hooks/use-files";
 import { FileFilters } from "@/components/file-filters";
 import {
   getRowHeightTailwindClass,
-  type RowHeight,
+  useRowHeightLocalStorage,
 } from "@/components/table-row-height-switch";
 import { type Column } from "@/components/table-column-filter";
 import { cn } from "@/lib/utils";
@@ -106,9 +106,10 @@ export function FileList({ accountId, chatId }: FileListProps) {
   const [selectedFiles, setSelectedFiles] = useState<Set<number>>(new Set());
   const observerTarget = useRef(null);
   const [columns, setColumns] = useState<Column[]>(COLUMNS);
-  // const [rowHeight, setRowHeight] = useRowHeightLocalStorage("fileList", "m");
-  const [rowHeight, setRowHeight] = useState<RowHeight>("m");
-
+  const [rowHeight, setRowHeight] = useRowHeightLocalStorage(
+    "telegramFileList",
+    "m",
+  );
   const { filters, handleFilterChange, isLoading, files, handleLoadMore } =
     useFiles(accountId, chatId);
 

web/src/hooks/use-files.ts

@@ -7,6 +7,7 @@ import {
 import useSWRInfinite from "swr/infinite";
 import { useWebsocket } from "@/hooks/use-websocket";
 import { WebSocketMessageType } from "@/lib/websocket-types";
+import useLocalStorage from "@/hooks/use-local-storage";
 
 const DEFAULT_FILTERS: FileFilter = {
   search: "",
@@ -31,7 +32,10 @@ export function useFiles(accountId: string, chatId: string) {
       }
     >
   >({});
-  const [filters, setFilters] = useState<FileFilter>(DEFAULT_FILTERS);
+  const [filters, setFilters, clearFilters] = useLocalStorage<FileFilter>(
+    "telegramFileListFilter",
+    DEFAULT_FILTERS,
+  );
   const getKey = (page: number, previousPageData: FileResponse) => {
     if (page === 0) {
       return `/telegram/${accountId}/chat/${chatId}/files?search=${filters.search}&type=${filters.type}&status=${filters.status}`;