refactor: search

src/pages/primary/NoteListPage/SearchButton.tsx

@@ -1,17 +0,0 @@
-import { SearchDialog } from '@/components/SearchDialog'
-import { Button } from '@/components/ui/button'
-import { Search } from 'lucide-react'
-import { useState } from 'react'
-
-export default function SearchButton() {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <Button variant="ghost" size="titlebar-icon" onClick={() => setOpen(true)}>
-        <Search />
-      </Button>
-      <SearchDialog open={open} setOpen={setOpen} />
-    </>
-  )
-}

src/pages/primary/NoteListPage/index.tsx

@@ -1,18 +1,19 @@
+import { useSecondaryPage } from '@/PageManager'
 import BookmarkList from '@/components/BookmarkList'
 import PostEditor from '@/components/PostEditor'
 import { Button } from '@/components/ui/button'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { toSearch } from '@/lib/link'
 import { useFeed } from '@/providers/FeedProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { TPageRef } from '@/types'
-import { PencilLine } from 'lucide-react'
+import { PencilLine, Search } from 'lucide-react'
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
 import FollowingFeed from './FollowingFeed'
 import RelaysFeed from './RelaysFeed'
-import SearchButton from './SearchButton'
 
 const NoteListPage = forwardRef((_, ref) => {
   const { t } = useTranslation()
@@ -76,10 +77,12 @@ function NoteListPageTitlebar() {
   return (
     <div className="flex gap-1 items-center h-full justify-between">
       <FeedButton className="flex-1 max-w-fit w-0" />
-      <div className="shrink-0 flex gap-1 items-center">
-        <SearchButton />
-        {isSmallScreen && <PostButton />}
-      </div>
+      {isSmallScreen && (
+        <div className="shrink-0 flex gap-1 items-center">
+          <SearchButton />
+          <PostButton />
+        </div>
+      )}
     </div>
   )
 }
@@ -106,3 +109,13 @@ function PostButton() {
     </>
   )
 }
+
+function SearchButton() {
+  const { push } = useSecondaryPage()
+
+  return (
+    <Button variant="ghost" size="titlebar-icon" onClick={() => push(toSearch())}>
+      <Search />
+    </Button>
+  )
+}

src/pages/primary/RelayPage/index.tsx

@@ -23,7 +23,7 @@ const RelayPage = forwardRef(({ url }: { url?: string }, ref) => {
       displayScrollToTopButton
       ref={ref}
     >
-      <Relay url={normalizedUrl} className="pt-3" />
+      <Relay url={normalizedUrl} />
     </PrimaryPageLayout>
   )
 })

src/pages/primary/SearchPage/index.tsx

@@ -0,0 +1,42 @@
+import SearchBar, { TSearchBarRef } from '@/components/SearchBar'
+import SearchResult from '@/components/SearchResult'
+import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { usePrimaryPage } from '@/PageManager'
+import { TSearchParams } from '@/types'
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'
+
+const SearchPage = forwardRef((_, ref) => {
+  const { current, display } = usePrimaryPage()
+  const [input, setInput] = useState('')
+  const [searchParams, setSearchParams] = useState<TSearchParams | null>(null)
+  const searchBarRef = useRef<TSearchBarRef>(null)
+  const isActive = useMemo(() => current === 'search' && display, [current, display])
+
+  useEffect(() => {
+    if (isActive) {
+      searchBarRef.current?.focus()
+    }
+  }, [isActive])
+
+  const onSearch = (params: TSearchParams | null) => {
+    setSearchParams(params)
+    if (params?.input) {
+      setInput(params.input)
+    }
+  }
+
+  return (
+    <PrimaryPageLayout
+      ref={ref}
+      pageName="search"
+      titlebar={
+        <SearchBar ref={searchBarRef} onSearch={onSearch} input={input} setInput={setInput} />
+      }
+      displayScrollToTopButton
+    >
+      <SearchResult searchParams={searchParams} />
+    </PrimaryPageLayout>
+  )
+})
+SearchPage.displayName = 'SearchPage'
+export default SearchPage