feat: use app router for home search

src/app/(home)/search/page.tsx

@@ -0,0 +1,31 @@
+import { Hydrate, dehydrate } from "@tanstack/react-query"
+
+import { SearchInput } from "~/components/common/SearchInput"
+import { HomeFeed } from "~/components/home/HomeFeed"
+import { HomeSidebar } from "~/components/home/HomeSidebar"
+import getQueryClient from "~/lib/query-client"
+import { prefetchGetShowcase } from "~/queries/home.server"
+
+async function Search() {
+  const queryClient = getQueryClient()
+  await prefetchGetShowcase(queryClient)
+  const dehydratedState = dehydrate(queryClient)
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <section className="pt-24">
+        <div className="max-w-screen-lg px-5 mx-auto flex">
+          <div className="flex-1 min-w-[300px]">
+            <SearchInput />
+            <div className="mt-10">
+              <HomeFeed type="search" />
+            </div>
+          </div>
+          <HomeSidebar hideSearch={true} />
+        </div>
+      </section>
+    </Hydrate>
+  )
+}
+
+export default Search

src/components/common/SearchInput.tsx

@@ -1,20 +1,22 @@
-import { useRouter } from "next/navigation"
+"use client"
+
+import { useRouter, useSearchParams } from "next/navigation"
 import { useForm } from "react-hook-form"
 
 import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 export const SearchInput: React.FC<{
-  value?: string
   noBorder?: boolean
   onSubmit?: (value?: string) => void
-}> = ({ value, noBorder, onSubmit }) => {
+}> = ({ noBorder, onSubmit }) => {
   const router = useRouter()
+  const searchParams = useSearchParams()
   const { t } = useTranslation("common")
 
   const form = useForm({
     defaultValues: {
-      content: value || "",
+      content: searchParams?.get("q") || "",
     },
   })
 

src/components/home/HomeFeed.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { useRouter } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { memo, useEffect, useState } from "react"
 import reactStringReplace from "react-string-replace"
 import { Virtuoso } from "react-virtuoso"
@@ -164,10 +164,12 @@ const MemoedPost = memo(Post)
 export const HomeFeed: React.FC<{
   noteIds?: string[]
   keyword?: string
-}> = ({ noteIds, keyword }) => {
+  type?: FeedType
+}> = ({ noteIds, keyword, type }) => {
   const { t } = useTranslation("common")
+  const searchParams = useSearchParams()
 
-  const [feedType, setFeedType] = useState<FeedType>("latest")
+  const [feedType, setFeedType] = useState<FeedType>(type || "latest")
 
   const currentCharacterId = useAccountState(
     (s) => s.computed.account?.characterId,
@@ -181,7 +183,7 @@ export const HomeFeed: React.FC<{
     characterId: currentCharacterId,
     noteIds: noteIds,
     daysInterval: hotInterval,
-    searchKeyword: keyword,
+    searchKeyword: searchParams?.get("q") || undefined,
     searchType,
   })
 
@@ -318,7 +320,7 @@ export const HomeFeed: React.FC<{
                       key={`${post.characterId}-${post.noteId}`}
                       post={post}
                       filtering={aiFiltering ? 60 : 0}
-                      keyword={keyword}
+                      keyword={searchParams?.get("q") || undefined}
                     />
                   )
                 })