[NTP Next] Add News

Author: zenparsing

browser/resources/brave_new_tab_page_refresh/brave_new_tab_page.tsx

@@ -13,8 +13,9 @@ import { SearchProvider } from './context/search_context'
 import { TopSitesProvider } from './context/top_sites_context'
 import { VpnProvider } from './context/vpn_context'
 import { RewardsProvider } from './context/rewards_context'
+import { NewsProvider } from './context/news_context'
 
-import { App } from './components/app'
+import { App, NewsApp } from './components/app'
 
 setIconBasePath('chrome://resources/brave-icons')
 
@@ -26,7 +27,9 @@ function AppProvider(props: { children: React.ReactNode }) {
           <TopSitesProvider name='topSites'>
             <VpnProvider name='vpn'>
               <RewardsProvider name='rewards'>
-                {props.children}
+                <NewsProvider name='news'>
+                  {props.children}
+                </NewsProvider>
               </RewardsProvider>
             </VpnProvider>
           </TopSitesProvider>
@@ -37,7 +40,15 @@ function AppProvider(props: { children: React.ReactNode }) {
 }
 
 createRoot(document.getElementById('root')!).render(
-  <AppProvider>
-    <App />
-  </AppProvider>
+  isNewsOnlyURL() ?
+    <NewsProvider name='news'>
+      <NewsApp />
+    </NewsProvider> :
+    <AppProvider>
+      <App />
+    </AppProvider>
 )
+
+function isNewsOnlyURL() {
+  return /^\/news(\/|$)/i.test(location.pathname)
+}

browser/resources/brave_new_tab_page_refresh/components/app.style.ts

@@ -6,13 +6,38 @@
 import { color, font } from '@brave/leo/tokens/css/variables'
 import { scoped } from '../lib/scoped_css'
 
-const narrowBreakpoint = '900px'
+export const narrowBreakpoint = '900px'
+export const threeColumnBreakpoint = '1310px'
 
 export const style = scoped.css`
   & {
     --search-transition-duration: 120ms;
   }
 
+  @keyframes scroll-fade {
+    from {
+      background: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0);
+    }
+    50% {
+      backdrop-filter: blur(0);
+    }
+    to {
+      background: rgba(0, 0, 0, 0.65);
+      backdrop-filter: blur(32px);
+    }
+  }
+
+  .background-filter {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+
+    animation: linear scroll-fade both;
+    animation-timeline: scroll();
+    animation-range: 0px 100vh;
+  }
+
   .top-controls {
     position: absolute;
     inset-block-start: 4px;
@@ -160,10 +185,14 @@ export const style = scoped.css`
       align-self: center;
       flex-basis: auto;
       display: flex;
-      flex-direction: column;
+      flex-direction: column-reverse;
     }
   }
 
+  .news-container {
+    position: relative;
+    z-index: 1;
+  }
 `
 
 style.passthrough.css`
@@ -248,4 +277,40 @@ style.passthrough.css`
       }
     }
   }
+
+  .skeleton {
+    --self-animation-color: rgba(0, 0, 0, 0.1);
+
+    background: rgba(255, 255, 255, 0.25);
+    position: relative;
+    overflow: hidden;
+    opacity: .7;
+
+    animation: skeleton-fade-in 1s ease-in-out both 250ms;
+
+    @media (prefers-color-scheme: dark) {
+      --self-animation-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .skeleton:after {
+    content: '';
+    position: absolute;
+    transform: translateX(-100%);
+    inset: 0;
+    background: linear-gradient(
+      90deg, transparent, var(--self-animation-color), transparent);
+    animation: skeleton-background-cycle 2s linear 0.5s infinite;
+  }
+
+  @keyframes skeleton-fade-in {
+    0% { opacity: 0; }
+    100% { opacity: .7; }
+  }
+
+  @keyframes skeleton-background-cycle {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(100%); }
+    100% { transform: translateX(100%); }
+  }
 `

browser/resources/brave_new_tab_page_refresh/components/app.tsx

@@ -13,13 +13,25 @@ import { SettingsModal, SettingsView } from './settings/settings_modal'
 import { TopSites } from './top_sites/top_sites'
 import { Clock } from './common/clock'
 import { WidgetStack } from './widgets/widget_stack'
+import { NewsFeed } from './news/news_feed'
 
-import { style } from './app.style'
+import { style, threeColumnBreakpoint } from './app.style'
+
+const threeColumnQuery = window.matchMedia(`(width > ${threeColumnBreakpoint})`)
 
 export function App() {
   const [settingsView, setSettingsView] =
     React.useState<SettingsView | null>(null)
 
+  const [threeColumnWidth, setThreeColumnWidth] =
+    React.useState(threeColumnQuery.matches)
+
+  React.useEffect(() => {
+    const listener = () => setThreeColumnWidth(threeColumnQuery.matches)
+    threeColumnQuery.addEventListener('change', listener)
+    return () => threeColumnQuery.removeEventListener('change', listener)
+  }, [])
+
   React.useEffect(() => {
     const params = new URLSearchParams(location.search)
     const settingsArg = params.get('openSettings')
@@ -33,6 +45,7 @@ export function App() {
   return (
     <div data-css-scope={style.scope}>
       <Background />
+      <div className='background-filter allow-background-pointer-events' />
       <div className='top-controls'>
         <button
           className='clock'
@@ -61,10 +74,20 @@ export function App() {
           <BackgroundCaption />
         </div>
         <div className='widget-container'>
-          <WidgetStack name='left' tabs={['stats']} />
+          {
+            threeColumnWidth ?
+              <>
+                <WidgetStack name='left' tabs={['stats']} />
+                <WidgetStack name='center' tabs={['news']} />
+              </> :
+              <WidgetStack name='left' tabs={['stats', 'news']} />
+          }
           <WidgetStack name='right' tabs={['vpn', 'rewards', 'talk']} />
         </div>
       </main>
+      <div className='news-container'>
+        <NewsFeed />
+      </div>
       <SettingsModal
         isOpen={settingsView !== null}
         initialView={settingsView}
@@ -73,3 +96,11 @@ export function App() {
     </div>
   )
 }
+
+export function NewsApp() {
+  return (
+    <div data-css-scope={style.scope}>
+      <NewsFeed standalone />
+    </div>
+  )
+}

browser/resources/brave_new_tab_page_refresh/components/common/plural_string.tsx

@@ -0,0 +1,42 @@
+/* Copyright (c) 2025 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+import { PluralStringProxyImpl } from 'chrome://resources/js/plural_string_proxy.js'
+import { PluralStringKey } from '../../lib/strings'
+
+interface Props {
+  stringKey: PluralStringKey
+  count: number
+}
+
+// A React component that displays a plural string.
+export function PluralString(props: Props) {
+  return usePluralString(props.stringKey, props.count)
+}
+
+function usePluralString(key: PluralStringKey, count: number) {
+  const [value, setValue] = React.useState('')
+
+  React.useEffect(() => {
+    if (typeof count !== 'number') {
+      setValue('')
+      return
+    }
+    let canUpdate = true
+    PluralStringProxyImpl
+      .getInstance()
+      .getPluralString(key, count)
+      .then((newValue) => {
+        if (canUpdate) {
+          setValue(newValue)
+        }
+      })
+    return () => { canUpdate = false }
+  }, [key, count])
+
+  return value
+}

browser/resources/brave_new_tab_page_refresh/components/common/visibility_tracker.tsx

@@ -0,0 +1,35 @@
+/* Copyright (c) 2025 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+interface Props {
+  onVisible: () => void
+  rootMargin?: string
+}
+
+export function VisibilityTracker(props: Props) {
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.intersectionRatio > 0) {
+          props.onVisible()
+          return
+        }
+      }
+    }, { rootMargin: props.rootMargin || '0px 0px 0px 0px' })
+
+    observer.observe(ref.current)
+    return () => { observer.disconnect() }
+  }, [props.onVisible, props.rootMargin])
+
+  return <div ref={ref} />
+}

browser/resources/brave_new_tab_page_refresh/components/news/article_card.style.ts

@@ -0,0 +1,77 @@
+/* Copyright (c) 2025 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { color, font } from '@brave/leo/tokens/css/variables'
+import { scoped } from '../../lib/scoped_css'
+
+export const style = scoped.css`
+  a {
+    text-decoration: none;
+    color: ${color.text.primary};
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .hero img {
+    margin-bottom: 12px;
+    width: 100%;
+    height: 269px;
+    object-fit: cover;
+    object-position: center top;
+    border-radius: 6px;
+  }
+
+  .metadata {
+    --leo-icon-size: 12px;
+
+    padding: 6px 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font: ${font.xSmall.regular};
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .actions {
+    --leo-icon-size: 16px;
+
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: flex-end;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .article-menu-anchor {
+    anchor-name: --news-article-menu-button;
+  }
+
+  .article-menu {
+    position-anchor: --news-article-menu-button;
+    position-area: block-end span-inline-start;
+    position-try-fallbacks: flip-block;
+  }
+
+  .preview {
+    font: ${font.default.semibold};
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+
+    img {
+      min-width: 96px;
+      width: 96px;
+      height: 64px;
+      object-fit: cover;
+      object-position: center top;
+      border-radius: 6px;
+    }
+  }
+`