diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index 9495766f..6b34fcd3 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -24,6 +24,8 @@ import { useUser } from 'web/hooks/use-user'
import { useFollows } from 'web/hooks/use-follows'
import { ChoicesToggleGroup } from './choices-toggle-group'
import { EditCategoriesButton } from './feed/category-selector'
+import { Col } from './layout/col'
+import { CATEGORIES } from 'common/categories'
const searchClient = algoliasearch(
'GJQPAYENIF',
@@ -115,11 +117,6 @@ export function ContractSearch(props: {
follows?.join(','),
])
- const categoriesLabel = `Categories ${
- followedCategories?.length ? followedCategories.length : '(All)'
- }`
- const followingLabel = `Following ${follows?.length ?? 0}`
-
const indexName = `${indexPrefix}contracts-${sort}`
return (
@@ -160,20 +157,12 @@ export function ContractSearch(props: {
{showCategorySelector && (
-
- setMode(c as 'categories' | 'following')}
- />
-
- {mode === 'categories' && user && (
-
- )}
-
+
)}
@@ -250,3 +239,60 @@ export function ContractSearchInner(props: {
/>
)
}
+
+function CategoryFollowSelector(props: {
+ mode: 'categories' | 'following'
+ setMode: (mode: 'categories' | 'following') => void
+ followedCategories: string[]
+ follows: string[]
+}) {
+ const { mode, setMode, followedCategories, follows } = props
+
+ const user = useUser()
+
+ const categoriesLabel = `Categories ${
+ followedCategories.length ? followedCategories.length : '(All)'
+ }`
+
+ let categoriesDescription = `Showing all categories`
+
+ if (followedCategories.length) {
+ const categoriesLabel = followedCategories
+ .slice(0, 3)
+ .map((cat) => CATEGORIES[cat])
+ .join(', ')
+ const andMoreLabel =
+ followedCategories.length > 3
+ ? `, and ${followedCategories.length - 3} more`
+ : ''
+ categoriesDescription = `Showing ${categoriesLabel}${andMoreLabel}`
+ }
+
+ const followingLabel = `Following ${follows.length}`
+
+ return (
+
+ setMode(c as 'categories' | 'following')}
+ />
+
+ {mode === 'categories' && user && (
+
+ {categoriesDescription}
+
+
+ )}
+
+ {mode === 'following' && user && (
+
+ Showing markets created by users you are following.
+
+ )}
+
+ )
+}
diff --git a/web/components/feed/category-selector.tsx b/web/components/feed/category-selector.tsx
index 352746a8..a9e6244a 100644
--- a/web/components/feed/category-selector.tsx
+++ b/web/components/feed/category-selector.tsx
@@ -80,13 +80,17 @@ function CategoryButton(props: {
)
}
-export function EditCategoriesButton(props: { user: User }) {
- const { user } = props
+export function EditCategoriesButton(props: {
+ user: User
+ className?: string
+}) {
+ const { user, className } = props
const [isOpen, setIsOpen] = useState(false)
return (
setIsOpen(true)}