From f887fb46795144a34df67c3a9b63ac8fab3e0bc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 27 Jul 2026 12:58:59 +0000
Subject: [PATCH] music (web): cursor-pointer on dock controls (Tailwind v4 no
 longer defaults it)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add cursor-pointer to the player dock's buttons — track-info, prev/next (with
disabled:cursor-default), play/pause, mute, and close — and to MusicHeart (so
every heart across the player/tracklists gets it). The volume slider and SeekBar
already had it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../officerdev/src/MusicPlayer/MusicPlayerHost.tsx   | 12 ++++++------
 .../officerdev/src/apps/Music/MusicHeart.tsx         |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/workspaces/officerdev/src/MusicPlayer/MusicPlayerHost.tsx b/src/workspaces/officerdev/src/MusicPlayer/MusicPlayerHost.tsx
index f1a1f25b..e5e22035 100644
--- a/src/workspaces/officerdev/src/MusicPlayer/MusicPlayerHost.tsx
+++ b/src/workspaces/officerdev/src/MusicPlayer/MusicPlayerHost.tsx
@@ -164,7 +164,7 @@ export const MusicPlayerHost = () => {
             type="button"
             onClick={openCurrentAlbum}
             title="Show in library"
-            className="flex min-w-0 items-center gap-3 rounded text-left transition-opacity hover:opacity-80"
+            className="flex min-w-0 cursor-pointer items-center gap-3 rounded text-left transition-opacity hover:opacity-80"
           >
             <div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
               <img
@@ -188,14 +188,14 @@ export const MusicPlayerHost = () => {
               type="button"
               onClick={prev}
               disabled={index === 0}
-              className="p-1.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
+              className="cursor-pointer p-1.5 text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-40"
             >
               <SkipBack size={18} />
             </button>
             <button
               type="button"
               onClick={toggle}
-              className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground hover:opacity-90 active:scale-95"
+              className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground hover:opacity-90 active:scale-95"
             >
               {playing ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
             </button>
@@ -203,7 +203,7 @@ export const MusicPlayerHost = () => {
               type="button"
               onClick={next}
               disabled={index >= queue.length - 1}
-              className="p-1.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
+              className="cursor-pointer p-1.5 text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-40"
             >
               <SkipForward size={18} />
             </button>
@@ -229,7 +229,7 @@ export const MusicPlayerHost = () => {
 
           {/* volume */}
           <div className="hidden shrink-0 items-center gap-1.5 md:flex">
-            <button type="button" onClick={() => setMuted((m) => !m)} className="text-muted-foreground hover:text-foreground">
+            <button type="button" onClick={() => setMuted((m) => !m)} className="cursor-pointer text-muted-foreground hover:text-foreground">
               {muted || volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
             </button>
             <input
@@ -250,7 +250,7 @@ export const MusicPlayerHost = () => {
             className="shrink-0 p-1.5"
           />
 
-          <button type="button" onClick={close} className="shrink-0 p-1.5 text-muted-foreground hover:text-foreground">
+          <button type="button" onClick={close} className="shrink-0 cursor-pointer p-1.5 text-muted-foreground hover:text-foreground">
             <X size={16} />
           </button>
         </div>
diff --git a/src/workspaces/officerdev/src/apps/Music/MusicHeart.tsx b/src/workspaces/officerdev/src/apps/Music/MusicHeart.tsx
index 35261ebc..aef1ff81 100644
--- a/src/workspaces/officerdev/src/apps/Music/MusicHeart.tsx
+++ b/src/workspaces/officerdev/src/apps/Music/MusicHeart.tsx
@@ -35,7 +35,7 @@ export const MusicHeart = ({
       }}
       title={on ? 'Remove from favorites' : 'Add to favorites'}
       aria-label={on ? 'Remove from favorites' : 'Add to favorites'}
-      className={`flex items-center justify-center transition-colors ${reveal} ${className}`}
+      className={`flex cursor-pointer items-center justify-center transition-colors ${reveal} ${className}`}
     >
       <Heart size={size} className={on ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-foreground'} />
     </button>