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>

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