Refactor orientation filter implementation for improved structure and clarity

android/app/build.gradle

@@ -11,8 +11,8 @@ android {
         applicationId "com.compassconnections.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 111
-        versionName "1.26.0"
+        versionCode 112
+        versionName "1.27.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

web/components/filters/filters.tsx

@@ -24,6 +24,7 @@ import {IncompleteProfilesToggle} from 'web/components/filters/incomplete-profil
 import {InterestFilter, InterestFilterText} from 'web/components/filters/interest-filter'
 import {LanguageFilter, LanguageFilterText} from 'web/components/filters/language-filter'
 import {MbtiFilter, MbtiFilterText} from 'web/components/filters/mbti-filter'
+import {OrientationFilter, OrientationFilterText} from 'web/components/filters/orientation-filter'
 import {PoliticalFilter, PoliticalFilterText} from 'web/components/filters/political-filter'
 import {
   RelationshipStatusFilter,
@@ -50,7 +51,6 @@ import {HasKidsFilter, HasKidsLabel} from './has-kids-filter'
 import {LastActiveFilter, LastActiveFilterText} from './last-active-filter'
 import {LocationFilter, LocationFilterProps, LocationFilterText} from './location-filter'
 import {MyMatchesToggle} from './my-matches-toggle'
-import {OrientationFilter, OrientationFilterText} from './orientation-filter'
 import {PsychedelicsFilter, PsychedelicsFilterText} from './psychedelics-filter'
 import {RelationshipFilter, RelationshipFilterText} from './relationship-filter'
 import {SmokerFilter, SmokerFilterText} from './smoker-filter'
@@ -329,24 +329,6 @@ function Filters(props: {
         <GenderFilter filters={filters} updateFilter={updateFilter} profile={youProfile} />
       </FilterSection>
 
-      {/* ORIENTATION - Always visible */}
-      <FilterSection
-        title={t('profile.optional.orientation', 'Orientation')}
-        openFilter={openFilter}
-        setOpenFilter={setOpenFilter}
-        isActive={hasAny((filters as any).orientation || undefined)}
-        selection={
-          <OrientationFilterText options={(filters as any).orientation as string[] | undefined} />
-        }
-      >
-        <OrientationFilter
-          filters={filters}
-          updateFilter={updateFilter}
-          profile={youProfile}
-          className={''}
-        />
-      </FilterSection>
-
       {/* ACCORDION GROUPS */}
 
       {/* Relationship Group */}
@@ -366,7 +348,7 @@ function Filters(props: {
             selection={
               <RelationshipStatusFilterText
                 options={filters.relationship_status as string[]}
-                defaultLabel={t('filter.relationship_status.any', 'Any')}
+                defaultLabel={t('filter.relationship_status.any', 'Any status')}
                 // highlightedClass={
                 //   hasAny(filters.relationship_status || undefined)
                 //     ? 'text-primary-600'
@@ -378,6 +360,25 @@ function Filters(props: {
             <RelationshipStatusFilter filters={filters} updateFilter={updateFilter} />
           </FilterSection>
 
+          <FilterSection
+            title={t('profile.optional.orientation', 'Orientation')}
+            openFilter={openFilter}
+            setOpenFilter={setOpenFilter}
+            isActive={hasAny((filters as any).orientation || undefined)}
+            selection={
+              <OrientationFilterText
+                options={(filters as any).orientation as string[] | undefined}
+              />
+            }
+          >
+            <OrientationFilter
+              filters={filters}
+              updateFilter={updateFilter}
+              profile={youProfile}
+              className={''}
+            />
+          </FilterSection>
+
           {/* Romantic Style */}
           <FilterSection
             title={t('profile.romantic.style', 'Style')}

web/components/filters/relationship-status-filter.tsx

@@ -16,7 +16,7 @@ export function RelationshipStatusFilterText(props: {
   const t = useT()
   const length = (options ?? []).length
 
-  const label = defaultLabel || t('filter.any', 'Any')
+  const label = defaultLabel || t('filter.any', 'Any Status')
 
   if (!options || length < 1) {
     return <span className={clsx('text-semibold', highlightedClass)}>{label}</span>

web/components/filters/romantic-filter.tsx

@@ -18,7 +18,7 @@ export function RomanticFilterText(props: {
   if (!relationship || length < 1) {
     return (
       <span className={clsx('text-semibold', highlightedClass)}>
-        {t('filter.any_relationship', 'Any relationship')}
+        {t('filter.any_relationship', 'Any relationship style')}
       </span>
     )
   }

web/components/optional-profile-form.tsx

@@ -463,55 +463,6 @@ export const OptionalProfileUserForm = (props: {
           </Col>
         </Row>
 
-        <Row className={'items-center gap-2'}>
-          <Col className={'gap-1'}>
-            <label className={clsx(labelClassName)}>
-              {t('profile.optional.orientation', 'Sexual orientation')}
-            </label>
-            <MultiCheckbox
-              choices={
-                Object.fromEntries(
-                  Object.entries(ORIENTATION_CHOICES).filter(
-                    ([, v]) =>
-                      showAllOrientations ||
-                      DEFAULT_ORIENTATIONS.includes(v as any) ||
-                      (profile['orientation'] ?? []).includes(v),
-                  ),
-                ) as any
-              }
-              selected={profile['orientation'] ?? []}
-              translationPrefix={'profile.orientation'}
-              onChange={(selected) => setProfile('orientation', selected)}
-            />
-            {!showAllOrientations && (
-              <button
-                type="button"
-                className="text-primary-600 mt-1 text-sm"
-                onClick={() => setShowAllOrientations(true)}
-              >
-                {t('profile.orientation.show_more', 'Show more options')}
-              </button>
-            )}
-            {showAllOrientations && (
-              <>
-                <p className="mt-1">{t('profile.optional.details', 'Details')}</p>
-                <Input
-                  type="text"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setProfile('orientation_details', e.target.value)
-                  }
-                  className={'w-full sm:w-[700px]'}
-                  value={(profile as any)['orientation_details'] ?? undefined}
-                  placeholder={t(
-                    'profile.orientation.details_placeholder',
-                    'Any details about your sexual orientation…',
-                  )}
-                />
-              </>
-            )}
-          </Col>
-        </Row>
-
         <Col className={clsx(colClassName)}>
           <label className={clsx(labelClassName)}>{t('profile.optional.age', 'Age')}</label>
           <Input
@@ -799,6 +750,55 @@ export const OptionalProfileUserForm = (props: {
 
         {lookingRelationship && (
           <>
+            <Row className={'items-center gap-2'}>
+              <Col className={'gap-1'}>
+                <label className={clsx(labelClassName)}>
+                  {t('profile.optional.orientation', 'Orientation')}
+                </label>
+                <MultiCheckbox
+                  choices={
+                    Object.fromEntries(
+                      Object.entries(ORIENTATION_CHOICES).filter(
+                        ([, v]) =>
+                          showAllOrientations ||
+                          DEFAULT_ORIENTATIONS.includes(v as any) ||
+                          (profile['orientation'] ?? []).includes(v),
+                      ),
+                    ) as any
+                  }
+                  selected={profile['orientation'] ?? []}
+                  translationPrefix={'profile.orientation'}
+                  onChange={(selected) => setProfile('orientation', selected)}
+                />
+                {!showAllOrientations && (
+                  <button
+                    type="button"
+                    className="text-primary-600 mt-1 text-sm"
+                    onClick={() => setShowAllOrientations(true)}
+                  >
+                    {t('profile.orientation.show_more', 'Show more options')}
+                  </button>
+                )}
+                {showAllOrientations && (
+                  <>
+                    <p className="mt-1">{t('profile.optional.details', 'Details')}</p>
+                    <Input
+                      type="text"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setProfile('orientation_details', e.target.value)
+                      }
+                      className={'w-full sm:w-[700px]'}
+                      value={(profile as any)['orientation_details'] ?? undefined}
+                      placeholder={t(
+                        'profile.orientation.details_placeholder',
+                        'Any details about your sexual orientation…',
+                      )}
+                    />
+                  </>
+                )}
+              </Col>
+            </Row>
+
             <Col className={clsx(colClassName)}>
               <label className={clsx(labelClassName)}>
                 {t('profile.optional.relationship_style', 'Relationship style')}