redesign external song indicator on itemcard

src/renderer/components/item-card/item-card.module.css

@@ -62,32 +62,12 @@
 .image-container.external {
     img {
         opacity: 0.5;
-        filter: grayscale(0.5) saturate(0.7);
-        transition: all 0.2s ease-in-out;
-    }
-
-    &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 1rem;
-        font-size: var(--theme-font-size-sm);
-        font-weight: 500;
-        color: white;
-        text-align: center;
-        text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
-        pointer-events: none;
-        content: attr(data-unavailable-text);
-        background-color: alpha(var(--theme-colors-state-error), 0.5);
-        opacity: 1;
         transition: all 0.2s ease-in-out;
     }
 
     &:hover {
         img {
             opacity: 1;
-            filter: grayscale(0) saturate(1);
         }
     }
 }
@@ -141,9 +121,19 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-.image-container:hover .favorite-badge,
-.image-container:hover .rating-badge {
-    opacity: 0;
+.external-badge {
+    position: absolute;
+    bottom: var(--theme-spacing-sm);
+    left: var(--theme-spacing-sm);
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
+    pointer-events: none;
+    background-color: alpha(var(--theme-colors-state-error), 0.85);
+    border-radius: var(--theme-radius-md);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
 }
 
 .image {

src/renderer/components/item-card/item-card.tsx

@@ -29,6 +29,7 @@ import {
 } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Separator } from '/@/shared/components/separator/separator';
@@ -347,6 +348,7 @@ const CompactItemCard = ({
             withControls && showControls && data && (!isExternal || youtubeIntegrationEnabled);
 
         const imageContainerClassName = clsx(styles.imageContainer, {
+            [styles.external]: isExternal,
             [styles.isRound]: isRound,
             [styles.noHoverOverlay]: isExternal && !showItemCardControls,
         });
@@ -380,6 +382,11 @@ const CompactItemCard = ({
                 )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
+                {isExternal && (
+                    <div className={styles.externalBadge} title={i18n.t('common.external')}>
+                        <ExternalSongIndicator isExternal size="sm" withSpace={false} />
+                    </div>
+                )}
                 <AnimatePresence>
                     {showItemCardControls && (
                         <ItemCardControls
@@ -625,6 +632,11 @@ const DefaultItemCard = ({
                 )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
+                {isExternal && (
+                    <div className={styles.externalBadge} title={i18n.t('common.external')}>
+                        <ExternalSongIndicator isExternal size="sm" withSpace={false} />
+                    </div>
+                )}
                 <AnimatePresence>
                     {showItemCardControls && (
                         <ItemCardControls
@@ -933,6 +945,11 @@ const PosterItemCard = ({
                 )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
+                {isExternal && (
+                    <div className={styles.externalBadge}>
+                        <ExternalSongIndicator isExternal size="xl" withSpace={false} />
+                    </div>
+                )}
                 <AnimatePresence>
                     {showItemCardControls && (
                         <ItemCardControls
@@ -961,9 +978,6 @@ const PosterItemCard = ({
                 {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
                     <Link
                         className={imageContainerClassName}
-                        data-unavailable-text={i18n.t('common.external', {
-                            postProcess: 'titleCase',
-                        })}
                         draggable={false}
                         onClick={handleImageClick}
                         onContextMenu={handleContextMenu}
@@ -978,9 +992,6 @@ const PosterItemCard = ({
                 ) : (
                     <div
                         className={imageContainerClassName}
-                        data-unavailable-text={i18n.t('common.external', {
-                            postProcess: 'titleCase',
-                        })}
                         onClick={handleImageClick}
                         onContextMenu={handleContextMenu}
                         onMouseEnter={handleMouseEnter}