From ed20465e3ea3d127c1c7cb4ea29ca5a7fed75948 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sat, 6 Jun 2026 14:18:21 +0200
Subject: [PATCH] Move relationship style (like monogamous) from the seeking
 text to chips below

---
 web/components/profile-about.tsx | 21 ++++++++++++++++++++-
 web/lib/profile/seeking.ts       | 23 +++++++++++------------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/web/components/profile-about.tsx b/web/components/profile-about.tsx
index 2a858647..d6dc8631 100644
--- a/web/components/profile-about.tsx
+++ b/web/components/profile-about.tsx
@@ -11,6 +11,7 @@ import {
   INVERTED_PSYCHEDELICS_CHOICES,
   INVERTED_RELATIONSHIP_STATUS_CHOICES,
   INVERTED_RELIGION_CHOICES,
+  INVERTED_ROMANTIC_CHOICES,
   INVERTED_SUBSTANCE_INTENTION_CHOICES,
   MBTI_TYPE_NAMES,
   SUBSTANCE_PREFERENCE_ABOUT,
@@ -190,6 +191,7 @@ function SeekingAndRelationship(props: {profile: Profile}) {
   const {profile} = props
   const seekingText = getSeekingText(profile, t)
   const relationship_status = profile.relationship_status ?? []
+  const relationshipTypes = profile.pref_relation_styles ?? []
 
   if (relationship_status.length === 0 && !seekingText) return null
 
@@ -203,6 +205,13 @@ function SeekingAndRelationship(props: {profile: Profile}) {
         )
       : null
 
+  let romanticStyles: string[] | undefined
+  if (relationshipTypes?.includes('relationship')) {
+    romanticStyles = profile.pref_romantic_styles
+      ?.map((style) => t(`profile.romantic.${style}`, INVERTED_ROMANTIC_CHOICES[style]))
+      .filter(Boolean)
+  }
+
   // const key = relationship_status[0] as keyof typeof RELATIONSHIP_ICONS
   // const icon = RELATIONSHIP_ICONS[key] ?? FaHeart
 
@@ -212,7 +221,17 @@ function SeekingAndRelationship(props: {profile: Profile}) {
       title={t('profile.connection_goals', 'Connection Goals')}
       text={seekingText}
       details={relationshipText}
-    />
+    >
+      {romanticStyles && (
+        <div className="flex flex-wrap gap-2 mt-2">
+          {romanticStyles!.map((r) => (
+            <Chip key={r} variant="muted">
+              {r}
+            </Chip>
+          ))}
+        </div>
+      )}
+    </AboutRow>
   )
 }
 
diff --git a/web/lib/profile/seeking.ts b/web/lib/profile/seeking.ts
index 6c3ccf25..513738c2 100644
--- a/web/lib/profile/seeking.ts
+++ b/web/lib/profile/seeking.ts
@@ -1,4 +1,3 @@
-import {INVERTED_ROMANTIC_CHOICES} from 'common/choices'
 import {Profile} from 'common/profiles/profile'
 import {capitalize} from 'lodash'
 import {convertRelationshipType, RelationshipType} from 'web/lib/util/convert-types'
@@ -6,7 +5,7 @@ import stringOrStringArrayToText from 'web/lib/util/string-or-string-array-to-te
 
 export function getSeekingConnectionText(profile: Profile, t: any, _short?: boolean) {
   const relationshipTypes = profile.pref_relation_styles
-  let seekingGenderText = stringOrStringArrayToText({
+  const seekingGenderText = stringOrStringArrayToText({
     text: relationshipTypes?.length
       ? relationshipTypes
           .map((rel) =>
@@ -22,15 +21,15 @@ export function getSeekingConnectionText(profile: Profile, t: any, _short?: bool
     capitalizeFirstLetterOption: false,
     t: t,
   })
-  if (relationshipTypes?.includes('relationship')) {
-    const romanticStyles = profile.pref_romantic_styles
-      ?.map((style) =>
-        t(`profile.romantic.${style}`, INVERTED_ROMANTIC_CHOICES[style]).toLowerCase(),
-      )
-      .filter(Boolean)
-    if (romanticStyles && romanticStyles.length > 0) {
-      seekingGenderText += ` (${romanticStyles.join(', ')})`
-    }
-  }
+  // if (relationshipTypes?.includes('relationship')) {
+  //   const romanticStyles = profile.pref_romantic_styles
+  //     ?.map((style) =>
+  //       t(`profile.romantic.${style}`, INVERTED_ROMANTIC_CHOICES[style]).toLowerCase(),
+  //     )
+  //     .filter(Boolean)
+  //   if (romanticStyles && romanticStyles.length > 0) {
+  //     seekingGenderText += ` (${romanticStyles.join(', ')})`
+  //   }
+  // }
   return capitalize(seekingGenderText ?? undefined)
 }