feat: add shortcut for open search

Author: Innei

src/app/layout.tsx

@@ -10,6 +10,7 @@ import { ClerkProvider } from '@clerk/nextjs'
 import PKG from '~/../package.json'
 import { HydrationEndDetector } from '~/components/common/HydrationEndDetector'
 import { Root } from '~/components/layout/root/Root'
+import { SearchPanelWithHotKey } from '~/components/widgets/shared/SearchFAB'
 import { TocAutoScroll } from '~/components/widgets/toc/TocAutoScroll'
 import { attachUA } from '~/lib/attach-ua'
 import { sansFont, serifFont } from '~/lib/fonts'
@@ -136,6 +137,7 @@ export default async function RootLayout(props: Props) {
             <Root>{children}</Root>
 
             <TocAutoScroll />
+            <SearchPanelWithHotKey />
             <Analyze />
           </Providers>
           <ToastContainer />

src/components/widgets/shared/SearchFAB.tsx

@@ -40,13 +40,11 @@ export const SearchFAB = () => {
       >
         <i className="icon-[mingcute--search-line]" />
       </FABPortable>
-      <WithHotKey />
-      <SearchPanel />
     </>
   )
 }
 
-const WithHotKey = () => {
+export const SearchPanelWithHotKey = () => {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'k' && e.metaKey) {
@@ -68,7 +66,7 @@ const WithHotKey = () => {
       document.removeEventListener('keydown', handler)
     }
   }, [])
-  return null
+  return <SearchPanel />
 }
 
 const SearchPanel = () => {