Formatting

web/src/components/pagination.tsx

@@ -24,7 +24,7 @@ import {
   DoubleArrowRightIcon,
 } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input"
 import {
   Select,
   SelectContent,
@@ -34,15 +34,15 @@ import {
 } from '@/components/ui/select'
 import { useTranslation } from 'react-i18next'
 import { showNumbers } from '@/lib/utils'
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
 
 interface PaginationProps {
   totalItems: number
-  pageIndex: number,
+  pageIndex: number
-  pageSize: number,
+  pageSize: number
-  hasNextPage: () => boolean,
+  hasNextPage: () => boolean
-  setPageIndex: (pageIndex: number) => void,
+  setPageIndex: (pageIndex: number) => void
-  setPageSize: (pageSize: number) => void,
+  setPageSize: (pageSize: number) => void
 }
 
 export function EnvelopeListPagination({
@@ -54,7 +54,7 @@ export function EnvelopeListPagination({
   setPageSize,
 }: PaginationProps) {
   const { t } = useTranslation()
-  const [pageInput, setPageInput] = useState(pageIndex + 1);
+  const [pageInput, setPageInput] = useState(pageIndex + 1)
   const pageCount = Math.ceil(totalItems / pageSize)
 
   useEffect(() => {
@@ -76,7 +76,7 @@ export function EnvelopeListPagination({
     setPageIndex(newPageIndex)
   }
 
-  const currentPage = pageIndex + 1;
+  const currentPage = pageIndex + 1
   const pageNumbers = showNumbers(currentPage, pageCount)
 
   return (
@@ -106,9 +106,9 @@ export function EnvelopeListPagination({
         <div className='flex items-center justify-center text-sm font-medium'>
           {t("table.page")}
           <Input type="number" value={pageInput} onBlur={() => {
-            if (Number.isNaN(pageInput)) return;
+            if (Number.isNaN(pageInput)) return
-            if (pageInput > 0) setPageIndex(pageInput - 1);
+            if (pageInput > 0) setPageIndex(pageInput - 1)
-            else setPageIndex(0);
+            else setPageIndex(0)
           }}
           onChange={(e) => setPageInput(Number(e.target.value))}
           className='mx-2 w-20'

web/src/features/search/columns-dialog.tsx

@@ -17,13 +17,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useTranslation } from 'react-i18next'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { SquarePen } from 'lucide-react'
 import { Button } from '@/components/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { useState } from 'react'
-import { useSearchContext } from './context';
+import { useSearchContext } from './context'
-import { Label } from '@/components/ui/label';
+import { Label } from '@/components/ui/label'
 
 interface Props {
   open: boolean
@@ -73,17 +73,17 @@ export function ColumnsDialog({ open, onOpenChange }: Props) {
   const [selected, setSelected] = useState(() => {
     const _columns = localStorage.getItem("searchTableColumns")
       ? JSON.parse(localStorage.getItem("searchTableColumns") as string) as Record<string, boolean>
-      : undefined;
+      : undefined
 
-      if (_columns) return new Map(Object.entries(_columns).map(([key, value]) => [key, value]));
+      if (_columns) return new Map(Object.entries(_columns).map(([key, value]) => [key, value]))
       return new Map(columns.map((col) => [col.value, true]))
   })
 
   const handleSave = () => {
-    const _selected = Object.fromEntries(selected);
+    const _selected = Object.fromEntries(selected)
     setColumnVisibility(_selected)
-    localStorage.setItem("searchTableColumns", JSON.stringify(_selected));
+    localStorage.setItem("searchTableColumns", JSON.stringify(_selected))
-    onOpenChange(false);
+    onOpenChange(false)
   }
 
   const toggleSelected = (column: string) => {
@@ -96,8 +96,8 @@ export function ColumnsDialog({ open, onOpenChange }: Props) {
         value.set(column, true)
       }
 
-      return value;
+      return value
-    });
+    })
   }
 
   return (
@@ -127,8 +127,7 @@ export function ColumnsDialog({ open, onOpenChange }: Props) {
           </div>
         </div>
 
-                <div className="flex justify-between items-center">
+        <div className="flex justify-end items-center">
-                    &nbsp;
           <div className="flex gap-2">
             <Button variant="outline" onClick={() => onOpenChange(false)}>
               {t('search.addTags.cancel')}
@@ -140,5 +139,5 @@ export function ColumnsDialog({ open, onOpenChange }: Props) {
         </div>
       </DialogContent>
     </Dialog>
-    );
+  )
 }

web/src/features/search/mail-list-table.tsx

@@ -32,7 +32,7 @@ import LongText from "@/components/long-text"
 import { DataTableColumnHeader } from "./table/data-table-column-header"
 import { SearchTable } from "./table/table"
 import { DataTableRowActions } from "./table/data-table-row-actions"
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 interface MailListProps {
     items: EmailEnvelope[]
@@ -51,7 +51,7 @@ export function MailListTable({
 }: MailListProps) {
     const { t, i18n } = useTranslation()
 
-    const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS;
+    const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS
     const { selected, setSelected } = useSearchContext()
 
     const columns: ColumnDef<EmailEnvelope>[] = [
@@ -141,8 +141,8 @@ export function MailListTable({
           <DataTableColumnHeader column={column} title={t('search.date')} />
         ),
         cell: ({ row }) => {
-          const date = new Date(row.original.date);
+          const date = new Date(row.original.date)
-          const title = format(date, 'yyyy-MM-dd HH:mm:ss');
+          const title = format(date, 'yyyy-MM-dd HH:mm:ss')
           return (
             <Tooltip>
               <TooltipTrigger asChild>
@@ -167,46 +167,43 @@ export function MailListTable({
     ]
 
     const handleToggleAll = () => {
-        const total = Array.from(selected.values())
+      const total = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)
-            .reduce((sum, set) => sum + set.size, 0);
 
       if (total === items.length && items.length > 0) {
-            setSelected(new Map());
+        setSelected(new Map())
       } else {
         setSelected(prev => {
-                const next = new Map(prev);
+          const next = new Map(prev)
           for (const item of items) {
-                    const set = new Set(next.get(item.account_id) || []);
+            const set = new Set(next.get(item.account_id) || [])
-                    set.add(item.id);
+            set.add(item.id)
-                    next.set(item.account_id, set);
+            next.set(item.account_id, set)
           }
-                return next;
+          return next
-            });
+        })
       }
     }
 
     const toggleSelected = (accountId: number, mailId: number) => {
       setSelected(prev => {
-            const next = new Map(prev);
+        const next = new Map(prev)
-            const set = new Set(next.get(accountId) || []);
+        const set = new Set(next.get(accountId) || [])
 
         if (set.has(mailId)) {
-                set.delete(mailId);
+          set.delete(mailId)
-                if (set.size === 0) next.delete(accountId);
+          if (set.size === 0) next.delete(accountId)
-                else next.set(accountId, set);
+          else next.set(accountId, set)
         } else {
-                set.add(mailId);
+          set.add(mailId)
-                next.set(accountId, set);
+          next.set(accountId, set)
+        }
+        return next
+      })
     }
 
-            return next;
+    const totalSelected = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)
-        });
-    }
 
-    const totalSelected = Array.from(selected.values())
+    const hasSelected = (accountId: number, mailId: number) => selected.get(accountId)?.has(mailId) ?? false
-        .reduce((sum, set) => sum + set.size, 0);
-
-    const hasSelected = (accountId: number, mailId: number) => selected.get(accountId)?.has(mailId) ?? false;
 
     if (isLoading) {
         return (

web/src/features/search/table/data-table-row-actions.tsx

@@ -42,24 +42,23 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
 
   const toggleToDelete = (accountId: number, mailId: number) => {
     setToDelete(prev => {
-      const next = new Map(prev);
+      const next = new Map(prev)
-      const set = new Set(next.get(accountId) || []);
+      const set = new Set(next.get(accountId) || [])
 
       if (set.has(mailId)) {
-        set.delete(mailId);
+        set.delete(mailId)
-        if (set.size === 0) next.delete(accountId);
+        if (set.size === 0) next.delete(accountId)
-        else next.set(accountId, set);
+        else next.set(accountId, set)
       } else {
-        set.add(mailId);
+        set.add(mailId)
-        next.set(accountId, set);
+        next.set(accountId, set)
+      }
+      return next
+    })
   }
 
-      return next;
-    });
-  };
-
   const handleDelete = (envelope: EmailEnvelope) => {
-    setToDelete(new Map());
+    setToDelete(new Map())
     toggleToDelete(envelope.account_id, envelope.id)
     setOpen("delete")
   }
@@ -79,9 +78,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
         <DropdownMenuContent align='end' className='w-[160px]'>
           <DropdownMenuItem
             onClick={(e) => {
-              e.stopPropagation();  
+              e.stopPropagation()
-              setCurrentEnvelope(row.original);
+              setCurrentEnvelope(row.original)
-              setOpen("edit-tags");
+              setOpen("edit-tags")
             }}
           >
             {t('search.editTag')}
@@ -92,9 +91,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
           <DropdownMenuSeparator />
           <DropdownMenuItem
             onClick={(e) => {
-              e.stopPropagation();
+              e.stopPropagation()
-              setCurrentEnvelope(row.original);
+              setCurrentEnvelope(row.original)
-              setOpen("restore");
+              setOpen("restore")
             }}
           >
             {t('restore_message.restore_to_imap', 'Restore Mail')}
@@ -105,10 +104,8 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
           <DropdownMenuSeparator />
           <DropdownMenuItem
             onClick={(e) => {
-              e.stopPropagation();
+              e.stopPropagation()
-              handleDelete(row.original);
+              handleDelete(row.original)
-              //setCurrentRow(row.original)
-              //setOpen('delete')
             }}
             className='!text-red-500'
           >

web/src/features/search/table/table.tsx

@@ -54,7 +54,7 @@ declare module '@tanstack/react-table' {
 interface DataTableProps {
   columns: ColumnDef<EmailEnvelope>[]
   data: EmailEnvelope[]
-  onRowClick: (e: ReactMouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<EmailEnvelope>) => void;
+  onRowClick: (e: ReactMouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<EmailEnvelope>) => void
   setSortBy: (sortBy: "DATE" | "SIZE") => void
   setSortOrder: (value: "desc" | "asc") => void
 }
@@ -66,9 +66,9 @@ export function SearchTable({ columns, data, onRowClick, setSortBy, setSortOrder
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
   useEffect(() => {
-    const [value] = sorting;
+    const [value] = sorting
-    setSortBy(value.id.toUpperCase() as "DATE" | "SIZE");
+    setSortBy(value.id.toUpperCase() as "DATE" | "SIZE")
-    setSortOrder(value.desc ? "desc" : "asc");
+    setSortOrder(value.desc ? "desc" : "asc")
   }, [sorting])
 
   const table = useReactTable({