feat: sticky list mode switcher

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
       )}
     >