Initial frontend import

2026-05-16 00:18:22 +08:00
commit 9c54ffec76
99 changed files with 14992 additions and 0 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,50 @@
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { I18nProvider } from "./i18n";
+import { PublicLayout } from "./layouts/PublicLayout";
+import { Home } from "./pages/Home";
+import { Browse } from "./pages/Browse";
+import { CategoryPage } from "./pages/CategoryPage";
+import { SearchPage } from "./pages/SearchPage";
+import { FavoritesPage } from "./pages/FavoritesPage";
+import { ResourceDetail } from "./pages/ResourceDetail";
+import { WalletPage } from "./pages/WalletPage";
+import { AboutPage } from "./pages/AboutPage";
+import { adminUiPrefix } from "./adminPaths";
+import { AdminRouteTree } from "./adminRouteTree";
+import { AdminRouterModeProvider } from "./adminRouterMode";
+
+const adminEnabled = import.meta.env.VITE_DISABLE_ADMIN !== "true";
+
+export default function App() {
+  return (
+    <I18nProvider>
+      <AdminRouterModeProvider value="absolute">
+        <BrowserRouter>
+          <Routes>
+            <Route element={<PublicLayout />}>
+              <Route path="/" element={<Home />} />
+              <Route path="/browse" element={<Browse />} />
+              <Route path="/category/:slug" element={<CategoryPage />} />
+              <Route path="/search" element={<SearchPage />} />
+              <Route path="/favorites" element={<FavoritesPage />} />
+              <Route path="/resource/:id" element={<ResourceDetail />} />
+              <Route path="/wallet" element={<WalletPage />} />
+              <Route path="/about" element={<AboutPage />} />
+            </Route>
+
+            {adminEnabled ? (
+              AdminRouteTree()
+            ) : (
+              <Route
+                path={`${adminUiPrefix}/*`}
+                element={<Navigate to="/" replace />}
+              />
+            )}
+
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </BrowserRouter>
+      </AdminRouterModeProvider>
+    </I18nProvider>
+  );
+}
--- a/src/AppAdminOnly.tsx
+++ b/src/AppAdminOnly.tsx
@@ -0,0 +1,45 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { I18nProvider } from "./i18n";
+import { adminUiPrefix } from "./adminPaths";
+import { AdminRouterModeProvider } from "./adminRouterMode";
+import { AdminLayout } from "./layouts/AdminLayout";
+import { AdminLogin } from "./pages/admin/AdminLogin";
+import { AdminDashboard } from "./pages/admin/AdminDashboard";
+import { AdminResources } from "./pages/admin/AdminResources";
+import { AdminResourceForm } from "./pages/admin/AdminResourceForm";
+import { AdminSearchLogs } from "./pages/admin/AdminSearchLogs";
+
+function NotFound() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-black text-neutral-400">
+      <p className="text-sm">404</p>
+    </div>
+  );
+}
+
+/**
+ * Admin-only bundle: mount under `BrowserRouter basename={adminUiPrefix}` with **relative** route paths
+ * so React Router does not choke on a single long absolute path segment.
+ */
+export default function AppAdminOnly() {
+  const b = adminUiPrefix;
+  return (
+    <I18nProvider>
+      <AdminRouterModeProvider value="basename">
+        <BrowserRouter basename={b}>
+          <Routes>
+            <Route path="login" element={<AdminLogin />} />
+            <Route path="/" element={<AdminLayout />}>
+              <Route index element={<AdminDashboard />} />
+              <Route path="resources" element={<AdminResources />} />
+              <Route path="resources/new" element={<AdminResourceForm />} />
+              <Route path="resources/:id" element={<AdminResourceForm />} />
+              <Route path="search-logs" element={<AdminSearchLogs />} />
+            </Route>
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </AdminRouterModeProvider>
+    </I18nProvider>
+  );
+}
--- a/src/admin/token.ts
+++ b/src/admin/token.ts
@@ -0,0 +1,13 @@
+const KEY = "ark_admin_token";
+
+export function getToken() {
+  return localStorage.getItem(KEY) || "";
+}
+
+export function setToken(t: string) {
+  localStorage.setItem(KEY, t);
+}
+
+export function clearToken() {
+  localStorage.removeItem(KEY);
+}
--- a/src/admin/useAdminT.ts
+++ b/src/admin/useAdminT.ts
@@ -0,0 +1,7 @@
+import { useCallback } from "react";
+import { tLang } from "../i18n";
+
+/** Admin area always uses 繁體中文, independent of site language. */
+export function useAdminT() {
+  return useCallback((key: string) => tLang("zh-TW", key), []);
+}
--- a/src/adminPaths.ts
+++ b/src/adminPaths.ts
@@ -0,0 +1,21 @@
+/**
+ * Obscured admin UI path for hardened admin-only builds.
+ * Keep in sync with `deploy/nginx-admin-host-8080.conf` on ark-library-backend-admin-1.
+ */
+export const ADMIN_UI_SECRET_PREFIX =
+  "/2d7ccf8f4c9af0aaf5c0ef72ddc3f7dca90f44b53df9fd73d7f3ddf82d8b6d3d";
+
+export const adminOnlyBuild = import.meta.env.VITE_ADMIN_ONLY === "true";
+
+/** Base path for admin UI (no trailing slash). */
+function resolveAdminUiPrefix(): string {
+  const raw = import.meta.env.VITE_ADMIN_UI_PREFIX;
+  if (typeof raw === "string" && raw.trim() !== "") {
+    const v = raw.replace(/\/+$/, "");
+    return v.startsWith("/") ? v : `/${v}`;
+  }
+  if (adminOnlyBuild) return ADMIN_UI_SECRET_PREFIX;
+  return "/admin";
+}
+
+export const adminUiPrefix = resolveAdminUiPrefix();
--- a/src/adminRouteTree.tsx
+++ b/src/adminRouteTree.tsx
@@ -0,0 +1,24 @@
+import { Route } from "react-router-dom";
+import { adminUiPrefix } from "./adminPaths";
+import { AdminLayout } from "./layouts/AdminLayout";
+import { AdminLogin } from "./pages/admin/AdminLogin";
+import { AdminDashboard } from "./pages/admin/AdminDashboard";
+import { AdminResources } from "./pages/admin/AdminResources";
+import { AdminResourceForm } from "./pages/admin/AdminResourceForm";
+import { AdminSearchLogs } from "./pages/admin/AdminSearchLogs";
+
+/** Shared between full `App` (when admin enabled) and `AppAdminOnly`. */
+export function AdminRouteTree() {
+  return (
+    <>
+      <Route path={`${adminUiPrefix}/login`} element={<AdminLogin />} />
+      <Route path={adminUiPrefix} element={<AdminLayout />}>
+        <Route index element={<AdminDashboard />} />
+        <Route path="resources" element={<AdminResources />} />
+        <Route path="resources/new" element={<AdminResourceForm />} />
+        <Route path="resources/:id" element={<AdminResourceForm />} />
+        <Route path="search-logs" element={<AdminSearchLogs />} />
+      </Route>
+    </>
+  );
+}
--- a/src/adminRouterMode.tsx
+++ b/src/adminRouterMode.tsx
@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+/** `basename`: admin-only app under `BrowserRouter basename={adminUiPrefix}`. `absolute`: full site `App`. */
+export type AdminRouterMode = "basename" | "absolute";
+
+const AdminRouterModeCtx = createContext<AdminRouterMode>("absolute");
+
+export const AdminRouterModeProvider = AdminRouterModeCtx.Provider;
+
+export function useAdminRouterMode(): AdminRouterMode {
+  return useContext(AdminRouterModeCtx);
+}
--- a/src/api.ts
+++ b/src/api.ts
@@ -0,0 +1,129 @@
+export const apiBase = import.meta.env.VITE_API_URL || "";
+
+/** Go JSON encodes nil slices as null — normalize before .map() */
+export function itemsOrEmpty<T>(items: T[] | null | undefined): T[] {
+  return Array.isArray(items) ? items : [];
+}
+
+export function assetUrl(path: string | undefined | null) {
+  if (!path) return "";
+  if (path.startsWith("http")) return path;
+  return `${apiBase}${path}`;
+}
+
+export async function getJSON<T>(path: string): Promise<T> {
+  const res = await fetch(`${apiBase}${path}`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json() as Promise<T>;
+}
+
+export async function getJSONAuth<T>(path: string, token: string): Promise<T> {
+  const res = await fetch(`${apiBase}${path}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json() as Promise<T>;
+}
+
+export async function postJSON<T>(
+  path: string,
+  body: unknown,
+  token?: string,
+): Promise<T> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+  const res = await fetch(`${apiBase}${path}`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json() as Promise<T>;
+}
+
+/** Best-effort favorite counter sync (anonymous; matches localStorage favorite). */
+export function postFavoriteDelta(id: string, add: boolean) {
+  return postJSON(`/api/resources/${id}/favorite`, { add }).catch(() => {});
+}
+
+export async function putJSON<T>(
+  path: string,
+  body: unknown,
+  token: string,
+): Promise<T> {
+  const res = await fetch(`${apiBase}${path}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json() as Promise<T>;
+}
+
+export async function del(path: string, token: string) {
+  const res = await fetch(`${apiBase}${path}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) throw new Error(await res.text());
+}
+
+export async function uploadFile(
+  file: File,
+  token: string,
+): Promise<{ url: string }> {
+  const fd = new FormData();
+  fd.append("file", file);
+  const res = await fetch(`${apiBase}/api/admin/upload`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}` },
+    body: fd,
+  });
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export type Category = {
+  id: number;
+  slug: string;
+  name: string;
+  description?: string;
+  iconKey: string;
+  sortOrder: number;
+};
+
+export type Resource = {
+  id: string;
+  title: string;
+  description?: string;
+  type: string;
+  language: string;
+  categoryId: number;
+  categorySlug: string;
+  categoryName: string;
+  coverImage?: string;
+  fileUrl?: string;
+  previewUrl?: string;
+  externalUrl?: string;
+  bodyText?: string;
+  badgeLabel?: string;
+  isDownloadable: boolean;
+  isRecommended: boolean;
+  publishedAt?: string;
+  updatedAt: string;
+  tags?: string[];
+};
+
+export type AdminResource = Resource & {
+  isPublic: boolean;
+  sortOrder: number;
+  status: string;
+  publishedAt?: string;
+  viewCount?: number;
+  downloadCount?: number;
+};
--- a/src/assets/logo-primary.webp
+++ b/src/assets/logo-primary.webp
--- a/src/components/ArkLogoMark.tsx
+++ b/src/components/ArkLogoMark.tsx
@@ -0,0 +1,17 @@
+import logoSrc from "../assets/logo-primary.webp?url";
+
+/** Primary ARK mark — imported so Vite emits a content-hashed URL (avoids stale inline-SVG JS + stable /assets/*.webp CDN cache). */
+export function ArkLogoMark({ className = "" }: { className?: string }) {
+  return (
+    <img
+      src={logoSrc}
+      alt=""
+      className={["object-contain select-none", className]
+        .filter(Boolean)
+        .join(" ")}
+      decoding="async"
+      draggable={false}
+      aria-hidden
+    />
+  );
+}
--- a/src/components/CategoryIcon.tsx
+++ b/src/components/CategoryIcon.tsx
@@ -0,0 +1,63 @@
+import {
+  BookOpen,
+  Calendar,
+  Film,
+  Folder,
+  Gift,
+  Globe2,
+  GraduationCap,
+  Hash,
+  Image as ImageIcon,
+  Megaphone,
+  MessageCircle,
+  Newspaper,
+  Palette,
+  Play,
+  type LucideIcon,
+} from "lucide-react";
+import { categorySvgUrlForSlug } from "../lib/categorySvgSlug";
+
+const map: Record<string, LucideIcon> = {
+  folder: Folder,
+  calendar: Calendar,
+  megaphone: Megaphone,
+  graduation: GraduationCap,
+  globe: Globe2,
+  image: ImageIcon,
+  chat: MessageCircle,
+  film: Film,
+  gift: Gift,
+  book: BookOpen,
+  palette: Palette,
+  newspaper: Newspaper,
+  play: Play,
+  hash: Hash,
+};
+
+export function CategoryIcon({
+  iconKey,
+  categorySlug,
+  className,
+}: {
+  iconKey: string;
+  /** When set, prefer branded SVG from `public/assets/ark-library/media/svg/`. */
+  categorySlug?: string;
+  className?: string;
+}) {
+  const svgUrl = categorySlug ? categorySvgUrlForSlug(categorySlug) : null;
+  if (svgUrl) {
+    return (
+      <img
+        src={svgUrl}
+        alt=""
+        className={[className, "object-contain pointer-events-none select-none"]
+          .filter(Boolean)
+          .join(" ")}
+        loading="lazy"
+        decoding="async"
+      />
+    );
+  }
+  const Icon = map[iconKey] || Folder;
+  return <Icon className={className} />;
+}
--- a/src/components/FigmaBanner.tsx
+++ b/src/components/FigmaBanner.tsx
@@ -0,0 +1,37 @@
+const FIGMA_ASSET_BASE = "/assets/ark-library/figma";
+
+export const recommendationCoverFallbacks = [
+  `${FIGMA_ASSET_BASE}/recommendation-1.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-2.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-3.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-4.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-5.png`,
+] as const;
+
+export function FigmaBanner() {
+  return (
+    <picture className="block overflow-hidden border border-[#2a2a32] bg-black shadow-[0_24px_70px_rgba(0,0,0,0.18)] max-md:-mx-4 max-md:rounded-none max-md:border-x-0 md:rounded-xl">
+      <source
+        media="(max-width: 439px)"
+        srcSet={`${FIGMA_ASSET_BASE}/banner-375.png`}
+      />
+      <source
+        media="(max-width: 575px)"
+        srcSet={`${FIGMA_ASSET_BASE}/banner-440.png`}
+      />
+      <source
+        media="(max-width: 767px)"
+        srcSet={`${FIGMA_ASSET_BASE}/banner-576.png`}
+      />
+      <img
+        src={`${FIGMA_ASSET_BASE}/banner-desktop.png`}
+        alt=""
+        className="h-auto w-full object-cover"
+        width={1280}
+        height={290}
+        loading="eager"
+        decoding="async"
+      />
+    </picture>
+  );
+}
--- a/src/components/HeroVisual.tsx
+++ b/src/components/HeroVisual.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { ArkLogoMark } from "./ArkLogoMark";
+
+const HERO_JPEG = "/assets/ark-library/media/jpeg/hero.jpg";
+
+/** Hero: branded JPEG when present; otherwise gold mark + glow (previous behaviour). */
+export function HeroVisual() {
+  const [usePhoto, setUsePhoto] = useState(false);
+
+  useEffect(() => {
+    const im = new Image();
+    im.onload = () => setUsePhoto(true);
+    im.onerror = () => setUsePhoto(false);
+    im.src = HERO_JPEG;
+  }, []);
+
+  if (usePhoto) {
+    return (
+      <div className="relative flex min-h-[220px] md:min-h-[280px] items-center justify-center md:justify-end">
+        <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
+          <div className="absolute -right-8 top-1/2 h-[140%] w-[90%] -translate-y-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(212,175,55,0.18)_0%,transparent_68%)]" />
+        </div>
+        <img
+          src={HERO_JPEG}
+          alt=""
+          className="relative z-10 max-h-[min(340px,52vh)] w-full max-w-lg rounded-2xl object-contain shadow-[0_0_48px_rgba(212,175,55,0.22)]"
+          loading="eager"
+          decoding="async"
+          onError={() => setUsePhoto(false)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex min-h-[220px] md:min-h-[280px] items-center justify-center md:justify-end">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
+        <div className="absolute -right-8 top-1/2 h-[140%] w-[90%] -translate-y-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(212,175,55,0.22)_0%,transparent_68%)]" />
+        <div className="absolute right-[12%] top-[8%] h-3 w-3 rotate-12 rounded-sm border border-ark-gold/40 bg-ark-gold/10" />
+        <div className="absolute right-[22%] top-[18%] h-2 w-2 -rotate-6 rounded-sm border border-ark-gold/30" />
+        <div className="absolute right-[8%] bottom-[28%] h-2.5 w-2.5 rotate-45 rounded-sm bg-ark-gold/15" />
+      </div>
+
+      <div className="relative flex flex-col items-center">
+        <div className="relative drop-shadow-[0_0_40px_rgba(212,175,55,0.35)]">
+          <ArkLogoMark className="h-36 w-36 md:h-44 md:w-44" />
+          <div className="absolute -bottom-2 left-1/2 h-16 w-28 -translate-x-1/2 rounded-[100%] bg-gradient-to-t from-ark-gold/25 via-ark-gold/08 to-transparent blur-md" />
+        </div>
+        <div
+          className="-mt-1 h-3 w-40 rounded-[100%] bg-gradient-to-r from-transparent via-ark-gold/35 to-transparent shadow-[0_0_24px_rgba(212,175,55,0.25)]"
+          aria-hidden
+        />
+      </div>
+    </div>
+  );
+}
--- a/src/components/LatestUpdateRow.tsx
+++ b/src/components/LatestUpdateRow.tsx
@@ -0,0 +1,72 @@
+import { Link } from "react-router-dom";
+import type { Resource } from "../api";
+import { CategoryIcon } from "./CategoryIcon";
+import { useI18n } from "../i18n";
+import { resourceTypeLabel } from "../resourceTypeLabels";
+import { formatDateYmd } from "../utils/format";
+
+const LATEST_CARD_CLASS =
+  "flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";
+
+export function LatestUpdateRow({
+  r,
+  iconKey,
+}: {
+  r: Resource;
+  iconKey: string;
+}) {
+  const { t } = useI18n();
+  const dateStr = formatDateYmd(r.updatedAt);
+
+  return (
+    <Link to={`/resource/${r.id}`} className={LATEST_CARD_CLASS}>
+      <div className="flex shrink-0 items-center justify-center pt-0.5">
+        <CategoryIcon
+          iconKey={iconKey}
+          categorySlug={r.categorySlug}
+          className="h-10 w-10 text-ark-gold"
+        />
+      </div>
+      <div className="min-w-0 flex-1 py-0.5">
+        <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
+          {r.title}
+        </div>
+        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+          <span>{r.categoryName}</span>
+          <span>
+            {resourceTypeLabel(t, r.type)}
+            <time className="mx-2 text-ark-muted" dateTime={r.updatedAt}>
+              {dateStr}
+            </time>
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+const comingSoonIconKeys = ["image", "film", "book", "gift", "folder"];
+
+export function ComingSoonLatestUpdateRow({ index = 0 }: { index?: number }) {
+  const iconKey = comingSoonIconKeys[index % comingSoonIconKeys.length];
+
+  return (
+    <article
+      className={`${LATEST_CARD_CLASS} cursor-default opacity-95 hover:border-ark-line`}
+      aria-label="即将到来"
+    >
+      <div className="flex shrink-0 items-center justify-center pt-0.5">
+        <CategoryIcon iconKey={iconKey} className="h-10 w-10 text-ark-gold" />
+      </div>
+      <div className="min-w-0 flex-1 py-0.5">
+        <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
+          即将到来
+        </div>
+        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+          <span>更多内容准备中</span>
+          <span>Coming soon</span>
+        </div>
+      </div>
+    </article>
+  );
+}
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -0,0 +1,138 @@
+import { Download } from "lucide-react";
+import { Link } from "react-router-dom";
+import type { Resource } from "../api";
+import { assetUrl, postJSON } from "../api";
+import { useI18n } from "../i18n";
+import { useMemo } from "react";
+import { formatDateYmd } from "../utils/format";
+import { recommendationCoverFallbacks } from "./FigmaBanner";
+
+function isPlaceholderAsset(path: string | undefined | null) {
+  return !path || path.includes("placeholder-cover");
+}
+
+const CARD_CLASS =
+  "group flex w-[232px] shrink-0 flex-col overflow-hidden rounded-xl border border-ark-line bg-ark-panel transition hover:border-ark-gold/55 max-[439px]:w-[232px] min-[440px]:w-[230px] sm:w-[240px] lg:w-[246.4px]";
+
+export function RecommendedCard({
+  r,
+  visualIndex = 0,
+}: {
+  r: Resource;
+  visualIndex?: number;
+}) {
+  const { t } = useI18n();
+  const cover = useMemo(() => {
+    const original = r.coverImage || r.previewUrl;
+    if (isPlaceholderAsset(original)) {
+      return recommendationCoverFallbacks[
+        visualIndex % recommendationCoverFallbacks.length
+      ];
+    }
+    return assetUrl(original);
+  }, [r.coverImage, r.previewUrl, visualIndex]);
+  const dateStr = formatDateYmd(r.updatedAt);
+
+  const dl =
+    r.isDownloadable && (r.fileUrl || r.previewUrl)
+      ? assetUrl(r.fileUrl || r.previewUrl)
+      : "";
+
+  return (
+    <article className={CARD_CLASS}>
+      <Link
+        to={`/resource/${r.id}`}
+        className="relative block aspect-[246.4/138.6] overflow-hidden bg-black"
+      >
+        {cover ? (
+          <img
+            src={cover}
+            alt=""
+            className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
+            loading="lazy"
+          />
+        ) : (
+          <div className="h-full w-full bg-gradient-to-br from-neutral-900 to-neutral-950" />
+        )}
+        {r.badgeLabel ? (
+          <span className="absolute left-3 top-3 rounded-md bg-ark-gold px-2.5 py-1 text-xs font-semibold text-black">
+            {r.badgeLabel}
+          </span>
+        ) : null}
+      </Link>
+      <div className="flex min-h-[121px] flex-1 flex-col p-4 pt-3">
+        <Link
+          to={`/resource/${r.id}`}
+          className="text-base font-bold leading-snug text-white line-clamp-2 hover:text-ark-gold2"
+        >
+          {r.title}
+        </Link>
+        <div className="mt-auto flex items-center justify-between gap-2 pt-4 text-xs text-ark-muted">
+          <div className="min-w-0 truncate">
+            <span className="text-neutral-400">{r.categoryName}</span>
+            <span className="mx-1.5 text-ark-line">·</span>
+            <time dateTime={r.updatedAt}>{dateStr}</time>
+          </div>
+          {dl ? (
+            <button
+              type="button"
+              className="shrink-0 rounded-lg p-1 text-ark-gold outline-none hover:bg-ark-gold/10 focus-visible:ring-2 focus-visible:ring-ark-gold/80"
+              title={t("download")}
+              aria-label={t("download")}
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                try {
+                  await postJSON(`/api/resources/${r.id}/download`, {});
+                } catch {
+                  /* ignore */
+                }
+                window.open(dl, "_blank", "noopener,noreferrer");
+              }}
+            >
+              <Download className="h-5 w-5" strokeWidth={2.2} />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export function ComingSoonRecommendedCard({
+  visualIndex = 0,
+}: {
+  visualIndex?: number;
+}) {
+  const cover =
+    recommendationCoverFallbacks[
+      visualIndex % recommendationCoverFallbacks.length
+    ];
+
+  return (
+    <article
+      className={`${CARD_CLASS} cursor-default opacity-95`}
+      aria-label="即将到来"
+    >
+      <div className="relative block aspect-[246.4/138.6] overflow-hidden bg-black">
+        <img
+          src={cover}
+          alt=""
+          className="h-full w-full object-cover opacity-75 grayscale-[15%]"
+          loading="lazy"
+        />
+        <span className="absolute left-3 top-3 rounded-md bg-ark-gold px-2.5 py-1 text-xs font-semibold text-black">
+          即将到来
+        </span>
+      </div>
+      <div className="flex min-h-[121px] flex-1 flex-col p-4 pt-3">
+        <div className="text-base font-bold leading-snug text-white line-clamp-2">
+          即将到来
+        </div>
+        <div className="mt-auto pt-4 text-xs text-ark-muted">
+          更多内容准备中
+        </div>
+      </div>
+    </article>
+  );
+}
--- a/src/components/ResourceCard.tsx
+++ b/src/components/ResourceCard.tsx
@@ -0,0 +1,101 @@
+import { Download, Eye, Heart } from "lucide-react";
+import { Link } from "react-router-dom";
+import type { Resource } from "../api";
+import { assetUrl, postJSON, postFavoriteDelta } from "../api";
+import { isFavorite, toggleFavorite } from "../favorites";
+import { useI18n } from "../i18n";
+import { resourceTypeLabel } from "../resourceTypeLabels";
+import { formatDateYmd } from "../utils/format";
+import { useMemo, useState } from "react";
+
+export function ResourceCard({
+  r,
+  onFavoriteToggle,
+}: {
+  r: Resource;
+  onFavoriteToggle?: () => void;
+}) {
+  const { t } = useI18n();
+  const [fav, setFav] = useState(() => isFavorite(r.id));
+  const cover = useMemo(
+    () => assetUrl(r.coverImage || r.previewUrl),
+    [r.coverImage, r.previewUrl],
+  );
+
+  return (
+    <div className="rounded-2xl border border-ark-line bg-ark-panel overflow-hidden flex flex-col">
+      <div className="relative aspect-video bg-black">
+        {cover ? (
+          <img
+            src={cover}
+            alt=""
+            className="h-full w-full object-cover"
+            loading="lazy"
+          />
+        ) : (
+          <div className="h-full w-full bg-gradient-to-br from-neutral-900 to-neutral-800" />
+        )}
+        {r.badgeLabel ? (
+          <span className="absolute left-3 top-3 rounded-full bg-ark-gold/90 px-3 py-1 text-xs font-semibold text-black">
+            {r.badgeLabel}
+          </span>
+        ) : null}
+      </div>
+      <div className="p-4 flex flex-col gap-2 flex-1">
+        <div className="text-sm text-ark-muted">{r.categoryName}</div>
+        <div className="text-lg font-semibold leading-snug line-clamp-2">
+          {r.title}
+        </div>
+        <div className="text-xs text-ark-muted">
+          {r.type.toUpperCase()} · {new Date(r.updatedAt).toLocaleDateString()}
+        </div>
+        {r.description ? (
+          <p className="text-sm text-neutral-300 line-clamp-2">
+            {r.description}
+          </p>
+        ) : null}
+        <div className="mt-auto flex flex-wrap gap-2 pt-2">
+          <Link
+            to={`/resource/${r.id}`}
+            className="inline-flex items-center gap-1 rounded-lg border border-ark-line px-3 py-2 text-sm outline-none hover:border-ark-gold 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"
+          >
+            <Eye size={16} /> {t("preview")}
+          </Link>
+          <button
+            type="button"
+            className={`inline-flex items-center gap-1 rounded-lg border px-3 py-2 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 ${
+              fav
+                ? "border-ark-gold text-ark-gold2"
+                : "border-ark-line hover:border-ark-gold"
+            }`}
+            onClick={() => {
+              const on = toggleFavorite(r.id);
+              setFav(on);
+              void postFavoriteDelta(r.id, on);
+              onFavoriteToggle?.();
+            }}
+          >
+            <Heart size={16} /> {t("favorite")}
+          </button>
+          {r.isDownloadable && (r.fileUrl || r.previewUrl) ? (
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 rounded-lg bg-ark-gold px-3 py-2 text-sm font-semibold text-black outline-none hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold2 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+              onClick={async () => {
+                const u = assetUrl(r.fileUrl || r.previewUrl);
+                try {
+                  await postJSON(`/api/resources/${r.id}/download`, {});
+                } catch {
+                  /* ignore */
+                }
+                window.open(u, "_blank", "noopener,noreferrer");
+              }}
+            >
+              <Download size={16} /> {t("download")}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/ResourceListFooter.tsx
+++ b/src/components/ResourceListFooter.tsx
@@ -0,0 +1,54 @@
+type T = (k: string) => string;
+
+export function ResourceListFooter({
+  page,
+  limit,
+  total,
+  t,
+  onPrev,
+  onNext,
+}: {
+  page: number;
+  limit: number;
+  total: number;
+  t: T;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  const pages = Math.max(1, Math.ceil(total / limit));
+  const from = total === 0 ? 0 : (page - 1) * limit + 1;
+  const to = Math.min(page * limit, total);
+  return (
+    <div className="flex flex-col items-center justify-between gap-3 border-t border-ark-line pt-6 sm:flex-row">
+      <p className="text-sm text-neutral-400">
+        {t("listRange")
+          .replace("{{from}}", String(from))
+          .replace("{{to}}", String(to))
+          .replace("{{total}}", String(total))}
+      </p>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          disabled={page <= 1}
+          onClick={onPrev}
+          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+        >
+          {t("paginationPrev")}
+        </button>
+        <span className="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={onNext}
+          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+        >
+          {t("paginationNext")}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/components/SectionHeader.tsx
+++ b/src/components/SectionHeader.tsx
@@ -0,0 +1,30 @@
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export function SectionHeader({
+  title,
+  viewAllTo,
+  viewAllLabel,
+}: {
+  title: string;
+  viewAllTo: string;
+  viewAllLabel: string;
+}) {
+  return (
+    <div className="flex h-6 items-center justify-between gap-4">
+      <div className="flex min-w-0 items-center gap-4">
+        <span className="h-6 w-1 shrink-0 bg-ark-gold" aria-hidden />
+        <h2 className="truncate text-2xl font-bold leading-6 tracking-tight text-white md:text-2xl">
+          {title}
+        </h2>
+      </div>
+      <Link
+        to={viewAllTo}
+        className="inline-flex shrink-0 items-center gap-1 text-[15px] font-medium leading-none text-ark-gold hover:text-ark-gold2"
+      >
+        {viewAllLabel}
+        <ChevronRight className="h-4 w-4" strokeWidth={2.7} />
+      </Link>
+    </div>
+  );
+}
--- a/src/components/WalletLoginControls.tsx
+++ b/src/components/WalletLoginControls.tsx
@@ -0,0 +1,127 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { useAccount, useDisconnect, useSignMessage } from "wagmi";
+import { useCallback, useEffect, useState } from "react";
+import { postJSON, apiBase } from "../api";
+import {
+  clearWalletToken,
+  getWalletToken,
+  setWalletToken,
+} from "../walletToken";
+import { useI18n } from "../i18n";
+
+export function WalletLoginControls() {
+  const { t } = useI18n();
+  const { address, isConnected } = useAccount();
+  const { disconnectAsync } = useDisconnect();
+  const { signMessageAsync, isPending: signing } = useSignMessage();
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [sessionOk, setSessionOk] = useState(false);
+
+  const checkSession = useCallback(async () => {
+    const tok = getWalletToken();
+    if (!tok || !address) {
+      setSessionOk(false);
+      return;
+    }
+    try {
+      const r = await fetch(`${apiBase}/api/auth/wallet/me`, {
+        headers: { Authorization: `Bearer ${tok}` },
+      });
+      if (!r.ok) {
+        clearWalletToken();
+        setSessionOk(false);
+        return;
+      }
+      const j = (await r.json()) as { wallet: string };
+      setSessionOk(j.wallet?.toLowerCase() === address.toLowerCase());
+    } catch {
+      setSessionOk(false);
+    }
+  }, [address]);
+
+  useEffect(() => {
+    void checkSession();
+  }, [checkSession]);
+
+  useEffect(() => {
+    if (!address) clearWalletToken();
+  }, [address]);
+
+  const signIn = async () => {
+    if (!address) return;
+    setErr(null);
+    setBusy(true);
+    try {
+      const nonceRes = await postJSON<{ message: string }>(
+        "/api/auth/wallet/nonce",
+        { address },
+      );
+      const sig = await signMessageAsync({ message: nonceRes.message });
+      const out = await postJSON<{ token: string }>("/api/auth/wallet/verify", {
+        address,
+        message: nonceRes.message,
+        signature: sig,
+      });
+      setWalletToken(out.token);
+      setSessionOk(true);
+    } catch (e) {
+      setErr(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const signOut = async () => {
+    clearWalletToken();
+    setSessionOk(false);
+    await disconnectAsync();
+  };
+
+  if (!import.meta.env.VITE_WALLETCONNECT_PROJECT_ID) {
+    return (
+      <span
+        className="text-xs text-amber-500/90 max-w-[220px] text-right leading-tight"
+        title={t("walletMissingProjectId")}
+      >
+        {t("walletSetupNeeded")}
+      </span>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-end gap-1 min-w-[200px]">
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        <ConnectButton chainStatus="icon" showBalance={false} />
+        {isConnected && address ? (
+          sessionOk ? (
+            <span className="text-xs text-ark-gold2 whitespace-nowrap">
+              {t("walletSignedIn")}
+            </span>
+          ) : (
+            <button
+              type="button"
+              disabled={busy || signing}
+              onClick={() => void signIn()}
+              className="rounded-lg border border-ark-gold bg-ark-gold/10 px-3 py-1.5 text-xs font-medium text-ark-gold2 hover:bg-ark-gold/20 disabled:opacity-50"
+            >
+              {busy || signing ? "…" : t("signInWallet")}
+            </button>
+          )
+        ) : null}
+        {isConnected && sessionOk ? (
+          <button
+            type="button"
+            onClick={() => void signOut()}
+            className="text-xs text-neutral-500 hover:text-white"
+          >
+            {t("walletLogout")}
+          </button>
+        ) : null}
+      </div>
+      {err ? (
+        <p className="text-xs text-red-400 max-w-xs text-right">{err}</p>
+      ) : null}
+    </div>
+  );
+}
--- a/src/favorites.ts
+++ b/src/favorites.ts
@@ -0,0 +1,28 @@
+const KEY = "ark_favorites";
+
+export function readFavorites(): string[] {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return [];
+    const v = JSON.parse(raw);
+    return Array.isArray(v) ? v.filter((x) => typeof x === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+export function toggleFavorite(id: string): boolean {
+  const cur = new Set(readFavorites());
+  if (cur.has(id)) {
+    cur.delete(id);
+  } else {
+    cur.add(id);
+  }
+  const next = [...cur];
+  localStorage.setItem(KEY, JSON.stringify(next));
+  return cur.has(id);
+}
+
+export function isFavorite(id: string) {
+  return readFavorites().includes(id);
+}
--- a/src/i18n.tsx
+++ b/src/i18n.tsx
@@ -0,0 +1,423 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export type Lang = "zh-TW" | "zh-CN" | "en";
+
+type Dict = Record<string, string>;
+
+const dict: Record<Lang, Dict> = {
+  "zh-TW": {
+    brand: "ARK 資料庫",
+    mainNav: "網站導覽",
+    home: "首頁",
+    all: "全部資料",
+    categories: "分類瀏覽",
+    latest: "最新更新",
+    official: "官方推薦",
+    popular: "熱門資料",
+    favorites: "我的收藏",
+    search: "搜尋",
+    searchPlaceholder: "搜尋資料...",
+    searchNow: "立即搜尋資料",
+    viewAll: "查看全部",
+    heroTitle: "ARK 官方資料庫",
+    heroSub:
+      "集中、分類、管理 ARK 資料庫，讓你快速找到所需資源，推動社群共識與成長。",
+    categorySection: "資料分類",
+    officialSection: "官方推薦",
+    latestSection: "最新更新",
+    popularSection: "熱門資料",
+    preview: "預覽",
+    download: "下載",
+    favorite: "收藏",
+    share: "分享",
+    profile: "個人中心",
+    langLabel: "語言",
+    admin: "後台",
+    login: "登入",
+    logout: "登出",
+    email: "電子郵件",
+    password: "密碼",
+    dashboard: "儀表板",
+    resources: "資料管理",
+    newResource: "新增資料",
+    save: "儲存",
+    title: "標題",
+    description: "簡介",
+    type: "類型",
+    language: "語言",
+    category: "分類",
+    status: "狀態",
+    public: "公開",
+    downloadable: "可下載",
+    recommended: "首頁推薦",
+    cover: "封面圖 URL",
+    fileUrl: "檔案 URL",
+    externalUrl: "外部連結",
+    body: "文案內容",
+    badge: "推薦標籤",
+    published: "已發布",
+    draft: "草稿",
+    archived: "封存",
+    noResults: "找不到符合的資料，請換個關鍵字或瀏覽分類。",
+    copyLink: "複製連結",
+    related: "相關資料",
+    total: "總資料",
+    views: "瀏覽",
+    downloads: "下載",
+    wallet: "錢包",
+    walletPageTitle: "錢包登入",
+    walletPageIntro:
+      "連接 Web3 錢包以使用會員相關功能。採用標準簽名登入，不會發送交易、不消耗 gas。",
+    walletStepExtension:
+      "電腦已安裝擴充錢包（如 MetaMask）時，可直接在瀏覽器連線。",
+    walletStepQR:
+      "電腦未安裝錢包時：在連線視窗選擇 WalletConnect，用手機錢包掃描畫面上的 QR Code 即可連線。",
+    walletStepSign:
+      "連線成功後，點「簽署登入」並在錢包內簽署訊息，即完成網站身分驗證。",
+    signInWallet: "簽署登入",
+    walletSignedIn: "已驗證登入",
+    walletLogout: "登出錢包",
+    walletMissingProjectId:
+      "請設定 VITE_WALLETCONNECT_PROJECT_ID（Reown Cloud 免費申請），否則無法使用 WalletConnect／手機掃碼。",
+    walletSetupNeeded: "錢包掃碼未啟用（請於伺服器設定環境變數）",
+    lang_zh_TW: "繁體中文",
+    lang_zh_CN: "简体中文",
+    lang_en: "English",
+    filterAll: "全部",
+    sortPublished: "發布時間",
+    type_ppt: "PPT",
+    type_video: "影片",
+    type_image: "圖片",
+    type_pdf: "PDF",
+    type_link: "連結",
+    type_text: "文字",
+    type_archive: "壓縮檔",
+    type_zip: "ZIP",
+    adminLoginTitle: "管理後台登入",
+    adminEditResource: "編輯資料",
+    adminVideoFileHint:
+      "上傳影片檔（MP4/WebM/MOV 等），類型請選「影片」；儲存後前台會自動播放（預設靜音，可點喇叭開聲音）。",
+    adminStatTodayNew: "今日新增",
+    adminStatFavorites: "收藏",
+    adminMetricDownloads: "下載",
+    adminMetricFavorites: "收藏",
+    adminMetricViews: "瀏覽",
+    edit: "編輯",
+    backToList: "返回列表",
+    sortOrderLabel: "排序權重",
+    previewUrlLabel: "預覽網址",
+    tagsCommaLabel: "標籤（逗號分隔）",
+    uploadFile: "上傳檔案",
+    loading: "載入中…",
+    favoritesEmpty: "尚未加入收藏。",
+    paginationPrev: "上一頁",
+    paginationNext: "下一頁",
+    listRange: "顯示 {{from}}–{{to}}，共 {{total}} 筆",
+    pageIndicator: "{{c}} / {{p}} 頁",
+    resourceLangFilter: "資料語言",
+    filterTagClear: "清除標籤",
+    filterLanguageAll: "全部語言",
+    aboutTitle: "關於本站",
+    aboutIntro:
+      "ARK 資料庫彙整官方教材、公告、影片與常用檔案，協助社群快速取得一致版本的可信內容。\n\n本站僅作展示與索引；資料權利仍以官方公告為準。",
+    footerAbout: "關於本站",
+    footerAdminLogin: "管理員登入",
+    adminSearchLogs: "搜尋紀錄",
+    adminMetricShares: "分享",
+    adminSearchQuery: "查詢詞",
+    adminSearchTime: "時間",
+    adminSearchId: "編號",
+  },
+  "zh-CN": {
+    brand: "ARK 数据库",
+    mainNav: "网站导航",
+    home: "首页",
+    all: "全部资料",
+    categories: "分类浏览",
+    latest: "最新更新",
+    official: "官方推荐",
+    popular: "热门资料",
+    favorites: "我的收藏",
+    search: "搜索",
+    searchPlaceholder: "搜索资料...",
+    searchNow: "立即搜索资料",
+    viewAll: "查看全部",
+    heroTitle: "ARK 官方数据库",
+    heroSub:
+      "集中、分类、管理 ARK 数据库，让你快速找到所需资源，推动社群共识与成长。",
+    categorySection: "资料分类",
+    officialSection: "官方推荐",
+    latestSection: "最新更新",
+    popularSection: "热门资料",
+    preview: "预览",
+    download: "下载",
+    favorite: "收藏",
+    share: "分享",
+    profile: "个人中心",
+    langLabel: "语言",
+    admin: "后台",
+    login: "登录",
+    logout: "退出",
+    email: "邮箱",
+    password: "密码",
+    dashboard: "仪表盘",
+    resources: "资料管理",
+    newResource: "新增资料",
+    save: "保存",
+    title: "标题",
+    description: "简介",
+    type: "类型",
+    language: "语言",
+    category: "分类",
+    status: "状态",
+    public: "公开",
+    downloadable: "可下载",
+    recommended: "首页推荐",
+    cover: "封面图 URL",
+    fileUrl: "文件 URL",
+    externalUrl: "外部链接",
+    body: "文案内容",
+    badge: "推荐标签",
+    published: "已发布",
+    draft: "草稿",
+    archived: "归档",
+    noResults: "找不到符合的资料，请换个关键字或浏览分类。",
+    copyLink: "复制链接",
+    related: "相关资料",
+    total: "总资料",
+    views: "浏览",
+    downloads: "下载",
+    wallet: "钱包",
+    walletPageTitle: "钱包登录",
+    walletPageIntro:
+      "连接 Web3 钱包以使用会员相关功能。采用标准签名登录，不发送交易、不消耗 gas。",
+    walletStepExtension:
+      "电脑已安装浏览器扩展钱包（如 MetaMask）时，可直接连接。",
+    walletStepQR:
+      "电脑未安装钱包时：在连接窗口选择 WalletConnect，用手机钱包扫描 QR Code。",
+    walletStepSign: "连接成功后，点击「签署登录」并在钱包内签名即可完成验证。",
+    signInWallet: "签署登录",
+    walletSignedIn: "已验证登录",
+    walletLogout: "退出钱包",
+    walletMissingProjectId:
+      "请配置 VITE_WALLETCONNECT_PROJECT_ID（Reown Cloud），否则无法使用 WalletConnect/扫码。",
+    walletSetupNeeded: "钱包扫码未启用（请在服务器配置环境变量）",
+    lang_zh_TW: "繁体中文",
+    lang_zh_CN: "简体中文",
+    lang_en: "English",
+    filterAll: "全部",
+    sortPublished: "发布时间",
+    type_ppt: "PPT",
+    type_video: "视频",
+    type_image: "图片",
+    type_pdf: "PDF",
+    type_link: "链接",
+    type_text: "文字",
+    type_archive: "压缩包",
+    type_zip: "ZIP",
+    adminLoginTitle: "管理后台登录",
+    adminEditResource: "编辑资料",
+    adminVideoFileHint:
+      "上传视频文件（MP4/WebM/MOV 等），类型请选择「视频」；保存后前台自动播放（默认静音，可点喇叭开声音）。",
+    adminStatTodayNew: "今日新增",
+    adminStatFavorites: "收藏",
+    adminMetricDownloads: "下载",
+    adminMetricFavorites: "收藏",
+    adminMetricViews: "浏览",
+    edit: "编辑",
+    backToList: "返回列表",
+    sortOrderLabel: "排序权重",
+    previewUrlLabel: "预览网址",
+    tagsCommaLabel: "标签（逗号分隔）",
+    uploadFile: "上传文件",
+    loading: "加载中…",
+    favoritesEmpty: "还没有收藏。",
+    paginationPrev: "上一页",
+    paginationNext: "下一页",
+    listRange: "显示 {{from}}–{{to}}，共 {{total}} 条",
+    pageIndicator: "{{c}} / {{p}} 页",
+    resourceLangFilter: "资料语言",
+    filterTagClear: "清除标签",
+    filterLanguageAll: "全部语言",
+    aboutTitle: "关于本站",
+    aboutIntro:
+      "ARK 数据库汇总官方教材、公告、视频与常用文件，帮助社区快速获取一致版本的可信内容。\n\n本站仅供展示与索引；权利归属以官方公告为准。",
+    footerAbout: "关于本站",
+    footerAdminLogin: "管理员登录",
+    adminSearchLogs: "搜索记录",
+    adminMetricShares: "分享",
+    adminSearchQuery: "查询词",
+    adminSearchTime: "时间",
+    adminSearchId: "编号",
+  },
+  en: {
+    brand: "ARK Library",
+    mainNav: "Site menu",
+    home: "Home",
+    all: "All assets",
+    categories: "Categories",
+    latest: "Latest",
+    official: "Official picks",
+    popular: "Popular",
+    favorites: "Favorites",
+    search: "Search",
+    searchPlaceholder: "Search resources...",
+    searchNow: "Search now",
+    viewAll: "View all",
+    heroTitle: "ARK Official Library",
+    heroSub:
+      "Centralize, organize, and manage the ARK library so you can find what you need fast and help the community grow together.",
+    categorySection: "Categories",
+    officialSection: "Official recommendations",
+    latestSection: "Latest updates",
+    popularSection: "Popular assets",
+    preview: "Preview",
+    download: "Download",
+    favorite: "Favorite",
+    share: "Share",
+    profile: "Profile",
+    langLabel: "Language",
+    admin: "Admin",
+    login: "Sign in",
+    logout: "Sign out",
+    email: "Email",
+    password: "Password",
+    dashboard: "Dashboard",
+    resources: "Resources",
+    newResource: "New resource",
+    save: "Save",
+    title: "Title",
+    description: "Description",
+    type: "Type",
+    language: "Language",
+    category: "Category",
+    status: "Status",
+    public: "Public",
+    downloadable: "Downloadable",
+    recommended: "Featured",
+    cover: "Cover image URL",
+    fileUrl: "File URL",
+    externalUrl: "External URL",
+    body: "Text body",
+    badge: "Badge label",
+    published: "Published",
+    draft: "Draft",
+    archived: "Archived",
+    noResults: "No results. Try another keyword or browse categories.",
+    copyLink: "Copy link",
+    related: "Related",
+    total: "Total items",
+    views: "Views",
+    downloads: "Downloads",
+    wallet: "Wallet",
+    walletPageTitle: "Wallet sign-in",
+    walletPageIntro:
+      "Connect a Web3 wallet for member features. This uses a standard signed message — no transaction and no gas.",
+    walletStepExtension:
+      "On desktop with a browser extension (e.g. MetaMask), connect directly.",
+    walletStepQR:
+      "On desktop without an extension: choose WalletConnect in the modal and scan the QR code with your mobile wallet.",
+    walletStepSign:
+      'After connecting, tap "Sign in" and approve the message in your wallet to verify.',
+    signInWallet: "Sign in",
+    walletSignedIn: "Signed in",
+    walletLogout: "Disconnect",
+    walletMissingProjectId:
+      "Set VITE_WALLETCONNECT_PROJECT_ID (free on Reown Cloud). Required for WalletConnect / QR login.",
+    walletSetupNeeded: "Wallet QR login disabled (set env on server)",
+    lang_zh_TW: "Traditional Chinese",
+    lang_zh_CN: "Simplified Chinese",
+    lang_en: "English",
+    filterAll: "All types",
+    sortPublished: "Published date",
+    type_ppt: "PPT",
+    type_video: "Video",
+    type_image: "Image",
+    type_pdf: "PDF",
+    type_link: "Link",
+    type_text: "Text",
+    type_archive: "Archive",
+    type_zip: "ZIP",
+    adminLoginTitle: "Admin sign in",
+    adminEditResource: "Edit resource",
+    adminVideoFileHint:
+      "Upload a video file (MP4/WebM/MOV, etc.) and set type to Video; the site will autoplay (muted by default — user can unmute).",
+    adminStatTodayNew: "New today",
+    adminStatFavorites: "Favorites",
+    adminMetricDownloads: "Downloads",
+    adminMetricFavorites: "Favorites",
+    adminMetricViews: "Views",
+    edit: "Edit",
+    backToList: "Back to list",
+    sortOrderLabel: "Sort order",
+    previewUrlLabel: "Preview URL",
+    tagsCommaLabel: "Tags (comma-separated)",
+    uploadFile: "Upload",
+    loading: "Loading…",
+    favoritesEmpty: "No favorites yet.",
+    paginationPrev: "Previous",
+    paginationNext: "Next",
+    listRange: "Showing {{from}}–{{to}} of {{total}}",
+    pageIndicator: "Page {{c}} / {{p}}",
+    resourceLangFilter: "Resource language",
+    filterTagClear: "Clear tag",
+    filterLanguageAll: "All languages",
+    aboutTitle: "About this site",
+    aboutIntro:
+      "The ARK library brings together official decks, announcements, videos, and common files so the community can find consistent, trustworthy versions quickly.\n\nThis site is for discovery and indexing only; rights remain with official notices.",
+    footerAbout: "About",
+    footerAdminLogin: "Admin sign-in",
+    adminSearchLogs: "Search logs",
+    adminMetricShares: "Shares",
+    adminSearchQuery: "Query",
+    adminSearchTime: "Time",
+    adminSearchId: "ID",
+  },
+};
+
+/** Fixed locale lookup (for admin UI always in Traditional Chinese). */
+export function tLang(lang: Lang, key: string): string {
+  return dict[lang][key] || dict["zh-TW"][key] || key;
+}
+
+type Ctx = { lang: Lang; setLang: (l: Lang) => void; t: (k: string) => string };
+
+const I18nCtx = createContext<Ctx | null>(null);
+
+const LANG_KEY = "ark_lang";
+
+export function I18nProvider({ children }: { children: React.ReactNode }) {
+  const [lang, setLangState] = useState<Lang>(() => {
+    const s = localStorage.getItem(LANG_KEY) as Lang | null;
+    if (s === "zh-CN" || s === "en" || s === "zh-TW") return s;
+    return "zh-TW";
+  });
+  const setLang = (l: Lang) => {
+    localStorage.setItem(LANG_KEY, l);
+    setLangState(l);
+  };
+  const t = useCallback(
+    (k: string) => dict[lang][k] || dict["zh-TW"][k] || k,
+    [lang],
+  );
+  const v = useMemo(() => ({ lang, setLang, t }), [lang, t]);
+  return <I18nCtx.Provider value={v}>{children}</I18nCtx.Provider>;
+}
+
+export function useI18n() {
+  const v = useContext(I18nCtx);
+  if (!v) throw new Error("I18nProvider missing");
+  return v;
+}
+
+export function langQuery(lang: Lang) {
+  if (lang === "zh-TW") return "zh-TW";
+  if (lang === "zh-CN") return "zh-CN";
+  return "en";
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,43 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  @apply bg-ark-bg text-neutral-100 antialiased;
+}
+
+/* Match theme: avoid default blue accent on controls */
+:root {
+  accent-color: #eeb726;
+}
+
+header a,
+header button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Desktop header nav: thin scrollbar when links overflow (still 單列) */
+.header-nav-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(238, 183, 38, 0.45) transparent;
+}
+.header-nav-scroll::-webkit-scrollbar {
+  height: 4px;
+}
+.header-nav-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(238, 183, 38, 0.45);
+  border-radius: 9999px;
+}
+.header-nav-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.gold-underline {
+  box-shadow: inset 0 -2px 0 #eeb726;
+}
--- a/src/layouts/AdminLayout.tsx
+++ b/src/layouts/AdminLayout.tsx
@@ -0,0 +1,81 @@
+import { Link, Navigate, NavLink, Outlet, useNavigate } from "react-router-dom";
+import { useAdminT } from "../admin/useAdminT";
+import { clearToken, getToken } from "../admin/token";
+import { adminUiPrefix } from "../adminPaths";
+import { useAdminRouterMode } from "../adminRouterMode";
+
+export function AdminLayout() {
+  const t = useAdminT();
+  const mode = useAdminRouterMode();
+  const nav = useNavigate();
+  const token = getToken();
+  const loginTo = mode === "basename" ? "login" : `${adminUiPrefix}/login`;
+  if (!token) return <Navigate to={loginTo} replace />;
+
+  return (
+    <div className="min-h-full bg-ark-bg">
+      <div className="border-b border-ark-line">
+        <div className="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between gap-3">
+          <div className="flex items-center gap-4">
+            {mode === "absolute" ? (
+              <Link
+                to="/"
+                className="text-sm text-neutral-400 hover:text-white"
+              >
+                ← {t("home")}
+              </Link>
+            ) : null}
+            <NavLink
+              to={mode === "basename" ? "." : adminUiPrefix}
+              end
+              className={({ isActive }) =>
+                `text-sm ${isActive ? "text-ark-gold2" : "text-neutral-300 hover:text-white"}`
+              }
+            >
+              {t("dashboard")}
+            </NavLink>
+            <NavLink
+              to={
+                mode === "basename" ? "resources" : `${adminUiPrefix}/resources`
+              }
+              className={({ isActive }) =>
+                `text-sm ${isActive ? "text-ark-gold2" : "text-neutral-300 hover:text-white"}`
+              }
+            >
+              {t("resources")}
+            </NavLink>
+            <NavLink
+              to={
+                mode === "basename"
+                  ? "search-logs"
+                  : `${adminUiPrefix}/search-logs`
+              }
+              className={({ isActive }) =>
+                `text-sm ${isActive ? "text-ark-gold2" : "text-neutral-300 hover:text-white"}`
+              }
+            >
+              {t("adminSearchLogs")}
+            </NavLink>
+          </div>
+          <button
+            type="button"
+            className="text-sm text-neutral-400 hover:text-white"
+            onClick={() => {
+              clearToken();
+              if (mode === "basename") {
+                nav("login", { replace: true });
+              } else {
+                window.location.href = `${adminUiPrefix}/login`;
+              }
+            }}
+          >
+            {t("logout")}
+          </button>
+        </div>
+      </div>
+      <div className="mx-auto max-w-6xl px-4 py-6">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -0,0 +1,388 @@
+import { Globe, Menu, Search as SearchIcon, X } from "lucide-react";
+import { useState } from "react";
+import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { ArkLogoMark } from "../components/ArkLogoMark";
+import { useI18n, type Lang } from "../i18n";
+import { adminUiPrefix } from "../adminPaths";
+
+type PublicNavWhich =
+  | "home"
+  | "browseAll"
+  | "categories"
+  | "browseLatest"
+  | "browseRecommended"
+  | "browsePopular"
+  | "favorites"
+  | "wallet"
+  | "about";
+
+function navIsActive(
+  pathname: string,
+  search: string,
+  hash: string,
+  which: PublicNavWhich,
+): boolean {
+  const sp = new URLSearchParams(search);
+  switch (which) {
+    case "home":
+      return pathname === "/";
+    case "browseAll":
+      return pathname === "/browse" && !sp.has("sort");
+    case "categories":
+      return pathname === "/" && hash === "#categories";
+    case "browseLatest":
+      return pathname === "/browse" && sp.get("sort") === "latest";
+    case "browseRecommended":
+      return pathname === "/browse" && sp.get("sort") === "recommended";
+    case "browsePopular":
+      return pathname === "/browse" && sp.get("sort") === "popular";
+    case "favorites":
+      return pathname === "/favorites";
+    case "wallet":
+      return pathname === "/wallet";
+    case "about":
+      return pathname === "/about";
+    default:
+      return false;
+  }
+}
+
+function navClassName(active: boolean) {
+  return [
+    "shrink-0 rounded-sm px-2 py-2 text-[13px] font-medium leading-none whitespace-nowrap no-underline outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-ark-gold/90 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
+    active
+      ? "text-ark-gold visited:text-ark-gold"
+      : "text-[#d7d7dc] visited:text-[#d7d7dc] hover:text-ark-gold",
+  ].join(" ");
+}
+
+export function PublicLayout() {
+  const { t, lang, setLang } = useI18n();
+  const { pathname, search, hash } = useLocation();
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+  const nav = useNavigate();
+
+  const na = (which: PublicNavWhich) =>
+    navIsActive(pathname, search, hash, which);
+
+  const goSearch = () => {
+    const s = q.trim();
+    if (!s) return;
+    nav(`/search?q=${encodeURIComponent(s)}`);
+    setOpen(false);
+  };
+
+  return (
+    <div className="min-h-full flex flex-col pb-20 md:pb-0">
+      <header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
+        <div className="mx-auto max-w-[1280px] px-4 py-[15px] md:px-8 xl:px-0">
+          {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
+          <div className="flex h-10 items-center gap-2 lg:gap-4">
+            <Link
+              to="/"
+              className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+            >
+              <ArkLogoMark className="h-10 w-10 shrink-0" />
+              <span className="max-w-[9rem] truncate text-ark-gold sm:inline md:max-w-[10rem] lg:max-w-none">
+                {t("brand")}
+              </span>
+            </Link>
+
+            <nav
+              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 md:flex lg:gap-5"
+              aria-label={t("mainNav")}
+            >
+              <Link
+                to="/"
+                className={navClassName(na("home"))}
+                aria-current={na("home") ? "page" : undefined}
+              >
+                {t("home")}
+              </Link>
+              <Link
+                to="/browse"
+                className={navClassName(na("browseAll"))}
+                aria-current={na("browseAll") ? "page" : undefined}
+              >
+                {t("all")}
+              </Link>
+              <Link
+                to="/#categories"
+                className={navClassName(na("categories"))}
+                aria-current={na("categories") ? "page" : undefined}
+              >
+                {t("categories")}
+              </Link>
+              <Link
+                to="/browse?sort=latest"
+                className={navClassName(na("browseLatest"))}
+                aria-current={na("browseLatest") ? "page" : undefined}
+              >
+                {t("latest")}
+              </Link>
+              <Link
+                to="/browse?sort=recommended"
+                className={navClassName(na("browseRecommended"))}
+                aria-current={na("browseRecommended") ? "page" : undefined}
+              >
+                {t("official")}
+              </Link>
+              <Link
+                to="/browse?sort=popular"
+                className={navClassName(na("browsePopular"))}
+                aria-current={na("browsePopular") ? "page" : undefined}
+              >
+                {t("popular")}
+              </Link>
+              <Link
+                to="/favorites"
+                className={navClassName(na("favorites"))}
+                aria-current={na("favorites") ? "page" : undefined}
+              >
+                {t("favorites")}
+              </Link>
+              <Link
+                to="/wallet"
+                className={navClassName(na("wallet"))}
+                aria-current={na("wallet") ? "page" : undefined}
+              >
+                {t("wallet")}
+              </Link>
+            </nav>
+
+            <div className="flex shrink-0 items-center justify-end gap-2">
+              <div className="hidden h-10 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 shadow-inner md:flex lg:pr-4">
+                <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
+                <input
+                  value={q}
+                  onChange={(e) => setQ(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && goSearch()}
+                  placeholder={t("searchPlaceholder")}
+                  className="w-24 rounded-md bg-transparent text-sm text-neutral-200 outline-none placeholder:text-[#777985] focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20] md:w-28 lg:w-44 xl:w-52"
+                />
+              </div>
+              <div className="hidden h-10 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-2 py-2 md:flex lg:px-3">
+                <Globe
+                  size={16}
+                  className="shrink-0 text-ark-gold/80"
+                  aria-hidden
+                />
+                <select
+                  className="max-w-[6.5rem] cursor-pointer truncate rounded-md bg-transparent text-sm text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20] lg:max-w-none"
+                  value={lang}
+                  onChange={(e) => setLang(e.target.value as Lang)}
+                  aria-label={t("langLabel")}
+                >
+                  <option value="zh-TW">繁體中文</option>
+                  <option value="zh-CN">简体中文</option>
+                  <option value="en">English</option>
+                </select>
+              </div>
+              <button
+                type="button"
+                className="md:hidden inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                onClick={() => setOpen((v) => !v)}
+                aria-label="menu"
+              >
+                {open ? <X size={18} /> : <Menu size={18} />}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {open ? (
+          <div className="md:hidden border-t border-ark-line bg-ark-nav px-4 py-3 grid gap-2">
+            <div className="mb-1 flex items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2">
+              <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
+              <input
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && goSearch()}
+                placeholder={t("searchPlaceholder")}
+                className="flex-1 bg-transparent text-sm outline-none placeholder:text-[#777985]"
+              />
+            </div>
+            <Link
+              to="/"
+              className={navClassName(na("home"))}
+              aria-current={na("home") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("home")}
+            </Link>
+            <Link
+              to="/browse"
+              className={navClassName(na("browseAll"))}
+              aria-current={na("browseAll") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("all")}
+            </Link>
+            <Link
+              to="/#categories"
+              className={navClassName(na("categories"))}
+              aria-current={na("categories") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("categories")}
+            </Link>
+            <Link
+              to="/favorites"
+              className={navClassName(na("favorites"))}
+              aria-current={na("favorites") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("favorites")}
+            </Link>
+            <Link
+              to="/browse?sort=latest"
+              className={navClassName(na("browseLatest"))}
+              aria-current={na("browseLatest") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("latest")}
+            </Link>
+            <Link
+              to="/browse?sort=recommended"
+              className={navClassName(na("browseRecommended"))}
+              aria-current={na("browseRecommended") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("official")}
+            </Link>
+            <Link
+              to="/browse?sort=popular"
+              className={navClassName(na("browsePopular"))}
+              aria-current={na("browsePopular") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("popular")}
+            </Link>
+            <Link
+              to="/wallet"
+              className={navClassName(na("wallet"))}
+              aria-current={na("wallet") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("wallet")}
+            </Link>
+            <Link
+              to="/about"
+              className={navClassName(na("about"))}
+              aria-current={na("about") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("footerAbout")}
+            </Link>
+          </div>
+        ) : null}
+      </header>
+
+      <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-6 md:px-8 md:py-10 xl:px-0">
+        <Outlet />
+      </main>
+
+      <footer className="mt-auto border-t border-ark-line bg-ark-nav/90 mb-20 md:mb-0">
+        <div className="mx-auto flex max-w-[1280px] flex-wrap gap-x-6 gap-y-2 px-4 py-6 text-sm text-neutral-400 md:px-8 xl:px-0">
+          <Link
+            to="/about"
+            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"
+          >
+            {t("footerAbout")}
+          </Link>
+          <Link
+            to="/wallet"
+            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"
+          >
+            {t("profile")}
+          </Link>
+          {import.meta.env.VITE_DISABLE_ADMIN !== "true" ? (
+            <Link
+              to={`${adminUiPrefix}/login`}
+              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"
+            >
+              {t("footerAdminLogin")}
+            </Link>
+          ) : null}
+        </div>
+      </footer>
+
+      <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t border-ark-line bg-ark-nav/95 backdrop-blur">
+        <div className="grid grid-cols-4 gap-1 px-1 py-2 text-center text-[11px]">
+          <BottomNavIcon
+            to="/"
+            label={t("home")}
+            icon="home"
+            active={pathname === "/"}
+          />
+          <BottomNavIcon
+            to="/browse"
+            label={t("all")}
+            icon="document"
+            active={
+              pathname === "/browse" && !new URLSearchParams(search).get("sort")
+            }
+          />
+          <BottomNavIcon
+            to="/favorites"
+            label={t("favorites")}
+            icon="heart"
+            active={pathname === "/favorites"}
+          />
+          <BottomNavIcon
+            to="/browse?sort=latest"
+            label={t("latest")}
+            icon="update"
+            active={
+              pathname === "/browse" &&
+              new URLSearchParams(search).get("sort") === "latest"
+            }
+          />
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+const NAVBAR_ICON_BASE = "/assets/ark-library/navbar";
+
+function BottomNavIcon({
+  to,
+  label,
+  icon,
+  active,
+}: {
+  to: string;
+  label: string;
+  icon: "home" | "document" | "heart" | "update";
+  active: boolean;
+}) {
+  const src = active
+    ? `${NAVBAR_ICON_BASE}/${icon}-active.svg`
+    : `${NAVBAR_ICON_BASE}/${icon}-inactive.svg`;
+  return (
+    <Link
+      to={to}
+      className={[
+        "flex flex-col items-center gap-1 rounded-lg py-1 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
+        active ? "text-ark-gold" : "text-neutral-400",
+      ].join(" ")}
+    >
+      <img
+        src={src}
+        alt=""
+        className={[
+          "mx-auto h-7 w-7 object-contain",
+          active ? "opacity-100" : "opacity-55",
+        ].join(" ")}
+        width={28}
+        height={28}
+        loading="lazy"
+        decoding="async"
+      />
+      <span className="leading-tight">{label}</span>
+    </Link>
+  );
+}
--- a/src/lib/categorySvgSlug.ts
+++ b/src/lib/categorySvgSlug.ts
@@ -0,0 +1,23 @@
+/** Basename under `/assets/ark-library/media/svg/` for each category slug (matches ark-library-media/svg). */
+const slugToSvg: Record<string, string> = {
+  "project-ppt": "project-details.svg",
+  "daily-class": "everyday-class.svg",
+  "official-announcement": "official-announcement.svg",
+  "academy-materials": "educational-clips.svg",
+  "global-evangelism": "global-news.svg",
+  "daily-poster": "poster.svg",
+  "community-tweets": "community.svg",
+  "video-hub": "videos.svg",
+  "subsidy-policy": "gift.svg",
+  "how-to": "guidelines.svg",
+  "official-assets": "directory.svg",
+  "media-coverage": "news-record.svg",
+  "academy-video": "educational-clips.svg",
+  general: "general.svg",
+};
+
+export function categorySvgUrlForSlug(slug: string): string | null {
+  const file = slugToSvg[slug];
+  if (!file) return null;
+  return `/assets/ark-library/media/svg/${file}`;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
+import "./index.css";
+import "@rainbow-me/rainbowkit/styles.css";
+import { wagmiConfig } from "./wagmiConfig";
+
+const queryClient = new QueryClient();
+
+const adminOnly = import.meta.env.VITE_ADMIN_ONLY === "true";
+
+void (async () => {
+  const root = document.getElementById("root")!;
+
+  if (adminOnly) {
+    const { default: AppAdminOnly } = await import("./AppAdminOnly");
+    ReactDOM.createRoot(root).render(
+      <React.StrictMode>
+        <AppAdminOnly />
+      </React.StrictMode>,
+    );
+    return;
+  }
+
+  const { default: App } = await import("./App");
+  ReactDOM.createRoot(root).render(
+    <React.StrictMode>
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider
+            theme={darkTheme({
+              accentColor: "#d4af37",
+              accentColorForeground: "#0a0a0a",
+              borderRadius: "medium",
+            })}
+            modalSize="wide"
+          >
+            <App />
+          </RainbowKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </React.StrictMode>,
+  );
+})();
--- a/src/pages/AboutPage.tsx
+++ b/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>
+  );
+}
--- a/src/pages/Browse.tsx
+++ b/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>
+  );
+}
--- a/src/pages/CategoryPage.tsx
+++ b/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>
+  );
+}
--- a/src/pages/FavoritesPage.tsx
+++ b/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>
+  );
+}
--- a/src/pages/Home.tsx
+++ b/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>
+  );
+}
--- a/src/pages/ResourceDetail.tsx
+++ b/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>
+  );
+}
--- a/src/pages/SearchPage.tsx
+++ b/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>
+  );
+}
--- a/src/pages/WalletPage.tsx
+++ b/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>
+  );
+}
--- a/src/pages/admin/AdminDashboard.tsx
+++ b/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>
+  );
+}
--- a/src/pages/admin/AdminLogin.tsx
+++ b/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>
+  );
+}
--- a/src/pages/admin/AdminResourceForm.tsx
+++ b/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>
+  );
+}
--- a/src/pages/admin/AdminResources.tsx
+++ b/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>
+  );
+}
--- a/src/pages/admin/AdminSearchLogs.tsx
+++ b/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>
+  );
+}
--- a/src/resourceTypeLabels.ts
+++ b/src/resourceTypeLabels.ts
@@ -0,0 +1,49 @@
+/** Labels for resource type filter chips (keys match API `type` + `all`). */
+export function typeFilterLabel(
+  t: (key: string) => string,
+  tp: string,
+): string {
+  if (tp === "all") return t("filterAll");
+  return resourceTypeLabel(t, tp);
+}
+
+/** Type label without the "all" filter branch (e.g. admin tables). */
+export function resourceTypeDisplay(
+  t: (key: string) => string,
+  type: string,
+): string {
+  const key = `type_${type}`;
+  const label = t(key);
+  return label !== key ? label : type;
+}
+
+/** Localized label for API resource `type` (image, video, link, …). */
+export function resourceTypeLabel(
+  t: (key: string) => string,
+  type: string,
+): string {
+  const key = `type_${type}`;
+  const label = t(key);
+  return label !== key ? label : type;
+}
+
+/** Localized label for resource `language` code (zh-TW, en, …). */
+export function resourceLanguageLabel(
+  t: (key: string) => string,
+  langCode: string,
+): string {
+  const lc = langCode.trim().toLowerCase();
+  const key =
+    lc === "zh-tw"
+      ? "lang_zh_TW"
+      : lc === "zh-cn" || lc === "zh-hans"
+        ? "lang_zh_CN"
+        : lc === "en"
+          ? "lang_en"
+          : "";
+  if (key) {
+    const label = t(key);
+    if (label !== key) return label;
+  }
+  return langCode.trim();
+}
--- a/src/utils/categoryDisplay.ts
+++ b/src/utils/categoryDisplay.ts
@@ -0,0 +1,18 @@
+/** Split display name into title + parenthetical subtitle (matches design cards). */
+export function categoryCardLines(
+  name: string,
+  description?: string,
+): { line1: string; line2?: string } {
+  const i = name.indexOf("（");
+  if (i > 0 && name.includes("）")) {
+    return { line1: name.slice(0, i).trim(), line2: name.slice(i).trim() };
+  }
+  const j = name.indexOf("(");
+  if (j > 0 && name.includes(")")) {
+    return { line1: name.slice(0, j).trim(), line2: name.slice(j).trim() };
+  }
+  if (description?.trim()) {
+    return { line1: name, line2: description.trim() };
+  }
+  return { line1: name };
+}
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -0,0 +1,7 @@
+export function formatDateYmd(iso: string) {
+  const d = new Date(iso);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
--- a/src/video.ts
+++ b/src/video.ts
@@ -0,0 +1,6 @@
+/** Path looks like a video file (upload or URL path). */
+export function isLikelyVideoPath(path: string | undefined | null): boolean {
+  if (!path) return false;
+  const p = path.split("?")[0].toLowerCase();
+  return /\.(mp4|webm|mov|m4v|mkv|ogv|avi)(\/)?$/i.test(p);
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_WALLETCONNECT_PROJECT_ID: string;
+  readonly VITE_ADMIN_UI_PREFIX?: string;
+  /** When `"true"`, bundle admin UI only (no public pages); use with `VITE_ADMIN_UI_PREFIX` or default secret prefix. */
+  readonly VITE_ADMIN_ONLY?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/src/wagmiConfig.ts
+++ b/src/wagmiConfig.ts
@@ -0,0 +1,15 @@
+import { getDefaultConfig } from "@rainbow-me/rainbowkit";
+import { arbitrum, bsc, mainnet, polygon, sepolia } from "wagmi/chains";
+
+/**
+ * Get a free Project ID: https://cloud.reown.com (WalletConnect / Reown)
+ * Without it, WalletConnect (mobile / QR on desktop) will not work; browser extensions may still work in some setups.
+ */
+const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "";
+
+export const wagmiConfig = getDefaultConfig({
+  appName: "ARK Database",
+  projectId: projectId || "00000000000000000000000000000000",
+  chains: [mainnet, bsc, arbitrum, polygon, sepolia],
+  ssr: false,
+});
--- a/src/walletToken.ts
+++ b/src/walletToken.ts
@@ -0,0 +1,13 @@
+const KEY = "ark_wallet_token";
+
+export function getWalletToken() {
+  return localStorage.getItem(KEY) || "";
+}
+
+export function setWalletToken(t: string) {
+  localStorage.setItem(KEY, t);
+}
+
+export function clearWalletToken() {
+  localStorage.removeItem(KEY);
+}