Updated presets and added a 'sort by' feature.

web/src/features/search/index.tsx

@@ -39,6 +39,14 @@ import { EditTagsDialog } from './add-tag-dialog';
 import { useTranslation } from 'react-i18next';
 import Logo from '@/assets/logo.svg'
 import { RestoreMessageDialog } from './restore-message-dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
 
 export default function Search() {
   const { t } = useTranslation()
@@ -56,8 +64,10 @@ export default function Search() {
     isFetching,
     page,
     pageSize,
+    sortBy,
     setPage,
     setPageSize,
+    setSortBy,
     onSubmit,
     reset,
     filter
@@ -121,10 +131,27 @@ export default function Search() {
                 </div>
               </aside>
               <div className="flex-1 min-w-0 space-y-4">
-                <Button size="sm" onClick={() => setOpen("search-form")}>
-                  <SearchIcon className="mr-2 h-4 w-4" />
-                  {t('common.search')}
-                </Button>
+                <div className="flex flex-row gap-4 items-end">
+                  <Button size="sm" onClick={() => setOpen("search-form")}>
+                    <SearchIcon className="mr-2 h-4 w-4" />
+                    {t('common.search')}
+                  </Button>
+                  <Label className="">
+                    {t('search.sortBy')}
+                    <Select
+                      value={sortBy}
+                      onValueChange={(value: "date" | "size") => setSortBy(value)}
+                    >
+                      <SelectTrigger className='h-8 mt-2'>
+                        <SelectValue placeholder="Placeholder" />
+                      </SelectTrigger>
+                      <SelectContent side='top'>
+                        <SelectItem value="date">{t('search.date')}</SelectItem>
+                        <SelectItem value="size">{t('search.size')}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </Label>
+                </div>
                 {isLoading && (
                   <Card>
                     <CardContent className="py-12">
@@ -207,4 +234,4 @@ export default function Search() {
       </Main>
     </>
   );
-}
+}

web/src/features/search/search-form.tsx

@@ -67,7 +67,7 @@ const getSearchFilterSchema = (t: (key: string) => string) => z.object({
     before: z.date().optional(),
     account_id: z.number().optional().or(z.literal("")),
     mailbox_id: z.number().optional().or(z.literal("")),
-    size_preset: z.enum(['any', 'tiny', 'small', 'medium', 'large']).optional(),
+    size_preset: z.enum(['any', 'tiny', 'small', 'medium', 'large', 'huge']).optional(),
     message_id: z.string().optional().or(z.literal("")),
 });
 
@@ -107,8 +107,10 @@ function withSizePreset(values: Record<string, any>) {
         case 'small':
             return { ...rest, max_size: 2 * 1024 * 1024 };
         case 'medium':
-            return { ...rest, max_size: 20 * 1024 * 1024 };
+            return { ...rest, min_size: 2 * 1024 * 1024, max_size: 10 * 1024 * 1024 };
         case 'large':
+            return { ...rest, min_size: 10 * 1024 * 1024, max_size: 20 * 1024 * 1024 };
+        case 'huge':
             return { ...rest, min_size: 20 * 1024 * 1024 };
         default:
             return rest;
@@ -496,4 +498,4 @@ export function SearchFormDialog({ onSubmit, isLoading, reset, open, onOpenChang
             </Form>
         </SheetContent>
     </Sheet>);
-}
+}