[Rewards] Render home and explore view on a single page (#27846)

components/brave_rewards/resources/rewards_page/components/app.tsx

@@ -178,17 +178,6 @@ export function App() {
     return null
   }
 
-  function renderMainView() {
-    switch (route) {
-      case routes.creators:
-        return <></>
-      case routes.explore:
-        return <ExploreView />
-      default:
-        return <HomeView />
-    }
-  }
-
   function renderContent() {
     if (loading) {
       return (
@@ -213,7 +202,12 @@ export function App() {
     return (
       <>
         <AppFrame>
-          {renderMainView()}
+          <div data-app-route={routes.home}>
+            <HomeView />
+          </div>
+          <div data-app-route={routes.explore}>
+            <ExploreView />
+          </div>
         </AppFrame>
         {renderModal()}
       </>

components/brave_rewards/resources/rewards_page/components/app_frame.style.ts

@@ -12,6 +12,12 @@ export const style = scoped.css`
     --leo-icon-color: ${color.icon.default};
   }
 
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
   &.panel-frame {
     block-size: 100cqb;
     display: flex;
@@ -54,6 +60,7 @@ export const style = scoped.css`
       overflow: auto;
       scrollbar-width: none;
       padding: 0 16px 16px;
+      position: relative;
     }
 
     footer {
@@ -126,6 +133,7 @@ export const style = scoped.css`
       padding: 16px;
       overflow: hidden auto;
       scrollbar-gutter: stable;
+      position: relative;
     }
 
     main {

components/brave_rewards/resources/rewards_page/components/app_frame.tsx

@@ -33,14 +33,30 @@ function getCurrentNavRoute(route: string) {
   return routes.home
 }
 
+function scrollRouteContentIntoView(route: string) {
+  const elem = document.querySelector(`[data-app-route="${route}"]`)
+  if (!(elem instanceof HTMLElement) || !elem.offsetParent) {
+    return
+  }
+  elem.offsetParent.scrollTo({
+    top: elem.offsetTop - 16,
+    left: 0,
+    behavior: 'smooth'
+  })
+}
+
 function NavList() {
   const { getString } = useLocaleContext()
   const current = getCurrentNavRoute(useRoute())
   const router = React.useContext(RouterContext)
 
   function onLinkClick(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault()
-    router.setRoute(event.currentTarget.getAttribute('href') ?? '')
+    const route = event.currentTarget.getAttribute('href')
+    if (route) {
+      router.setRoute(route)
+      scrollRouteContentIntoView(route)
+    }
   }
 
   function renderLink(route: string, icon: string, text: string) {
@@ -195,6 +211,11 @@ function PageFrame(props: Props) {
 
 export function AppFrame(props: Props) {
   const viewType = useBreakpoint()
+  const route = useRoute()
+
+  React.useEffect(() => {
+    scrollRouteContentIntoView(route)
+  }, [])
 
   if (viewType === 'narrow') {
     return <PanelFrame {...props} />

components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts

@@ -49,6 +49,10 @@ export const style = scoped.css`
     }
   }
 
+  h3 {
+    padding: 8px;
+  }
+
   h4 {
     padding: 16px;
     display: flex;

components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx

@@ -6,6 +6,7 @@
 import * as React from 'react'
 import ProgressRing from '@brave/leo/react/progressRing'
 
+import { useLocaleContext } from '../../lib/locale_strings'
 import { useAppState } from '../../lib/app_model_context'
 import { useBreakpoint } from '../../lib/breakpoint'
 import { BatUtilityCard } from './bat_utility_card'
@@ -15,6 +16,7 @@ import { MerchStoreCard } from './merch_store_card'
 import { style } from './explore_view.style'
 
 export function ExploreView() {
+  const { getString } = useLocaleContext()
   const viewType = useBreakpoint()
   const [cards] = useAppState((state) => [state.cards])
 
@@ -31,6 +33,7 @@ export function ExploreView() {
   if (viewType === 'double') {
     return (
       <div {...style}>
+        <h3>{getString('navigationExploreLabel')}</h3>
         <div className='columns'>
           <div>
             <MerchStoreCard />
@@ -46,6 +49,7 @@ export function ExploreView() {
 
   return (
     <div {...style}>
+      <h3>{getString('navigationExploreLabel')}</h3>
       <MerchStoreCard />
       <BatUtilityCard />
       <CommunityCard />

components/brave_rewards/resources/rewards_page/lib/router.ts

@@ -44,7 +44,7 @@ export class Router {
 }
 
 export const RouterContext = React.createContext<Router>(new Router({
-  get: () => location.pathname.toLocaleLowerCase().replace(/\/$/, ''),
+  get: () => location.pathname.toLocaleLowerCase().replace(/\/$/, '') || '/',
   set: (route) => history.pushState(null, '', route),
   replace: (route) => history.replaceState(null, '', route)
 }))