category selector component on feed

common/categories.ts

@@ -3,13 +3,13 @@ export const CATEGORIES = {
   personal: 'Personal',
   friends: 'Friends / Community',
   technology: 'Technology',
-  gaming: 'Gaming / Esports',
-  science: 'Science',
-  manifold: 'Manifold Markets',
-  society: 'Society',
   sports: 'Sports',
+  gaming: 'Gaming / Esports',
+  manifold: 'Manifold Markets',
+  science: 'Science',
+  society: 'Society',
   geopolitics: 'Geopolitics',
-  fun: 'Goofing around',
+  fun: 'Fun stuff',
   business: 'Business',
   finance: 'Finance',
   crypto: 'Crypto',
@@ -24,3 +24,7 @@ export const TO_CATEGORY = Object.fromEntries(
 )
 
 export const CATEGORY_LIST = Object.keys(CATEGORIES)
+
+export const FEED_CATEGORY_LIST = Object.keys(CATEGORIES).filter(
+  (cat) => !['personal', 'friends'].includes(cat)
+)

common/user.ts

@@ -17,6 +17,8 @@ export type User = {
   totalDeposits: number
   totalPnLCached: number
   creatorVolumeCached: number
+
+  followedCategories?: string[]
 }
 
 export const STARTING_BALANCE = 1000

firestore.rules

@@ -16,7 +16,7 @@ service cloud.firestore {
       allow read;
       allow update: if resource.data.id == request.auth.uid
         && request.resource.data.diff(resource.data).affectedKeys()
-            .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']);
+            .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories']);
     }
 
     match /private-users/{userId} {

web/components/feed/category-selector.tsx

@@ -0,0 +1,78 @@
+import clsx from 'clsx'
+import _ from 'lodash'
+
+import { User } from '../../../common/user'
+import { Row } from '../layout/row'
+import { CATEGORIES, FEED_CATEGORY_LIST } from '../../../common/categories'
+import { updateUser } from '../../lib/firebase/users'
+
+export function CategorySelector(props: {
+  user: User | null | undefined
+  className?: string
+}) {
+  const { className, user } = props
+
+  const followedCategories = user?.followedCategories ?? []
+
+  return (
+    <Row
+      className={clsx(
+        'carousel carousel-center mx-2 items-center space-x-2 pt-4 pb-4',
+        className
+      )}
+    >
+      <div className="mr-1 hidden text-gray-500 sm:flex">Categories</div>
+
+      <CategoryButton
+        key={'all' + followedCategories.length}
+        category="All"
+        isFollowed={followedCategories.length === 0}
+        toggle={async () => {
+          if (!user?.id) return
+
+          await updateUser(user.id, {
+            followedCategories: [],
+          })
+        }}
+      />
+
+      {FEED_CATEGORY_LIST.map((cat) => (
+        <CategoryButton
+          key={cat + followedCategories.length}
+          category={CATEGORIES[cat].split(' ')[0]}
+          isFollowed={followedCategories.includes(cat)}
+          toggle={async () => {
+            if (!user?.id) return
+
+            await updateUser(user.id, {
+              followedCategories: !followedCategories.includes(cat)
+                ? _.union([cat], followedCategories)
+                : _.difference(followedCategories, [cat]),
+            })
+          }}
+        />
+      ))}
+    </Row>
+  )
+}
+
+function CategoryButton(props: {
+  category: string
+  isFollowed: boolean
+  toggle: () => void
+}) {
+  const { toggle, category, isFollowed } = props
+
+  return (
+    <div
+      className={clsx(
+        'rounded-full border-2 px-4 py-1 shadow-md',
+        'cursor-pointer',
+        isFollowed ? 'border-gray-300 bg-gray-300' : 'bg-white'
+      )}
+      onClick={toggle}
+    >
+      <span className="text-sm text-gray-500">{category}</span>
+    </div>
+  )
+}

web/pages/home.tsx

@@ -11,6 +11,7 @@ import { useUser } from '../hooks/use-user'
 import { LoadingIndicator } from '../components/loading-indicator'
 import { useAlgoFeed } from '../hooks/use-algo-feed'
 import { ContractPageContent } from './[username]/[contractSlug]'
+import { CategorySelector } from '../components/feed/category-selector'
 
 const Home = () => {
   const user = useUser()
@@ -42,7 +43,12 @@ const Home = () => {
         <Col className="items-center">
           <Col className="w-full max-w-[700px]">
             <FeedCreate user={user ?? undefined} />
-            <Spacer h={10} />
+            <Spacer h={2} />
+
+            <CategorySelector user={user} />
+
+            <Spacer h={1} />
+
             {feed ? (
               <ActivityFeed
                 feed={feed}