diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 33b592e0bac0..46926283defa 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/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 }, diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx index a0156b98f457..734d634db352 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/ChannelCard.tsx +++ b/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) { > setSubscribed(!subscribed)} /> {icon} - {channelName} + {getTranslatedChannelName(channelName)} } diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Context.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Context.tsx index 56f7e79a2e10..95a756c58059 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/Context.tsx +++ b/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, diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Discover.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Discover.tsx index 1e0f236a1914..66eceade3e04 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/customize/Discover.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/customize/Discover.tsx @@ -71,8 +71,8 @@ function Home () { <> - {visibleChannelIds.map(channelId => - + {visibleChannelIds.map(channelName => + )} {!showingAllCategories &&