feat: add mobile search panel

src/layouts/PublicLayout.tsx

@@ -2,6 +2,7 @@ import { ChevronDown, Menu, Search as SearchIcon, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { ArkLogoMark } from "../components/ArkLogoMark";
+import { SearchPanel } from "../components/SearchPanel";
 import { useI18n, type Lang } from "../i18n";
 import { LANG_OPTIONS } from "../i18nLanguages";
 
@@ -356,21 +357,6 @@ export function PublicLayout() {
           </div>
         </div>
 
-        {mobileSearchOpen ? (
-          <div className="border-t border-white/10 bg-[#08070c] px-5 pb-3 md:hidden max-[360px]:px-3">
-            <div className="flex h-11 items-center gap-2 rounded-full border border-[#2a2a31] bg-[#191921] px-4">
-              <SearchIcon size={18} className="shrink-0 text-[#a8a9ae]" />
-              <input
-                value={q}
-                onChange={(e) => setQ(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && goSearch()}
-                placeholder={t("searchPlaceholder")}
-                className="min-w-0 flex-1 bg-transparent text-sm text-neutral-100 outline-none placeholder:text-[#777985]"
-              />
-            </div>
-          </div>
-        ) : null}
-
         <div className="mx-auto hidden max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:block md:px-9 xl:px-0">
           {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
           <div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4">
@@ -441,7 +427,14 @@ export function PublicLayout() {
 
             <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none">
               <div className="hidden h-10 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 shadow-inner md:flex min-[1200px]:w-44 min-[1200px]:flex-none lg:pr-4 xl:w-52">
-                <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
+                <button
+                  type="button"
+                  onClick={goSearch}
+                  className="shrink-0 rounded-full p-1 text-[#c6c7cf] transition hover:bg-white/5 hover:text-ark-gold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/60"
+                  aria-label={t("searchNow")}
+                >
+                  <SearchIcon size={16} />
+                </button>
                 <input
                   value={q}
                   onChange={(e) => setQ(e.target.value)}
@@ -471,7 +464,14 @@ export function PublicLayout() {
         {open ? (
           <div className="grid gap-2 border-t border-ark-line bg-ark-nav px-4 py-3 min-[440px]:px-5 sm:px-6 md:px-9 min-[1200px]:hidden">
             <div className="mb-1 hidden items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2 md:flex">
-              <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
+              <button
+                type="button"
+                onClick={goSearch}
+                className="shrink-0 rounded-full p-1 text-[#c6c7cf] transition hover:bg-white/5 hover:text-ark-gold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/60"
+                aria-label={t("searchNow")}
+              >
+                <SearchIcon size={16} />
+              </button>
               <input
                 value={q}
                 onChange={(e) => setQ(e.target.value)}
@@ -546,6 +546,16 @@ export function PublicLayout() {
         ) : null}
       </header>
 
+      {mobileSearchOpen ? (
+        <SearchPanel
+          lang={lang}
+          t={t}
+          query={q}
+          onQueryChange={setQ}
+          onSearch={goSearch}
+        />
+      ) : null}
+
       <main
         className={`mx-auto w-full max-w-[1280px] ${
           isHome