feat: update layout

src/layouts/PrimaryPageLayout/index.tsx

@@ -1,4 +1,3 @@
-import BottomNavigationBar from '@/components/BottomNavigationBar'
 import ScrollToTopButton from '@/components/ScrollToTopButton'
 import { Titlebar } from '@/components/Titlebar'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -13,12 +12,14 @@ const PrimaryPageLayout = forwardRef(
       children,
       titlebar,
       pageName,
-      displayScrollToTopButton = false
+      displayScrollToTopButton = false,
+      hideTitlebarBottomBorder = false
     }: {
       children?: React.ReactNode
       titlebar: React.ReactNode
       pageName: TPrimaryPageName
       displayScrollToTopButton?: boolean
+      hideTitlebarBottomBorder?: boolean
     },
     ref
   ) => {
@@ -69,9 +70,10 @@ const PrimaryPageLayout = forwardRef(
               paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
             }}
           >
-            <PrimaryPageTitlebar>{titlebar}</PrimaryPageTitlebar>
+            <PrimaryPageTitlebar hideBottomBorder={hideTitlebarBottomBorder}>
+              {titlebar}
+            </PrimaryPageTitlebar>
             {children}
-            <BottomNavigationBar />
           </div>
           {displayScrollToTopButton && <ScrollToTopButton />}
         </DeepBrowsingProvider>
@@ -81,7 +83,7 @@ const PrimaryPageLayout = forwardRef(
     return (
       <DeepBrowsingProvider active={current === pageName && display} scrollAreaRef={scrollAreaRef}>
         <ScrollArea
-          className="h-screen overflow-auto"
+          className="h-full overflow-auto"
           scrollBarClassName="z-50 pt-12"
           ref={scrollAreaRef}
         >
@@ -101,6 +103,16 @@ export type TPrimaryPageLayoutRef = {
   scrollToTop: () => void
 }
 
-function PrimaryPageTitlebar({ children }: { children?: React.ReactNode }) {
-  return <Titlebar className="p-1">{children}</Titlebar>
+function PrimaryPageTitlebar({
+  children,
+  hideBottomBorder = false
+}: {
+  children?: React.ReactNode
+  hideBottomBorder?: boolean
+}) {
+  return (
+    <Titlebar className="p-1" hideBottomBorder={hideBottomBorder}>
+      {children}
+    </Titlebar>
+  )
 }

src/layouts/SecondaryPageLayout/index.tsx

@@ -1,5 +1,4 @@
 import BackButton from '@/components/BackButton'
-import BottomNavigationBar from '@/components/BottomNavigationBar'
 import ScrollToTopButton from '@/components/ScrollToTopButton'
 import { Titlebar } from '@/components/Titlebar'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -16,6 +15,7 @@ const SecondaryPageLayout = forwardRef(
       title,
       controls,
       hideBackButton = false,
+      hideTitlebarBottomBorder = false,
       displayScrollToTopButton = false
     }: {
       children?: React.ReactNode
@@ -23,6 +23,7 @@ const SecondaryPageLayout = forwardRef(
       title?: React.ReactNode
       controls?: React.ReactNode
       hideBackButton?: boolean
+      hideTitlebarBottomBorder?: boolean
       displayScrollToTopButton?: boolean
     },
     ref
@@ -65,9 +66,9 @@ const SecondaryPageLayout = forwardRef(
               title={title}
               controls={controls}
               hideBackButton={hideBackButton}
+              hideBottomBorder={hideTitlebarBottomBorder}
             />
             {children}
-            <BottomNavigationBar />
           </div>
           {displayScrollToTopButton && <ScrollToTopButton />}
         </DeepBrowsingProvider>
@@ -77,7 +78,7 @@ const SecondaryPageLayout = forwardRef(
     return (
       <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
         <ScrollArea
-          className="h-screen overflow-auto"
+          className="h-full overflow-auto"
           scrollBarClassName="z-50 pt-12"
           ref={scrollAreaRef}
         >
@@ -85,6 +86,7 @@ const SecondaryPageLayout = forwardRef(
             title={title}
             controls={controls}
             hideBackButton={hideBackButton}
+            hideBottomBorder={hideTitlebarBottomBorder}
           />
           {children}
           <div className="h-4" />
@@ -100,14 +102,19 @@ export default SecondaryPageLayout
 export function SecondaryPageTitlebar({
   title,
   controls,
-  hideBackButton = false
+  hideBackButton = false,
+  hideBottomBorder = false
 }: {
   title?: React.ReactNode
   controls?: React.ReactNode
   hideBackButton?: boolean
+  hideBottomBorder?: boolean
 }): JSX.Element {
   return (
-    <Titlebar className="flex gap-1 p-1 items-center justify-between font-semibold">
+    <Titlebar
+      className="flex gap-1 p-1 items-center justify-between font-semibold"
+      hideBottomBorder={hideBottomBorder}
+    >
       {hideBackButton ? (
         <div className="flex gap-2 items-center pl-3 w-fit truncate text-lg font-semibold">
           {title}