music: album art on the /music mini bar

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/workspaces/officerdev/src/MusicPlayer/MusicMiniBar.tsx

@@ -1,7 +1,8 @@
 import { useRef } from 'react';
+import { useClient } from 'hooks/useClient';
 import { MicVocal, Pause, Play } from 'lucide-react';
 import { SeekBar } from '../apps/FileViewer/renderers/SeekBar';
-import { fmtClock } from '../apps/Music/shared';
+import { coverUrl, fmtClock } from '../apps/Music/shared';
 import { seekPlayer } from './player-time';
 import { useLyricsOpen } from './useLyricsOpen';
 import { useMusicPlayer } from './useMusicPlayer';
@@ -16,6 +17,7 @@ import { usePlayerClock } from './usePlayerClock';
  * too many, and the dock's own row costs the workspace its height on every screen.
  */
 export const MusicMiniBar = () => {
+  const { token } = useClient();
   const { current, playing, toggle } = useMusicPlayer();
   const [lyricsOpen, toggleLyrics] = useLyricsOpen();
   const { position, duration } = usePlayerClock();
@@ -43,6 +45,17 @@ export const MusicMiniBar = () => {
 
   return (
     <div className="flex shrink-0 items-center gap-3 border-t border-border bg-card/60 px-4 py-2">
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
+        <img
+          src={coverUrl(current.albumRel, token)}
+          alt=""
+          className="h-full w-full object-cover"
+          onError={(ev) => {
+            (ev.currentTarget as HTMLImageElement).style.visibility = 'hidden';
+          }}
+        />
+      </div>
+
       <button
         type="button"
         onClick={toggle}
@@ -52,7 +65,7 @@ export const MusicMiniBar = () => {
         {playing ? <Pause size={15} /> : <Play size={15} className="ml-0.5" />}
       </button>
 
-      <div className="hidden min-w-0 w-48 shrink-0 sm:block">
+      <div className="hidden w-48 min-w-0 shrink-0 sm:block">
         <p className="truncate text-xs font-medium text-foreground">{current.title ?? current.file}</p>
         {current.artist && <p className="truncate text-[11px] text-muted-foreground">{current.artist}</p>}
       </div>