add favorite badge to card

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%;

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