From 7e4f6064920aacd6420693fe9077a96b2a9e780a Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sat, 25 Oct 2025 14:36:55 +0200
Subject: [PATCH] Improve filter formatting for politics and religion

---
 web/components/filters/desktop-filters.tsx  |  2 +-
 web/components/filters/mobile-filters.tsx   |  2 +-
 web/components/filters/political-filter.tsx | 15 ++++++++-------
 web/components/filters/religion-filter.tsx  | 10 ++++++++++
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx
index c8046e19..ea8a5612 100644
--- a/web/components/filters/desktop-filters.tsx
+++ b/web/components/filters/desktop-filters.tsx
@@ -366,7 +366,7 @@ export function DesktopFilters(props: {
                 <PoliticalFilterText
                   options={
                     filters.political_beliefs as
-                      | PoliticalType[]
+                      | string[]
                       | undefined
                   }
                   highlightedClass={open ? 'text-primary-500' : undefined}
diff --git a/web/components/filters/mobile-filters.tsx b/web/components/filters/mobile-filters.tsx
index d1878b05..02713f2d 100644
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -318,7 +318,7 @@ function MobileFilters(props: {
         isActive={hasAny(filters.political_beliefs || undefined)}
         selection={
           <PoliticalFilterText
-            options={filters.political_beliefs as PoliticalType[]}
+            options={filters.political_beliefs as string[]}
             highlightedClass={
               hasAny(filters.political_beliefs || undefined)
                 ? 'text-primary-600'
diff --git a/web/components/filters/political-filter.tsx b/web/components/filters/political-filter.tsx
index 4bc5c164..c0e4212d 100644
--- a/web/components/filters/political-filter.tsx
+++ b/web/components/filters/political-filter.tsx
@@ -1,13 +1,14 @@
 import clsx from 'clsx'
-import {convertPoliticalTypes, PoliticalType,} from 'web/lib/util/convert-types'
+import {convertPoliticalTypes,} from 'web/lib/util/convert-types'
 import stringOrStringArrayToText from 'web/lib/util/string-or-string-array-to-text'
 import {MultiCheckbox} from 'web/components/multi-checkbox'
 
 import {POLITICAL_CHOICES} from "web/components/filters/choices";
 import {FilterFields} from "common/filters";
+import {getSortedOptions} from "common/util/sorting";
 
 export function PoliticalFilterText(props: {
-  options: PoliticalType[] | undefined
+  options: string[] | undefined
   highlightedClass?: string
 }) {
   const {options, highlightedClass} = props
@@ -19,11 +20,7 @@ export function PoliticalFilterText(props: {
     )
   }
 
-  const convertedTypes = options.map((r) =>
-    convertPoliticalTypes(r)
-  )
-
-  if (length > 1) {
+  if (length > 2) {
     return (
       <span>
         <span className={clsx('font-semibold', highlightedClass)}>
@@ -32,6 +29,10 @@ export function PoliticalFilterText(props: {
       </span>
     )
   }
+
+  const sortedOptions = getSortedOptions(options, POLITICAL_CHOICES)
+  const convertedTypes = sortedOptions.map((r) => convertPoliticalTypes(r as any))
+
   return (
     <div>
       <span className={clsx('font-semibold', highlightedClass)}>
diff --git a/web/components/filters/religion-filter.tsx b/web/components/filters/religion-filter.tsx
index 81da1305..ec0c937e 100644
--- a/web/components/filters/religion-filter.tsx
+++ b/web/components/filters/religion-filter.tsx
@@ -21,6 +21,16 @@ export function ReligionFilterText(props: {
     )
   }
 
+  if (length > 2) {
+    return (
+      <span>
+        <span className={clsx('font-semibold', highlightedClass)}>
+          Multiple
+        </span>
+      </span>
+    )
+  }
+
   const sortedOptions = getSortedOptions(options, RELIGION_CHOICES)
   const convertedTypes = sortedOptions.map((r) => convertReligionTypes(r as any))