improve card styling on external items

src/i18n/locales/en.json

@@ -152,6 +152,7 @@
         "trackPeak": "track peak",
         "translation": "translation",
         "unknown": "unknown",
+        "unavailable": "unavailable",
         "version": "version",
         "year": "year",
         "yes": "yes",

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

@@ -20,11 +20,6 @@
     opacity: 0.5;
 }
 
-.container.external {
-    opacity: 0.6;
-    filter: grayscale(0.3) saturate(0.7);
-}
-
 .image-container {
     position: relative;
     display: block;
@@ -64,6 +59,39 @@
     }
 }
 
+.image-container.external {
+    img {
+        opacity: 0.3;
+        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);
+        }
+    }
+}
+
 .image-container.is-round {
     &::before {
         border-radius: 50%;

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

@@ -585,6 +585,7 @@ const DefaultItemCard = ({
         const isExternal = data._serverType === ServerType.EXTERNAL;
 
         const imageContainerClassName = clsx(styles.imageContainer, {
+            [styles.external]: isExternal,
             [styles.isRound]: isRound,
             [styles.noHoverOverlay]: isExternal,
         });
@@ -888,6 +889,7 @@ const PosterItemCard = ({
         const isExternal = data._serverType === ServerType.EXTERNAL;
 
         const imageContainerClassName = clsx(styles.imageContainer, {
+            [styles.external]: isExternal,
             [styles.isRound]: isRound,
             [styles.noHoverOverlay]: isExternal,
         });
@@ -947,6 +949,9 @@ const PosterItemCard = ({
                 {enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
                     <Link
                         className={imageContainerClassName}
+                        data-unavailable-text={i18n.t('common.unavailable', {
+                            postProcess: 'titleCase',
+                        })}
                         draggable={false}
                         onClick={handleImageClick}
                         onContextMenu={handleContextMenu}
@@ -961,6 +966,9 @@ const PosterItemCard = ({
                 ) : (
                     <div
                         className={imageContainerClassName}
+                        data-unavailable-text={i18n.t('common.unavailable', {
+                            postProcess: 'titleCase',
+                        })}
                         onClick={handleImageClick}
                         onContextMenu={handleContextMenu}
                         onMouseEnter={handleMouseEnter}