feat: add favorites state and buttons

src/components/RecommendedCard.tsx

@@ -15,6 +15,7 @@ import {
 } from "./messageStream/utils/downloadFile";
 import { mediaSaveKindFromType, useSaveToAlbumGuide } from "./SaveToAlbumGuide";
 import { useToast } from "./Toast";
+import { FavoriteButton } from "../favorites/FavoriteButton";
 
 function isPlaceholderAsset(path: string | undefined | null) {
   return !path || path.includes("placeholder-cover");
@@ -133,6 +134,11 @@ export function RecommendedCard({
             {r.badgeLabel}
           </span>
         ) : null}
+        <FavoriteButton
+          resourceId={r.id}
+          size="sm"
+          className="absolute right-3 top-3 z-20 shadow-lg shadow-black/30"
+        />
       </div>
       <div
         className={