src/locales/en.ts

@@ -145,6 +145,22 @@ export const enDict: Dict = {
   favoriteRemoved: "Removed from favorites",
   favoriteFailed: "Could not update favorites",
   favoriteLoginRequired: "Connect your wallet to save favorites",
+  favoritesLoginDesc:
+    "Connect your wallet to view and manage your saved ARK resources.",
+  favoritesLibraryTitle: "Saved resources",
+  favoritesEmptyTitle: "No favorites yet",
+  favoritesEmptyDesc:
+    "Browse resources and tap the heart icon to save them here.",
+  favoritesNoFilteredTitle: "No matching favorites",
+  favoritesNoFilteredDesc:
+    "Try changing your search, category, or sort filters.",
+  favoritesFilterAllCategories: "All categories",
+  favoritesSortFavoritedAt: "Recently saved",
+  favoritesSortPublishedAt: "Newest published",
+  favoritesSortHot: "Hot resources",
+  favoritesSearchPlaceholder: "Search your favorites",
+  favoritesUnavailable: "Unavailable",
+  favoritesClearFilters: "Clear filters",
   favorites: "My Favorites",
   favoritesComingSoon: "Coming Soon",
   favoritesComingSoonDesc:

src/locales/id.ts

@@ -145,6 +145,21 @@ export const idDict: Dict = {
   favoriteRemoved: "Dihapus dari favorit",
   favoriteFailed: "Tidak dapat memperbarui favorit",
   favoriteLoginRequired: "Hubungkan dompet untuk menyimpan favorit",
+  favoritesLoginDesc:
+    "Hubungkan dompet untuk melihat dan mengelola sumber ARK yang disimpan.",
+  favoritesLibraryTitle: "Sumber tersimpan",
+  favoritesEmptyTitle: "Belum ada favorit",
+  favoritesEmptyDesc:
+    "Jelajahi sumber dan ketuk ikon hati untuk menyimpannya di sini.",
+  favoritesNoFilteredTitle: "Tidak ada favorit yang cocok",
+  favoritesNoFilteredDesc: "Coba ubah pencarian, kategori, atau urutan.",
+  favoritesFilterAllCategories: "Semua kategori",
+  favoritesSortFavoritedAt: "Baru disimpan",
+  favoritesSortPublishedAt: "Terbaru diterbitkan",
+  favoritesSortHot: "Sumber populer",
+  favoritesSearchPlaceholder: "Cari favorit Anda",
+  favoritesUnavailable: "Tidak tersedia",
+  favoritesClearFilters: "Hapus filter",
   favorites: "Favorit Saya",
   favoritesComingSoon: "Segera Hadir",
   favoritesComingSoonDesc:

src/locales/ja.ts

@@ -146,6 +146,20 @@ export const jaDict: Dict = {
   favoriteRemoved: "お気に入りから削除しました",
   favoriteFailed: "お気に入りを更新できませんでした",
   favoriteLoginRequired: "お気に入り保存にはウォレット接続が必要です",
+  favoritesLoginDesc:
+    "ウォレットを接続すると、保存した ARK 資料を表示・管理できます。",
+  favoritesLibraryTitle: "保存した資料",
+  favoritesEmptyTitle: "お気に入りはまだありません",
+  favoritesEmptyDesc: "資料を閲覧してハートを押すと、ここに保存されます。",
+  favoritesNoFilteredTitle: "一致するお気に入りがありません",
+  favoritesNoFilteredDesc: "検索、カテゴリ、並び順を変更してみてください。",
+  favoritesFilterAllCategories: "すべてのカテゴリ",
+  favoritesSortFavoritedAt: "最近保存",
+  favoritesSortPublishedAt: "新しい公開順",
+  favoritesSortHot: "人気資料",
+  favoritesSearchPlaceholder: "お気に入りを検索",
+  favoritesUnavailable: "利用不可",
+  favoritesClearFilters: "フィルターをクリア",
   favorites: "お気に入り",
   favoritesComingSoon: "近日公開",
   favoritesComingSoonDesc: "ログインとお気に入り機能は開発中です。お楽しみに。",

src/locales/ko.ts

@@ -145,6 +145,20 @@ export const koDict: Dict = {
   favoriteRemoved: "즐겨찾기에서 제거되었습니다",
   favoriteFailed: "즐겨찾기를 업데이트할 수 없습니다",
   favoriteLoginRequired: "즐겨찾기를 저장하려면 지갑을 연결하세요",
+  favoritesLoginDesc:
+    "지갑을 연결하면 저장한 ARK 자료를 보고 관리할 수 있습니다.",
+  favoritesLibraryTitle: "저장한 자료",
+  favoritesEmptyTitle: "아직 즐겨찾기가 없습니다",
+  favoritesEmptyDesc: "자료를 둘러보다가 하트 아이콘을 눌러 여기에 저장하세요.",
+  favoritesNoFilteredTitle: "일치하는 즐겨찾기가 없습니다",
+  favoritesNoFilteredDesc: "검색어, 카테고리 또는 정렬을 변경해 보세요.",
+  favoritesFilterAllCategories: "모든 카테고리",
+  favoritesSortFavoritedAt: "최근 저장",
+  favoritesSortPublishedAt: "최신 게시",
+  favoritesSortHot: "인기 자료",
+  favoritesSearchPlaceholder: "내 즐겨찾기 검색",
+  favoritesUnavailable: "사용 불가",
+  favoritesClearFilters: "필터 지우기",
   favorites: "내 즐겨찾기",
   favoritesComingSoon: "출시 예정",
   favoritesComingSoonDesc:

src/locales/ms.ts

@@ -145,6 +145,21 @@ export const msDict: Dict = {
   favoriteRemoved: "Dibuang daripada kegemaran",
   favoriteFailed: "Tidak dapat mengemas kini kegemaran",
   favoriteLoginRequired: "Sambung dompet untuk menyimpan kegemaran",
+  favoritesLoginDesc:
+    "Sambung dompet untuk melihat dan mengurus sumber ARK yang disimpan.",
+  favoritesLibraryTitle: "Sumber disimpan",
+  favoritesEmptyTitle: "Belum ada kegemaran",
+  favoritesEmptyDesc:
+    "Lihat sumber dan tekan ikon hati untuk menyimpannya di sini.",
+  favoritesNoFilteredTitle: "Tiada kegemaran sepadan",
+  favoritesNoFilteredDesc: "Cuba ubah carian, kategori atau susunan.",
+  favoritesFilterAllCategories: "Semua kategori",
+  favoritesSortFavoritedAt: "Baru disimpan",
+  favoritesSortPublishedAt: "Terbaru diterbitkan",
+  favoritesSortHot: "Sumber popular",
+  favoritesSearchPlaceholder: "Cari kegemaran anda",
+  favoritesUnavailable: "Tidak tersedia",
+  favoritesClearFilters: "Kosongkan penapis",
   favorites: "Kegemaran Saya",
   favoritesComingSoon: "Akan Hadir",
   favoritesComingSoonDesc:

src/locales/vi.ts

@@ -145,6 +145,20 @@ export const viDict: Dict = {
   favoriteRemoved: "Đã xóa khỏi yêu thích",
   favoriteFailed: "Không thể cập nhật yêu thích",
   favoriteLoginRequired: "Kết nối ví để lưu yêu thích",
+  favoritesLoginDesc: "Kết nối ví để xem và quản lý tài nguyên ARK đã lưu.",
+  favoritesLibraryTitle: "Tài nguyên đã lưu",
+  favoritesEmptyTitle: "Chưa có mục yêu thích",
+  favoritesEmptyDesc:
+    "Duyệt tài nguyên và bấm biểu tượng trái tim để lưu tại đây.",
+  favoritesNoFilteredTitle: "Không có mục phù hợp",
+  favoritesNoFilteredDesc: "Hãy đổi từ khóa, danh mục hoặc cách sắp xếp.",
+  favoritesFilterAllCategories: "Tất cả danh mục",
+  favoritesSortFavoritedAt: "Lưu gần đây",
+  favoritesSortPublishedAt: "Mới xuất bản",
+  favoritesSortHot: "Tài nguyên hot",
+  favoritesSearchPlaceholder: "Tìm trong yêu thích",
+  favoritesUnavailable: "Không khả dụng",
+  favoritesClearFilters: "Xóa bộ lọc",
   favorites: "Yêu thích của tôi",
   favoritesComingSoon: "Sắp ra mắt",
   favoritesComingSoonDesc:

src/locales/zh-CN.ts

@@ -143,6 +143,19 @@ export const zhDict: Dict = {
   favoriteRemoved: "已取消收藏",
   favoriteFailed: "无法更新收藏",
   favoriteLoginRequired: "请先连接钱包再收藏",
+  favoritesLoginDesc: "连接钱包后即可查看和管理你收藏的 ARK 资料。",
+  favoritesLibraryTitle: "已收藏资料",
+  favoritesEmptyTitle: "还没有收藏",
+  favoritesEmptyDesc: "浏览资料时点击爱心，就可以把常用内容保存到这里。",
+  favoritesNoFilteredTitle: "没有符合条件的收藏",
+  favoritesNoFilteredDesc: "试着调整搜索、分类或排序条件。",
+  favoritesFilterAllCategories: "全部分类",
+  favoritesSortFavoritedAt: "最近收藏",
+  favoritesSortPublishedAt: "最新发布",
+  favoritesSortHot: "热门资料",
+  favoritesSearchPlaceholder: "搜索我的收藏",
+  favoritesUnavailable: "已下架",
+  favoritesClearFilters: "清除筛选",
   favorites: "我的收藏",
   favoritesComingSoon: "功能即将推出",
   favoritesComingSoonDesc: "登入与收藏功能开发中，敬请期待。",

src/pages/Favorites/index.tsx

@@ -1,43 +1,375 @@
-import { Heart } from "lucide-react";
+import { Heart, Search, SlidersHorizontal, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
-import { useI18n } from "../../i18n";
+import {
+  assetUrl,
+  getJSON,
+  itemsOrEmpty,
+  readJSONCache,
+  type Category,
+  type Resource,
+} from "../../api";
+import { FavoriteButton } from "../../favorites/FavoriteButton";
+import { listFavorites, type FavoriteSort } from "../../favorites/api";
+import { useFavorites } from "../../favorites/FavoritesProvider";
+import { langQuery, useI18n, type Lang } from "../../i18n";
 import { homePathForLang } from "../../languageRoutes";
 import { Reveal } from "../../motion";
 import { useSetPageTitle } from "../../components/PageTitleContext";
+import { Skeleton } from "../../components/Skeleton";
+import { useWallet } from "../../wallet/WalletProvider";
+import { useLocalizedPath } from "../../useLocalizedPath";
+import { cleanCategoryDisplayName } from "../../utils/categoryDisplay";
+import { formatDateYmd } from "../../utils/format";
+
+const pageSize = 24;
+
+function useCategories(lang: Lang) {
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  useEffect(() => {
+    const url = `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`;
+    const cached = readJSONCache<Category[]>(url);
+    if (cached) setCategories(itemsOrEmpty(cached));
+    let cancelled = false;
+    getJSON<Category[]>(url)
+      .then((items) => {
+        if (!cancelled) setCategories(itemsOrEmpty(items));
+      })
+      .catch(() => {
+        if (!cancelled && !cached) setCategories([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [lang]);
+
+  return categories;
+}
+
+function FavoriteResourceCard({ resource }: { resource: Resource }) {
+  const { t } = useI18n();
+  const lp = useLocalizedPath();
+  const unavailable = resource.availability === "unavailable";
+  const cover = resource.coverImage || resource.previewUrl;
+  const content = (
+    <article
+      className={`group relative flex min-h-[132px] gap-4 rounded-2xl border bg-[#272632] p-3 transition md:p-4 ${
+        unavailable
+          ? "border-yellow-500/25 opacity-80"
+          : "border-[#27292E] hover:border-ark-gold/50"
+      }`}
+    >
+      <div className="relative h-[96px] w-[112px] shrink-0 overflow-hidden rounded-xl bg-[#111116] md:h-[116px] md:w-[150px]">
+        {cover && !unavailable ? (
+          <img
+            src={assetUrl(cover)}
+            alt=""
+            className="h-full w-full object-cover transition group-hover:scale-[1.02]"
+            loading="lazy"
+            decoding="async"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-neutral-900 to-neutral-950">
+            <Heart className="h-8 w-8 text-ark-gold/50" strokeWidth={1.6} />
+          </div>
+        )}
+        {unavailable ? (
+          <span className="absolute left-2 top-2 rounded-full bg-yellow-500 px-2 py-0.5 text-[11px] font-bold text-black">
+            {t("favoritesUnavailable")}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-2 pr-11">
+        <h2 className="line-clamp-2 text-base font-bold leading-snug text-white md:text-lg">
+          {resource.title}
+        </h2>
+        {resource.description ? (
+          <p className="line-clamp-2 text-sm leading-6 text-neutral-400">
+            {resource.description}
+          </p>
+        ) : null}
+        <div className="mt-auto flex flex-wrap items-center gap-2 text-xs text-neutral-400">
+          <span className="rounded-full bg-[#1f2028] px-2.5 py-1 text-neutral-200">
+            {cleanCategoryDisplayName(resource.categoryName)}
+          </span>
+          <span>{resource.type}</span>
+          <span>·</span>
+          <time dateTime={resource.updatedAt}>
+            {formatDateYmd(resource.updatedAt)}
+          </time>
+          {typeof resource.favoriteCount === "number" ? (
+            <span>· ♥ {resource.favoriteCount}</span>
+          ) : null}
+        </div>
+      </div>
+
+      <FavoriteButton
+        resourceId={resource.id}
+        className="absolute right-3 top-3 z-10"
+      />
+    </article>
+  );
+
+  if (unavailable) return content;
+  return (
+    <Link to={lp(`/resource/${resource.id}`)} className="block">
+      {content}
+    </Link>
+  );
+}
 
 export default function Favorites() {
   const { lang, t } = useI18n();
-  // Show "我的收藏" in the global header, consistent with the other pages.
+  const wallet = useWallet();
+  const { markFavorite } = useFavorites();
+  const categories = useCategories(lang);
+  const [sort, setSort] = useState<FavoriteSort>("favorited_at");
+  const [category, setCategory] = useState("");
+  const [queryInput, setQueryInput] = useState("");
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [items, setItems] = useState<Resource[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
   useSetPageTitle(t("favorites"));
 
+  useEffect(() => {
+    setPage(1);
+  }, [sort, category, query]);
+
+  useEffect(() => {
+    if (!wallet.token || wallet.status !== "loggedIn") {
+      setItems([]);
+      setTotal(0);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError("");
+    listFavorites(wallet.token, {
+      sort,
+      category,
+      q: query,
+      page,
+      limit: pageSize,
+      includeUnavailable: true,
+      lang: langQuery(lang),
+    })
+      .then((data) => {
+        if (cancelled) return;
+        const resources = itemsOrEmpty(data.items).map((item) => item.resource);
+        setItems(resources);
+        setTotal(data.total);
+        resources.forEach((resource) => markFavorite(resource.id, true));
+      })
+      .catch((err) => {
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : t("loadFailed"));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    category,
+    lang,
+    markFavorite,
+    page,
+    query,
+    sort,
+    t,
+    wallet.status,
+    wallet.token,
+  ]);
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const hasFilters = Boolean(category || query || sort !== "favorited_at");
+
+  const sortOptions = useMemo(
+    () => [
+      { value: "favorited_at" as const, label: t("favoritesSortFavoritedAt") },
+      { value: "published_at" as const, label: t("favoritesSortPublishedAt") },
+      { value: "hot" as const, label: t("favoritesSortHot") },
+    ],
+    [t],
+  );
+
+  if (wallet.status !== "loggedIn") {
     return (
       <Reveal className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 py-12 text-center">
         <div className="flex h-20 w-20 items-center justify-center rounded-full border border-ark-gold/30 bg-ark-gold/5">
-        <Heart
+          <Heart className="h-10 w-10 text-ark-gold/70" strokeWidth={1.8} />
-          className="h-10 w-10 text-ark-gold/70"
-          strokeWidth={1.8}
-          aria-hidden
-        />
         </div>
-
         <h1 className="text-2xl font-semibold text-neutral-100 md:text-3xl">
           {t("favorites")}
         </h1>
-
-      <p className="text-base font-medium text-ark-gold2 md:text-lg">
-        {t("favoritesComingSoon")}
-      </p>
-
         <p className="max-w-md text-sm leading-relaxed text-neutral-400 md:text-base">
-        {t("favoritesComingSoonDesc")}
+          {t("favoritesLoginDesc")}
         </p>
-
+        <button
-      <Link
+          type="button"
-        to={homePathForLang(lang)}
+          onClick={wallet.openLoginModal}
-        className="mt-4 inline-flex h-11 items-center justify-center rounded-full border border-ark-gold/60 bg-ark-gold/10 px-6 text-sm font-medium text-ark-gold transition hover:bg-ark-gold/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+          className="mt-2 inline-flex h-11 items-center justify-center rounded-full bg-ark-gold px-6 text-sm font-bold text-black transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
         >
-        {t("backToHome")}
+          {t("walletConnect")}
-      </Link>
+        </button>
+      </Reveal>
+    );
+  }
+
+  return (
+    <Reveal className="mx-auto grid max-w-[980px] gap-5 px-0 py-2 md:py-4">
+      <div className="rounded-3xl border border-white/10 bg-[#17171d] p-4 shadow-xl shadow-black/20 md:p-5">
+        <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+          <div>
+            <p className="text-sm font-semibold text-ark-gold2">
+              {t("favorites")}
+            </p>
+            <h1 className="mt-1 text-2xl font-bold text-white md:text-3xl">
+              {t("favoritesLibraryTitle")}
+            </h1>
+          </div>
+          <Link
+            to={homePathForLang(lang)}
+            className="inline-flex h-10 items-center justify-center rounded-full border border-ark-gold/50 px-4 text-sm font-semibold text-ark-gold transition hover:bg-ark-gold/10"
+          >
+            {t("backToHome")}
+          </Link>
+        </div>
+
+        <form
+          className="mt-5 grid gap-3 md:grid-cols-[1fr_180px_180px_auto]"
+          onSubmit={(event) => {
+            event.preventDefault();
+            setQuery(queryInput.trim());
+          }}
+        >
+          <label className="relative block">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-500" />
+            <input
+              value={queryInput}
+              onChange={(event) => setQueryInput(event.target.value)}
+              placeholder={t("favoritesSearchPlaceholder")}
+              className="h-11 w-full rounded-full border border-white/10 bg-[#101016] pl-10 pr-4 text-sm text-white outline-none transition placeholder:text-neutral-500 focus:border-ark-gold/60"
+            />
+          </label>
+
+          <label className="relative block">
+            <SlidersHorizontal className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-500" />
+            <select
+              value={sort}
+              onChange={(event) => setSort(event.target.value as FavoriteSort)}
+              className="h-11 w-full appearance-none rounded-full border border-white/10 bg-[#101016] pl-10 pr-4 text-sm text-white outline-none focus:border-ark-gold/60"
+            >
+              {sortOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <select
+            value={category}
+            onChange={(event) => setCategory(event.target.value)}
+            className="h-11 w-full rounded-full border border-white/10 bg-[#101016] px-4 text-sm text-white outline-none focus:border-ark-gold/60"
+          >
+            <option value="">{t("favoritesFilterAllCategories")}</option>
+            {categories.map((cat) => (
+              <option key={cat.slug} value={cat.slug}>
+                {cleanCategoryDisplayName(cat.name)}
+              </option>
+            ))}
+          </select>
+
+          <button
+            type="submit"
+            className="inline-flex h-11 items-center justify-center rounded-full bg-ark-gold px-5 text-sm font-bold text-black transition hover:bg-ark-gold2"
+          >
+            {t("search")}
+          </button>
+        </form>
+
+        {hasFilters ? (
+          <button
+            type="button"
+            onClick={() => {
+              setSort("favorited_at");
+              setCategory("");
+              setQuery("");
+              setQueryInput("");
+            }}
+            className="mt-3 inline-flex items-center gap-1 rounded-full border border-white/10 px-3 py-1.5 text-xs font-medium text-neutral-300 transition hover:border-ark-gold/40 hover:text-ark-gold"
+          >
+            <X className="h-3.5 w-3.5" />
+            {t("favoritesClearFilters")}
+          </button>
+        ) : null}
+      </div>
+
+      {loading ? (
+        <div className="grid gap-3">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-[132px] rounded-2xl" />
+          ))}
+        </div>
+      ) : error ? (
+        <div className="rounded-2xl border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-200">
+          {error}
+        </div>
+      ) : items.length === 0 ? (
+        <div className="flex min-h-[280px] flex-col items-center justify-center gap-4 rounded-3xl border border-white/10 bg-[#17171d] p-8 text-center">
+          <Heart className="h-10 w-10 text-ark-gold/60" strokeWidth={1.8} />
+          <h2 className="text-xl font-semibold text-white">
+            {hasFilters
+              ? t("favoritesNoFilteredTitle")
+              : t("favoritesEmptyTitle")}
+          </h2>
+          <p className="max-w-md text-sm leading-6 text-neutral-400">
+            {hasFilters
+              ? t("favoritesNoFilteredDesc")
+              : t("favoritesEmptyDesc")}
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-3">
+          {items.map((resource) => (
+            <FavoriteResourceCard key={resource.id} resource={resource} />
+          ))}
+        </div>
+      )}
+
+      {totalPages > 1 ? (
+        <div className="flex items-center justify-center gap-3">
+          <button
+            type="button"
+            disabled={page <= 1}
+            onClick={() => setPage((value) => Math.max(1, value - 1))}
+            className="rounded-full border border-white/10 px-4 py-2 text-sm text-neutral-200 transition hover:border-ark-gold/50 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {t("paginationPrev")}
+          </button>
+          <span className="text-sm text-neutral-400">
+            {t("pageIndicator")
+              .replace("{{c}}", String(page))
+              .replace("{{p}}", String(totalPages))}
+          </span>
+          <button
+            type="button"
+            disabled={page >= totalPages}
+            onClick={() => setPage((value) => Math.min(totalPages, value + 1))}
+            className="rounded-full border border-white/10 px-4 py-2 text-sm text-neutral-200 transition hover:border-ark-gold/50 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {t("paginationNext")}
+          </button>
+        </div>
+      ) : null}
     </Reveal>
   );
 }