From ae977fbde77cd5e0ee2ae8f0404962d7edd1b412 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 18 Jan 2026 22:34:08 +0100
Subject: [PATCH] Clean mobile filters

---
 web/components/filters/age-filter.tsx         |  2 +-
 web/components/filters/desktop-filters.tsx    | 92 +++++++++----------
 web/components/filters/gender-filter.tsx      |  2 +-
 web/components/filters/has-kids-filter.tsx    |  2 +-
 web/components/filters/location-filter.tsx    |  6 +-
 web/components/filters/mobile-filters.tsx     | 67 +++++++++-----
 web/components/filters/pref-gender-filter.tsx |  4 +-
 web/components/filters/wants-kids-filter.tsx  |  2 +-
 web/messages/de.json                          |  1 +
 web/messages/fr.json                          |  1 +
 10 files changed, 99 insertions(+), 80 deletions(-)

diff --git a/web/components/filters/age-filter.tsx b/web/components/filters/age-filter.tsx
index 11ab7a8..1ffc387 100644
--- a/web/components/filters/age-filter.tsx
+++ b/web/components/filters/age-filter.tsx
@@ -28,7 +28,7 @@ export function AgeFilterText(props: {
     return (
       <span>
         <span className={clsx('text-semibold', highlightedClass)}>{t('filter.age.any', 'Any')}</span>{' '}
-        <span className="hidden sm:inline">{t('filter.age.age', 'age')}</span>
+        <span className="">{t('filter.age.age', 'age')}</span>
       </span>
     )
   }
diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx
index 0b136da..c94a899 100644
--- a/web/components/filters/desktop-filters.tsx
+++ b/web/components/filters/desktop-filters.tsx
@@ -14,7 +14,6 @@ import {MyMatchesToggle} from './my-matches-toggle'
 import {Profile} from 'common/profiles/profile'
 import {FilterFields} from "common/filters";
 import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
-import {PrefGenderFilter, PrefGenderFilterText} from "web/components/filters/pref-gender-filter";
 import DropdownMenu from "web/components/comments/dropdown-menu";
 import {KidsLabel, useWantsKidsLabelsWithIcon} from "web/components/filters/wants-kids-filter";
 import {hasKidsLabels} from "common/has-kids";
@@ -218,25 +217,25 @@ export function DesktopFilters(props: {
       />
 
       {/* GENDER THEY SEEK */}
-      <CustomizeableDropdown
-        buttonContent={(open: boolean) => (
-          <DropdownButton
-            content={
-              <PrefGenderFilterText
-                pref_gender={filters.pref_gender as Gender[]}
-                highlightedClass={open ? 'text-primary-500' : undefined}
-              />
-            }
-            open={open}
-          />
-        )}
-        dropdownMenuContent={
-          <Col>
-            <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-      />
+      {/*<CustomizeableDropdown*/}
+      {/*  buttonContent={(open: boolean) => (*/}
+      {/*    <DropdownButton*/}
+      {/*      content={*/}
+      {/*        <PrefGenderFilterText*/}
+      {/*          pref_gender={filters.pref_gender as Gender[]}*/}
+      {/*          highlightedClass={open ? 'text-primary-500' : undefined}*/}
+      {/*        />*/}
+      {/*      }*/}
+      {/*      open={open}*/}
+      {/*    />*/}
+      {/*  )}*/}
+      {/*  dropdownMenuContent={*/}
+      {/*    <Col>*/}
+      {/*      <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>*/}
+      {/*    </Col>*/}
+      {/*  }*/}
+      {/*  popoverClassName="bg-canvas-50"*/}
+      {/*/>*/}
 
       {includeRelationshipFilters && <>
 
@@ -413,6 +412,31 @@ export function DesktopFilters(props: {
         menuWidth="w-80"
       />
 
+      {/* SMOKER */}
+      <CustomizeableDropdown
+        buttonContent={(open) => (
+          <DropdownButton
+            open={open}
+            content={
+              <Row className="items-center gap-1">
+                <LuCigarette className="h-4 w-4"/>
+                <SmokerFilterText
+                  is_smoker={filters.is_smoker}
+                  highlightedClass={open ? 'text-primary-500' : undefined}
+                />
+              </Row>
+            }
+          />
+        )}
+        dropdownMenuContent={
+          <Col className="mx-2 mb-4">
+            <SmokerFilter filters={filters} updateFilter={updateFilter}/>
+          </Col>
+        }
+        popoverClassName="bg-canvas-50"
+        menuWidth="w-50"
+      />
+
       {/* LANGUAGES */}
       <CustomizeableDropdown
         buttonContent={(open) => (
@@ -442,7 +466,6 @@ export function DesktopFilters(props: {
 
       {/* Interests */}
       <CustomizeableDropdown
-        showNewBadge
         newBadgeClassName={"-top-3 -left-2"}
         buttonContent={(open) => (
           <DropdownButton
@@ -477,7 +500,6 @@ export function DesktopFilters(props: {
 
       {/* Causes */}
       <CustomizeableDropdown
-        showNewBadge
         newBadgeClassName={"-top-3 -left-2"}
         buttonContent={(open) => (
           <DropdownButton
@@ -512,7 +534,6 @@ export function DesktopFilters(props: {
 
       {/* Work */}
       <CustomizeableDropdown
-        showNewBadge
         newBadgeClassName={"-top-3 -left-2"}
         buttonContent={(open) => (
           <DropdownButton
@@ -627,31 +648,6 @@ export function DesktopFilters(props: {
         menuWidth="w-[350px] grid-cols-2"
       />
 
-      {/* SMOKER */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <LuCigarette className="h-4 w-4"/>
-                <SmokerFilterText
-                  is_smoker={filters.is_smoker}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <Col className="mx-2 mb-4">
-            <SmokerFilter filters={filters} updateFilter={updateFilter}/>
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
       {/* EDUCATION */}
       <CustomizeableDropdown
         buttonContent={(open: boolean) => (
diff --git a/web/components/filters/gender-filter.tsx b/web/components/filters/gender-filter.tsx
index 781bfc0..adf9294 100644
--- a/web/components/filters/gender-filter.tsx
+++ b/web/components/filters/gender-filter.tsx
@@ -18,7 +18,7 @@ export function GenderFilterText(props: {
     return (
       <span>
         <span className={clsx('text-semibold', highlightedClass)}>{t('filter.gender.any', 'Any')}</span>{' '}
-        <span className="hidden sm:inline">{t('filter.gender.gender', 'gender')}</span>
+        <span className="">{t('filter.gender.gender', 'gender')}</span>
       </span>
     )
   }
diff --git a/web/components/filters/has-kids-filter.tsx b/web/components/filters/has-kids-filter.tsx
index d1535e7..fc610b4 100644
--- a/web/components/filters/has-kids-filter.tsx
+++ b/web/components/filters/has-kids-filter.tsx
@@ -28,7 +28,7 @@ export function HasKidsLabel(props: {
   }
   return (
     <Row className="items-center gap-0.5">
-      <FaChild className="hidden h-4 w-4 sm:inline"/>
+      <FaChild className="h-4 w-4"/>
       <span
         className={clsx(highlightedClass, has_kids !== -1 && 'font-semibold')}
       >
diff --git a/web/components/filters/location-filter.tsx b/web/components/filters/location-filter.tsx
index f2d6829..af381e0 100644
--- a/web/components/filters/location-filter.tsx
+++ b/web/components/filters/location-filter.tsx
@@ -26,16 +26,16 @@ export function LocationFilterText(props: {
     return (
       <span>
         <span className={clsx('text-semibold', highlightedClass)}>{t('filter.location.any', 'Any')}</span>
-        <span className="hidden sm:inline"> {t('filter.location', 'location')}</span>
+        <span className=""> {t('filter.location', 'location')}</span>
       </span>
     )
   }
   return (
     <span className="font-semibold">
-      <span className="hidden sm:inline">
+      <span className="">
         <span className={clsx(highlightedClass)}>{radius}</span> miles
       </span>{' '}
-      <span className="capitalize sm:normal-case">near</span>{' '}
+      <span className="sm:normal-case">{t('filter.near', 'near')}</span>{' '}
       <span className={highlightedClass}>{location.name}</span>
     </span>
   )
diff --git a/web/components/filters/mobile-filters.tsx b/web/components/filters/mobile-filters.tsx
index 7aa8f28..988456b 100644
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -13,7 +13,6 @@ import {Gender} from 'common/gender'
 import {DietType, RelationshipType, RomanticType} from 'web/lib/util/convert-types'
 import {FilterFields} from "common/filters";
 import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
-import {PrefGenderFilter, PrefGenderFilterText} from "./pref-gender-filter"
 import {KidsLabel, WantsKidsFilter} from "web/components/filters/wants-kids-filter";
 import {wantsKidsLabels} from "common/wants-kids";
 import {HasKidsFilter, HasKidsLabel} from "./has-kids-filter"
@@ -35,6 +34,14 @@ import {InterestFilter, InterestFilterText} from "web/components/filters/interes
 import {OptionTableKey} from "common/profiles/constants";
 import {NewBadge} from "web/components/new-badge";
 import {useT} from "web/lib/locale";
+import {FaUserGroup} from "react-icons/fa6";
+import {BsPersonHeart, BsPersonVcard} from "react-icons/bs";
+import {FaBriefcase, FaHandsHelping, FaHeart, FaStar} from "react-icons/fa";
+import {GiFruitBowl} from "react-icons/gi";
+import {MdLanguage, MdLocalBar} from "react-icons/md";
+import {LuCigarette, LuGraduationCap} from "react-icons/lu";
+import {RiScales3Line} from "react-icons/ri";
+import {PiHandsPrayingBold} from "react-icons/pi";
 
 function MobileFilters(props: {
   filters: Partial<FilterFields>
@@ -106,12 +113,13 @@ function MobileFilters(props: {
         />
       </Col>
 
-      {/* RELATIONSHIP STYLE */}
+      {/* CONNECTION */}
       <MobileFilterSection
         title={t('profile.seeking', "Seeking")}
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.pref_relation_styles)}
+        icon={<FaUserGroup className="h-4 w-4"/>}
         selection={
           <RelationshipFilterText
             relationship={filters.pref_relation_styles as RelationshipType[]}
@@ -132,9 +140,11 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.relationship_status || undefined)}
+        icon={<BsPersonHeart className="h-4 w-4"/>}
         selection={
           <RelationshipStatusFilterText
             options={filters.relationship_status as string[]}
+            defaultLabel={t('filter.relationship_status.any', 'Any relationship status')}
             highlightedClass={
               hasAny(filters.relationship_status || undefined)
                 ? 'text-primary-600'
@@ -210,22 +220,22 @@ function MobileFilters(props: {
       </MobileFilterSection>
 
       {/* PREFERRED GENDER */}
-      <MobileFilterSection
-        title={t('filter.gender.they_seek', 'Gender they seek')}
-        openFilter={openFilter}
-        setOpenFilter={setOpenFilter}
-        isActive={hasAny(filters.pref_gender)}
-        selection={
-          <PrefGenderFilterText
-            pref_gender={filters.pref_gender as Gender[]}
-            highlightedClass={
-              hasAny(filters.pref_gender) ? 'text-primary-600' : 'text-ink-900'
-            }
-          />
-        }
-      >
-        <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>
-      </MobileFilterSection>
+      {/*<MobileFilterSection*/}
+      {/*  title={t('filter.gender.they_seek', 'Gender they seek')}*/}
+      {/*  openFilter={openFilter}*/}
+      {/*  setOpenFilter={setOpenFilter}*/}
+      {/*  isActive={hasAny(filters.pref_gender)}*/}
+      {/*  selection={*/}
+      {/*    <PrefGenderFilterText*/}
+      {/*      pref_gender={filters.pref_gender as Gender[]}*/}
+      {/*      highlightedClass={*/}
+      {/*        hasAny(filters.pref_gender) ? 'text-primary-600' : 'text-ink-900'*/}
+      {/*      }*/}
+      {/*    />*/}
+      {/*  }*/}
+      {/*>*/}
+      {/*  <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>*/}
+      {/*</MobileFilterSection>*/}
 
       {includeRelationshipFilters && <>
 
@@ -235,6 +245,7 @@ function MobileFilters(props: {
               openFilter={openFilter}
               setOpenFilter={setOpenFilter}
               isActive={hasAny(filters.pref_romantic_styles || undefined)}
+              icon={<FaHeart className="h-4 w-4"/>}
               selection={
                 <RomanticFilterText
                   relationship={filters.pref_romantic_styles as RomanticType[]}
@@ -305,6 +316,7 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.diet || undefined)}
+        icon={<GiFruitBowl className="h-4 w-4"/>}
         selection={
           <DietFilterText
             options={filters.diet as DietType[]}
@@ -328,6 +340,7 @@ function MobileFilters(props: {
           const [noMin, noMax] = getNoMinMaxDrinks(filters.drinks_min, filters.drinks_max);
           return !noMin || !noMax
         })()}
+        icon={<MdLocalBar className="h-4 w-4"/>}
         selection={
           <DrinksFilterText
             drinks_min={filters.drinks_min}
@@ -348,6 +361,7 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={filters.is_smoker != null}
+        icon={<LuCigarette className="h-4 w-4"/>}
         selection={
           <SmokerFilterText
             is_smoker={filters.is_smoker}
@@ -366,6 +380,7 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.languages || undefined)}
+        icon={<MdLanguage className="h-4 w-4"/>}
         selection={
           <LanguageFilterText
             options={filters.languages as string[]}
@@ -382,12 +397,12 @@ function MobileFilters(props: {
 
       {/* INTERESTS */}
       <MobileFilterSection
-        showNewBadge
         newBadgeClassName={"-top-0 -left-0"}
         title={t("profile.optional.interests", "Interests")}
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.interests || undefined)}
+        icon={<FaStar className="h-4 w-4"/>}
         selection={
           <InterestFilterText
             options={filters.interests as string[]}
@@ -410,12 +425,12 @@ function MobileFilters(props: {
 
       {/* CAUSES */}
       <MobileFilterSection
-        showNewBadge
         newBadgeClassName={"-top-0 -left-0"}
         title={t("profile.optional.causes", "Causes")}
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.causes || undefined)}
+        icon={<FaHandsHelping className="h-4 w-4"/>}
         selection={
           <InterestFilterText
             options={filters.causes as string[]}
@@ -438,12 +453,12 @@ function MobileFilters(props: {
 
       {/* WORK */}
       <MobileFilterSection
-        showNewBadge
         newBadgeClassName={"-top-0 -left-0"}
         title={t("profile.optional.work", "Work")}
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.work || undefined)}
+        icon={<FaBriefcase className="h-4 w-4"/>}
         selection={
           <InterestFilterText
             options={filters.work as string[]}
@@ -470,6 +485,7 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.political_beliefs || undefined)}
+        icon={<RiScales3Line className="h-4 w-4"/>}
         selection={
           <PoliticalFilterText
             options={filters.political_beliefs as string[]}
@@ -490,6 +506,7 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.religion || undefined)}
+        icon={<PiHandsPrayingBold className="h-4 w-4"/>}
         selection={
           <ReligionFilterText
             options={filters.religion as string[]}
@@ -508,12 +525,14 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.mbti)}
+        icon={<BsPersonVcard className="h-4 w-4"/>}
         selection={
           <MbtiFilterText
             options={filters.mbti as string[]}
             highlightedClass={
               hasAny(filters.mbti) ? 'text-primary-600' : 'text-ink-900'
             }
+            defaultLabel={t('filter.any_mbti', 'Any MBTI')}
           />
         }
       >
@@ -526,6 +545,7 @@ function MobileFilters(props: {
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
         isActive={hasAny(filters.education_levels)}
+        icon={<LuGraduationCap className="h-4 w-4"/>}
         selection={
           <EducationFilterText
             options={filters.education_levels as string[]}
@@ -585,10 +605,11 @@ export function MobileFilterSection(props: {
       >
         {showNewBadge && <NewBadge classes={newBadgeClassName}/>}
         <Row
-          className={clsx('items-center gap-0.5', isActive && 'font-semibold')}
+          className={clsx('items-center gap-2', isActive && 'font-semibold')}
         >
           {icon}
-          {title}: {selection}
+          {selection}
+          {/*{title}: {selection}*/}
         </Row>
         <div className="text-ink-900">
           {isOpen ? (
diff --git a/web/components/filters/pref-gender-filter.tsx b/web/components/filters/pref-gender-filter.tsx
index 69cb3a9..99cd4bf 100644
--- a/web/components/filters/pref-gender-filter.tsx
+++ b/web/components/filters/pref-gender-filter.tsx
@@ -17,7 +17,7 @@ export function PrefGenderFilterText(props: {
   if (!pref_gender || pref_gender.length < 1) {
     return (
       <span>
-        <span className="hidden sm:inline">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
+        <span className="">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
         <span
           className={clsx(
             'text-semibold capitalize sm:normal-case',
@@ -31,7 +31,7 @@ export function PrefGenderFilterText(props: {
   }
   return (
     <Row className="items-center gap-0.5 font-semibold">
-      <span className="hidden sm:inline">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
+      <span className="">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
       {pref_gender.map((gender) => {
         return (
           <GenderIcon
diff --git a/web/components/filters/wants-kids-filter.tsx b/web/components/filters/wants-kids-filter.tsx
index 85dff29..e2a48b4 100644
--- a/web/components/filters/wants-kids-filter.tsx
+++ b/web/components/filters/wants-kids-filter.tsx
@@ -66,7 +66,7 @@ export function KidsLabel(props: {
 
   return (
     <Row className="items-center gap-0.5">
-      <WantsKidsIcon strength={strength} className={clsx('hidden sm:inline')}/>
+      <WantsKidsIcon strength={strength} className={clsx('')}/>
       <span
         className={clsx(
           strength != wantsKidsLabelsWithIcon.no_preference.strength && 'font-semibold',
diff --git a/web/messages/de.json b/web/messages/de.json
index 086db85..98a57a7 100644
--- a/web/messages/de.json
+++ b/web/messages/de.json
@@ -207,6 +207,7 @@
   "filter.gender.genders": "Geschlechter",
   "filter.gender.they_seek": "Geschlecht, das sie suchen",
   "filter.location": "Standort",
+  "filter.near": "in der Nähe von",
   "filter.location.any": "Jeder",
   "filter.location.distance_miles": "Entfernung (Meilen)",
   "filter.location.search_city": "Stadt suchen...",
diff --git a/web/messages/fr.json b/web/messages/fr.json
index cfa3618..f2ac1b8 100644
--- a/web/messages/fr.json
+++ b/web/messages/fr.json
@@ -207,6 +207,7 @@
   "filter.gender.genders": "genres",
   "filter.gender.they_seek": "Genre qu'ils recherchent",
   "filter.location": "localisation",
+  "filter.near": "près de",
   "filter.location.any": "Toute",
   "filter.location.distance_miles": "Distance (miles)",
   "filter.location.search_city": "Rechercher une ville...",