Initial frontend import

src/pages/AboutPage.tsx

@@ -0,0 +1,13 @@
+import { useI18n } from "../i18n";
+
+export function AboutPage() {
+  const { t } = useI18n();
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <h1 className="text-2xl font-bold">{t("aboutTitle")}</h1>
+      <p className="text-neutral-300 leading-relaxed whitespace-pre-line">
+        {t("aboutIntro")}
+      </p>
+    </div>
+  );
+}

src/pages/Browse.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getJSON, itemsOrEmpty, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { ResourceListFooter } from "../components/ResourceListFooter";
+import { useI18n } from "../i18n";
+import { typeFilterLabel } from "../resourceTypeLabels";
+
+const types = [
+  "all",
+  "image",
+  "video",
+  "ppt",
+  "pdf",
+  "text",
+  "link",
+  "archive",
+] as const;
+const resourceLangCodes = ["", "zh-TW", "zh-CN", "en"] as const;
+
+function resourceLangLabel(t: (k: string) => string, code: string) {
+  if (!code) return t("filterLanguageAll");
+  if (code === "zh-TW") return t("lang_zh_TW");
+  if (code === "zh-CN") return t("lang_zh_CN");
+  return t("lang_en");
+}
+
+export function Browse() {
+  const { t, lang } = useI18n();
+  const [sp, setSp] = useSearchParams();
+  const sort = sp.get("sort") || "latest";
+  const type = sp.get("type") || "all";
+  const tag = (sp.get("tag") || "").trim();
+  const resourceLang = sp.get("language") || "";
+  const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
+  const limit = 24;
+
+  const [items, setItems] = useState<Resource[]>([]);
+  const [total, setTotal] = useState(0);
+  const [err, setErr] = useState<string | null>(null);
+
+  const query = useMemo(() => {
+    const p = new URLSearchParams();
+    p.set("lang", lang);
+    p.set("sort", sort);
+    p.set("limit", String(limit));
+    p.set("page", String(page));
+    if (type && type !== "all") p.set("type", type);
+    if (resourceLang) p.set("language", resourceLang);
+    if (tag) p.set("tag", tag);
+    return p.toString();
+  }, [lang, sort, type, resourceLang, tag, page]);
+
+  useEffect(() => {
+    setErr(null);
+    getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
+      .then((r) => {
+        setItems(itemsOrEmpty(r.items));
+        setTotal(typeof r.total === "number" ? r.total : 0);
+      })
+      .catch((e) => setErr(String(e)));
+  }, [query]);
+
+  const setPage = (next: number) => {
+    const n = new URLSearchParams(sp);
+    if (next <= 1) n.delete("page");
+    else n.set("page", String(next));
+    setSp(n);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <h1 className="text-2xl font-bold">{t("all")}</h1>
+        <div className="flex flex-wrap gap-2">
+          {(
+            [
+              ["latest", t("latest")],
+              ["recommended", t("official")],
+              ["popular", t("popular")],
+              ["published", t("sortPublished")],
+            ] as const
+          ).map(([k, label]) => (
+            <button
+              key={k}
+              type="button"
+              onClick={() => {
+                const n = new URLSearchParams(sp);
+                n.set("sort", k);
+                n.delete("page");
+                setSp(n);
+              }}
+              className={`rounded-full border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                sort === k
+                  ? "border-ark-gold text-ark-gold2"
+                  : "border-ark-line"
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {types.map((tp) => (
+          <button
+            key={tp}
+            type="button"
+            onClick={() => {
+              const n = new URLSearchParams(sp);
+              n.delete("page");
+              if (tp === "all") n.delete("type");
+              else n.set("type", tp);
+              setSp(n);
+            }}
+            className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+              type === tp || (tp === "all" && !sp.get("type"))
+                ? "border-ark-gold text-ark-gold2"
+                : "border-ark-line"
+            }`}
+          >
+            {typeFilterLabel(t, tp)}
+          </button>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
+          {t("resourceLangFilter")}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {resourceLangCodes.map((code) => (
+            <button
+              key={code || "all"}
+              type="button"
+              onClick={() => {
+                const n = new URLSearchParams(sp);
+                n.delete("page");
+                if (!code) n.delete("language");
+                else n.set("language", code);
+                setSp(n);
+              }}
+              className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                (code === "" && !resourceLang) || resourceLang === code
+                  ? "border-ark-gold text-ark-gold2"
+                  : "border-ark-line"
+              }`}
+            >
+              {resourceLangLabel(t, code)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {tag ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm text-neutral-400">
+            {t("search")}: <span className="text-ark-gold2">{tag}</span>
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              const n = new URLSearchParams(sp);
+              n.delete("tag");
+              n.delete("page");
+              setSp(n);
+            }}
+            className="rounded-full border border-ark-line px-3 py-1 text-xs text-neutral-200 outline-none hover:border-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+          >
+            {t("filterTagClear")}
+          </button>
+        </div>
+      ) : null}
+
+      {err ? <div className="text-red-300">{err}</div> : null}
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {items.map((r) => (
+          <ResourceCard key={r.id} r={r} />
+        ))}
+      </div>
+
+      <ResourceListFooter
+        page={page}
+        limit={limit}
+        total={total}
+        t={t}
+        onPrev={() => setPage(page - 1)}
+        onNext={() => setPage(page + 1)}
+      />
+    </div>
+  );
+}

src/pages/CategoryPage.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useMemo, useState } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { getJSON, itemsOrEmpty, type Category, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { ResourceListFooter } from "../components/ResourceListFooter";
+import { useI18n } from "../i18n";
+import { typeFilterLabel } from "../resourceTypeLabels";
+
+const TYPE_FILTERS = [
+  "all",
+  "image",
+  "video",
+  "ppt",
+  "pdf",
+  "text",
+  "link",
+  "archive",
+] as const;
+const resourceLangCodes = ["", "zh-TW", "zh-CN", "en"] as const;
+
+function resourceLangLabel(t: (k: string) => string, code: string) {
+  if (!code) return t("filterLanguageAll");
+  if (code === "zh-TW") return t("lang_zh_TW");
+  if (code === "zh-CN") return t("lang_zh_CN");
+  return t("lang_en");
+}
+
+export function CategoryPage() {
+  const { slug } = useParams();
+  const { t, lang } = useI18n();
+  const [sp, setSp] = useSearchParams();
+  const type = sp.get("type") || "all";
+  const resourceLang = sp.get("language") || "";
+  const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
+  const limit = 24;
+
+  const [items, setItems] = useState<Resource[]>([]);
+  const [total, setTotal] = useState(0);
+  const [categoryTitle, setCategoryTitle] = useState<string>("");
+  const [err, setErr] = useState<string | null>(null);
+
+  const query = useMemo(() => {
+    const p = new URLSearchParams();
+    p.set("lang", lang);
+    p.set("category", slug || "");
+    p.set("limit", String(limit));
+    p.set("page", String(page));
+    if (type !== "all") p.set("type", type);
+    if (resourceLang) p.set("language", resourceLang);
+    return p.toString();
+  }, [lang, slug, type, resourceLang, page]);
+
+  useEffect(() => {
+    if (!slug) return;
+    setErr(null);
+    getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
+      .then((r) => {
+        setItems(itemsOrEmpty(r.items));
+        setTotal(typeof r.total === "number" ? r.total : 0);
+      })
+      .catch((e) => setErr(String(e)));
+  }, [query, slug]);
+
+  useEffect(() => {
+    if (!slug) return;
+    const langQ = encodeURIComponent(lang);
+    getJSON<Category[]>(`/api/categories?lang=${langQ}`)
+      .then((cats) => {
+        const c = itemsOrEmpty(cats).find((x) => x.slug === slug);
+        setCategoryTitle(c?.name ?? slug);
+      })
+      .catch(() => setCategoryTitle(slug));
+  }, [slug, lang]);
+
+  const setPage = (next: number) => {
+    const n = new URLSearchParams(sp);
+    if (next <= 1) n.delete("page");
+    else n.set("page", String(next));
+    setSp(n);
+  };
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">{categoryTitle || slug}</h1>
+      <div className="flex flex-wrap gap-2">
+        {TYPE_FILTERS.map((tp) => (
+          <button
+            key={tp}
+            type="button"
+            className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+              type === tp || (tp === "all" && !sp.get("type"))
+                ? "border-ark-gold text-ark-gold2"
+                : "border-ark-line"
+            }`}
+            onClick={() => {
+              const n = new URLSearchParams(sp);
+              n.delete("page");
+              if (tp === "all") n.delete("type");
+              else n.set("type", tp);
+              setSp(n);
+            }}
+          >
+            {typeFilterLabel(t, tp)}
+          </button>
+        ))}
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
+          {t("resourceLangFilter")}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {resourceLangCodes.map((code) => (
+            <button
+              key={code || "all"}
+              type="button"
+              onClick={() => {
+                const n = new URLSearchParams(sp);
+                n.delete("page");
+                if (!code) n.delete("language");
+                else n.set("language", code);
+                setSp(n);
+              }}
+              className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                (code === "" && !resourceLang) || resourceLang === code
+                  ? "border-ark-gold text-ark-gold2"
+                  : "border-ark-line"
+              }`}
+            >
+              {resourceLangLabel(t, code)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {err ? <div className="text-red-300">{err}</div> : null}
+      {!err && items.length === 0 ? (
+        <p className="text-neutral-400">{t("noResults")}</p>
+      ) : null}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {items.map((r) => (
+          <ResourceCard key={r.id} r={r} />
+        ))}
+      </div>
+
+      <ResourceListFooter
+        page={page}
+        limit={limit}
+        total={total}
+        t={t}
+        onPrev={() => setPage(page - 1)}
+        onNext={() => setPage(page + 1)}
+      />
+    </div>
+  );
+}

src/pages/FavoritesPage.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { getJSON, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { readFavorites } from "../favorites";
+import { useI18n } from "../i18n";
+
+export function FavoritesPage() {
+  const { t, lang } = useI18n();
+  const [items, setItems] = useState<Resource[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const ids = readFavorites();
+      const out: Resource[] = [];
+      for (const id of ids) {
+        try {
+          const r = await getJSON<Resource>(
+            `/api/resources/${id}?lang=${encodeURIComponent(lang)}`,
+          );
+          out.push(r);
+        } catch {
+          // ignore missing
+        }
+      }
+      if (!cancelled) setItems(out);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [lang]);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">{t("favorites")}</h1>
+      {items.length === 0 ? (
+        <p className="text-neutral-400">{t("favoritesEmpty")}</p>
+      ) : null}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {items.map((r) => (
+          <ResourceCard key={r.id} r={r} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/Home.tsx

@@ -0,0 +1,163 @@
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
+import { getJSON, itemsOrEmpty, type Category, type Resource } from "../api";
+import { CategoryIcon } from "../components/CategoryIcon";
+import { FigmaBanner } from "../components/FigmaBanner";
+import {
+  ComingSoonLatestUpdateRow,
+  LatestUpdateRow,
+} from "../components/LatestUpdateRow";
+import {
+  ComingSoonRecommendedCard,
+  RecommendedCard,
+} from "../components/RecommendedCard";
+import { SectionHeader } from "../components/SectionHeader";
+import { useI18n } from "../i18n";
+import { categoryCardLines } from "../utils/categoryDisplay";
+
+export function Home() {
+  const { t, lang } = useI18n();
+  const [cats, setCats] = useState<Category[]>([]);
+  const [rec, setRec] = useState<Resource[]>([]);
+  const [latest, setLatest] = useState<Resource[]>([]);
+  const [err, setErr] = useState<string | null>(null);
+  const recRowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const q = `?lang=${encodeURIComponent(lang)}`;
+    Promise.all([
+      getJSON<Category[]>(`/api/categories${q}`),
+      getJSON<{ items: Resource[] }>(`/api/resources/recommended${q}&limit=12`),
+      getJSON<{ items: Resource[] }>(`/api/resources/latest${q}&limit=8`),
+    ])
+      .then(([c, r, l]) => {
+        setCats(itemsOrEmpty(c));
+        setRec(itemsOrEmpty(r.items));
+        setLatest(itemsOrEmpty(l.items));
+      })
+      .catch((e) => setErr(String(e)));
+  }, [lang]);
+
+  const iconKeyForResource = (r: Resource) =>
+    cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
+
+  const scrollRec = (dir: 1 | -1) => {
+    recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
+  };
+
+  const recommendedPlaceholderCount = Math.max(0, 5 - rec.length);
+  const latestPlaceholderCount = Math.max(0, 5 - latest.length);
+
+  if (err) {
+    return (
+      <div className="mt-6 rounded-xl border border-red-900 bg-red-950/40 p-4 text-red-200 md:mt-0">
+        {err}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-12 pb-10 md:space-y-14 md:pb-16">
+      <section className="-mt-6 md:mt-0">
+        <FigmaBanner />
+      </section>
+
+      <section id="categories" className="scroll-mt-24">
+        <SectionHeader
+          title={t("categorySection")}
+          viewAllTo="/browse"
+          viewAllLabel={t("viewAll")}
+        />
+        <div className="mt-7 grid grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid-cols-5 md:gap-3 xl:grid-cols-7 xl:gap-4">
+          {cats.map((c) => {
+            const { line1, line2 } = categoryCardLines(c.name);
+            return (
+              <Link
+                key={c.id}
+                to={`/category/${c.slug}`}
+                className="group flex min-h-[111px] min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-ark-line bg-ark-panel px-2.5 py-4 text-center transition hover:border-ark-gold/55 hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] md:min-h-24 md:flex-row md:justify-start md:gap-4 md:px-5 md:text-left"
+              >
+                <CategoryIcon
+                  iconKey={c.iconKey}
+                  categorySlug={c.slug}
+                  className="h-9 w-9 shrink-0 text-ark-gold md:h-9 md:w-9"
+                />
+                <div className="min-w-0">
+                  <div className="text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
+                    {line1}
+                  </div>
+                  {line2 ? (
+                    <div className="mt-0.5 text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
+                      {line2}
+                    </div>
+                  ) : null}
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </section>
+
+      <section>
+        <SectionHeader
+          title={t("officialSection")}
+          viewAllTo="/browse?sort=recommended"
+          viewAllLabel={t("viewAll")}
+        />
+        <div className="relative mt-7">
+          <div
+            ref={recRowRef}
+            className="flex gap-3 overflow-x-auto pb-5 pr-0 scroll-smooth snap-x snap-mandatory [-ms-overflow-style:none] [scrollbar-width:none] md:gap-4 [&::-webkit-scrollbar]:hidden"
+          >
+            {rec.map((r, index) => (
+              <div key={r.id} className="snap-start">
+                <RecommendedCard r={r} visualIndex={index} />
+              </div>
+            ))}
+            {Array.from({ length: recommendedPlaceholderCount }).map(
+              (_, index) => (
+                <div
+                  key={`recommended-coming-soon-${index}`}
+                  className="snap-start"
+                >
+                  <ComingSoonRecommendedCard visualIndex={rec.length + index} />
+                </div>
+              ),
+            )}
+          </div>
+          <div className="h-1 rounded-full bg-black/80 md:hidden">
+            <div className="h-full w-24 rounded-full bg-[#353740]" />
+          </div>
+          <button
+            type="button"
+            onClick={() => scrollRec(1)}
+            className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+            aria-label={t("viewAll")}
+          >
+            <ChevronRight className="h-5 w-5" />
+          </button>
+        </div>
+      </section>
+
+      <section>
+        <SectionHeader
+          title={t("latestSection")}
+          viewAllTo="/browse?sort=latest"
+          viewAllLabel={t("viewAll")}
+        />
+        <div className="mt-7 grid gap-3 min-[576px]:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
+          {latest.map((r) => (
+            <LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
+          ))}
+          {Array.from({ length: latestPlaceholderCount }).map((_, index) => (
+            <ComingSoonLatestUpdateRow
+              key={`latest-coming-soon-${index}`}
+              index={latest.length + index}
+            />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/ResourceDetail.tsx

@@ -0,0 +1,229 @@
+import { Copy, Download, Share2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import {
+  assetUrl,
+  getJSON,
+  itemsOrEmpty,
+  postJSON,
+  postFavoriteDelta,
+  type Resource,
+} from "../api";
+import {
+  resourceLanguageLabel,
+  resourceTypeLabel,
+} from "../resourceTypeLabels";
+import { ResourceCard } from "../components/ResourceCard";
+import { isFavorite, toggleFavorite } from "../favorites";
+import { useI18n } from "../i18n";
+import { isLikelyVideoPath } from "../video";
+
+export function ResourceDetail() {
+  const { id } = useParams();
+  const { t, lang } = useI18n();
+  const [r, setR] = useState<Resource | null>(null);
+  const [rel, setRel] = useState<Resource[]>([]);
+  const [fav, setFav] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    setErr(null);
+    setFav(isFavorite(id));
+    postJSON(`/api/resources/${id}/view`, {}).catch(() => {});
+    getJSON<Resource>(`/api/resources/${id}?lang=${encodeURIComponent(lang)}`)
+      .then(setR)
+      .catch((e) => setErr(String(e)));
+    getJSON<{ items: Resource[] }>(
+      `/api/resources/${id}/related?lang=${encodeURIComponent(lang)}`,
+    )
+      .then((x) => setRel(itemsOrEmpty(x.items)))
+      .catch(() => setRel([]));
+  }, [id, lang]);
+
+  const share = async () => {
+    if (!r) return;
+    const url = window.location.href;
+    try {
+      await postJSON(`/api/resources/${r.id}/share`, {});
+    } catch {
+      // ignore
+    }
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: r.title, text: r.description, url });
+        return;
+      } catch {
+        // fall through
+      }
+    }
+    await navigator.clipboard.writeText(url);
+    alert(t("copyLink"));
+  };
+
+  const download = async () => {
+    if (!r) return;
+    try {
+      await postJSON(`/api/resources/${r.id}/download`, {});
+    } catch {
+      // ignore
+    }
+    const u = assetUrl(r.fileUrl || r.previewUrl);
+    if (u) window.open(u, "_blank");
+  };
+
+  if (err) return <div className="text-red-300">{err}</div>;
+  if (!r) return <div className="text-neutral-400">…</div>;
+
+  const cover = assetUrl(r.coverImage || r.previewUrl);
+  const rawVideo = r.fileUrl || r.previewUrl || "";
+  const showVideo =
+    !!rawVideo && (r.type === "video" || isLikelyVideoPath(rawVideo));
+
+  return (
+    <div className="space-y-8">
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="rounded-3xl border border-ark-line bg-black overflow-hidden">
+          {showVideo ? (
+            <video
+              key={rawVideo}
+              className="w-full aspect-video bg-black"
+              controls
+              playsInline
+              preload="metadata"
+              poster={r.coverImage ? assetUrl(r.coverImage) : undefined}
+              autoPlay
+              muted
+              src={assetUrl(rawVideo)}
+            />
+          ) : r.type === "image" ? (
+            <img
+              src={cover}
+              alt=""
+              className="w-full object-contain max-h-[520px]"
+            />
+          ) : r.previewUrl && r.previewUrl.endsWith(".pdf") ? (
+            <iframe
+              title="pdf"
+              className="h-[520px] w-full"
+              src={assetUrl(r.previewUrl)}
+            />
+          ) : (
+            <div className="p-6 text-neutral-300">
+              {r.bodyText ? (
+                <pre className="whitespace-pre-wrap font-sans">
+                  {r.bodyText}
+                </pre>
+              ) : (
+                <p>{r.description}</p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-4">
+          <div className="text-sm text-ark-muted">
+            <Link
+              className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+              to={`/category/${r.categorySlug}`}
+            >
+              {r.categoryName}
+            </Link>{" "}
+            · {resourceTypeLabel(t, r.type)} ·{" "}
+            {resourceLanguageLabel(t, r.language)}
+          </div>
+          <h1 className="text-3xl font-bold leading-tight">{r.title}</h1>
+          {r.description ? (
+            <p className="text-neutral-300 leading-relaxed">{r.description}</p>
+          ) : null}
+          {r.externalUrl ? (
+            <a
+              className="text-ark-gold2 underline"
+              href={r.externalUrl}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {r.externalUrl}
+            </a>
+          ) : null}
+          {r.tags && r.tags.length ? (
+            <div className="flex flex-wrap gap-2">
+              {r.tags.map((x) => (
+                <Link
+                  key={x}
+                  to={`/browse?tag=${encodeURIComponent(x)}`}
+                  className="rounded-full border border-ark-line px-3 py-1 text-xs text-neutral-300 outline-none transition hover:border-ark-gold/60 hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                >
+                  {x}
+                </Link>
+              ))}
+            </div>
+          ) : null}
+
+          <div className="flex flex-wrap gap-2 pt-2">
+            <button
+              type="button"
+              className={`inline-flex items-center gap-2 rounded-xl border px-4 py-2 text-sm ${
+                fav ? "border-ark-gold text-ark-gold2" : "border-ark-line"
+              }`}
+              onClick={() => {
+                const on = toggleFavorite(r.id);
+                setFav(on);
+                void postFavoriteDelta(r.id, on);
+              }}
+            >
+              {t("favorite")}
+            </button>
+            {r.isDownloadable ? (
+              <button
+                type="button"
+                onClick={download}
+                className="inline-flex items-center gap-2 rounded-xl bg-ark-gold px-4 py-2 text-sm font-semibold text-black"
+              >
+                <Download size={16} />
+                {t("download")}
+              </button>
+            ) : (
+              <div className="text-sm text-neutral-400">
+                此資料目前僅支持在線預覽，暫不提供下載。
+              </div>
+            )}
+            <button
+              type="button"
+              onClick={share}
+              className="inline-flex items-center gap-2 rounded-xl border border-ark-line px-4 py-2 text-sm"
+            >
+              <Share2 size={16} />
+              {t("share")}
+            </button>
+            <button
+              type="button"
+              onClick={async () => {
+                try {
+                  await postJSON(`/api/resources/${r.id}/share`, {});
+                } catch {
+                  // ignore
+                }
+                await navigator.clipboard.writeText(window.location.href);
+                alert(t("copyLink"));
+              }}
+              className="inline-flex items-center gap-2 rounded-xl border border-ark-line px-4 py-2 text-sm"
+            >
+              <Copy size={16} />
+              {t("copyLink")}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <section className="space-y-3">
+        <h2 className="text-xl font-semibold">{t("related")}</h2>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {rel.map((x) => (
+            <ResourceCard key={x.id} r={x} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/SearchPage.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getJSON, itemsOrEmpty, postJSON, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { ResourceListFooter } from "../components/ResourceListFooter";
+import { useI18n } from "../i18n";
+import { typeFilterLabel } from "../resourceTypeLabels";
+
+const types = [
+  "all",
+  "image",
+  "video",
+  "ppt",
+  "pdf",
+  "text",
+  "link",
+  "archive",
+] as const;
+const resourceLangCodes = ["", "zh-TW", "zh-CN", "en"] as const;
+
+function resourceLangLabel(t: (k: string) => string, code: string) {
+  if (!code) return t("filterLanguageAll");
+  if (code === "zh-TW") return t("lang_zh_TW");
+  if (code === "zh-CN") return t("lang_zh_CN");
+  return t("lang_en");
+}
+
+export function SearchPage() {
+  const { t, lang } = useI18n();
+  const [sp, setSp] = useSearchParams();
+  const q = sp.get("q") || "";
+  const sort = sp.get("sort") || "latest";
+  const type = sp.get("type") || "all";
+  const resourceLang = sp.get("language") || "";
+  const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
+  const limit = 24;
+
+  const [items, setItems] = useState<Resource[]>([]);
+  const [total, setTotal] = useState(0);
+  const [err, setErr] = useState<string | null>(null);
+
+  const query = useMemo(() => {
+    const p = new URLSearchParams();
+    p.set("lang", lang);
+    p.set("limit", String(limit));
+    p.set("page", String(page));
+    p.set("sort", sort);
+    if (q) p.set("q", q);
+    if (type && type !== "all") p.set("type", type);
+    if (resourceLang) p.set("language", resourceLang);
+    return p.toString();
+  }, [lang, q, sort, type, resourceLang, page]);
+
+  useEffect(() => {
+    setErr(null);
+    if (!q) {
+      setItems([]);
+      setTotal(0);
+      return;
+    }
+    postJSON("/api/search-log", { query: q }).catch(() => {});
+    getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
+      .then((r) => {
+        setItems(itemsOrEmpty(r.items));
+        setTotal(typeof r.total === "number" ? r.total : 0);
+      })
+      .catch((e) => setErr(String(e)));
+  }, [query, q]);
+
+  const setPage = (next: number) => {
+    const n = new URLSearchParams(sp);
+    if (next <= 1) n.delete("page");
+    else n.set("page", String(next));
+    setSp(n);
+  };
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">
+        {t("search")}: {q || "—"}
+      </h1>
+
+      {q ? (
+        <>
+          <div className="flex flex-wrap gap-2">
+            {(
+              [
+                ["latest", t("latest")],
+                ["recommended", t("official")],
+                ["popular", t("popular")],
+                ["published", t("sortPublished")],
+              ] as const
+            ).map(([k, label]) => (
+              <button
+                key={k}
+                type="button"
+                onClick={() => {
+                  const n = new URLSearchParams(sp);
+                  n.set("sort", k);
+                  n.delete("page");
+                  setSp(n);
+                }}
+                className={`rounded-full border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                  sort === k
+                    ? "border-ark-gold text-ark-gold2"
+                    : "border-ark-line"
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {types.map((tp) => (
+              <button
+                key={tp}
+                type="button"
+                onClick={() => {
+                  const n = new URLSearchParams(sp);
+                  n.delete("page");
+                  if (tp === "all") n.delete("type");
+                  else n.set("type", tp);
+                  setSp(n);
+                }}
+                className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                  type === tp || (tp === "all" && !sp.get("type"))
+                    ? "border-ark-gold text-ark-gold2"
+                    : "border-ark-line"
+                }`}
+              >
+                {typeFilterLabel(t, tp)}
+              </button>
+            ))}
+          </div>
+
+          <div className="space-y-2">
+            <div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
+              {t("resourceLangFilter")}
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {resourceLangCodes.map((code) => (
+                <button
+                  key={code || "all"}
+                  type="button"
+                  onClick={() => {
+                    const n = new URLSearchParams(sp);
+                    n.delete("page");
+                    if (!code) n.delete("language");
+                    else n.set("language", code);
+                    setSp(n);
+                  }}
+                  className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                    (code === "" && !resourceLang) || resourceLang === code
+                      ? "border-ark-gold text-ark-gold2"
+                      : "border-ark-line"
+                  }`}
+                >
+                  {resourceLangLabel(t, code)}
+                </button>
+              ))}
+            </div>
+          </div>
+        </>
+      ) : null}
+
+      {err ? <div className="text-red-300">{err}</div> : null}
+      {!q ? <p className="text-neutral-400">{t("noResults")}</p> : null}
+      {q && items.length === 0 && !err ? (
+        <p className="text-neutral-400">{t("noResults")}</p>
+      ) : null}
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {items.map((r) => (
+          <ResourceCard key={r.id} r={r} />
+        ))}
+      </div>
+
+      {q ? (
+        <ResourceListFooter
+          page={page}
+          limit={limit}
+          total={total}
+          t={t}
+          onPrev={() => setPage(page - 1)}
+          onNext={() => setPage(page + 1)}
+        />
+      ) : null}
+    </div>
+  );
+}

src/pages/WalletPage.tsx

@@ -0,0 +1,23 @@
+import { WalletLoginControls } from "../components/WalletLoginControls";
+import { useI18n } from "../i18n";
+
+export function WalletPage() {
+  const { t } = useI18n();
+
+  return (
+    <div className="mx-auto max-w-lg space-y-6">
+      <h1 className="text-2xl font-bold">{t("walletPageTitle")}</h1>
+      <p className="text-neutral-300 text-sm leading-relaxed">
+        {t("walletPageIntro")}
+      </p>
+      <ul className="text-sm text-neutral-400 space-y-2 list-disc pl-5">
+        <li>{t("walletStepExtension")}</li>
+        <li>{t("walletStepQR")}</li>
+        <li>{t("walletStepSign")}</li>
+      </ul>
+      <div className="rounded-2xl border border-ark-line bg-ark-panel p-6 space-y-4">
+        <WalletLoginControls />
+      </div>
+    </div>
+  );
+}

src/pages/admin/AdminDashboard.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { getJSONAuth } from "../../api";
+import { getToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
+
+type Dash = {
+  totalResources: number;
+  published: number;
+  todayNew: number;
+  totalViews: number;
+  totalDownloads: number;
+  totalFavorites: number;
+  totalShares: number;
+  hotResources: {
+    id: string;
+    title: string;
+    downloads: number;
+    favorites: number;
+    views: number;
+  }[];
+};
+
+export function AdminDashboard() {
+  const t = useAdminT();
+  const [d, setD] = useState<Dash | null>(null);
+  const token = getToken();
+
+  useEffect(() => {
+    getJSONAuth<Dash>("/api/admin/dashboard", token)
+      .then(setD)
+      .catch(() => setD(null));
+  }, [token]);
+
+  if (!d) return <div className="text-neutral-400">{t("loading")}</div>;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">{t("dashboard")}</h1>
+      <div className="grid gap-3 md:grid-cols-3">
+        <Stat label={t("total")} value={d.totalResources} />
+        <Stat label={t("published")} value={d.published} />
+        <Stat label={t("adminStatTodayNew")} value={d.todayNew} />
+        <Stat label={t("views")} value={d.totalViews} />
+        <Stat label={t("downloads")} value={d.totalDownloads} />
+        <Stat label={t("adminStatFavorites")} value={d.totalFavorites} />
+        <Stat label={t("adminMetricShares")} value={d.totalShares} />
+      </div>
+      <div className="rounded-2xl border border-ark-line bg-ark-panel p-4">
+        <div className="font-semibold mb-3">{t("popular")}</div>
+        <div className="divide-y divide-ark-line">
+          {(d.hotResources ?? []).map((x) => (
+            <div
+              key={x.id}
+              className="py-2 flex items-center justify-between gap-3"
+            >
+              <div className="text-sm">{x.title}</div>
+              <div className="text-xs text-neutral-400">
+                {t("adminMetricDownloads")} {x.downloads} ·{" "}
+                {t("adminMetricFavorites")} {x.favorites} ·{" "}
+                {t("adminMetricViews")} {x.views}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-2xl border border-ark-line bg-ark-panel p-4">
+      <div className="text-xs text-neutral-400">{label}</div>
+      <div className="text-2xl font-bold mt-1">{value}</div>
+    </div>
+  );
+}

src/pages/admin/AdminLogin.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { postJSON } from "../../api";
+import { setToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
+import { useAdminRouterMode } from "../../adminRouterMode";
+import { adminUiPrefix } from "../../adminPaths";
+
+export function AdminLogin() {
+  const t = useAdminT();
+  const mode = useAdminRouterMode();
+  const nav = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [err, setErr] = useState<string | null>(null);
+
+  return (
+    <div className="min-h-[70vh] flex items-center justify-center">
+      <form
+        className="w-full max-w-md space-y-4 rounded-3xl border border-ark-line bg-ark-panel p-8"
+        onSubmit={async (e) => {
+          e.preventDefault();
+          setErr(null);
+          try {
+            const r = await postJSON<{ token: string }>("/api/admin/login", {
+              email,
+              password,
+            });
+            setToken(r.token);
+            nav(mode === "basename" ? "/" : adminUiPrefix);
+          } catch (e) {
+            setErr(String(e));
+          }
+        }}
+      >
+        <h1 className="text-2xl font-bold">{t("adminLoginTitle")}</h1>
+        <label className="block text-sm text-neutral-300">
+          {t("email")}
+          <input
+            className="mt-1 w-full rounded-xl border border-ark-line bg-black px-3 py-2"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </label>
+        <label className="block text-sm text-neutral-300">
+          {t("password")}
+          <input
+            type="password"
+            className="mt-1 w-full rounded-xl border border-ark-line bg-black px-3 py-2"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        {err ? <div className="text-sm text-red-300">{err}</div> : null}
+        <button
+          type="submit"
+          className="w-full rounded-xl bg-ark-gold py-3 font-semibold text-black"
+        >
+          {t("login")}
+        </button>
+      </form>
+    </div>
+  );
+}

src/pages/admin/AdminResourceForm.tsx

@@ -0,0 +1,405 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import {
+  getJSON,
+  getJSONAuth,
+  postJSON,
+  putJSON,
+  uploadFile,
+  type Category,
+} from "../../api";
+import { getToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
+import { resourceTypeDisplay } from "../../resourceTypeLabels";
+import { adminUiPrefix } from "../../adminPaths";
+import { useAdminRouterMode } from "../../adminRouterMode";
+
+const types = [
+  "image",
+  "video",
+  "ppt",
+  "pdf",
+  "text",
+  "link",
+  "archive",
+] as const;
+
+export function AdminResourceForm() {
+  const { id } = useParams();
+  const isNew = !id || id === "new";
+  const t = useAdminT();
+  const mode = useAdminRouterMode();
+  const token = getToken();
+  const nav = useNavigate();
+
+  const [cats, setCats] = useState<Category[]>([]);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [rtype, setRtype] = useState<string>("image");
+  const [language, setLanguage] = useState("zh-TW");
+  const [categoryId, setCategoryId] = useState(1);
+  const [coverImage, setCoverImage] = useState("");
+  const [fileUrl, setFileUrl] = useState("");
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [externalUrl, setExternalUrl] = useState("");
+  const [bodyText, setBodyText] = useState("");
+  const [badgeLabel, setBadgeLabel] = useState("");
+  const [isPublic, setIsPublic] = useState(true);
+  const [isDownloadable, setIsDownloadable] = useState(true);
+  const [isRecommended, setIsRecommended] = useState(false);
+  const [sortOrder, setSortOrder] = useState(0);
+  const [status, setStatus] = useState("published");
+  const [tags, setTags] = useState("");
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    getJSON<Category[]>("/api/categories?lang=zh-TW")
+      .then(setCats)
+      .catch(() => setCats([]));
+  }, []);
+
+  useEffect(() => {
+    if (isNew || !id) return;
+    getJSONAuth<any>(`/api/admin/resources/${id}`, token)
+      .then((r) => {
+        setTitle(r.title || "");
+        setDescription(r.description || "");
+        setRtype(r.type || "image");
+        setLanguage(r.language || "zh-TW");
+        setCategoryId(r.categoryId || 1);
+        setCoverImage(r.coverImage || "");
+        setFileUrl(r.fileUrl || "");
+        setPreviewUrl(r.previewUrl || "");
+        setExternalUrl(r.externalUrl || "");
+        setBodyText(r.bodyText || "");
+        setBadgeLabel(r.badgeLabel || "");
+        setIsPublic(!!r.isPublic);
+        setIsDownloadable(!!r.isDownloadable);
+        setIsRecommended(!!r.isRecommended);
+        setSortOrder(r.sortOrder || 0);
+        setStatus(r.status || "draft");
+        setTags((r.tags || []).join(", "));
+      })
+      .catch((e) => setErr(String(e)));
+  }, [id, isNew, token]);
+
+  const payload = useMemo(
+    () => ({
+      title,
+      description,
+      type: rtype,
+      language,
+      categoryId,
+      coverImage,
+      fileUrl,
+      previewUrl,
+      externalUrl,
+      bodyText,
+      badgeLabel,
+      isPublic,
+      isDownloadable,
+      isRecommended,
+      sortOrder,
+      status,
+      tags: tags
+        .split(",")
+        .map((x) => x.trim())
+        .filter(Boolean),
+    }),
+    [
+      title,
+      description,
+      rtype,
+      language,
+      categoryId,
+      coverImage,
+      fileUrl,
+      previewUrl,
+      externalUrl,
+      bodyText,
+      badgeLabel,
+      isPublic,
+      isDownloadable,
+      isRecommended,
+      sortOrder,
+      status,
+      tags,
+    ],
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <h1 className="text-2xl font-bold">
+          {isNew ? t("newResource") : t("adminEditResource")}
+        </h1>
+        <Link
+          to={mode === "basename" ? ".." : `${adminUiPrefix}/resources`}
+          className="text-sm text-neutral-400 hover:text-white"
+        >
+          ← {t("backToList")}
+        </Link>
+      </div>
+      {err ? <div className="text-red-300">{err}</div> : null}
+
+      <div className="grid gap-3 md:grid-cols-2">
+        <Field label={t("title")}>
+          <input
+            className="input"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </Field>
+        <Field label={t("category")}>
+          <select
+            className="input"
+            value={categoryId}
+            onChange={(e) => setCategoryId(Number(e.target.value))}
+          >
+            {cats.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label={t("type")}>
+          <select
+            className="input"
+            value={rtype}
+            onChange={(e) => setRtype(e.target.value)}
+          >
+            {types.map((x) => (
+              <option key={x} value={x}>
+                {resourceTypeDisplay(t, x)}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label={t("language")}>
+          <select
+            className="input"
+            value={language}
+            onChange={(e) => setLanguage(e.target.value)}
+          >
+            <option value="zh-TW">{t("lang_zh_TW")}</option>
+            <option value="zh-CN">{t("lang_zh_CN")}</option>
+            <option value="en">{t("lang_en")}</option>
+          </select>
+        </Field>
+        <Field label={t("status")}>
+          <select
+            className="input"
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+          >
+            <option value="draft">{t("draft")}</option>
+            <option value="published">{t("published")}</option>
+            <option value="archived">{t("archived")}</option>
+          </select>
+        </Field>
+        <Field label={t("sortOrderLabel")}>
+          <input
+            className="input"
+            type="number"
+            value={sortOrder}
+            onChange={(e) => setSortOrder(Number(e.target.value))}
+          />
+        </Field>
+      </div>
+
+      <Field label={t("description")}>
+        <textarea
+          className="input min-h-[90px]"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </Field>
+      <Field label={t("body")}>
+        <textarea
+          className="input min-h-[120px]"
+          value={bodyText}
+          onChange={(e) => setBodyText(e.target.value)}
+        />
+      </Field>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        <Field label={t("cover")}>
+          <div className="flex gap-2">
+            <input
+              className="input flex-1"
+              value={coverImage}
+              onChange={(e) => setCoverImage(e.target.value)}
+            />
+            <UploadButton
+              token={token}
+              accept="image/*"
+              onUploaded={(u) => {
+                setCoverImage(u);
+              }}
+            />
+          </div>
+        </Field>
+        <Field label={t("fileUrl")}>
+          <p className="mb-1 text-xs text-neutral-500">
+            {rtype === "video" ? t("adminVideoFileHint") : null}
+          </p>
+          <div className="flex gap-2">
+            <input
+              className="input flex-1"
+              value={fileUrl}
+              onChange={(e) => setFileUrl(e.target.value)}
+            />
+            <UploadButton
+              token={token}
+              accept={
+                rtype === "video"
+                  ? "video/*,.mp4,.webm,.mov,.mkv,.m4v,.ogv"
+                  : undefined
+              }
+              onUploaded={(u, file) => {
+                setFileUrl(u);
+                if (file?.type.startsWith("video/")) setRtype("video");
+              }}
+            />
+          </div>
+        </Field>
+        <Field label={t("previewUrlLabel")}>
+          <div className="flex gap-2">
+            <input
+              className="input flex-1"
+              value={previewUrl}
+              onChange={(e) => setPreviewUrl(e.target.value)}
+            />
+            <UploadButton
+              token={token}
+              accept={
+                rtype === "video"
+                  ? "video/*,.mp4,.webm,.mov,.mkv,.m4v,.ogv"
+                  : undefined
+              }
+              onUploaded={(u, file) => {
+                setPreviewUrl(u);
+                if (file?.type.startsWith("video/")) setRtype("video");
+              }}
+            />
+          </div>
+        </Field>
+        <Field label={t("externalUrl")}>
+          <input
+            className="input"
+            value={externalUrl}
+            onChange={(e) => setExternalUrl(e.target.value)}
+          />
+        </Field>
+      </div>
+
+      <Field label={`${t("recommended")} / ${t("badge")}`}>
+        <div className="flex flex-col gap-2">
+          <label className="flex items-center gap-2 text-sm text-neutral-300">
+            <input
+              type="checkbox"
+              checked={isRecommended}
+              onChange={(e) => setIsRecommended(e.target.checked)}
+            />
+            {t("recommended")}
+          </label>
+          <input
+            className="input"
+            value={badgeLabel}
+            onChange={(e) => setBadgeLabel(e.target.value)}
+          />
+        </div>
+      </Field>
+
+      <div className="flex flex-wrap gap-4">
+        <label className="flex items-center gap-2 text-sm text-neutral-300">
+          <input
+            type="checkbox"
+            checked={isPublic}
+            onChange={(e) => setIsPublic(e.target.checked)}
+          />
+          {t("public")}
+        </label>
+        <label className="flex items-center gap-2 text-sm text-neutral-300">
+          <input
+            type="checkbox"
+            checked={isDownloadable}
+            onChange={(e) => setIsDownloadable(e.target.checked)}
+          />
+          {t("downloadable")}
+        </label>
+      </div>
+
+      <Field label={t("tagsCommaLabel")}>
+        <input
+          className="input"
+          value={tags}
+          onChange={(e) => setTags(e.target.value)}
+        />
+      </Field>
+
+      <button
+        type="button"
+        className="rounded-xl bg-ark-gold px-6 py-3 font-semibold text-black"
+        onClick={async () => {
+          setErr(null);
+          try {
+            if (isNew) {
+              await postJSON("/api/admin/resources", payload, token);
+            } else {
+              await putJSON(`/api/admin/resources/${id}`, payload, token);
+            }
+            nav(mode === "basename" ? ".." : `${adminUiPrefix}/resources`);
+          } catch (e) {
+            setErr(String(e));
+          }
+        }}
+      >
+        {t("save")}
+      </button>
+
+      <style>{`
+        .input { width: 100%; border: 1px solid #1f1f1f; background: #070707; border-radius: 12px; padding: 10px 12px; }
+      `}</style>
+    </div>
+  );
+}
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="block text-sm text-neutral-300">
+      <div className="mb-1">{label}</div>
+      {children}
+    </label>
+  );
+}
+
+function UploadButton({
+  token,
+  onUploaded,
+  accept,
+}: {
+  token: string;
+  onUploaded: (url: string, file?: File) => void;
+  accept?: string;
+}) {
+  const t = useAdminT();
+  return (
+    <label className="inline-flex cursor-pointer items-center rounded-xl border border-ark-line px-3 py-2 text-xs hover:border-ark-gold">
+      {t("uploadFile")}
+      <input
+        type="file"
+        className="hidden"
+        accept={accept}
+        onChange={async (e) => {
+          const f = e.target.files?.[0];
+          if (!f) return;
+          const r = await uploadFile(f, token);
+          onUploaded(r.url, f);
+          e.target.value = "";
+        }}
+      />
+    </label>
+  );
+}

src/pages/admin/AdminResources.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  getJSON,
+  getJSONAuth,
+  itemsOrEmpty,
+  type AdminResource,
+  type Category,
+} from "../../api";
+import { getToken } from "../../admin/token";
+import { resourceTypeDisplay } from "../../resourceTypeLabels";
+import { useAdminT } from "../../admin/useAdminT";
+import { adminUiPrefix } from "../../adminPaths";
+import { useAdminRouterMode } from "../../adminRouterMode";
+
+function statusLabel(t: (k: string) => string, s: string) {
+  if (s === "published") return t("published");
+  if (s === "draft") return t("draft");
+  if (s === "archived") return t("archived");
+  return s;
+}
+
+const pageSize = 25;
+
+export function AdminResources() {
+  const t = useAdminT();
+  const mode = useAdminRouterMode();
+  const token = getToken();
+  const [items, setItems] = useState<AdminResource[]>([]);
+  const [catNames, setCatNames] = useState<Record<number, string>>({});
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    getJSON<Category[]>("/api/categories?lang=zh-TW")
+      .then((cats) => {
+        const m: Record<number, string> = {};
+        for (const c of cats) m[c.id] = c.name;
+        setCatNames(m);
+      })
+      .catch(() => setCatNames({}));
+  }, []);
+
+  useEffect(() => {
+    getJSONAuth<{ items: AdminResource[]; total?: number }>(
+      `/api/admin/resources?limit=${pageSize}&page=${page}`,
+      token,
+    )
+      .then((r) => {
+        setItems(itemsOrEmpty(r.items));
+        setTotal(typeof r.total === "number" ? r.total : 0);
+      })
+      .catch(() => setItems([]));
+  }, [token, page]);
+
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <h1 className="text-2xl font-bold">{t("resources")}</h1>
+        <Link
+          to={mode === "basename" ? "new" : `${adminUiPrefix}/resources/new`}
+          className="rounded-xl bg-ark-gold px-4 py-2 text-sm font-semibold text-black"
+        >
+          {t("newResource")}
+        </Link>
+      </div>
+      <p className="text-sm text-neutral-500">
+        {t("listRange")
+          .replace(
+            "{{from}}",
+            String(total === 0 ? 0 : (page - 1) * pageSize + 1),
+          )
+          .replace("{{to}}", String(Math.min(page * pageSize, total)))
+          .replace("{{total}}", String(total))}
+      </p>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          disabled={page <= 1}
+          onClick={() => setPage((p) => Math.max(1, p - 1))}
+          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none hover:border-ark-gold disabled:opacity-40"
+        >
+          {t("paginationPrev")}
+        </button>
+        <span className="flex items-center px-2 text-sm text-ark-muted tabular-nums">
+          {t("pageIndicator")
+            .replace("{{c}}", String(page))
+            .replace("{{p}}", String(pages))}
+        </span>
+        <button
+          type="button"
+          disabled={page >= pages}
+          onClick={() => setPage((p) => Math.min(pages, p + 1))}
+          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none hover:border-ark-gold disabled:opacity-40"
+        >
+          {t("paginationNext")}
+        </button>
+      </div>
+      <div className="overflow-x-auto rounded-2xl border border-ark-line">
+        <table className="w-full text-sm">
+          <thead className="bg-ark-panel text-left text-neutral-400">
+            <tr>
+              <th className="p-3">{t("title")}</th>
+              <th className="p-3">{t("category")}</th>
+              <th className="p-3">{t("type")}</th>
+              <th className="p-3">{t("status")}</th>
+              <th className="p-3">{t("downloads")}</th>
+              <th className="p-3" />
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((r) => (
+              <tr key={r.id} className="border-t border-ark-line">
+                <td className="p-3 font-medium">{r.title}</td>
+                <td className="p-3 text-neutral-400">
+                  {catNames[r.categoryId] ?? r.categoryId}
+                </td>
+                <td className="p-3 text-neutral-400">
+                  {resourceTypeDisplay(t, r.type)}
+                </td>
+                <td className="p-3 text-neutral-400">
+                  {statusLabel(t, r.status)}
+                </td>
+                <td className="p-3 text-neutral-400">{r.downloadCount ?? 0}</td>
+                <td className="p-3 text-right">
+                  <Link
+                    className="text-ark-gold2 hover:underline"
+                    to={
+                      mode === "basename"
+                        ? String(r.id)
+                        : `${adminUiPrefix}/resources/${r.id}`
+                    }
+                  >
+                    {t("edit")}
+                  </Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/pages/admin/AdminSearchLogs.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import { getJSONAuth } from "../../api";
+import { getToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
+
+type Row = { id: number; query: string; createdAt: string };
+
+export function AdminSearchLogs() {
+  const t = useAdminT();
+  const token = getToken();
+  const [items, setItems] = useState<Row[]>([]);
+
+  useEffect(() => {
+    getJSONAuth<{ items: Row[] }>("/api/admin/search-logs?limit=300", token)
+      .then((r) => setItems(Array.isArray(r.items) ? r.items : []))
+      .catch(() => setItems([]));
+  }, [token]);
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">{t("adminSearchLogs")}</h1>
+      <div className="overflow-x-auto rounded-2xl border border-ark-line">
+        <table className="w-full text-sm">
+          <thead className="bg-ark-panel text-left text-neutral-400">
+            <tr>
+              <th className="p-3">{t("adminSearchId")}</th>
+              <th className="p-3">{t("adminSearchQuery")}</th>
+              <th className="p-3">{t("adminSearchTime")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((x) => (
+              <tr key={x.id} className="border-t border-ark-line">
+                <td className="p-3 text-neutral-500">{x.id}</td>
+                <td className="p-3 font-medium">{x.query}</td>
+                <td className="p-3 text-neutral-400 whitespace-nowrap">
+                  {x.createdAt}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {items.length === 0 ? (
+        <p className="text-neutral-500 text-sm">{t("noResults")}</p>
+      ) : null}
+    </div>
+  );
+}