feat(feed): replace chronological filter pills with filter button (#14315)

Author: dylanjeffers

packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx

@@ -115,24 +115,14 @@ export const ArtistRecommendations = forwardRef<
   // Follow/Unfollow listeners
   const handleFollowAll = useCallback(() => {
     suggestedArtists.forEach((a) => {
-      dispatch(
-        socialActions.followUser(
-          a.user_id,
-          FollowSource.USER_LIST
-        )
-      )
+      dispatch(socialActions.followUser(a.user_id, FollowSource.USER_LIST))
     })
     setHasFollowedAll(true)
   }, [dispatch, suggestedArtists])
 
   const handleUnfollowAll = useCallback(() => {
     suggestedArtists.forEach((a) => {
-      dispatch(
-        socialActions.unfollowUser(
-          a.user_id,
-          FollowSource.USER_LIST
-        )
-      )
+      dispatch(socialActions.unfollowUser(a.user_id, FollowSource.USER_LIST))
     })
     setHasFollowedAll(false)
   }, [dispatch, suggestedArtists])

packages/web/src/pages/feed-page/components/FeedFilters.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, useCallback } from 'react'
+import { useCallback } from 'react'
 
 import { FeedFilter } from '@audius/common/models'
-import { Flex, SelectablePill } from '@audius/harmony'
+import { FilterButton } from '@audius/harmony'
 
 type FeedFiltersProps = {
   currentFilter: FeedFilter
@@ -14,42 +14,30 @@ const messages = {
   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
+const filterOptions = [
+  { label: messages.allPosts, value: FeedFilter.ALL },
+  { label: messages.originalPosts, value: FeedFilter.ORIGINAL },
+  { label: messages.reposts, value: FeedFilter.REPOST }
 ]
 
 export const FeedFilters = ({
   currentFilter,
   onSelectFilter
 }: FeedFiltersProps) => {
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      onSelectFilter(e.target.value as FeedFilter)
+    (value: string) => {
+      onSelectFilter(value as FeedFilter)
     },
     [onSelectFilter]
   )
 
   return (
-    <Flex gap='s' role='radiogroup' onChange={handleChange} pb='l'>
-      {filters.map((filter) => (
-        <SelectablePill
-          name='feed-filter'
-          key={filter}
-          type='radio'
-          value={filter}
-          label={filterToLabel[filter]}
-          isSelected={currentFilter === filter}
-          size='small'
-        />
-      ))}
-    </Flex>
+    <FilterButton
+      label={messages.allPosts}
+      value={currentFilter}
+      variant='replaceLabel'
+      onChange={handleChange}
+      options={filterOptions}
+    />
   )
 }

packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx

@@ -114,15 +114,15 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
       icon={IconFeed}
       primary={messages.feedHeaderTitle}
       rightDecorator={
-        <FeedTabs currentTab={feedTab} onSelectTab={onSelectTab} />
-      }
-      bottomBar={
-        isForYou ? null : (
-          <FeedFilters
-            currentFilter={feedFilter}
-            onSelectFilter={onSelectFilter}
-          />
-        )
+        <Flex gap='s' alignItems='center'>
+          <FeedTabs currentTab={feedTab} onSelectTab={onSelectTab} />
+          {isForYou ? null : (
+            <FeedFilters
+              currentFilter={feedFilter}
+              onSelectFilter={onSelectFilter}
+            />
+          )}
+        </Flex>
       }
     />
   )

packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx

@@ -113,7 +113,7 @@ const FeedPageMobileContent = ({
   useEffect(() => {
     setHeader(
       <Header title={messages.title} className={styles.header}>
-        <Flex direction='column' gap='s' alignItems='center'>
+        <Flex gap='s' alignItems='center' justifyContent='center'>
           <FeedTabs currentTab={feedTab} onSelectTab={handleSelectTab} />
           {isForYou ? null : (
             <FeedFilters