Add translations for Brave News channel names

browser/ui/webui/brave_webui_source.cc

@@ -225,6 +225,28 @@ void CustomizeWebUIHTMLSource(content::WebUI* web_ui,
         { "braveNewsSearchQueryTooShort", IDS_BRAVE_NEWS_SEARCH_QUERY_TOO_SHORT},  // NOLINT
         { "braveNewsSuggestionsTitle", IDS_BRAVE_NEWS_SUGGESTIONS_TITLE},
         { "braveNewsSuggestionsSubtitle", IDS_BRAVE_NEWS_SUGGESTIONS_SUBTITLE},
+        // Brave News Channels
+        { "braveNewsChannel-Brave", IDS_BRAVE_NEWS_CHANNEL_BRAVE},
+        { "braveNewsChannel-Business", IDS_BRAVE_NEWS_CHANNEL_BUSINESS},
+        { "braveNewsChannel-Cars", IDS_BRAVE_NEWS_CHANNEL_CARS},
+        { "braveNewsChannel-Crypto", IDS_BRAVE_NEWS_CHANNEL_CRYPTO},
+        { "braveNewsChannel-Culture", IDS_BRAVE_NEWS_CHANNEL_CULTURE},
+        { "braveNewsChannel-Entertainment", IDS_BRAVE_NEWS_CHANNEL_ENTERTAINMENT}, // NOLINT
+        { "braveNewsChannel-Fashion", IDS_BRAVE_NEWS_CHANNEL_FASHION},
+        { "braveNewsChannel-Food", IDS_BRAVE_NEWS_CHANNEL_FOOD},
+        { "braveNewsChannel-Fun", IDS_BRAVE_NEWS_CHANNEL_FUN},
+        { "braveNewsChannel-Gaming", IDS_BRAVE_NEWS_CHANNEL_GAMING},
+        { "braveNewsChannel-Health", IDS_BRAVE_NEWS_CHANNEL_HEALTH},
+        { "braveNewsChannel-Home", IDS_BRAVE_NEWS_CHANNEL_HOME},
+        { "braveNewsChannel-Politics", IDS_BRAVE_NEWS_CHANNEL_POLITICS},
+        { "braveNewsChannel-Science", IDS_BRAVE_NEWS_CHANNEL_SCIENCE},
+        { "braveNewsChannel-Sports", IDS_BRAVE_NEWS_CHANNEL_SPORTS},
+        { "braveNewsChannel-Travel", IDS_BRAVE_NEWS_CHANNEL_TRAVEL},
+        { "braveNewsChannel-Technology", IDS_BRAVE_NEWS_CHANNEL_TECHNOLOGY},
+        { "braveNewsChannel-Top News", IDS_BRAVE_NEWS_CHANNEL_TOP_NEWS},
+        { "braveNewsChannel-Top Sources", IDS_BRAVE_NEWS_CHANNEL_TOP_SOURCES},
+        { "braveNewsChannel-Weather", IDS_BRAVE_NEWS_CHANNEL_WEATHER},
+        { "braveNewsChannel-World News", IDS_BRAVE_NEWS_CHANNEL_WORLD_NEWS},
 
         { "addWidget", IDS_BRAVE_NEW_TAB_WIDGET_ADD },
         { "hideWidget", IDS_BRAVE_NEW_TAB_WIDGET_HIDE },

components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx

@@ -9,6 +9,16 @@ import Flex from '../../../Flex'
 import FollowButton from './FollowButton'
 import { useChannelSubscribed } from './Context'
 import { channels } from './Icons'
+import { getLocale } from '$web-common/locale'
+
+export const getTranslatedChannelName = (channelName: string) => {
+  try {
+    return getLocale(`braveNewsChannel-${channelName}`)
+  } catch (err) {
+    console.error(`Couldn't find translation for channel '${channelName}'`)
+    return channelName
+  }
+}
 
 const SubscribeButton = styled(FollowButton)`
     position: absolute;
@@ -65,6 +75,6 @@ export default function ChannelCard ({ channelName }: Props) {
   >
     <SubscribeButton following={subscribed} onClick={() => setSubscribed(!subscribed)} />
     <IconContainer>{icon}</IconContainer>
-    {channelName}
+    {getTranslatedChannelName(channelName)}
   </Container>
 }

components/brave_new_tab_ui/components/default/braveToday/customize/Context.tsx

@@ -113,12 +113,12 @@ export const useChannels = (options: { subscribedOnly: boolean } = { subscribedO
     .filter(c => c.subscribed || !options.subscribedOnly), [channels, options.subscribedOnly])
 }
 
-export const useChannelSubscribed = (channelId: string) => {
+export const useChannelSubscribed = (channelName: string) => {
   const { channels } = useBraveNews()
-  const subscribed = useMemo(() => channels[channelId]?.subscribed ?? false, [channels[channelId]])
+  const subscribed = useMemo(() => channels[channelName]?.subscribed ?? false, [channels[channelName]])
   const setSubscribed = React.useCallback((subscribed: boolean) => {
-    api.setChannelSubscribed(channelId, subscribed)
-  }, [channelId])
+    api.setChannelSubscribed(channelName, subscribed)
+  }, [channelName])
 
   return {
     subscribed,

components/brave_new_tab_ui/components/default/braveToday/customize/Discover.tsx

@@ -71,8 +71,8 @@ function Home () {
     <>
       <Suggestions/>
       <DiscoverSection name={getLocale('braveNewsChannelsHeader')}>
-      {visibleChannelIds.map(channelId =>
-        <ChannelCard key={channelId} channelName={channelId} />
+      {visibleChannelIds.map(channelName =>
+        <ChannelCard key={channelName} channelName={channelName} />
       )}
       {!showingAllCategories && <LoadMoreButtonContainer>
         <Button onClick={() => setShowingAllCategories(true)}>

components/brave_new_tab_ui/components/default/braveToday/customize/SourcesList.tsx

@@ -36,7 +36,7 @@ export default function SourcesList () {
       <Subtitle>{sourcesCount}</Subtitle>
     </Flex>
     <Flex direction="column">
-      {channels.map(c => <ChannelListEntry key={c.channelName} channelId={c.channelName} />)}
+      {channels.map(c => <ChannelListEntry key={c.channelName} channelName={c.channelName} />)}
       {subscribedPublisherIds.map((p) => (
         <FeedListEntry key={p} publisherId={p} />
       ))}

components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx

@@ -9,6 +9,7 @@ import { getLocale } from '$web-common/locale'
 import Flex from '../../../Flex'
 import { useChannelSubscribed, usePublisher, usePublisherFollowed } from './Context'
 import { useLazyUnpaddedImageUrl } from '../useUnpaddedImageUrl'
+import { getTranslatedChannelName } from './ChannelCard'
 
 interface Props {
   publisherId: string
@@ -86,11 +87,11 @@ export function FeedListEntry (props: Props) {
   </Container>
 }
 
-export function ChannelListEntry (props: { channelId: string }) {
-  const { setSubscribed } = useChannelSubscribed(props.channelId)
+export function ChannelListEntry (props: { channelName: string }) {
+  const { setSubscribed } = useChannelSubscribed(props.channelName)
 
   return <Container direction="row" justify='space-between' align='center'>
-    <ChannelNameText>{props.channelId}</ChannelNameText>
+    <ChannelNameText>{getTranslatedChannelName(props.channelName)}</ChannelNameText>
     <ToggleButton onClick={() => setSubscribed(false)}>
       {getLocale('braveNewsFollowButtonFollowing')}
     </ToggleButton>

components/resources/brave_components_strings.grd

@@ -351,70 +351,6 @@
         Ad
       </message>
 
-      <message name="IDS_BRAVE_NEWS_BACK_TO_DASHBOARD" desc="Label for the back to dashboard button">
-        Back to <ph name="BEGIN_BOLD">$1</ph>Dashboard<ph name="END_BOLD">$2</ph>
-      </message>
-      <message name="IDS_BRAVE_NEWS_DISABLED_PLACEHOLDER_HEADER" desc="Header for the brave news disabled placeholder">
-        Turn on Brave News, and never miss a story
-      </message>
-      <message name="IDS_BRAVE_NEWS_DISABLED_PLACEHOLDER_SUBTITLE" desc="Subtitle for the brave news disabled placeholder">
-        Customized news feeds, from leading sources, delivered right to your browser. All 100% private.
-      </message>
-      <message name="IDS_BRAVE_NEWS_DISABLED_PLACEHOLDER_ENABLE_BUTTON" desc="Label for the button to reenable Brave News from the disabled placeholder">
-        Turn on Brave News
-      </message>
-      <message name="IDS_BRAVE_NEWS_SEARCH_PLACEHOLDER_LABEL" desc="Label that displays in the searchbox when the user hasn't entered anything">
-        Search for news, site, topic or RSS feed
-      </message>
-      <message name="IDS_BRAVE_NEWS_BROWSE_CHANNELS_HEADER" desc="Header for the channel section">
-        Channels
-      </message>
-      <message name="IDS_BRAVE_NEWS_SHOW_MORE_BUTTON" desc="Label for the button to show more items from a limited selection. For example, this might show more categories, or more suggested publishers">
-        Show more
-      </message>
-      <message name="IDS_BRAVE_NEWS_ALL_SOURCES_HEADER" desc="Header for the all sources section">
-        Sources
-      </message>
-      <message name="IDS_BRAVE_NEWS_FEEDS_HEADING" desc="The heading for the feeds contianer">
-        Following
-      </message>
-      <message name="IDS_BRAVE_NEWS_SOURCE_COUNT" desc="Label saying how many sources you currently have. [ICU Syntax]">
-        {FEED_COUNT, plural,
-          =1 {# source}
-          other {# sources}
-        }
-      </message>
-      <message name="IDS_BRAVE_NEWS_FOLLOW_BUTTON_FOLLOWING" desc="Label for the follow button to be display when following the feed">
-        Unfollow
-      </message>
-      <message name="IDS_BRAVE_NEWS_FOLLOW_BUTTON_NOT_FOLLOWING" desc="Label for the follow button when the publisher is not currently followed">
-        Follow
-      </message>
-      <message name="IDS_BRAVE_NEWS_DIRECT_SEARCH_BUTTON" desc="Label for the button which will search a Url for a feed">
-        Get feeds from <ph name="URL">$1<ex>https://example.com</ex></ph>
-      </message>
-      <message name="IDS_BRAVE_NEWS_DIRECT_SEARCH_NO_RESULTS" desc="Label displayed when there are no direct feed results">
-        No feeds found at <ph name="URL">$1<ex>https://example.com</ex></ph>
-      </message>
-      <message name="IDS_BRAVE_NEWS_SEARCH_RESULTS_NO_RESULTS" desc="Label displayed when there are no results">
-        There's nothing here :'(
-      </message>
-      <message name="IDS_BRAVE_NEWS_SEARCH_RESULTS_LOCAL_RESULTS" desc="Label displayed above results from the combined feed">
-        Results
-      </message>
-      <message name="IDS_BRAVE_NEWS_SEARCH_RESULTS_DIRECT_RESULTS" desc="Label displayed above direct RSS results">
-        Direct Results
-      </message>
-      <message name="IDS_BRAVE_NEWS_SEARCH_QUERY_TOO_SHORT" desc="Message displayed when there are no results due to search query being too short">
-        Keep typing to search sources
-      </message>
-      <message name="IDS_BRAVE_NEWS_SUGGESTIONS_TITLE" desc="Title of the suggested sources section">
-        Suggestions
-      </message>
-      <message name="IDS_BRAVE_NEWS_SUGGESTIONS_SUBTITLE" desc="Subtitle of the suggested sources section">
-        Some sources you might like. Suggestions are anonymous and matched only on your device.
-      </message>
-
       <message name="IDS_BRAVE_NEW_TAB_STATS_TAB" desc="Brave Stats title">Brave Stats</message>
       <message name="IDS_BRAVE_NEW_TAB_CLOCK_TAB" desc="Clock title">Clock</message>
       <message name="IDS_BRAVE_NEW_TAB_TOP_SITES_TAB" desc="Top Sites title">Top Sites</message>
@@ -1068,6 +1004,7 @@
       <part file="speedreader_strings.grdp" />
       <part file="wallet_strings.grdp" />
       <part file="tor_strings.grdp" />
+      <part file="brave_news_strings.grdp" />
       <part file="brave_shields_strings.grdp" />
       <if expr="enable_brave_vpn">
         <part file="brave_vpn_strings.grdp" />

components/resources/brave_news_strings.grdp

@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit-part>
+  <message name="IDS_BRAVE_NEWS_BACK_TO_DASHBOARD" desc="Label for the back to dashboard button">
+    Back to <ph name="BEGIN_BOLD">$1</ph>Dashboard<ph name="END_BOLD">$2</ph>
+  </message>
+  <message name="IDS_BRAVE_NEWS_DISABLED_PLACEHOLDER_HEADER" desc="Header for the brave news disabled placeholder">
+    Turn on Brave News, and never miss a story
+  </message>
+  <message name="IDS_BRAVE_NEWS_DISABLED_PLACEHOLDER_SUBTITLE" desc="Subtitle for the brave news disabled placeholder">
+    Customized news feeds, from leading sources, delivered right to your browser. All 100% private.
+  </message>
+  <message name="IDS_BRAVE_NEWS_DISABLED_PLACEHOLDER_ENABLE_BUTTON" desc="Label for the button to reenable Brave News from the disabled placeholder">
+    Turn on Brave News
+  </message>
+  <message name="IDS_BRAVE_NEWS_SEARCH_PLACEHOLDER_LABEL" desc="Label that displays in the searchbox when the user hasn't entered anything">
+    Search for news, site, topic or RSS feed
+  </message>
+  <message name="IDS_BRAVE_NEWS_BROWSE_CHANNELS_HEADER" desc="Header for the channel section">
+    Channels
+  </message>
+  <message name="IDS_BRAVE_NEWS_SHOW_MORE_BUTTON" desc="Label for the button to show more items from a limited selection. For example, this might show more categories, or more suggested publishers">
+    Show more
+  </message>
+  <message name="IDS_BRAVE_NEWS_ALL_SOURCES_HEADER" desc="Header for the all sources section">
+    Sources
+  </message>
+  <message name="IDS_BRAVE_NEWS_FEEDS_HEADING" desc="The heading for the feeds contianer">
+    Following
+  </message>
+  <message name="IDS_BRAVE_NEWS_SOURCE_COUNT" desc="Label saying how many sources you currently have. [ICU Syntax]">
+    {FEED_COUNT, plural,
+      =1 {# source}
+      other {# sources}
+    }
+  </message>
+  <message name="IDS_BRAVE_NEWS_FOLLOW_BUTTON_FOLLOWING" desc="Label for the follow button to be display when following the feed">
+    Unfollow
+  </message>
+  <message name="IDS_BRAVE_NEWS_FOLLOW_BUTTON_NOT_FOLLOWING" desc="Label for the follow button when the publisher is not currently followed">
+    Follow
+  </message>
+  <message name="IDS_BRAVE_NEWS_DIRECT_SEARCH_BUTTON" desc="Label for the button which will search a Url for a feed">
+    Get feeds from <ph name="URL">$1<ex>https://example.com</ex></ph>
+  </message>
+  <message name="IDS_BRAVE_NEWS_DIRECT_SEARCH_NO_RESULTS" desc="Label displayed when there are no direct feed results">
+    No feeds found at <ph name="URL">$1<ex>https://example.com</ex></ph>
+  </message>
+  <message name="IDS_BRAVE_NEWS_SEARCH_RESULTS_NO_RESULTS" desc="Label displayed when there are no results">
+    There's nothing here :'(
+  </message>
+  <message name="IDS_BRAVE_NEWS_SEARCH_RESULTS_LOCAL_RESULTS" desc="Label displayed above results from the combined feed">
+    Results
+  </message>
+  <message name="IDS_BRAVE_NEWS_SEARCH_RESULTS_DIRECT_RESULTS" desc="Label displayed above direct RSS results">
+    Direct Results
+  </message>
+  <message name="IDS_BRAVE_NEWS_SEARCH_QUERY_TOO_SHORT" desc="Message displayed when there are no results due to search query being too short">
+    Keep typing to search sources
+  </message>
+  <message name="IDS_BRAVE_NEWS_SUGGESTIONS_TITLE" desc="Title of the suggested sources section">
+    Suggestions
+  </message>
+  <message name="IDS_BRAVE_NEWS_SUGGESTIONS_SUBTITLE" desc="Subtitle of the suggested sources section">
+    Some sources you might like. Suggestions are anonymous and matched only on your device.
+  </message>
+
+  <message name="IDS_BRAVE_NEWS_CHANNEL_BRAVE" desc="Translation of the 'Brave' channel">
+    Brave
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_BUSINESS" desc="Translation of the 'Business' channel">
+    Business
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_CARS" desc="Translation of the 'Cars' channel">
+    Cars
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_CRYPTO" desc="Translation of the 'Crypto' channel">
+    Crypto
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_CULTURE" desc="Translation of the 'Culture' channel">
+    Culture
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_ENTERTAINMENT" desc="Translation of the 'Entertainment' channel">
+    Entertainment
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_FASHION" desc="Translation of the 'Fashion' channel">
+    Fashion
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_FOOD" desc="Translation of the 'Food' channel">
+    Food
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_FUN" desc="Translation of the 'Fun' channel">
+    Fun
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_GAMING" desc="Translation of the 'Gaming' channel">
+    Gaming
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_HEALTH" desc="Translation of the 'Health' channel">
+    Health
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_HOME" desc="Translation of the 'Home' channel">
+    Home
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_POLITICS" desc="Translation of the 'Politics' channel">
+    Politics
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_SCIENCE" desc="Translation of the 'Science' channel">
+    Science
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_SPORTS" desc="Translation of the 'Sports' channel">
+    Sports
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_TRAVEL" desc="Translation of the 'Travel' channel">
+    Travel
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_TECHNOLOGY" desc="Translation of the 'Technology' channel">
+    Technology
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_TOP_NEWS" desc="Translation of the 'Top News' channel">
+    Top News
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_TOP_SOURCES" desc="Translation of the 'Top Sources' channel">
+    Top Sources
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_WEATHER" desc="Translation of the 'Weather' channel">
+    Weather
+  </message>
+  <message name="IDS_BRAVE_NEWS_CHANNEL_WORLD_NEWS" desc="Translation of the 'World News' channel">
+    World News
+  </message>
+</grit-part>