feat(i18n): Implement internationalization for date distance

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

@@ -17,7 +17,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
-import { cn, formatBytes } from "@/lib/utils"
+import { cn, dateFnsLocaleMap, formatBytes } from "@/lib/utils"
 import { formatDistanceToNow } from "date-fns"
 import { MailIcon, MoreVertical, Paperclip, TagIcon, Trash2 } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -29,6 +29,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { useTranslation } from 'react-i18next'
+import { enUS } from "date-fns/locale"
 
 interface MailListProps {
     items: EmailEnvelope[]
@@ -41,7 +42,9 @@ export function MailList({
     isLoading,
     onEnvelopeChanged
 }: MailListProps) {
-    const { t } = useTranslation()
+    const { t, i18n } = useTranslation()
+
+    const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS;
     const { setOpen, currentEnvelope, setCurrentEnvelope, selected, setSelected, setToDelete } = useSearchContext()
 
     const handleToggleAll = () => {
@@ -212,7 +215,7 @@ export function MailList({
                                 <span className="hidden md:inline">{formatBytes(item.size)}</span>
 
                                 <span className={cn(isSelectedRow ? "text-foreground font-medium" : "text-muted-foreground")}>
-                                    {item.date && formatDistanceToNow(new Date(item.date), { addSuffix: true })}
+                                    {item.date && formatDistanceToNow(new Date(item.date), { addSuffix: true, locale })}
                                 </span>
 
                                 <DropdownMenu>