feat: add mobile search panel

src/components/SearchPanel.tsx

@@ -0,0 +1,215 @@
+import { Info, Search as SearchIcon, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { getJSON, itemsOrEmpty } from "../api";
+import { langQuery, type Lang } from "../i18n";
+import type { Post, PostListResponse } from "../types/post";
+import { MessageBubble } from "./messageStream/MessageBubble";
+
+type TagItem = {
+  name: string;
+  count: number;
+};
+
+type SearchPanelProps = {
+  lang: Lang;
+  t: (key: string) => string;
+  query: string;
+  onQueryChange: (value: string) => void;
+  onSearch: () => void;
+};
+
+const TAG_SOURCE_LIMIT = 80;
+const TAG_RESULT_LIMIT = 12;
+
+function buildPostsUrl(params: Record<string, string | number | undefined>) {
+  const sp = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== "") sp.set(key, String(value));
+  });
+  return `/api/posts?${sp.toString()}`;
+}
+
+function buildSearchUrl(params: Record<string, string | number | undefined>) {
+  const sp = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== "") sp.set(key, String(value));
+  });
+  return `/api/posts/search?${sp.toString()}`;
+}
+
+function extractTags(posts: Post[]): TagItem[] {
+  const counts = new Map<string, number>();
+  posts.forEach((post) => {
+    post.tags?.forEach((tag) => {
+      const clean = tag.trim();
+      if (!clean) return;
+      counts.set(clean, (counts.get(clean) ?? 0) + 1);
+    });
+  });
+
+  return [...counts.entries()]
+    .map(([name, count]) => ({ name, count }))
+    .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name))
+    .slice(0, 12);
+}
+
+export function SearchPanel({
+  lang,
+  t,
+  query,
+  onQueryChange,
+  onSearch,
+}: SearchPanelProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [tags, setTags] = useState<TagItem[]>([]);
+  const [selectedTag, setSelectedTag] = useState("");
+  const [tagPosts, setTagPosts] = useState<Post[]>([]);
+  const [isTagLoading, setIsTagLoading] = useState(false);
+  const [isPostLoading, setIsPostLoading] = useState(false);
+
+  const langParam = useMemo(() => langQuery(lang), [lang]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setIsTagLoading(true);
+    getJSON<PostListResponse>(
+      buildPostsUrl({
+        lang: langParam,
+        sort: "latest",
+        limit: TAG_SOURCE_LIMIT,
+      }),
+    )
+      .then((res) => {
+        if (cancelled) return;
+        setTags(extractTags(itemsOrEmpty(res.items)));
+      })
+      .catch(() => {
+        if (!cancelled) setTags([]);
+      })
+      .finally(() => {
+        if (!cancelled) setIsTagLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [langParam]);
+
+  const showTagPosts = (tag: string) => {
+    setSelectedTag(tag);
+    onQueryChange(tag);
+    setIsPostLoading(true);
+    getJSON<PostListResponse>(
+      buildSearchUrl({ lang: langParam, q: tag, limit: TAG_RESULT_LIMIT }),
+    )
+      .then((res) => {
+        const exactMatches = itemsOrEmpty(res.items).filter((post) =>
+          post.tags?.some((postTag) => postTag.trim() === tag),
+        );
+        setTagPosts(exactMatches);
+      })
+      .catch(() => setTagPosts([]))
+      .finally(() => setIsPostLoading(false));
+  };
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto bg-[#0f0f13] md:hidden">
+      <div className="border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3">
+        <div className="flex h-12 items-center gap-2">
+          <div className="flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-gold bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)]">
+            <SearchIcon size={18} className="shrink-0 text-ark-gold" />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => onQueryChange(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && onSearch()}
+              placeholder={t("searchPanelPlaceholder")}
+              className="min-w-0 flex-1 bg-transparent text-sm text-neutral-100 outline-none placeholder:text-[#777985]"
+            />
+            <button
+              type="button"
+              onClick={() => onQueryChange("")}
+              className="shrink-0 rounded-full p-1 text-neutral-500 hover:bg-white/5 hover:text-neutral-200"
+              aria-label={t("clear")}
+            >
+              <X size={18} />
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={onSearch}
+            className="h-10 shrink-0 rounded-full bg-ark-gold px-3 text-sm font-bold text-[#111114] transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
+          >
+            {t("searchSubmit")}
+          </button>
+        </div>
+
+        <div className="mt-1 flex items-start gap-1.5 text-[11px] leading-4 text-[#777985]">
+          <Info size={15} className="mt-0.5 shrink-0" />
+          <span>{t("searchPanelHint")}</span>
+        </div>
+
+        <section className="mt-5">
+          <div className="mb-3 flex items-center justify-between">
+            <h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
+              {t("currentTags")}
+            </h2>
+          </div>
+
+          {isTagLoading ? (
+            <div className="py-3 text-sm text-neutral-500">{t("loading")}</div>
+          ) : tags.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag) => {
+                const active = selectedTag === tag.name;
+                return (
+                  <button
+                    key={tag.name}
+                    type="button"
+                    onClick={() => showTagPosts(tag.name)}
+                    className={`rounded-full border px-3 py-1.5 text-xs font-bold transition ${
+                      active
+                        ? "border-ark-gold bg-ark-gold/15 text-ark-gold"
+                        : "border-white/10 bg-[#232329] text-neutral-200 hover:border-ark-gold/60 hover:text-ark-gold"
+                    }`}
+                  >
+                    #{tag.name}
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="py-3 text-sm text-neutral-500">
+              {t("noTagsAvailable")}
+            </div>
+          )}
+        </section>
+
+        {selectedTag ? (
+          <section className="mt-6">
+            <h2 className="mb-3 border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
+              {t("tagPostsTitle").replace("{{tag}}", selectedTag)}
+            </h2>
+            {isPostLoading ? (
+              <div className="py-4 text-center text-xs text-neutral-500">…</div>
+            ) : tagPosts.length > 0 ? (
+              <div className="flex flex-col gap-3">
+                {tagPosts.map((post) => (
+                  <MessageBubble key={post.id} post={post} />
+                ))}
+              </div>
+            ) : (
+              <p className="py-6 text-center text-sm text-neutral-400">
+                {t("noTagPosts")}
+              </p>
+            )}
+          </section>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/i18n.tsx

@@ -21,7 +21,16 @@ const zhDict: Dict = {
   popular: "热门资料",
   search: "搜索",
   searchPlaceholder: "搜索资料...",
+  searchPanelPlaceholder: "搜索 PPT、影片、海报、公告、教程、文...",
   searchNow: "立即搜索资料",
+  searchSubmit: "搜索",
+  cancel: "取消",
+  clear: "清除",
+  searchPanelHint: "支持搜索 标题・分类・标签・简介・文件类型・正文",
+  currentTags: "现有标签",
+  noTagsAvailable: "暂无可选择的标签。",
+  tagPostsTitle: "#{{tag}} 相关资料",
+  noTagPosts: "暂时找不到带有此标签的资料。",
   viewAll: "查看全部",
   heroTitle: "ARK 官方数据库",
   heroSub:
@@ -138,7 +147,17 @@ const enDict: Dict = {
   popular: "Popular",
   search: "Search",
   searchPlaceholder: "Search resources...",
+  searchPanelPlaceholder: "Search PPT, videos, posters, news, guides...",
   searchNow: "Search now",
+  searchSubmit: "Search",
+  cancel: "Cancel",
+  clear: "Clear",
+  searchPanelHint:
+    "Search supports title, category, tags, summary, file type, and body text.",
+  currentTags: "Available tags",
+  noTagsAvailable: "No tags available yet.",
+  tagPostsTitle: "#{{tag}} related posts",
+  noTagPosts: "No posts with this tag yet.",
   viewAll: "View all",
   heroTitle: "ARK Official Library",
   heroSub:

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