NTP Pagination Quality of Life Improvements

components/brave_new_tab_ui/containers/newTab/gridPageButtons.tsx

@@ -6,7 +6,7 @@ const PageIndicator = <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/s
     <circle cx="50" cy="50" r="50" />
 </svg>
 
-const ListPageButtonContainer = styled('div')<{}>`
+const ListPageButtonContainer = styled('div') <{}>`
   display: flex;
   flex-direction: row;
 
@@ -36,16 +36,27 @@ interface GridPageButtonProps {
 }
 
 function GridPageButton (props: GridPageButtonProps) {
-    return <StyledButton onClick={() => props
-        .pageContainerRef
-        .current
-        ?.children[props.page]
-        .scrollIntoView({ behavior: 'smooth' })}>
+    const handleClick = () => {
+        const element = props
+            .pageContainerRef
+            .current
+            ?.children[props.page] as HTMLElement
+        if (!element) return
+
+        // Ideally we'd use |element.scrollIntoView| here but it applies a
+        // vertical scroll even when it's not needed, which triggers the Brave
+        // News peek.
+        // |element.scrollIntoViewIfNeeded| is also out, because it doesn't
+        // support animating the scroll.
+        props.pageContainerRef.current?.scrollTo({ left: element.offsetLeft, behavior: 'smooth' })
+    }
+
+    return <StyledButton onClick={handleClick}>
         {PageIndicator}
     </StyledButton>
 }
 
-const GridPageIndicatorContainer = styled('div')<{}>`
+const GridPageIndicatorContainer = styled('div') <{}>`
   position: absolute;
   color: var(--brave-palette-white);
 

components/brave_new_tab_ui/containers/newTab/gridSites.tsx

@@ -16,6 +16,7 @@ import { GridPagesContainer, List, PagesContainer } from '../../components/defau
 import createWidget from '../../components/default/widget'
 // Constants
 import { MAX_GRID_SIZE } from '../../constants/new_tab_ui'
+import { useMaintainScrollPosition } from '../../helpers/scrolling'
 import AddSiteTile from './addSiteTile'
 import { GridPageButtons } from './gridPageButtons'
 // Component groups
@@ -88,6 +89,8 @@ function TopSitesList (props: Props) {
     props.actions.tilesReordered(gridSites, draggingIndex, droppedIndex)
   }
 
+  useMaintainScrollPosition('grid-pages-container-scroll-position', gridPagesContainerRef)
+
   return <PagesContainer>
     <GridPagesContainer customLinksEnabled={customLinksEnabled} ref={gridPagesContainerRef as any}>
       <DndContext onDragEnd={handleDragEnd} autoScroll={autoScrollOptions} sensors={sensors}>
@@ -97,7 +100,9 @@ function TopSitesList (props: Props) {
         </SortableContext>
       </DndContext>
     </GridPagesContainer>
-    {customLinksEnabled && <GridPageButtons numPages={pageCount} pageContainerRef={gridPagesContainerRef} />}
+    {customLinksEnabled &&
+      pageCount > 1 &&
+      <GridPageButtons numPages={pageCount} pageContainerRef={gridPagesContainerRef} />}
   </PagesContainer>
 }
 

components/brave_new_tab_ui/helpers/scrolling.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { debounce } from '../../common/debounce'
 
 const overflowScrollableRegex = /(auto)|(scroll)/g
 const isScrollable = (element: Element) => {
@@ -33,3 +34,31 @@ export const useParentScrolled = (element: HTMLElement | null, handler: (e: Even
         }
     }, [handler, element])
 }
+
+export const useMaintainScrollPosition = (localStorageKey: string, elementRef: React.MutableRefObject<HTMLElement | undefined>, bufferRate = 200) => {
+    React.useEffect(() => {
+        if (!elementRef.current) return
+
+        const debouncedSave = debounce(() => {
+            window.localStorage.setItem(localStorageKey, JSON.stringify({ top: elementRef.current?.scrollTop, left: elementRef.current?.scrollLeft }))
+        }, bufferRate)
+
+        const handler = () => {
+            debouncedSave()
+        }
+
+        elementRef.current.addEventListener('scroll', handler)
+
+        return () => {
+            elementRef.current?.removeEventListener('scroll', handler)
+        }
+    }, [elementRef, localStorageKey, bufferRate])
+
+    React.useEffect(() => {
+        if (!elementRef.current) return
+
+        const scrollPosition: { top: number, left: number } | null = JSON.parse(localStorage.getItem(localStorageKey) ?? 'null')
+        if (!scrollPosition) return
+        elementRef.current.scrollTo(scrollPosition)
+    }, [elementRef, localStorageKey])
+}