Translate filter for last online

common/messages/de.json

@@ -351,6 +351,13 @@
   "filter.raised_in": "Aufgewachsen",
   "filter.relationship.any_connection": "Jede Beziehung",
   "filter.relationship_status.any": "Jeder romantische Status",
+  "filter.last_active.any": "Jederzeit",
+  "filter.last_active.label": "Aktiv",
+  "filter.last_active.today": "Heute",
+  "filter.last_active.3days": "Letzte 3 Tage",
+  "filter.last_active.week": "Letzte Woche",
+  "filter.last_active.month": "Letzter Monat",
+  "filter.last_active.3months": "Letzte 3 Monate",
   "filter.reset": "Zurücksetzen",
   "filter.short_bio_toggle": "Kurze Bios einschließen",
   "filter.wants_kids.any_preference": "Alle Präferenzen",

common/messages/fr.json

@@ -351,6 +351,13 @@
   "filter.raised_in": "A grandi",
   "filter.relationship.any_connection": "Toute relation",
   "filter.relationship_status.any": "Tout statut romantique",
+  "filter.last_active.any": "N'importe quand",
+  "filter.last_active.label": "Actif",
+  "filter.last_active.today": "Aujourd'hui",
+  "filter.last_active.3days": "3 derniers jours",
+  "filter.last_active.week": "Dernière semaine",
+  "filter.last_active.month": "Dernier mois",
+  "filter.last_active.3months": "3 derniers mois",
   "filter.reset": "Réinitialiser",
   "filter.short_bio_toggle": "Inclure les profils incomplets",
   "filter.wants_kids.any_preference": "Toutes préférences",

common/src/choices.ts

@@ -227,12 +227,12 @@ export const GENDERS_PLURAL = {
 }
 
 export const LAST_ONLINE_CHOICES = {
-  Today: 'today',
-  'Last 3 days': '3days',
-  'Last week': 'week',
-  'Last month': 'month',
-  'Last 3 months': '3months',
-  'Any time': 'any',
+  today: 'Today',
+  '3days': 'Last 3 days',
+  week: 'Last week',
+  month: 'Last month',
+  '3months': 'Last 3 months',
+  any: 'Any time',
 }
 
 export const INVERTED_RELATIONSHIP_CHOICES = invert(RELATIONSHIP_CHOICES)

web/components/filters/last-active-filter.tsx

@@ -1,21 +1,25 @@
 import clsx from 'clsx'
-import {INVERTED_LAST_ONLINE_CHOICES, LAST_ONLINE_CHOICES} from 'common/choices'
+import {LAST_ONLINE_CHOICES} from 'common/choices'
 import {FilterFields} from 'common/filters'
+import {toKey} from 'common/parsing'
 import {Row} from 'web/components/layout/row'
 import {useT} from 'web/lib/locale'
 
 import {Col} from '../layout/col'
 
+const DEFAULT_KEY = 'any'
+
 export function LastActiveFilterText(props: {
   last_active: string | undefined
   highlightedClass?: string
 }) {
   const {last_active, highlightedClass} = props
   const t = useT()
-  const option = Object.values(LAST_ONLINE_CHOICES).find((opt) => opt === last_active)
-  const label =
-    INVERTED_LAST_ONLINE_CHOICES[option ?? ''] ?? t('filter.last_active.any', 'Any time')
-
+  const key =
+    (Object.keys(LAST_ONLINE_CHOICES) as Array<keyof typeof LAST_ONLINE_CHOICES>).find(
+      (opt) => opt === last_active,
+    ) ?? DEFAULT_KEY
+  const label = t(`filter.last_active.${key}`, LAST_ONLINE_CHOICES[key])
   return (
     <Row className="items-center gap-0.5">
       <span className={highlightedClass}>
@@ -34,10 +38,11 @@ export function LastActiveFilter(props: {
 
   return (
     <DropdownOptions
-      items={INVERTED_LAST_ONLINE_CHOICES}
-      activeKey={filters.last_active || 'any'}
+      items={LAST_ONLINE_CHOICES}
+      activeKey={filters.last_active || DEFAULT_KEY}
+      translationPrefix={'filter.last_active'}
       onClick={(option) => {
-        updateFilter({last_active: option === 'any' ? undefined : option})
+        updateFilter({last_active: option === DEFAULT_KEY ? undefined : option})
         close?.()
       }}
     />
@@ -48,8 +53,17 @@ export function DropdownOptions(props: {
   items: Record<string, any>
   onClick: (item: any) => void
   activeKey: string
+  translationPrefix?: string
 }) {
-  const {items, onClick, activeKey} = props
+  const {items, onClick, activeKey, translationPrefix} = props
+
+  const t = useT()
+
+  const translateOption = (key: string, value: string) => {
+    if (!translationPrefix) return value
+    return t(`${translationPrefix}.${toKey(key)}`, value)
+  }
+
   return (
     <Col className={'w-[150px]'}>
       {Object.entries(items).map(([key, item]) => (
@@ -67,7 +81,7 @@ export function DropdownOptions(props: {
             )}
           >
             {item.icon && <div className="w-5">{item.icon}</div>}
-            {item.label ?? item}
+            {translateOption(key, item.label ?? item)}
           </button>
         </div>
       ))}