refactor(feed): rename "Chronological" tab to "Latest"

.changeset/rename-chronological-feed-to-latest.md

@@ -0,0 +1,7 @@
+---
+'@audius/web': patch
+'@audius/mobile': patch
+'@audius/common': patch
+---
+
+Rename the Feed page's "Chronological" tab to "Latest" on web and mobile. The persisted `feed-page:tab` localStorage value is migrated transparently so existing users land on the same tab they had selected.

packages/common/src/api/tan-query/feed/useFeedPreferences.ts

@@ -11,15 +11,15 @@ const FEED_TAB_LS_KEY = 'feed-page:tab'
 const FEED_FILTER_LS_KEY = 'feed-page:filter'
 
 const isFeedTab = (value: string | null): value is FeedTab =>
-  value === FeedTab.FOR_YOU || value === FeedTab.CHRONOLOGICAL
+  value === FeedTab.FOR_YOU || value === FeedTab.LATEST
 
 const isFeedFilter = (value: string | null): value is FeedFilter =>
   value === FeedFilter.ALL ||
   value === FeedFilter.ORIGINAL ||
   value === FeedFilter.REPOST
 
 /**
- * Persisted active tab on the Feed page (For You vs Chronological). Backed by
+ * Persisted active tab on the Feed page (For You vs Latest). Backed by
  * the tan-query cache so reads in any component see the same value, with
  * localStorage as the durable store.
  */
@@ -31,6 +31,9 @@ export const useFeedTab = (): [FeedTab, (tab: FeedTab) => void] => {
     queryKey: [QUERY_KEYS.feedTab],
     queryFn: async () => {
       const stored = await localStorage.getItem(FEED_TAB_LS_KEY)
+      // Migrate the pre-rename persisted value so existing users land on the
+      // same tab they had selected.
+      if (stored === 'CHRONOLOGICAL') return FeedTab.LATEST
       return isFeedTab(stored) ? stored : FeedTab.FOR_YOU
     },
     staleTime: Infinity,
@@ -49,7 +52,7 @@ export const useFeedTab = (): [FeedTab, (tab: FeedTab) => void] => {
 }
 
 /**
- * Persisted post-type filter for the Chronological feed. Same tan-query
+ * Persisted post-type filter for the Latest feed. Same tan-query
  * shared-store pattern as {@link useFeedTab}.
  */
 export const useFeedFilter = (): [FeedFilter, (filter: FeedFilter) => void] => {

packages/common/src/models/FeedTab.ts

@@ -1,4 +1,4 @@
 export enum FeedTab {
   FOR_YOU = 'FOR_YOU',
-  CHRONOLOGICAL = 'CHRONOLOGICAL'
+  LATEST = 'LATEST'
 }

packages/mobile/src/screens/feed-screen/FeedTabs.tsx

@@ -5,10 +5,10 @@ import { Flex, SelectablePill, useTheme } from '@audius/harmony-native'
 
 const tabLabels: Record<FeedTab, string> = {
   [FeedTab.FOR_YOU]: 'For You',
-  [FeedTab.CHRONOLOGICAL]: 'Chronological'
+  [FeedTab.LATEST]: 'Latest'
 }
 
-const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.CHRONOLOGICAL]
+const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.LATEST]
 
 type FeedTabsProps = {
   currentTab: FeedTab

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

@@ -10,15 +10,15 @@ type FeedTabsProps = {
 
 const messages = {
   forYou: 'For You',
-  chronological: 'Chronological'
+  latest: 'Latest'
 }
 
 const tabToLabel: Record<FeedTab, string> = {
   [FeedTab.FOR_YOU]: messages.forYou,
-  [FeedTab.CHRONOLOGICAL]: messages.chronological
+  [FeedTab.LATEST]: messages.latest
 }
 
-const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.CHRONOLOGICAL]
+const tabs: FeedTab[] = [FeedTab.FOR_YOU, FeedTab.LATEST]
 
 export const FeedTabs = ({ currentTab, onSelectTab }: FeedTabsProps) => {
   const handleChange = useCallback(

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

@@ -52,7 +52,7 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
 
   const isForYou = feedTab === FeedTab.FOR_YOU
 
-  // Chronological lineup. Disabled while For You is active.
+  // Latest lineup. Disabled while For You is active.
   const feedArgs = useMemo(
     () => ({
       userId: currentUserId,