feat(playback): move a session between devices

One device holds the audio; the rest watch the same session over an
event stream and act as remotes. Picking a device hands the audio over
at the position the previous one reported, and that device stops.

Also centre the command palette with margins instead of a translate:
animate-rise sets its own transform and dropped the offset on mobile.

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

frontend/src/components/PlaybackBar.tsx

@@ -5,6 +5,8 @@ import { useDislikeTrack } from '../hooks/useDislikeTrack';
 import { Artwork } from './Artwork';
 import { ArtistLinks } from './ArtistLinks';
 import { formatDuration } from './TrackRow';
+import { DevicePicker } from './DevicePicker';
+import { usePlaybackSyncContext } from './PlaybackSyncProvider';
 
 interface PlaybackBarProps {
   queueOpen: boolean;
@@ -16,6 +18,18 @@ interface PlaybackBarProps {
 export function PlaybackBar({ queueOpen, lyricsOpen, onToggleQueue, onToggleLyrics }: PlaybackBarProps) {
   const { currentTrack, isPlaying, position, duration, volume, shuffle, repeat, play, pause, next, prev, setPosition, setVolume, toggleShuffle, cycleRepeat } = usePlaybackStore();
   const dislikeTrack = useDislikeTrack();
+  const { hasRemoteOwner, sendCommand } = usePlaybackSyncContext();
+
+  // While another device holds the audio, the transport is a remote: the press
+  // travels to that device instead of starting a second stream here.
+  const remote = {
+    play: () => (hasRemoteOwner ? void sendCommand({ type: 'play' }) : play()),
+    pause: () => (hasRemoteOwner ? void sendCommand({ type: 'pause' }) : pause()),
+    next: () => (hasRemoteOwner ? void sendCommand({ type: 'next' }) : next()),
+    prev: () => (hasRemoteOwner ? void sendCommand({ type: 'prev' }) : prev()),
+    seek: (seconds: number) =>
+      hasRemoteOwner ? void sendCommand({ type: 'seek', position: seconds }) : setPosition(seconds),
+  };
 
   const handleDislike = () => {
     if (!currentTrack) return;
@@ -80,18 +94,18 @@ export function PlaybackBar({ queueOpen, lyricsOpen, onToggleQueue, onToggleLyri
           >
             <Shuffle size={18} />
           </button>
-          <button onClick={prev} className="rounded-md p-2 text-muted hover:text-text hover:bg-surface0" aria-label="Previous">
+          <button onClick={remote.prev} className="rounded-md p-2 text-muted hover:text-text hover:bg-surface0" aria-label="Previous">
             <SkipBack size={20} />
           </button>
           <button
-            onClick={() => isPlaying ? pause() : play()}
+            onClick={() => (isPlaying ? remote.pause() : remote.play())}
             disabled={!currentTrack}
             className="transport-btn"
             aria-label={isPlaying ? 'Pause' : 'Play'}
           >
             {isPlaying ? <Pause size={18} fill="currentColor" /> : <Play size={18} fill="currentColor" />}
           </button>
-          <button onClick={next} className="rounded-md p-2 text-muted hover:text-text hover:bg-surface0" aria-label="Next">
+          <button onClick={remote.next} className="rounded-md p-2 text-muted hover:text-text hover:bg-surface0" aria-label="Next">
             <SkipForward size={20} />
           </button>
           <button
@@ -108,7 +122,7 @@ export function PlaybackBar({ queueOpen, lyricsOpen, onToggleQueue, onToggleLyri
           <input
             type="range" min={0} max={Math.max(duration, 0.1)} step={0.1}
             value={Math.min(position, duration || 0)}
-            onChange={(e) => setPosition(Number(e.target.value))}
+            onChange={(e) => remote.seek(Number(e.target.value))}
             disabled={!currentTrack || duration <= 0}
             className="flex-1 h-1 cursor-pointer"
             aria-label="Seek"
@@ -126,6 +140,7 @@ export function PlaybackBar({ queueOpen, lyricsOpen, onToggleQueue, onToggleLyri
           className="hidden w-20 h-1 cursor-pointer sm:block"
           aria-label="Volume"
         />
+        <DevicePicker />
         <button
           onClick={onToggleLyrics}
           disabled={!currentTrack}