Add bilingual i18n UI and lighten component shadows

client/src/lib/utils.ts

@@ -10,46 +10,48 @@ export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs))
 }
 
-export function formatCoordinate(value: number): string {
-  const formatter = new Intl.NumberFormat('en-US', {
+export function formatCoordinate(value: number, locale = 'en-US'): string {
+  const formatter = new Intl.NumberFormat(locale, {
     minimumFractionDigits: 3,
     maximumFractionDigits: 3,
   })
   return formatter.format(value)
 }
 
-export function formatRelativeTime(dateIso: string): string {
+export function formatRelativeTime(dateIso: string, locale = 'en-US'): string {
   const date = new Date(dateIso)
   const now = new Date()
   const diff = Math.max(0, now.getTime() - date.getTime())
 
   const seconds = Math.floor(diff / 1000)
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
   if (seconds < 60) {
-    return `${seconds}s ago`
+    return rtf.format(-seconds, 'second')
   }
 
   const minutes = Math.floor(seconds / 60)
   if (minutes < 60) {
-    return `${minutes}m ago`
+    return rtf.format(-minutes, 'minute')
   }
 
   const hours = Math.floor(minutes / 60)
   if (hours < 24) {
-    return `${hours}h ago`
+    return rtf.format(-hours, 'hour')
   }
 
   const days = Math.floor(hours / 24)
   if (days < 7) {
-    return `${days}d ago`
+    return rtf.format(-days, 'day')
   }
 
   const weeks = Math.floor(days / 7)
-  return `${weeks}w ago`
+  return rtf.format(-weeks, 'week')
 }
 
-export function formatTimestamp(dateIso: string): string {
+export function formatTimestamp(dateIso: string, locale = 'en-US'): string {
   const date = new Date(dateIso)
-  return new Intl.DateTimeFormat('en-US', {
+  return new Intl.DateTimeFormat(locale, {
     month: 'short',
     day: 'numeric',
     hour: 'numeric',