From 1a470b51b5b9980995983801f30fa0cedd18d036 Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Fri, 24 Apr 2026 14:29:03 +0200 Subject: [PATCH] chore(orbit): participant strip at the top of the queue for host and guest Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/OrbitGuestQueue.tsx | 10 +++------- src/components/OrbitQueueHead.tsx | 24 ++++++++++++++++++++++++ src/components/QueuePanel.tsx | 6 ++++++ src/locales/de.ts | 1 - src/locales/en.ts | 1 - src/styles/components.css | 17 ++++++++++++----- 6 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 src/components/OrbitQueueHead.tsx diff --git a/src/components/OrbitGuestQueue.tsx b/src/components/OrbitGuestQueue.tsx index 4de6f2cf..8c71eb10 100644 --- a/src/components/OrbitGuestQueue.tsx +++ b/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 (
-
-

{state.name}

-
- {state.participants.length + 1} · {t('orbit.guestHost', { name: state.host })} -
-
+ {currentTrack && (
diff --git a/src/components/OrbitQueueHead.tsx b/src/components/OrbitQueueHead.tsx new file mode 100644 index 00000000..21530636 --- /dev/null +++ b/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 ( +
+

{state.name}

+
+ + {names.join(', ')} +
+
+ ); +} diff --git a/src/components/QueuePanel.tsx b/src/components/QueuePanel.tsx index 18244748..65d917f0 100644 --- a/src/components/QueuePanel.tsx +++ b/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 && ( + + )}