new design

src/components/AlbumHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Play, Heart, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2, Highlighter } from 'lucide-react';
+import { Play, Heart, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2, Highlighter, Shuffle } from 'lucide-react';
 import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../hooks/useIsMobile';
 import StarRating from './StarRating';
 import type { EntityRatingSupportLevel } from '../api/subsonic';
+import { useThemeStore } from '../store/themeStore';
 
 function formatDuration(seconds: number): string {
   const h = Math.floor(seconds / 3600);
@@ -85,6 +86,7 @@ interface AlbumHeaderProps {
   onRemoveOffline: () => void;
   onPlayAll: () => void;
   onEnqueueAll: () => void;
+  onShuffleAll?: () => void;
   onBio: () => void;
   onCloseBio: () => void;
   entityRatingValue: number;
@@ -111,6 +113,7 @@ export default function AlbumHeader({
   onRemoveOffline,
   onPlayAll,
   onEnqueueAll,
+  onShuffleAll,
   onBio,
   onCloseBio,
   entityRatingValue,
@@ -120,6 +123,7 @@ export default function AlbumHeader({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const isMobile = useIsMobile();
+  const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);
   const [lightboxOpen, setLightboxOpen] = useState(false);
 
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
@@ -138,14 +142,16 @@ export default function AlbumHeader({
       )}
 
       <div className="album-detail-header">
-        {resolvedCoverUrl && (
-          <div
-            className="album-detail-bg"
-            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
-            aria-hidden="true"
-          />
+        {resolvedCoverUrl && enableCoverArtBackground && (
+          <>
+            <div
+              className="album-detail-bg"
+              style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
+              aria-hidden="true"
+            />
+            <div className="album-detail-overlay" aria-hidden="true" />
+          </>
         )}
-        <div className="album-detail-overlay" aria-hidden="true" />
 
         <div className="album-detail-content">
           <button className="btn btn-ghost album-detail-back" onClick={() => navigate(-1)}>
@@ -165,7 +171,6 @@ export default function AlbumHeader({
               <div className="album-detail-cover album-cover-placeholder">♪</div>
             )}
             <div className="album-detail-meta">
-              <span className="badge album-detail-badge">{t('common.album')}</span>
               <h1 className="album-detail-title">{info.name}</h1>
               <p className="album-detail-artist">
                 <button
@@ -291,27 +296,33 @@ export default function AlbumHeader({
                 <div className="album-detail-actions">
                   <div className="album-detail-actions-primary">
                     <button className="btn btn-primary" id="album-play-all-btn" onClick={onPlayAll}>
-                      <Play size={16} fill="currentColor" /> {t('albumDetail.playAll')}
+                      <Play size={15} /> {t('common.play', 'Reproducir')}
                     </button>
+                    {onShuffleAll && (
+                      <button
+                        className="btn btn-ghost"
+                        onClick={onShuffleAll}
+                        data-tooltip={t('playlists.shuffle', 'Shuffle')}
+                      >
+                        <Shuffle size={16} />
+                      </button>
+                    )}
                     <button
-                      className="btn btn-surface"
+                      className="btn btn-ghost"
                       onClick={onEnqueueAll}
                       data-tooltip={t('albumDetail.enqueueTooltip')}
                     >
-                      <ListPlus size={16} /> {t('albumDetail.enqueue')}
+                      <ListPlus size={16} />
+                    </button>
+                    <button
+                      className={`btn btn-ghost${isStarred ? ' is-starred' : ''}`}
+                      onClick={onToggleStar}
+                      data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
+                    >
+                      <Heart size={16} fill={isStarred ? 'currentColor' : 'none'} />
                     </button>
                   </div>
 
-                  <button
-                    className={`btn btn-ghost album-detail-star-btn${isStarred ? ' is-starred' : ''}`}
-                    id="album-star-btn"
-                    onClick={onToggleStar}
-                    data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-                  >
-                    <Heart size={16} fill={isStarred ? 'currentColor' : 'none'} />
-                    {t('albumDetail.favorite')}
-                  </button>
-
                   <button className="btn btn-ghost" id="album-bio-btn" onClick={onBio}>
                     <Highlighter size={16} /> {t('albumDetail.artistBio')}
                   </button>