From 370f8ba293ad88229503cc835e4b5a32d84e4fa3 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Fri, 23 May 2025 17:42:19 -0400
Subject: [PATCH] fix(ui): update artist link rendering and improve button
 styles

Signed-off-by: Deluan <deluan@navidrome.org>
---
 .../__snapshots__/AlbumDetails.test.jsx.snap  | 172 ------------------
 ui/src/common/ArtistLinkField.jsx             |   4 +-
 ui/src/missing/DeleteMissingFilesButton.jsx   |   5 +-
 ui/src/user/DeleteUserButton.jsx              |   5 +-
 4 files changed, 7 insertions(+), 179 deletions(-)

diff --git a/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap b/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap
index 4f8f8353..706e50a4 100644
--- a/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap
+++ b/ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap
@@ -251,175 +251,3 @@ exports[`Details component > Mobile view > renders correctly with year range (st
   </span>
 </div>
 `;
-
-exports[`Details component > renders correctly in mobile view 1`] = `
-<div>
-  <span>
-    ♫  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    ○  Jun 15, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with all date fields 1`] = `
-<div>
-  <span>
-    resources.album.fields.originalDate  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    resources.album.fields.releaseDate  Jun 15, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-6"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with date 1`] = `
-<div>
-  <span>
-    May 1, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-2"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with date and originalDate 1`] = `
-<div>
-  <span>
-    resources.album.fields.originalDate  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-4"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with just year range 1`] = `
-<div>
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-1"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with originalDate 1`] = `
-<div>
-  <span>
-    resources.album.fields.originalDate  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-3"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with releaseDate 1`] = `
-<div>
-  <span>
-    resources.album.fields.releaseDate  Jun 15, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-5"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
diff --git a/ui/src/common/ArtistLinkField.jsx b/ui/src/common/ArtistLinkField.jsx
index 60832eb4..d41b47b0 100644
--- a/ui/src/common/ArtistLinkField.jsx
+++ b/ui/src/common/ArtistLinkField.jsx
@@ -44,7 +44,9 @@ const parseAndReplaceArtists = (
         result.push(displayAlbumArtist.slice(lastIndex, index))
       }
       // Add the artist link
-      result.push(<ALink artist={artist} className={className} />)
+      result.push(
+        <ALink artist={artist} className={className} key={artist.id} />,
+      )
       lastIndex = index + artist.name.length
     }
   })
diff --git a/ui/src/missing/DeleteMissingFilesButton.jsx b/ui/src/missing/DeleteMissingFilesButton.jsx
index 9cd62282..f02bb81a 100644
--- a/ui/src/missing/DeleteMissingFilesButton.jsx
+++ b/ui/src/missing/DeleteMissingFilesButton.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import DeleteIcon from '@material-ui/icons/Delete'
-import { makeStyles } from '@material-ui/core/styles'
-import { fade } from '@material-ui/core/styles/colorManipulator'
+import { makeStyles, alpha } from '@material-ui/core/styles'
 import clsx from 'clsx'
 import {
   Button,
@@ -17,7 +16,7 @@ const useStyles = makeStyles(
     deleteButton: {
       color: theme.palette.error.main,
       '&:hover': {
-        backgroundColor: fade(theme.palette.error.main, 0.12),
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
         // Reset on mouse devices
         '@media (hover: none)': {
           backgroundColor: 'transparent',
diff --git a/ui/src/user/DeleteUserButton.jsx b/ui/src/user/DeleteUserButton.jsx
index 9bf133fb..8d78e6bc 100644
--- a/ui/src/user/DeleteUserButton.jsx
+++ b/ui/src/user/DeleteUserButton.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import DeleteIcon from '@material-ui/icons/Delete'
-import { makeStyles } from '@material-ui/core/styles'
-import { fade } from '@material-ui/core/styles/colorManipulator'
+import { makeStyles, alpha } from '@material-ui/core/styles'
 import clsx from 'clsx'
 import {
   useDeleteWithConfirmController,
@@ -16,7 +15,7 @@ const useStyles = makeStyles(
     deleteButton: {
       color: theme.palette.error.main,
       '&:hover': {
-        backgroundColor: fade(theme.palette.error.main, 0.12),
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
         // Reset on mouse devices
         '@media (hover: none)': {
           backgroundColor: 'transparent',