support navidrome playlist image upload

src/renderer/features/shared/components/library-header.module.css

@@ -112,6 +112,7 @@
 }
 
 .image-section {
+    position: relative;
     z-index: 15;
     display: flex;
     grid-area: image;
@@ -124,6 +125,21 @@
     }
 }
 
+.image-overlay {
+    position: absolute;
+    right: var(--theme-spacing-xs);
+    bottom: var(--theme-spacing-xs);
+    z-index: 2;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 120ms ease;
+}
+
+.image-section:hover .image-overlay {
+    pointer-events: auto;
+    opacity: 1;
+}
+
 .metadata-section {
     z-index: 15;
     display: flex;

src/renderer/features/shared/components/library-header.tsx

@@ -35,6 +35,7 @@ interface LibraryHeaderProps {
     children?: ReactNode;
     compact?: boolean;
     containerClassName?: string;
+    imageOverlay?: ReactNode;
     imagePlaceholderUrl?: null | string;
     imageUrl?: null | string;
     item: {
@@ -56,6 +57,7 @@ export const LibraryHeader = forwardRef(
             children,
             compact,
             containerClassName,
+            imageOverlay,
             imageUrl,
             item,
             title,
@@ -168,6 +170,16 @@ export const LibraryHeader = forwardRef(
                         src={imageUrl || ''}
                         type="header"
                     />
+                    {imageOverlay && (
+                        <div
+                            className={styles.imageOverlay}
+                            onClick={(e) => e.stopPropagation()}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            role="presentation"
+                        >
+                            {imageOverlay}
+                        </div>
+                    )}
                 </div>
                 {title && (
                     <div className={styles.metadataSection}>