Replaced email listing with a table with adjustable columns.

web/src/components/pagination.tsx

@@ -24,6 +24,7 @@ import {
   DoubleArrowRightIcon,
 } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -33,6 +34,7 @@ import {
 } from '@/components/ui/select'
 import { useTranslation } from 'react-i18next'
 import { showNumbers } from '@/lib/utils'
+import { useEffect, useState } from 'react';
 
 interface PaginationProps {
   totalItems: number
@@ -52,8 +54,13 @@ export function EnvelopeListPagination({
   setPageSize,
 }: PaginationProps) {
   const { t } = useTranslation()
+  const [pageInput, setPageInput] = useState(pageIndex + 1);
   const pageCount = Math.ceil(totalItems / pageSize)
 
+  useEffect(() => {
+    setPageInput(pageIndex + 1)
+  }, [pageIndex])
+
   const handlePageSizeChange = (value: string) => {
     const newPageSize = Number(value)
     setPageSize(newPageSize)
@@ -97,7 +104,16 @@ export function EnvelopeListPagination({
           </Select>
         </div>
         <div className='flex items-center justify-center text-sm font-medium'>
-          {t("table.page")} {pageIndex + 1} {t("table.of")} {pageCount}
+          {t("table.page")}
+          <Input type="number" value={pageInput} onBlur={() => {
+            if (Number.isNaN(pageInput)) return;
+            if (pageInput > 0) setPageIndex(pageInput - 1);
+            else setPageIndex(0);
+          }}
+          onChange={(e) => setPageInput(Number(e.target.value))}
+          className='mx-2 w-20'
+          />
+          {t("table.of")} {pageCount}
         </div>
         <div className='flex items-center space-x-2'>
           <Button

web/src/components/ui/scroll-area.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 
 interface ScrollAreaProps
   extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
-  orientation?: 'horizontal' | 'vertical'
+  orientation?: 'horizontal' | 'vertical' | 'both'
 }
 
 const ScrollArea = React.forwardRef<
@@ -24,7 +24,12 @@ const ScrollArea = React.forwardRef<
     >
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar orientation={orientation} />
+    {orientation === "both" ? (
+      <>
+        <ScrollBar orientation="vertical" />
+        <ScrollBar orientation="horizontal" />
+      </>
+    ) : <ScrollBar orientation={orientation} />}
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ))