diff --git a/web/components/profiles/profiles-home.tsx b/web/components/profiles/profiles-home.tsx
index 8569df17..f1e3d5e4 100644
--- a/web/components/profiles/profiles-home.tsx
+++ b/web/components/profiles/profiles-home.tsx
@@ -1,3 +1,5 @@
+import {XMarkIcon} from '@heroicons/react/24/solid'
+import clsx from 'clsx'
import {debug} from 'common/logger'
import {Profile} from 'common/profiles/profile'
import {removeNullOrUndefinedProps} from 'common/util/object'
@@ -77,6 +79,16 @@ export function ProfilesHome() {
const {locale} = useLocale()
const isClearedFilters = useIsClearedFilters(filters)
const isMobile = useIsMobile()
+ // Tracked separately from `isMobile` (640px) since the docked filters column only replaces
+ // the slide-over once there's room beside the grid, at the `lg` (1024px) breakpoint.
+ const [isDesktop, setIsDesktop] = useState(false)
+ useEffect(() => {
+ const mql = window.matchMedia('(min-width: 1024px)')
+ const update = () => setIsDesktop(mql.matches)
+ update()
+ mql.addEventListener('change', update)
+ return () => mql.removeEventListener('change', update)
+ }, [])
const [sendScrollWarning, setSendScrollWarning] = useState(true)
const [recentlyHiddenIds, setRecentlyHiddenIds] = useState
([])
const {refreshHiddenProfiles} = useHiddenProfiles()
@@ -224,9 +236,11 @@ export function ProfilesHome() {
/>
)
+ const showDockedFilters = isDesktop && openFiltersModal
+
return (
-
-
+
+
{showSignupBanner && user && (
@@ -321,9 +335,10 @@ export function ProfilesHome() {
{t('profiles.title', 'People')}
setOpenFiltersModal(true)}
+ openFilters={() => setOpenFiltersModal((open) => !open)}
openFiltersModal={openFiltersModal}
setOpenFiltersModal={setOpenFiltersModal}
+ suppressFiltersModal={isDesktop}
highlightFilters={highlightFilters}
highlightSort={highlightSort}
youProfile={you}
@@ -361,14 +376,30 @@ export function ProfilesHome() {
hiddenUserIds={recentlyHiddenIds}
onUndoHidden={onUndoHidden}
displayOptions={displayOptions}
+ filters={filters}
+ locationFilterProps={locationFilterProps}
+ bookmarkedSearches={bookmarkedSearches}
+ refreshBookmarkedSearches={refreshBookmarkedSearches}
/>
)}
- {/* Desktop: filters sidebar on the right */}
-
- {filtersElement}
-
+ {showDockedFilters && (
+
+
+ {t('search.filters', 'Filters')}
+ setOpenFiltersModal(false)}
+ aria-label={t('common.close', 'Close')}
+ >
+
+
+ {filtersElement}
+
+ )}
)
}
diff --git a/web/components/searches/get-notified-button.tsx b/web/components/searches/get-notified-button.tsx
new file mode 100644
index 00000000..a4ac9e8e
--- /dev/null
+++ b/web/components/searches/get-notified-button.tsx
@@ -0,0 +1,94 @@
+import clsx from 'clsx'
+import {FilterFields} from 'common/filters'
+import {Bell} from 'lucide-react'
+import {useEffect, useState} from 'react'
+import toast from 'react-hot-toast'
+import {Button, ColorType, SizeType} from 'web/components/buttons/button'
+import {LocationFilterProps} from 'web/components/filters/location-filter'
+import {Tooltip} from 'web/components/widgets/tooltip'
+import {BookmarkedSearchesType} from 'web/hooks/use-bookmarked-searches'
+import {useIsClearedFilters} from 'web/hooks/use-is-cleared-filters'
+import {useUser} from 'web/hooks/use-user'
+import {useT} from 'web/lib/locale'
+import {submitBookmarkedSearch} from 'web/lib/supabase/searches'
+
+const MAX_BOOKMARKED_SEARCHES = 10
+
+// Saves the current search as a bookmarked search so the user gets notified when new
+// profiles match it. Shared between the top search bar (icon) and the empty results state
+// (full CTA) so the save/loading/"Saved!" behavior stays identical in both places.
+export function GetNotifiedButton(props: {
+ filters: Partial
+ locationFilterProps: LocationFilterProps
+ bookmarkedSearches: BookmarkedSearchesType[]
+ refreshBookmarkedSearches: () => void
+ onSaved?: () => void
+ iconOnly?: boolean
+ size?: SizeType
+ color?: ColorType
+ className?: string
+}) {
+ const {
+ filters,
+ locationFilterProps,
+ bookmarkedSearches,
+ refreshBookmarkedSearches,
+ onSaved,
+ iconOnly,
+ size = 'md',
+ color = 'none',
+ className,
+ } = props
+
+ const user = useUser()
+ const t = useT()
+ const isClearedFilters = useIsClearedFilters(filters)
+ const [bookmarked, setBookmarked] = useState(false)
+ const [loading, setLoading] = useState(false)
+
+ useEffect(() => {
+ if (!bookmarked) return
+ const timeout = setTimeout(() => setBookmarked(false), 2000)
+ return () => clearTimeout(timeout)
+ }, [bookmarked])
+
+ const label = bookmarked
+ ? t('common.saved', 'Saved!')
+ : isClearedFilters
+ ? t('common.notified_any', 'Get notified for any new profile')
+ : t('common.notified', 'Notify me when this search matches someone')
+
+ const handleClick = () => {
+ if (bookmarkedSearches.length >= MAX_BOOKMARKED_SEARCHES) {
+ toast.error(
+ `You can bookmark maximum ${MAX_BOOKMARKED_SEARCHES} searches; please delete one first.`,
+ )
+ onSaved?.()
+ return
+ }
+ setLoading(true)
+ submitBookmarkedSearch(filters, locationFilterProps, user?.id).finally(() => {
+ setLoading(false)
+ setBookmarked(true)
+ refreshBookmarkedSearches()
+ onSaved?.()
+ })
+ }
+
+ const button = (
+
+
+ )
+
+ return iconOnly ? {button} : button
+}