Feed: collapse to two tabs (For You / Chronological) with filter pills

dylanjeffers · claude · dylanjeffers · commit 8879241a3ab5 · 2026-05-10T22:12:32.000-07:00
Replaces the three-tab UI (FOR_YOU / FOLLOWING / UPLOADS_ONLY) with two
top-level tabs and surfaces the existing FeedFilter (All / Original /
Reposts) as pills directly under the Chronological tab. Pills are hidden
on the For You tab.

- FeedTab enum: drop UPLOADS_ONLY, rename FOLLOWING -&gt; CHRONOLOGICAL
- New FeedFilters pill components for mobile and web
- FeedScreen / FeedPageContent (desktop + mobile) now read feedFilter
  from state and dispatch setFeedFilter on pill change, instead of
  deriving filter from tab
- Coerce legacy persisted FeedTab values (FOLLOWING / UPLOADS_ONLY) to
  CHRONOLOGICAL so existing users don't land in an invalid tab

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/common/src/models/FeedTab.ts b/packages/common/src/models/FeedTab.ts
@@ -1,5 +1,4 @@
 export enum FeedTab {
   FOR_YOU = 'FOR_YOU',
-  FOLLOWING = 'FOLLOWING',
-  UPLOADS_ONLY = 'UPLOADS_ONLY'
+  CHRONOLOGICAL = 'CHRONOLOGICAL'
 }
diff --git a/packages/mobile/src/screens/feed-screen/FeedFilters.tsx b/packages/mobile/src/screens/feed-screen/FeedFilters.tsx
@@ -0,0 +1,60 @@
+import { FeedFilter } from '@audius/common/models'
+import { ScrollView, View } from 'react-native'
+
+import { Flex, SelectablePill, useTheme } from '@audius/harmony-native'
+
+const filterLabels: Record<FeedFilter, string> = {
+  [FeedFilter.ALL]: 'All Posts',
+  [FeedFilter.ORIGINAL]: 'Original Posts',
+  [FeedFilter.REPOST]: 'Reposts'
+}
+
+const filters: FeedFilter[] = [
+  FeedFilter.ALL,
+  FeedFilter.ORIGINAL,
+  FeedFilter.REPOST
+]
+
+type FeedFiltersProps = {
+  currentFilter: FeedFilter
+  onSelectFilter: (filter: FeedFilter) => void
+}
+
+export const FeedFilters = ({
+  currentFilter,
+  onSelectFilter
+}: FeedFiltersProps) => {
+  const { spacing, color } = useTheme()
+  return (
+    <View
+      style={{
+        backgroundColor: color.background.white,
+        paddingBottom: spacing.s
+      }}
+    >
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: spacing.l }}
+      >
+        <Flex direction='row' alignItems='center' gap='s'>
+          {filters.map((filter) => (
+            <SelectablePill
+              key={filter}
+              type='radio'
+              size='small'
+              value={filter}
+              label={filterLabels[filter]}
+              isSelected={currentFilter === filter}
+              onChange={(value, isSelected) => {
+                if (!isSelected) return
+                onSelectFilter(value as FeedFilter)
+              }}
+              disableUnselectAnimation
+            />
+          ))}
+        </Flex>
+      </ScrollView>
+    </View>
+  )
+}
diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
@@ -21,44 +21,42 @@ import { SuggestedFollows } from 'app/components/suggested-follows'
 import { MobileRootHeader } from 'app/screens/app-screen/MobileRootHeader'
 import { make, track } from 'app/services/analytics'
 
+import { FeedFilters } from './FeedFilters'
 import { FeedTabs } from './FeedTabs'
 
-const { getFeedTab } = feedPageSelectors
-const { setFeedTab } = feedPageActions
+const { getFeedTab, getFeedFilter } = feedPageSelectors
+const { setFeedTab, setFeedFilter } = feedPageActions
 
 const messages = {
   header: 'Your Feed',
   endOfFeed: "Looks like you've reached the end of your feed..."
 }
 
-const tabToFilter: Record<Exclude<FeedTab, FeedTab.FOR_YOU>, FeedFilter> = {
-  [FeedTab.FOLLOWING]: FeedFilter.ALL,
-  [FeedTab.UPLOADS_ONLY]: FeedFilter.ORIGINAL
-}
-
 // Note: the feed API returns both tracks and collections (playlist reposts).
 // The new TrackLineup renders tracks only, so collections are filtered out by
 // `trackIds` on the hook side. This is a known limitation introduced by the
 // tanquery migration — collection feed rendering will be restored if/when
 // TrackLineup learns to render mixed feeds.
 export const FeedScreen = () => {
   const dispatch = useDispatch()
-  const feedTab = useSelector(getFeedTab)
+  const persistedTab = useSelector(getFeedTab)
+  const feedFilter = useSelector(getFeedFilter)
   const { data: currentUserId } = useCurrentUserId()
 
+  // Coerce legacy persisted FeedTab values (FOLLOWING / UPLOADS_ONLY) to
+  // CHRONOLOGICAL after the For You / Chronological refactor.
+  const feedTab =
+    persistedTab === FeedTab.FOR_YOU ? FeedTab.FOR_YOU : FeedTab.CHRONOLOGICAL
   const isForYou = feedTab === FeedTab.FOR_YOU
-  const followingFilter = isForYou
-    ? FeedFilter.ALL
-    : tabToFilter[feedTab as Exclude<FeedTab, FeedTab.FOR_YOU>]
 
   const feedArgs = useMemo(
     () => ({
       userId: currentUserId,
-      filter: followingFilter,
+      filter: feedFilter,
       initialPageSize: FEED_INITIAL_PAGE_SIZE,
       loadMorePageSize: FEED_LOAD_MORE_PAGE_SIZE
     }),
-    [followingFilter, currentUserId]
+    [feedFilter, currentUserId]
   )
   const followFeed = useFeed(feedArgs, { enabled: !isForYou })
   const forYouFeed = useForYouFeed(
@@ -82,6 +80,14 @@ export const FeedScreen = () => {
     [dispatch]
   )
 
+  const handleSelectFilter = useCallback(
+    (filter: FeedFilter) => {
+      dispatch(setFeedFilter(filter))
+      track(make({ eventName: Name.FEED_CHANGE_VIEW, view: filter }))
+    },
+    [dispatch]
+  )
+
   const lineupProps = isForYou
     ? {
         trackIds: forYouFeed.trackIds,
@@ -117,6 +123,12 @@ export const FeedScreen = () => {
     >
       <ScreenContent>
         <FeedTabs currentTab={feedTab} onSelectTab={handleSelectTab} />
+        {isForYou ? null : (
+          <FeedFilters
+            currentFilter={feedFilter}
+            onSelectFilter={handleSelectFilter}
+          />
+        )}
         <TrackLineup
           key={`feed-${feedTab}`}
           source='DISCOVER_FEED'
diff --git a/packages/mobile/src/screens/feed-screen/FeedTabs.tsx b/packages/mobile/src/screens/feed-screen/FeedTabs.tsx
@@ -5,15 +5,10 @@ import { Flex, SelectablePill, useTheme } from '@audius/harmony-native'
 
 const tabLabels: Record<FeedTab, string> = {
   [FeedTab.FOR_YOU]: 'For You',
-  [FeedTab.FOLLOWING]: 'Following',
-  [FeedTab.UPLOADS_ONLY]: 'Uploads Only'
+  [FeedTab.CHRONOLOGICAL]: 'Chronological'
 }
 
-const tabs: FeedTab[] = [
-  FeedTab.FOR_YOU,
-  FeedTab.FOLLOWING,
-  FeedTab.UPLOADS_ONLY
-]
+const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.CHRONOLOGICAL]
 
 type FeedTabsProps = {
   currentTab: FeedTab
diff --git a/packages/web/src/pages/feed-page/components/FeedFilters.tsx b/packages/web/src/pages/feed-page/components/FeedFilters.tsx
@@ -0,0 +1,55 @@
+import { ChangeEvent, useCallback } from 'react'
+
+import { FeedFilter } from '@audius/common/models'
+import { Flex, SelectablePill } from '@audius/harmony'
+
+type FeedFiltersProps = {
+  currentFilter: FeedFilter
+  onSelectFilter: (filter: FeedFilter) => void
+}
+
+const messages = {
+  allPosts: 'All Posts',
+  originalPosts: 'Original Posts',
+  reposts: 'Reposts'
+}
+
+const filterToLabel: Record<FeedFilter, string> = {
+  [FeedFilter.ALL]: messages.allPosts,
+  [FeedFilter.ORIGINAL]: messages.originalPosts,
+  [FeedFilter.REPOST]: messages.reposts
+}
+
+const filters: FeedFilter[] = [
+  FeedFilter.ALL,
+  FeedFilter.ORIGINAL,
+  FeedFilter.REPOST
+]
+
+export const FeedFilters = ({
+  currentFilter,
+  onSelectFilter
+}: FeedFiltersProps) => {
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onSelectFilter(e.target.value as FeedFilter)
+    },
+    [onSelectFilter]
+  )
+
+  return (
+    <Flex gap='s' role='radiogroup' onChange={handleChange}>
+      {filters.map((filter) => (
+        <SelectablePill
+          name='feed-filter'
+          key={filter}
+          type='radio'
+          value={filter}
+          label={filterToLabel[filter]}
+          isSelected={currentFilter === filter}
+          size='small'
+        />
+      ))}
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/feed-page/components/FeedTabs.tsx b/packages/web/src/pages/feed-page/components/FeedTabs.tsx
@@ -10,21 +10,15 @@ type FeedTabsProps = {
 
 const messages = {
   forYou: 'For You',
-  following: 'Following',
-  uploadsOnly: 'Uploads Only'
+  chronological: 'Chronological'
 }
 
 const tabToLabel: Record<FeedTab, string> = {
   [FeedTab.FOR_YOU]: messages.forYou,
-  [FeedTab.FOLLOWING]: messages.following,
-  [FeedTab.UPLOADS_ONLY]: messages.uploadsOnly
+  [FeedTab.CHRONOLOGICAL]: messages.chronological
 }
 
-const tabs: FeedTab[] = [
-  FeedTab.FOR_YOU,
-  FeedTab.FOLLOWING,
-  FeedTab.UPLOADS_ONLY
-]
+const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.CHRONOLOGICAL]
 
 export const FeedTabs = ({ currentTab, onSelectTab }: FeedTabsProps) => {
   const handleChange = useCallback(
diff --git a/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx b/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 
 import {
   getFeedQueryKey,
@@ -24,6 +24,7 @@ import { TrackLineup } from 'components/lineup/TrackLineup'
 import { LineupVariant } from 'components/lineup/types'
 import Page from 'components/page/Page'
 import EmptyFeed from 'pages/feed-page/components/EmptyFeed'
+import { FeedFilters } from 'pages/feed-page/components/FeedFilters'
 import { FeedTabs } from 'pages/feed-page/components/FeedTabs'
 
 const messages = {
@@ -32,17 +33,12 @@ const messages = {
   feedDescription: 'Listen to what people you follow are sharing'
 }
 
-const { getFeedTab } = feedPageSelectors
+const { getFeedTab, getFeedFilter } = feedPageSelectors
 
 type FeedPageContentProps = {
   containerRef?: React.RefObject<HTMLDivElement>
 }
 
-const tabToFilter: Record<Exclude<FeedTab, FeedTab.FOR_YOU>, FeedFilter> = {
-  [FeedTab.FOLLOWING]: FeedFilter.ALL,
-  [FeedTab.UPLOADS_ONLY]: FeedFilter.ORIGINAL
-}
-
 // Note: the feed API returns both tracks and collections (playlist reposts).
 // The new TrackLineup renders tracks only, so collections are filtered out by
 // `trackIds` on the hook side. This is a known limitation introduced by the
@@ -51,28 +47,30 @@ const tabToFilter: Record<Exclude<FeedTab, FeedTab.FOR_YOU>, FeedFilter> = {
 const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
   const dispatch = useDispatch()
   const titleRowRef = useRef<HTMLDivElement>(null)
-  const feedTab = useSelector(getFeedTab)
+  const persistedTab = useSelector(getFeedTab)
+  const feedFilter = useSelector(getFeedFilter)
   const { data: currentUserId } = useCurrentUserId()
 
   // Desktop viewports + fast trackpad / wheel scroll need bigger pages than
   // the shared default (mobile-tuned) so successive load-mores keep up with a
   // user scrolling deep into the lineup.
   const desktopLoadMorePageSize = 10
 
+  // Coerce legacy persisted FeedTab values (FOLLOWING / UPLOADS_ONLY) to
+  // CHRONOLOGICAL after the For You / Chronological refactor.
+  const feedTab =
+    persistedTab === FeedTab.FOR_YOU ? FeedTab.FOR_YOU : FeedTab.CHRONOLOGICAL
   const isForYou = feedTab === FeedTab.FOR_YOU
-  const followingFilter = isForYou
-    ? FeedFilter.ALL
-    : tabToFilter[feedTab as Exclude<FeedTab, FeedTab.FOR_YOU>]
 
-  // Following / Uploads-Only lineup. Disabled while For You is active.
+  // Chronological lineup. Disabled while For You is active.
   const feedArgs = useMemo(
     () => ({
       userId: currentUserId,
-      filter: followingFilter,
+      filter: feedFilter,
       initialPageSize: FEED_INITIAL_PAGE_SIZE,
       loadMorePageSize: desktopLoadMorePageSize
     }),
-    [followingFilter, currentUserId]
+    [feedFilter, currentUserId]
   )
   const followFeed = useFeed(feedArgs, { enabled: !isForYou })
 
@@ -91,13 +89,24 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
   )
 
   const record = useRecord()
-  const onSelectTab = (tab: FeedTab) => {
-    if (containerRef?.current?.scrollTo) {
-      containerRef.current.scrollTo(0, 0)
-    }
-    dispatch(discoverPageAction.setFeedTab(tab))
-    record(make(Name.FEED_CHANGE_VIEW, { view: tab }))
-  }
+  const onSelectTab = useCallback(
+    (tab: FeedTab) => {
+      if (containerRef?.current?.scrollTo) {
+        containerRef.current.scrollTo(0, 0)
+      }
+      dispatch(discoverPageAction.setFeedTab(tab))
+      record(make(Name.FEED_CHANGE_VIEW, { view: tab }))
+    },
+    [containerRef, dispatch, record]
+  )
+
+  const onSelectFilter = useCallback(
+    (filter: FeedFilter) => {
+      dispatch(discoverPageAction.setFeedFilter(filter))
+      record(make(Name.FEED_CHANGE_VIEW, { view: filter }))
+    },
+    [dispatch, record]
+  )
 
   const header = (
     <Header
@@ -107,6 +116,14 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
       rightDecorator={
         <FeedTabs currentTab={feedTab} onSelectTab={onSelectTab} />
       }
+      bottomBar={
+        isForYou ? null : (
+          <FeedFilters
+            currentFilter={feedFilter}
+            onSelectFilter={onSelectFilter}
+          />
+        )
+      }
     />
   )
 
diff --git a/packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx b/packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`export enum FeedTab {`
`2`	`2`	`FOR_YOU = 'FOR_YOU',`
`3`		`- FOLLOWING = 'FOLLOWING',`
`4`		`- UPLOADS_ONLY = 'UPLOADS_ONLY'`
	`3`	`+ CHRONOLOGICAL = 'CHRONOLOGICAL'`
`5`	`4`	`}`