src/favorites/FavoriteButton.tsx

@@ -57,16 +57,25 @@ export function FavoriteButton({
       aria-label={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
       title={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
       className={[
-        "inline-flex shrink-0 items-center justify-center rounded-full border outline-none transition active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait disabled:opacity-70",
+        "inline-flex shrink-0 items-center justify-center rounded-full border outline-none transition active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait md:disabled:opacity-70",
         dimension,
         isFavorite
-          ? "border-ark-gold/60 bg-ark-gold text-black hover:bg-ark-gold2"
-          : "border-white/10 bg-[#191921]/90 text-[#A8A9AE] hover:border-ark-gold hover:bg-[#191921] hover:text-ark-gold",
+          ? "border-ark-gold/60 bg-ark-gold text-black md:hover:bg-ark-gold2"
+          : "border-white/10 bg-[#191921]/90 text-[#A8A9AE] md:hover:border-ark-gold md:hover:bg-[#191921] md:hover:text-ark-gold",
         className,
       ].join(" ")}
+      aria-busy={pending}
     >
       {pending ? (
-        <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.2} />
+        <>
+          <span className="md:hidden">
+            <FigmaBookmarkIcon />
+          </span>
+          <LoaderCircle
+            className="hidden h-5 w-5 animate-spin md:block"
+            strokeWidth={2.2}
+          />
+        </>
       ) : (
         <FigmaBookmarkIcon />
       )}

src/pages/Favorites/index.tsx

@@ -1,146 +1,21 @@
 import { Heart, RotateCcw } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
-import {
-  assetUrl,
-  getJSON,
-  itemsOrEmpty,
-  readJSONCache,
-  type Category,
-  type Resource,
-} from "../../api";
-import { FavoriteButton } from "../../favorites/FavoriteButton";
+import { useEffect, useState } from "react";
+import { itemsOrEmpty } from "../../api";
 import { isFavoritesAuthError, listFavorites } from "../../favorites/api";
 import { useFavorites } from "../../favorites/FavoritesProvider";
-import { langQuery, useI18n, type Lang } from "../../i18n";
+import { useI18n } from "../../i18n";
 import { Reveal } from "../../motion";
+import { MessageBubble } from "../../components/messageStream/MessageBubble";
 import { useSetPageTitle } from "../../components/PageTitleContext";
 import { Skeleton } from "../../components/Skeleton";
 import { useWallet } from "../../wallet/WalletProvider";
-import { useLocalizedPath } from "../../useLocalizedPath";
-import { postToResource } from "../../utils/postResourceAdapter";
-import { formatDateYmd } from "../../utils/format";
-import {
-  resourceLanguageLabel,
-  resourceTypeLabel,
-} from "../../resourceTypeLabels";
 
 const pageSize = 50;
 
-function useCategories(lang: Lang): Category[] {
-  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;
-
-  return (
-    <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"
-      }`}
-    >
-      {!unavailable ? (
-        <Link
-          to={lp(`/resource/${resource.id}`)}
-          aria-label={resource.title}
-          className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80"
-        />
-      ) : null}
-      <div className="relative z-10 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="pointer-events-none relative z-10 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">
-          {resource.categoryName ? (
-            <span className="rounded-full bg-[#1f2028] px-2.5 py-1 text-neutral-200">
-              {resource.categoryName}
-            </span>
-          ) : null}
-          {resource.type ? (
-            <span>{resourceTypeLabel(t, resource.type)}</span>
-          ) : null}
-          {resource.language ? (
-            <>
-              <span>·</span>
-              <span>{resourceLanguageLabel(t, resource.language)}</span>
-            </>
-          ) : null}
-          {resource.updatedAt ? (
-            <>
-              <span>·</span>
-              <time dateTime={resource.updatedAt}>
-                {formatDateYmd(resource.updatedAt)}
-              </time>
-            </>
-          ) : null}
-          {typeof resource.favoriteCount === "number" ? (
-            <span>· ♥ {resource.favoriteCount}</span>
-          ) : null}
-        </div>
-      </div>
-
-      <FavoriteButton
-        resourceId={resource.id}
-        className="absolute right-3 top-3 z-20"
-      />
-    </article>
-  );
-}
-
 export default function Favorites() {
-  const { lang, t } = useI18n();
+  const { t } = useI18n();
   const wallet = useWallet();
   const { markFavorite } = useFavorites();
-  const categories = useCategories(lang);
   const [posts, setPosts] = useState<
     Awaited<ReturnType<typeof listFavorites>>["items"]
   >([]);
@@ -195,14 +70,9 @@ export default function Favorites() {
     };
   }, [markFavorite, reloadKey, t, wallet]);
 
-  const resources = useMemo(
-    () => posts.map((post) => postToResource(post, lang, categories)),
-    [posts, lang, categories],
-  );
-
   if (wallet.status === "loading") {
     return (
-      <Reveal className="mx-auto grid max-w-[980px] gap-3 px-0 py-2 md:py-4">
+      <Reveal className="mx-auto grid w-full max-w-[980px] gap-3 overflow-x-clip px-0 py-2 md:py-4">
         {Array.from({ length: 4 }).map((_, index) => (
           <Skeleton key={index} className="h-[132px] rounded-2xl" />
         ))}
@@ -234,7 +104,7 @@ export default function Favorites() {
   }
 
   return (
-    <div className="mx-auto grid max-w-[980px] gap-3 px-0 py-2 md:py-4">
+    <div className="mx-auto flex w-full max-w-full flex-col gap-3 overflow-x-clip py-2 md:max-w-[820px] md:py-4 lg:max-w-[1080px] xl:max-w-[1180px]">
       {loading || !loaded ? (
         Array.from({ length: 4 }).map((_, index) => (
           <Skeleton key={index} className="h-[132px] rounded-2xl" />
@@ -251,7 +121,7 @@ export default function Favorites() {
             {t("walletRetry")}
           </button>
         </div>
-      ) : resources.length === 0 ? (
+      ) : posts.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">
@@ -262,8 +132,10 @@ export default function Favorites() {
           </p>
         </div>
       ) : (
-        resources.map((resource) => (
-          <FavoriteResourceCard key={resource.id} resource={resource} />
+        posts.map((post, index) => (
+          <Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
+            <MessageBubble post={post} />
+          </Reveal>
         ))
       )}
     </div>