chore(orbit): participant strip at the top of the queue for host and guest

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/OrbitGuestQueue.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Radio, Users } from 'lucide-react';
+import { Radio } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useOrbitStore } from '../store/orbitStore';
 import {
@@ -9,6 +9,7 @@ import {
   type SubsonicSong,
 } from '../api/subsonic';
 import CachedImage from './CachedImage';
+import OrbitQueueHead from './OrbitQueueHead';
 
 /**
  * Orbit — guest-side queue view.
@@ -67,12 +68,7 @@ export default function OrbitGuestQueue() {
 
   return (
     <div className="orbit-guest-queue">
-      <div className="orbit-guest-queue__head">
-        <h2 className="orbit-guest-queue__title">{state.name}</h2>
-        <div className="orbit-guest-queue__meta">
-          <Users size={11} /> {state.participants.length + 1} · {t('orbit.guestHost', { name: state.host })}
-        </div>
-      </div>
+      <OrbitQueueHead state={state} />
 
       {currentTrack && (
         <div className="orbit-guest-queue__current">

src/components/OrbitQueueHead.tsx

@@ -0,0 +1,24 @@
+import { Users } from 'lucide-react';
+import type { OrbitState } from '../api/orbit';
+
+interface Props {
+  state: OrbitState;
+}
+
+/**
+ * Shared Orbit head strip rendered at the top of the queue for both host
+ * and guest. Shows the session name and a comma-separated list of every
+ * participant (host first, then guests in join order).
+ */
+export default function OrbitQueueHead({ state }: Props) {
+  const names = [state.host, ...state.participants.map(p => p.user)];
+  return (
+    <div className="orbit-queue-head">
+      <h2 className="orbit-queue-head__title">{state.name}</h2>
+      <div className="orbit-queue-head__meta">
+        <Users size={11} />
+        <span className="orbit-queue-head__names">{names.join(', ')}</span>
+      </div>
+    </div>
+  );
+}

src/components/QueuePanel.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
 import { useOrbitStore } from '../store/orbitStore';
 import OrbitGuestQueue from './OrbitGuestQueue';
+import OrbitQueueHead from './OrbitQueueHead';
 import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, MoveRight, Radio, HardDrive, ChevronDown, Info, Share2 } from 'lucide-react';
 import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { usePlaylistStore } from '../store/playlistStore';
@@ -247,6 +248,8 @@ export default function QueuePanel() {
 function QueuePanelHostOrSolo() {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const orbitRole = useOrbitStore(s => s.role);
+  const orbitState = useOrbitStore(s => s.state);
   const queue = usePlayerStore(s => s.queue);
   const queueIndex = usePlayerStore(s => s.queueIndex);
   const currentTrack = usePlayerStore(s => s.currentTrack);
@@ -465,6 +468,9 @@ function QueuePanelHostOrSolo() {
         borderLeftWidth: isQueueVisible ? 1 : 0,
       }}
     >
+      {orbitRole === 'host' && orbitState && (
+        <OrbitQueueHead state={orbitState} />
+      )}
       <QueueHeader
         queue={queue}
         queueIndex={queueIndex}