fix: some 🐛

src/components/BottomNavigationBar/index.tsx

@@ -8,7 +8,7 @@ export default function BottomNavigationBar({ visible = true }: { visible?: bool
   return (
     <div
       className={cn(
-        'fixed bottom-0 w-full z-20 bg-background/90 backdrop-blur-xl duration-700 transition-transform flex items-center justify-around [&_svg]:size-4 [&_svg]:shrink-0',
+        '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'
       )}
       style={{

src/components/Titlebar/index.tsx

@@ -12,7 +12,7 @@ export function Titlebar({
   return (
     <div
       className={cn(
-        'fixed sm:sticky top-0 w-full z-20 bg-background/90 backdrop-blur-xl duration-700 transition-transform [&_svg]:size-4 [&_svg]:shrink-0',
+        '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',
         className
       )}

src/components/WebPreview/index.tsx

@@ -29,9 +29,9 @@ export default function WebPreview({
 
   if (isSmallScreen && image) {
     return (
-      <div className="relative border rounded-lg w-full h-44">
-        <Image src={image} className="rounded-lg object-cover w-full h-full" removeWrapper />
-        <div className="absolute bottom-0 z-10 bg-muted/70 px-2 py-1 w-full rounded-b-lg">
+      <div className="rounded-lg border mt-2">
+        <Image src={image} className="rounded-t-lg object-cover w-full h-44" removeWrapper />
+        <div className="bg-muted p-2 w-full rounded-b-lg">
           <div className="text-xs text-muted-foreground">{hostname}</div>
           <div className="font-semibold line-clamp-1">{title}</div>
         </div>

src/layouts/PrimaryPageLayout/index.tsx

@@ -53,6 +53,17 @@ const PrimaryPageLayout = forwardRef(
       if (current !== pageName) return
 
       const handleScroll = () => {
+        const atBottom = isSmallScreen
+          ? window.innerHeight + window.scrollY >= document.body.offsetHeight - 20
+          : scrollAreaRef.current
+            ? scrollAreaRef.current?.clientHeight + scrollAreaRef.current?.scrollTop >=
+              scrollAreaRef.current?.scrollHeight - 20
+            : false
+        if (atBottom) {
+          setVisible(true)
+          return
+        }
+
         const scrollTop = (isSmallScreen ? window.scrollY : scrollAreaRef.current?.scrollTop) || 0
         const diff = scrollTop - lastScrollTop
         if (scrollTop <= 800) {
@@ -99,7 +110,7 @@ const PrimaryPageLayout = forwardRef(
         {displayScrollToTopButton && (
           <ScrollToTopButton
             scrollAreaRef={scrollAreaRef}
-            visible={visible && lastScrollTop > 500}
+            visible={visible && lastScrollTop > 800}
           />
         )}
         {isSmallScreen && <BottomNavigationBar visible={visible} />}

src/layouts/SecondaryPageLayout/index.tsx

@@ -39,9 +39,20 @@ export default function SecondaryPageLayout({
     if (currentIndex !== index) return
 
     const handleScroll = () => {
+      const atBottom = isSmallScreen
+        ? window.innerHeight + window.scrollY >= document.body.offsetHeight - 20
+        : scrollAreaRef.current
+          ? scrollAreaRef.current?.clientHeight + scrollAreaRef.current?.scrollTop >=
+            scrollAreaRef.current?.scrollHeight - 20
+          : false
+      if (atBottom) {
+        setVisible(true)
+        return
+      }
+
       const scrollTop = (isSmallScreen ? window.scrollY : scrollAreaRef.current?.scrollTop) || 0
       const diff = scrollTop - lastScrollTop
-      if (scrollTop <= 100) {
+      if (scrollTop <= 800) {
         setVisible(true)
         setLastScrollTop(scrollTop)
         return
@@ -75,7 +86,7 @@ export default function SecondaryPageLayout({
       scrollBarClassName="sm:z-50"
       ref={scrollAreaRef}
       style={{
-        paddingBottom: isSmallScreen ? 'env(safe-area-inset-bottom) + 3rem)' : ''
+        paddingBottom: isSmallScreen ? 'calc(env(safe-area-inset-bottom) + 3rem)' : ''
       }}
     >
       <SecondaryPageTitlebar
@@ -85,7 +96,7 @@ export default function SecondaryPageLayout({
       />
       <div className="pb-4 mt-2">{children}</div>
       {displayScrollToTopButton && (
-        <ScrollToTopButton scrollAreaRef={scrollAreaRef} visible={visible && lastScrollTop > 500} />
+        <ScrollToTopButton scrollAreaRef={scrollAreaRef} visible={visible && lastScrollTop > 800} />
       )}
       {isSmallScreen && <BottomNavigationBar visible={visible} />}
     </ScrollArea>

src/pages/secondary/NoteListPage/index.tsx

@@ -1,4 +1,5 @@
 import NoteList from '@/components/NoteList'
+import { SEARCHABLE_RELAY_URLS } from '@/constants'
 import { useSearchParams } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { isWebsocketUrl, simplifyUrl } from '@/lib/url'
@@ -27,7 +28,14 @@ export default function NoteListPage({ index }: { index?: number }) {
     }
     const search = searchParams.get('s')
     if (search) {
-      return { title: `${t('Search')}: ${search}`, filter: { search }, urls: searchableRelayUrls }
+      return {
+        title: `${t('Search')}: ${search}`,
+        filter: { search },
+        urls:
+          searchableRelayUrls.length < 4
+            ? searchableRelayUrls.concat(SEARCHABLE_RELAY_URLS).slice(0, 4)
+            : searchableRelayUrls
+      }
     }
     const relayUrl = searchParams.get('relay')
     if (relayUrl && isWebsocketUrl(relayUrl)) {
@@ -38,7 +46,7 @@ export default function NoteListPage({ index }: { index?: number }) {
 
   if (filter?.search && searchableRelayUrls.length === 0) {
     return (
-      <SecondaryPageLayout index={index} titlebarContent={title} displayScrollToTopButton>
+      <SecondaryPageLayout index={index} titlebarContent={title}>
         <div className="text-center text-sm text-muted-foreground">
           {t('The relays you are connected to do not support search')}
         </div>
@@ -47,7 +55,7 @@ export default function NoteListPage({ index }: { index?: number }) {
   }
 
   return (
-    <SecondaryPageLayout index={index} titlebarContent={title}>
+    <SecondaryPageLayout index={index} titlebarContent={title} displayScrollToTopButton>
       <NoteList key={title} filter={filter} relayUrls={urls} />
     </SecondaryPageLayout>
   )

src/pages/secondary/NotePage/index.tsx

@@ -22,7 +22,7 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
 
   if (!event && isFetching) {
     return (
-      <SecondaryPageLayout index={index} titlebarContent={t('Note')} displayScrollToTopButton>
+      <SecondaryPageLayout index={index} titlebarContent={t('Note')}>
         <div className="px-4">
           <Skeleton className="w-10 h-10 rounded-full" />
         </div>
@@ -32,7 +32,7 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
   if (!event) return <NotFoundPage />
 
   return (
-    <SecondaryPageLayout index={index} titlebarContent={t('Note')}>
+    <SecondaryPageLayout index={index} titlebarContent={t('Note')} displayScrollToTopButton>
       <div className="px-4">
         <ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
         <ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />