officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

music (web): cursor-pointer on dock controls (Tailwind v4 no longer defaults it)

Browse Source 
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>
This commit is contained in:
pastilhas
2026-07-27 12:58:59 +00:00
co-authored by Claude Opus 4.8
parent 3f2efbf852
commit f887fb4679
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/officerdev/src/MusicPlayer/MusicPlayerHost.tsx
+6 -6
View File
@@ -164,7 +164,7 @@ export const MusicPlayerHost = () => {
type="button" type="button"
onClick={openCurrentAlbum} onClick={openCurrentAlbum}
title="Show in library" 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"> <div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
<img <img
@@ -188,14 +188,14 @@ export const MusicPlayerHost = () => {
type="button" type="button"
onClick={prev} onClick={prev}
disabled={index === 0} 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} /> <SkipBack size={18} />
</button> </button>
<button <button
type="button" type="button"
onClick={toggle} 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" />} {playing ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
</button> </button>
@@ -203,7 +203,7 @@ export const MusicPlayerHost = () => {
type="button" type="button"
onClick={next} onClick={next}
disabled={index >= queue.length - 1} 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} /> <SkipForward size={18} />
</button> </button>
@@ -229,7 +229,7 @@ export const MusicPlayerHost = () => {
{/* volume */} {/* volume */}
<div className="hidden shrink-0 items-center gap-1.5 md:flex"> <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} />} {muted || volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
</button> </button>
<input <input
@@ -250,7 +250,7 @@ export const MusicPlayerHost = () => {
className="shrink-0 p-1.5" 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} /> <X size={16} />
</button> </button>
</div> </div>
src/workspaces/officerdev/src/apps/Music/MusicHeart.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const MusicHeart = ({
}} }}
title={on ? 'Remove from favorites' : 'Add to favorites'} title={on ? 'Remove from favorites' : 'Add to favorites'}
aria-label={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'} /> <Heart size={size} className={on ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-foreground'} />
</button> </button>