🐛 fix: Enhance file retrieval logic with custom sorting and improved filter handling

api/src/main/java/telegram/files/repository/impl/FileRepositoryImpl.java

@@ -155,14 +155,24 @@ public class FileRepositoryImpl implements FileRepository {
             }
         }
         String countClause = whereClause;
-        if (fromMessageId > 0) {
-            whereClause += " AND message_id < #{fromMessageId}";
-            params.put("fromMessageId", fromMessageId);
-        }
         String orderBy = "message_id DESC";
-        if (StrUtil.isNotBlank(sort) && StrUtil.isNotBlank(order)) {
+        boolean customSort = StrUtil.isNotBlank(sort) && StrUtil.isNotBlank(order);
+        if (customSort) {
             orderBy = "%s %s".formatted(sort, order);
         }
+        if (fromMessageId > 0) {
+            params.put("fromMessageId", fromMessageId);
+            if (customSort) {
+                long fromSortField = Convert.toLong(filter.get("fromSortField"));
+                whereClause += " AND (%s %s %s OR (%s = %s AND message_id < #{fromMessageId}))".formatted(sort,
+                        Objects.equals(order, "asc") ? ">" : "<",
+                        fromSortField,
+                        sort,
+                        fromSortField);
+            } else {
+                whereClause += " AND message_id < #{fromMessageId}";
+            }
+        }
         log.trace("Get files with where: %s params: %s".formatted(whereClause, params));
         return Future.all(
                 SqlTemplate

web/src/components/file-extra.tsx

@@ -61,7 +61,7 @@ function FileCaption({ file, rowHeight, ellipsis }: FileExtraProps) {
             <p
               className={cn(
                 (rowHeight !== "l" || ellipsis) && "line-clamp-1",
-                "overflow-hidden text-wrap text-start text-sm",
+                "overflow-hidden text-wrap text-start text-sm px-1",
               )}
             >
               {file.caption}
@@ -95,7 +95,7 @@ function FilePath({ file, ellipsis }: FileExtraProps) {
           <FileCheck className="h-4 w-4 flex-shrink-0" />
           <p
             className={cn(
-              "group cursor-pointer overflow-hidden text-wrap rounded px-1 hover:bg-gray-100 dark:hover:bg-gray-800",
+              "group cursor-pointer overflow-hidden text-nowrap rounded px-1 hover:bg-gray-100 dark:hover:bg-gray-800",
               ellipsis && "line-clamp-1",
               isMobile && "px-0",
             )}
@@ -139,7 +139,7 @@ function FileTime({ file }: FileExtraProps) {
       {!isMobile && file.completionDate && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <p className="flex items-center gap-2">
+            <p className="items-center gap-2 hidden lg:flex">
               <ClockArrowDown className="h-4 w-4" />
               <span className="rounded px-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
                 {formatDistanceToNow(new Date(file.completionDate), {

web/src/components/file-filters.tsx

@@ -501,7 +501,7 @@ export default function FileFilters({
                 />
 
                 {!localFilters.offline && (
-                  <div className="flex items-center justify-between rounded-md border bg-zinc-100 px-2 py-3 dark:bg-zinc-800">
+                  <div className="flex items-center justify-between rounded-md border bg-gray-100/50 px-2 py-3 dark:bg-gray-600/50">
                     <Label htmlFor="notDownload">Filter Not Download</Label>
                     <Switch
                       id="notDownload"

web/src/components/file-viewer.tsx

@@ -41,10 +41,6 @@ export default function FileViewer({
     handleLoadMore,
   });
 
-  useEffect(() => {
-    console.log("FileViewer rendered", file);
-  }, [file]);
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (file === undefined || !open) return;

web/src/hooks/use-files.ts

@@ -70,6 +70,16 @@ export function useFiles(accountId: string, chatId: string) {
     }
 
     params.set("fromMessageId", previousPageData.nextFromMessageId.toString());
+    if (filters.offline && previousPageData.files.length > 0) {
+      const lastFile = previousPageData.files[previousPageData.files.length - 1];
+      if (filters.sort === "size") {
+        params.set("fromSortField", lastFile!.size.toString());
+      } else if (filters.sort === "completion_date") {
+        params.set("fromSortField", lastFile!.completionDate.toString());
+      } else if (filters.sort === "date") {
+        params.set("fromSortField", lastFile!.date.toString());
+      }
+    }
     return `/telegram/${accountId}/chat/${chatId}/files?${params.toString()}`;
   };