From 1712a8b4d5f581777caea39fe39e6ba3ebdfa4f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 4 Aug 2026 15:44:42 +0000
Subject: [PATCH] the album play button is the dock's play button

same useGlobal MUSIC_PLAYER state, so on the album that is already loaded it
shows pause while it plays and resumes rather than restarting from track one.
any other album still starts from the top.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../officerdev/src/apps/Music/MusicDetail.tsx    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx b/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
index 75db60ae..72cdae9f 100644
--- a/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
+++ b/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { createContext, useContext, useState, useEffect, useRef } from 'react';
 import { useClient } from 'hooks/useClient';
 import { usePanelChannel } from 'hooks/usePanelChannel';
-import { Play, ChevronLeft, MicVocal, Volume2 } from 'lucide-react';
+import { Play, Pause, ChevronLeft, MicVocal, Volume2 } from 'lucide-react';
 import type { LayoutNode, PanelComponents } from '../../components/Workspace';
 import { WorkspaceLayout } from '../../components/Workspace';
 import { MusicHeart } from './MusicHeart';
@@ -196,6 +196,13 @@ export const MusicDetail = () => {
   const isCurrent = (albumRel: string, file: string) =>
     player.current?.albumRel === albumRel && player.current?.file === file;
 
+  // The album's play button is the dock's play button when the dock is already on this album: same
+  // useGlobal state, so it shows pause while it plays and resumes where it stopped. It only starts the
+  // album from the top when something else (or nothing) is loaded.
+  const albumLoaded = !!album && player.current?.albumRel === rel;
+  const albumPlaying = albumLoaded && player.playing;
+  const toggleAlbum = () => (albumLoaded ? player.toggle() : playCurrent(0));
+
   const crumbs = rel ? rel.split('/') : [];
 
   const Card = ({ r, name, playable }: { r: string; name: string; playable: boolean }) => (
@@ -295,10 +302,11 @@ export const MusicDetail = () => {
               <div className="mt-3 flex items-center gap-3">
                 <button
                   type="button"
-                  onClick={() => playCurrent(0)}
-                  className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground hover:scale-105"
+                  onClick={toggleAlbum}
+                  title={albumPlaying ? 'Pause' : 'Play'}
+                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground hover:scale-105"
                 >
-                  <Play size={18} className="ml-0.5" />
+                  {albumPlaying ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
                 </button>
                 <MusicHeart kind="album" favKey={rel} size={24} className="p-1" />
                 <button