Add shortBio filter

web/components/filters/desktop-filters.tsx

@@ -13,6 +13,7 @@ import {RelationshipFilter, RelationshipFilterText,} from './relationship-filter
 import {MyMatchesToggle} from './my-matches-toggle'
 import {Profile} from 'common/love/profile'
 import {FilterFields} from "common/filters";
+import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
 
 export function DesktopFilters(props: {
   filters: Partial<FilterFields>
@@ -133,6 +134,12 @@ export function DesktopFilters(props: {
         }
         popoverClassName="bg-canvas-50"
       />
+      {/* Short Bios */}
+      <ShortBioToggle
+        updateFilter={updateFilter}
+        filters={filters}
+        hidden={false}
+      />
       {/* PREFERRED GENDER */}
       {/*<CustomizeableDropdown*/}
       {/*  buttonContent={(open: boolean) => (*/}

web/components/filters/short-bio-toggle.tsx

@@ -0,0 +1,33 @@
+import {Row} from 'web/components/layout/row'
+import clsx from 'clsx'
+import {FilterFields} from "common/filters";
+
+export function ShortBioToggle(props: {
+  filters: Partial<FilterFields>
+  updateFilter: (newState: Partial<FilterFields>) => void
+  hidden: boolean
+}) {
+  const {filters, updateFilter, hidden} = props
+  if (hidden) {
+    return <></>
+  }
+
+  const label = 'Include Short Bios'
+
+  const on = filters.shortBio || false
+
+  return (
+    <Row className={clsx('mr-2 items-center', on && 'font-semibold')}>
+      <input
+        id={label}
+        type="checkbox"
+        className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded"
+        checked={on}
+        onChange={(e) => updateFilter({shortBio: e.target.checked ? true : undefined})}
+      />
+      <label htmlFor={label} className={clsx('text-ink-600 ml-2')}>
+        {label}
+      </label>
+    </Row>
+  )
+}