From c2af4327aa19dc9932b912b6f4fb8a00c55f0f75 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 31 Mar 2026 21:37:30 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20add=20all=20to=20queue=20=E2=80=94=20sh?=
 =?UTF-8?q?ow=20"Add=20All=20to=20Queue"=20when=20a=20song=20is=20playing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace "Play All" with "Add All to Queue" button on offline page when
a song is already playing, so it doesn't interrupt playback. Adds
ADD_ALL_TO_QUEUE batch action to music provider.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/offline/page.tsx                | 18 +++++++++++++-----
 components/music/music-provider.tsx | 11 +++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/offline/page.tsx b/app/offline/page.tsx
index c8313c4..4c70124 100644
--- a/app/offline/page.tsx
+++ b/app/offline/page.tsx
@@ -11,6 +11,7 @@ import {
   Download,
   HardDrive,
   Loader2,
+  ListPlus,
   Play,
   RefreshCw,
   Trash2,
@@ -27,7 +28,7 @@ function formatBytes(bytes: number) {
 }
 
 export default function OfflinePage() {
-  const { state, playTrack } = useMusicPlayer()
+  const { state, playTrack, addAllToQueue } = useMusicPlayer()
   const {
     offlineTracks,
     queue,
@@ -107,10 +108,17 @@ export default function OfflinePage() {
             </Button>
             {offlineTracks.length > 0 && (
               <>
-                <Button size="sm" onClick={playAllOffline}>
-                  <Play className="h-4 w-4 mr-1.5" />
-                  Play All
-                </Button>
+                {state.currentTrack ? (
+                  <Button size="sm" variant="outline" onClick={() => addAllToQueue(offlineTracks)}>
+                    <ListPlus className="h-4 w-4 mr-1.5" />
+                    Add All to Queue
+                  </Button>
+                ) : (
+                  <Button size="sm" onClick={playAllOffline}>
+                    <Play className="h-4 w-4 mr-1.5" />
+                    Play All
+                  </Button>
+                )}
                 <Button variant="destructive" size="sm" onClick={handleClearAll} disabled={clearing}>
                   {clearing ? <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> : <Trash2 className="h-4 w-4 mr-1.5" />}
                   Clear All
diff --git a/components/music/music-provider.tsx b/components/music/music-provider.tsx
index 9b6f4d7..5e8bee3 100644
--- a/components/music/music-provider.tsx
+++ b/components/music/music-provider.tsx
@@ -38,6 +38,7 @@ type PlayerAction =
   | { type: 'PREV_TRACK' }
   | { type: 'SET_FULLSCREEN'; open: boolean }
   | { type: 'ADD_TO_QUEUE'; track: Track }
+  | { type: 'ADD_ALL_TO_QUEUE'; tracks: Track[] }
   | { type: 'REMOVE_FROM_QUEUE'; index: number }
   | { type: 'MOVE_IN_QUEUE'; from: number; to: number }
   | { type: 'JUMP_TO'; index: number }
@@ -97,6 +98,13 @@ function playerReducer(state: PlayerState, action: PlayerAction): PlayerState {
       const origQ = state.originalQueue ? [...state.originalQueue, action.track] : null
       return { ...state, queue: q2, originalQueue: origQ }
     }
+    case 'ADD_ALL_TO_QUEUE': {
+      const insertAt = state.queueIndex + 1
+      const q3 = [...state.queue]
+      q3.splice(insertAt, 0, ...action.tracks)
+      const origQ2 = state.originalQueue ? [...state.originalQueue, ...action.tracks] : null
+      return { ...state, queue: q3, originalQueue: origQ2 }
+    }
     case 'REMOVE_FROM_QUEUE': {
       const newQueue = [...state.queue]
       newQueue.splice(action.index, 1)
@@ -171,6 +179,7 @@ interface MusicContextValue {
   prevTrack: () => void
   setFullScreen: (open: boolean) => void
   addToQueue: (track: Track) => void
+  addAllToQueue: (tracks: Track[]) => void
   removeFromQueue: (index: number) => void
   moveInQueue: (from: number, to: number) => void
   jumpTo: (index: number) => void
@@ -392,6 +401,7 @@ export function MusicProvider({ children }: { children: React.ReactNode }) {
   const prevTrack = useCallback(() => dispatch({ type: 'PREV_TRACK' }), [])
   const setFullScreen = useCallback((open: boolean) => dispatch({ type: 'SET_FULLSCREEN', open }), [])
   const addToQueue = useCallback((track: Track) => dispatch({ type: 'ADD_TO_QUEUE', track }), [])
+  const addAllToQueue = useCallback((tracks: Track[]) => dispatch({ type: 'ADD_ALL_TO_QUEUE', tracks }), [])
   const removeFromQueue = useCallback((index: number) => dispatch({ type: 'REMOVE_FROM_QUEUE', index }), [])
   const moveInQueue = useCallback((from: number, to: number) => dispatch({ type: 'MOVE_IN_QUEUE', from, to }), [])
   const jumpTo = useCallback((index: number) => dispatch({ type: 'JUMP_TO', index }), [])
@@ -409,6 +419,7 @@ export function MusicProvider({ children }: { children: React.ReactNode }) {
       prevTrack,
       setFullScreen,
       addToQueue,
+      addAllToQueue,
       removeFromQueue,
       moveInQueue,
       jumpTo,