[Hook] useQueue — playback queue management

[OlenaReukova]

Description:

As a user, I want to add stations to a queue so that I can plan what to listen to next, and use the next button to play them in order.

What to build:

New hook at src/lib/player/useQueue.ts:

export function useQueue() {

const [queue, setQueue] = useState<PlayerStation[]>(() =>
  JSON.parse(localStorage.getItem("radioQueue") ?? "[]")
);
const addToQueue = (station: PlayerStation) => { ... }   // prevent duplicates
const removeFromQueue = (stationuuid: string) => { ... }
const shiftQueue = (): PlayerStation | undefined => { ... }  // pop first, returns it
const clearQueue = () => { ... }
// persist to localStorage on change
useEffect(() => {
  localStorage.setItem("radioQueue", JSON.stringify(queue));
}, [queue]);
return { queue, addToQueue, removeFromQueue, shiftQueue, clearQueue };

}

Integrate into RadioPlayerContext by composing useQueue alongside useRadioPlayer.

Acceptance Criteria (from US 2.6 & 12.1):

• addToQueue prevents adding duplicate stations.
• shiftQueue removes and returns the first item (used when next is pressed).
• Queue persists across browser sessions via localStorage.
• hasQueue (derived: queue.length > 0) exposed in context.
• Calling next from PlayerBar: plays shiftQueue() result via player.play().
• Next button disabled in PlayerBar/Controls when !hasQueue.

Files to create:

• src/lib/player/useQueue.ts

Files to modify:

• src/lib/player/RadioPlayerContext.tsx — compose with useQueue, expose queue state.
• src/components/atoms/AddToQueueButton.tsx — wire to addToQueue from context.