feat: sticky list mode switcher

src/components/BottomNavigationBar/index.tsx

@@ -1,15 +1,18 @@
 import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
+import AccountButton from './AccountButton'
 import HomeButton from './HomeButton'
 import NotificationsButton from './NotificationsButton'
 import PostButton from './PostButton'
-import AccountButton from './AccountButton'
 
-export default function BottomNavigationBar({ visible = true }: { visible?: boolean }) {
+export default function BottomNavigationBar() {
+  const { deepBrowsing } = useDeepBrowsing()
+
   return (
     <div
       className={cn(
         'fixed bottom-0 w-full z-20 bg-background/80 backdrop-blur-xl duration-700 transition-transform flex items-center justify-around [&_svg]:size-4 [&_svg]:shrink-0',
-        visible ? '' : 'translate-y-full'
+        deepBrowsing ? 'translate-y-full' : ''
       )}
       style={{
         height: 'calc(3rem + env(safe-area-inset-bottom))',

src/components/NoteList/index.tsx

@@ -3,6 +3,7 @@ import { PICTURE_EVENT_KIND } from '@/constants'
 import { isReplyNoteEvent } from '@/lib/event'
 import { checkAlgoRelay } from '@/lib/relay'
 import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -236,9 +237,15 @@ function ListModeSwitch({
   setListMode: (listMode: TNoteListMode) => void
 }) {
   const { t } = useTranslation()
+  const { deepBrowsing } = useDeepBrowsing()
 
   return (
-    <div>
+    <div
+      className={cn(
+        'sticky top-12 bg-background z-10 duration-700 transition-transform',
+        deepBrowsing ? '-translate-y-[calc(100%+12rem)]' : ''
+      )}
+    >
       <div className="flex">
         <div
           className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'posts' ? '' : 'text-muted-foreground'}`}

src/components/ScrollToTopButton/index.tsx

@@ -1,21 +1,22 @@
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { ChevronUp } from 'lucide-react'
 
 export default function ScrollToTopButton({
   scrollAreaRef,
-  className,
-  visible = true
+  className
 }: {
-  scrollAreaRef: React.RefObject<HTMLDivElement>
+  scrollAreaRef?: React.RefObject<HTMLDivElement>
   className?: string
-  visible?: boolean
 }) {
   const { isSmallScreen } = useScreenSize()
+  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
+  const visible = !deepBrowsing && lastScrollTop > 800
 
   const handleScrollToTop = () => {
-    if (isSmallScreen) {
+    if (!scrollAreaRef) {
       window.scrollTo({ top: 0, behavior: 'smooth' })
       return
     }

src/components/Titlebar/index.tsx

@@ -1,19 +1,22 @@
 import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 
 export function Titlebar({
   children,
-  className,
-  visible = true
+  className
 }: {
   children?: React.ReactNode
   className?: string
-  visible?: boolean
 }) {
+  const { isSmallScreen } = useScreenSize()
+  const { deepBrowsing } = useDeepBrowsing()
+
   return (
     <div
       className={cn(
-        'fixed sm:sticky top-0 w-full z-20 bg-background duration-700 transition-transform [&_svg]:size-4 [&_svg]:shrink-0',
-        visible ? '' : '-translate-y-full',
+        'sticky top-0 w-full z-20 bg-background duration-700 transition-transform [&_svg]:size-4 [&_svg]:shrink-0',
+        isSmallScreen && deepBrowsing ? '-translate-y-full' : '',
         className
       )}
     >