}
- {total > 0 &&
- 0 &&
+ {
setOpen('display');
setSelectedEnvelope(envelope);
}}
+ setSortBy={setSortBy}
+ setSortOrder={setSortOrder}
/>
}
{total > 0 && setOpen('restore')}
/>
-
+
+ setOpen('columns')}
+ />
+
+
);
diff --git a/web/src/features/search/mail-list-table.tsx b/web/src/features/search/mail-list-table.tsx
new file mode 100755
index 0000000..c8dbb74
--- /dev/null
+++ b/web/src/features/search/mail-list-table.tsx
@@ -0,0 +1,239 @@
+//
+// Copyright (c) 2025 rustmailer.com (https://rustmailer.com)
+//
+// This file is part of the Bichon Email Archiving Project
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+
+import { dateFnsLocaleMap, formatBytes } from "@/lib/utils"
+import { format, formatDistanceToNow } from "date-fns"
+import { Paperclip } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Checkbox } from "@/components/ui/checkbox"
+import { EmailEnvelope } from "@/api"
+import { useSearchContext } from "./context"
+import { MailBulkActions } from "./bulk-actions"
+import { useTranslation } from 'react-i18next'
+import { enUS } from "date-fns/locale"
+import { ColumnDef } from "@tanstack/react-table"
+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'
+
+interface MailListProps {
+ items: EmailEnvelope[]
+ isLoading: boolean
+ onEnvelopeChanged: (envelope: EmailEnvelope) => void
+ setSortBy: (sortBy: "DATE" | "SIZE") => void
+ setSortOrder: (value: "desc" | "asc") => void
+}
+
+export function MailListTable({
+ items,
+ isLoading,
+ onEnvelopeChanged,
+ setSortBy,
+ setSortOrder
+}: MailListProps) {
+ const { t, i18n } = useTranslation()
+
+ const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS
+ const { selected, setSelected } = useSearchContext()
+
+ const columns: ColumnDef[] = [
+ {
+ accessorKey: "id",
+ header: () => (
+ 0
+ ? true
+ : totalSelected > 0
+ ? "indeterminate"
+ : false
+ }
+ onCheckedChange={handleToggleAll}
+ className="h-4 w-4"
+ />
+ ),
+ cell: ({ row }) => (
+ toggleSelected(row.original.account_id, row.original.id)}
+ onClick={(e) => e.stopPropagation()}
+ className="h-4 w-4 shrink-0"
+ />
+ ),
+ meta: { className: 'text-left text-sm' },
+ minSize: 25,
+ maxSize: 25,
+ },
+ {
+ accessorKey: "account_email",
+ header: t('search.account'),
+ cell: ({ row }) => {row.original.account_email},
+ meta: { className: 'text-left text-sm' },
+ minSize: 166
+ },
+ {
+ accessorKey: "mailbox_name",
+ header: t('search.mailbox'),
+ cell: ({ row }) => {row.original.mailbox_name},
+ meta: { className: 'text-left text-sm' },
+ minSize: 116,
+ maxSize: 116,
+ },
+ {
+ accessorKey: "from",
+ header: t('search.from'),
+ cell: ({ row }) => {row.original.from},
+ meta: { className: 'text-left text-sm' },
+ minSize: 150,
+ },
+ {
+ accessorKey: "to",
+ header: t('search.to'),
+ cell: ({ row }) => {row.original.to.join(", ")},
+ meta: { className: 'text-left text-sm' },
+ },
+ {
+ accessorKey: "subject",
+ header: t('search.subject'),
+ cell: ({ row }) => {row.original.subject},
+ meta: { className: 'text-left text-sm' },
+ size: 1000
+ },
+ {
+ id: "attachment_count",
+ header: () => ,
+ cell: ({ row }) => {(row.original.attachments ?? []).length},
+ meta: { className: 'text-left text-sm' },
+ minSize: 40,
+ maxSize: 40
+ },
+ {
+ accessorKey: 'size',
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => {formatBytes(row.original.size)},
+ meta: { className: 'text-left text-sm' },
+ minSize: 100,
+ maxSize: 100,
+ },
+ {
+ accessorKey: 'date',
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => {
+ const date = new Date(row.original.date)
+ const title = format(date, 'yyyy-MM-dd HH:mm:ss')
+ return (
+
+
+
+ {formatDistanceToNow(date, { addSuffix: true, locale })}
+
+
+ {title}
+
+ )
+ },
+ meta: { className: 'text-left text-sm' },
+ minSize: 100,
+ },
+ {
+ id: 'actions',
+ header: t('users.columns.actions'),
+ cell: DataTableRowActions,
+ minSize: 70,
+ maxSize: 70,
+ },
+ ]
+
+ const handleToggleAll = () => {
+ const total = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)
+
+ if (total === items.length && items.length > 0) {
+ setSelected(new Map())
+ } else {
+ setSelected(prev => {
+ const next = new Map(prev)
+ for (const item of items) {
+ const set = new Set(next.get(item.account_id) || [])
+ set.add(item.id)
+ next.set(item.account_id, set)
+ }
+ return next
+ })
+ }
+ }
+
+ const toggleSelected = (accountId: number, mailId: number) => {
+ setSelected(prev => {
+ const next = new Map(prev)
+ const set = new Set(next.get(accountId) || [])
+
+ if (set.has(mailId)) {
+ set.delete(mailId)
+ if (set.size === 0) next.delete(accountId)
+ else next.set(accountId, set)
+ } else {
+ set.add(mailId)
+ next.set(accountId, set)
+ }
+ return next
+ })
+ }
+
+ const totalSelected = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)
+
+ const hasSelected = (accountId: number, mailId: number) => selected.get(accountId)?.has(mailId) ?? false
+
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+ )
+ }
+
+ return (
+ <>
+ {
+ const target = e.target as HTMLElement
+ if (target.closest('input[type="checkbox"], button')) return
+ onEnvelopeChanged(row.original)
+ }}
+ setSortBy={setSortBy}
+ setSortOrder={setSortOrder}
+ />
+ {totalSelected > 0 && }
+
+ )
+}
diff --git a/web/src/features/search/table/data-table-column-header.tsx b/web/src/features/search/table/data-table-column-header.tsx
new file mode 100755
index 0000000..7de52cf
--- /dev/null
+++ b/web/src/features/search/table/data-table-column-header.tsx
@@ -0,0 +1,83 @@
+//
+// Copyright (c) 2025 rustmailer.com (https://rustmailer.com)
+//
+// This file is part of the Bichon Email Archiving Project
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+
+import {
+ ArrowDownIcon,
+ ArrowUpIcon,
+ CaretSortIcon,
+} from '@radix-ui/react-icons'
+import { Column } from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTranslation } from 'react-i18next'
+
+interface DataTableColumnHeaderProps
+ extends React.HTMLAttributes {
+ column: Column
+ title: string
+}
+
+export function DataTableColumnHeader({
+ column,
+ title,
+ className,
+}: DataTableColumnHeaderProps) {
+ if (!column.getCanSort()) {
+ return
+ )
+}
diff --git a/web/src/features/search/table/data-table-row-actions.tsx b/web/src/features/search/table/data-table-row-actions.tsx
new file mode 100755
index 0000000..728a95f
--- /dev/null
+++ b/web/src/features/search/table/data-table-row-actions.tsx
@@ -0,0 +1,121 @@
+//
+// Copyright (c) 2025 rustmailer.com (https://rustmailer.com)
+//
+// This file is part of the Bichon Email Archiving Project
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+
+import { Row } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTranslation } from 'react-i18next'
+import { MoreVertical, TagIcon, Trash2 } from 'lucide-react'
+import { EmailEnvelope } from '@/api'
+import { useSearchContext } from '../context'
+
+interface DataTableRowActionsProps {
+ row: Row
+}
+
+export function DataTableRowActions({ row }: DataTableRowActionsProps) {
+ const { setOpen, setCurrentEnvelope, setToDelete } = useSearchContext()
+ const { t } = useTranslation()
+
+ const toggleToDelete = (accountId: number, mailId: number) => {
+ setToDelete(prev => {
+ const next = new Map(prev)
+ const set = new Set(next.get(accountId) || [])
+
+ if (set.has(mailId)) {
+ set.delete(mailId)
+ if (set.size === 0) next.delete(accountId)
+ else next.set(accountId, set)
+ } else {
+ set.add(mailId)
+ next.set(accountId, set)
+ }
+ return next
+ })
+ }
+
+ const handleDelete = (envelope: EmailEnvelope) => {
+ setToDelete(new Map())
+ toggleToDelete(envelope.account_id, envelope.id)
+ setOpen("delete")
+ }
+
+ return (
+ <>
+
+
+
+
+
+ {
+ e.stopPropagation()
+ setCurrentEnvelope(row.original)
+ setOpen("edit-tags")
+ }}
+ >
+ {t('search.editTag')}
+
+
+
+
+
+ {
+ e.stopPropagation()
+ setCurrentEnvelope(row.original)
+ setOpen("restore")
+ }}
+ >
+ {t('restore_message.restore_to_imap', 'Restore Mail')}
+
+
+
+
+
+ {
+ e.stopPropagation()
+ handleDelete(row.original)
+ }}
+ className='!text-red-500'
+ >
+ {t('common.delete')}
+
+
+
+
+
+
+
+ )
+}
diff --git a/web/src/features/search/table/table.tsx b/web/src/features/search/table/table.tsx
new file mode 100755
index 0000000..c10b26f
--- /dev/null
+++ b/web/src/features/search/table/table.tsx
@@ -0,0 +1,163 @@
+//
+// Copyright (c) 2025 rustmailer.com (https://rustmailer.com)
+//
+// This file is part of the Bichon Email Archiving Project
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+
+import { useState, MouseEvent as ReactMouseEvent, useEffect } from 'react'
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ Row,
+ RowData,
+ flexRender,
+ getCoreRowModel,
+ getFacetedRowModel,
+ getFacetedUniqueValues,
+ getFilteredRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from '@tanstack/react-table'
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/components/ui/table'
+import { useTranslation } from 'react-i18next'
+import { EmailEnvelope } from '@/api'
+import { cn } from '@/lib/utils'
+import { useSearchContext } from '../context'
+
+declare module '@tanstack/react-table' {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ interface ColumnMeta {
+ className: string
+ }
+}
+
+interface DataTableProps {
+ columns: ColumnDef[]
+ data: EmailEnvelope[]
+ onRowClick: (e: ReactMouseEvent, row: Row) => void
+ setSortBy: (sortBy: "DATE" | "SIZE") => void
+ setSortOrder: (value: "desc" | "asc") => void
+}
+
+export function SearchTable({ columns, data, onRowClick, setSortBy, setSortOrder }: DataTableProps) {
+ const { sorting, setSorting, columnVisibility, setColumnVisibility } = useSearchContext()
+ const { t } = useTranslation()
+ const [rowSelection, setRowSelection] = useState({})
+ const [columnFilters, setColumnFilters] = useState([])
+
+ useEffect(() => {
+ const [value] = sorting
+ setSortBy(value.id.toUpperCase() as "DATE" | "SIZE")
+ setSortOrder(value.desc ? "desc" : "asc")
+ }, [sorting])
+
+ const table = useReactTable({
+ data,
+ columns,
+ state: {
+ sorting,
+ columnVisibility,
+ rowSelection,
+ columnFilters,
+ },
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ onColumnVisibilityChange: setColumnVisibility,
+ getCoreRowModel: getCoreRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFacetedRowModel: getFacetedRowModel(),
+ getFacetedUniqueValues: getFacetedUniqueValues(),
+ })
+
+ return (
+