feat: add favorites state and buttons

src/favorites/FavoriteButton.tsx

@@ -0,0 +1,61 @@
+import { Heart, LoaderCircle } from "lucide-react";
+import { useEffect } from "react";
+import { useI18n } from "../i18n";
+import { useFavorites } from "./FavoritesProvider";
+
+type FavoriteButtonProps = {
+  resourceId: string;
+  className?: string;
+  size?: "sm" | "md";
+};
+
+export function FavoriteButton({
+  resourceId,
+  className = "",
+  size = "md",
+}: FavoriteButtonProps) {
+  const { t } = useI18n();
+  const favorites = useFavorites();
+  const status = favorites.statusFor(resourceId);
+  const pending = favorites.pendingIds.has(resourceId);
+  const isFavorite = status === "favorited";
+
+  useEffect(() => {
+    void favorites.ensureFavoriteIds([resourceId]).catch(() => undefined);
+  }, [favorites, resourceId]);
+
+  const dimension = size === "sm" ? "h-9 w-9" : "h-10 w-10";
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void favorites.toggleFavorite(resourceId).catch(() => undefined);
+      }}
+      disabled={pending}
+      aria-pressed={isFavorite}
+      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",
+        dimension,
+        isFavorite
+          ? "border-ark-gold/60 bg-ark-gold text-black hover:bg-ark-gold2"
+          : "border-white/10 bg-[#191921]/90 text-white hover:border-ark-gold/50 hover:bg-ark-gold/10 hover:text-ark-gold",
+        className,
+      ].join(" ")}
+    >
+      {pending ? (
+        <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.2} />
+      ) : (
+        <Heart
+          className="h-5 w-5"
+          strokeWidth={2.2}
+          fill={isFavorite ? "currentColor" : "none"}
+        />
+      )}
+    </button>
+  );
+}