From 1a4c909cc32f14717f937d2717d13f55db580898 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 19 Nov 2025 22:34:50 -0800
Subject: [PATCH] add favorite badge to card

---
 .../components/item-card/item-card.module.css       | 13 +++++++++++++
 src/renderer/components/item-card/item-card.tsx     | 12 ++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css
index 91a912098..e1911424c 100644
--- a/src/renderer/components/item-card/item-card.module.css
+++ b/src/renderer/components/item-card/item-card.module.css
@@ -53,6 +53,19 @@
     }
 }
 
+.favorite-badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    border-color: var(--theme-colors-primary) transparent transparent transparent;
+    border-style: solid;
+    border-width: 24px 24px 0 0;
+}
+
 .image {
     width: 100%;
     height: 100%;
diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx
index 936352463..413397a11 100644
--- a/src/renderer/components/item-card/item-card.tsx
+++ b/src/renderer/components/item-card/item-card.tsx
@@ -212,12 +212,16 @@ const CompactItemCard = ({
             [styles.isRound]: isRound,
         });
 
+        const isFavorite =
+            'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
+
         const imageContainerContent = (
             <>
                 <Image
                     className={clsx(styles.image, { [styles.isRound]: isRound })}
                     src={imageUrl}
                 />
+                {isFavorite && <div className={styles.favoriteBadge} />}
                 <AnimatePresence>
                     {withControls && showControls && (
                         <ItemCardControls
@@ -400,12 +404,16 @@ const DefaultItemCard = ({
             [styles.isRound]: isRound,
         });
 
+        const isFavorite =
+            'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
+
         const imageContainerContent = (
             <>
                 <Image
                     className={clsx(styles.image, { [styles.isRound]: isRound })}
                     src={imageUrl}
                 />
+                {isFavorite && <div className={styles.favoriteBadge} />}
                 <AnimatePresence>
                     {withControls && showControls && (
                         <ItemCardControls
@@ -633,12 +641,16 @@ const PosterItemCard = ({
             [styles.isRound]: isRound,
         });
 
+        const isFavorite =
+            'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
+
         const imageContainerContent = (
             <>
                 <Image
                     className={clsx(styles.image, { [styles.isRound]: isRound })}
                     src={imageUrl}
                 />
+                {isFavorite && <div className={styles.favoriteBadge} />}
                 <AnimatePresence>
                     {withControls && showControls && data && (
                         <ItemCardControls