chore(orbit): session-start polish

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

src/components/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Play, ListPlus, Radio, Heart, Download, ChevronRight, User, Disc3, ListMusic, Plus, Info, Sparkles, Star, Trash2, HeartCrack, Share2, Orbit as OrbitIcon } from 'lucide-react';
 import { useOrbitStore } from '../store/orbitStore';
-import { suggestOrbitTrack } from '../utils/orbit';
+import { suggestOrbitTrack, hostEnqueueToOrbit } from '../utils/orbit';
 import LastfmIcon from './LastfmIcon';
 import StarRating from './StarRating';
 import { lastfmLoveTrack, lastfmUnloveTrack } from '../api/lastfm';
@@ -1455,6 +1455,15 @@ export default function ContextMenu() {
                   <OrbitIcon size={14} /> {t('orbit.ctxAddToSession')}
                 </div>
               )}
+              {orbitRole === 'host' && (
+                <div className="context-menu-item" onClick={() => handleAction(() => {
+                  hostEnqueueToOrbit(song.id)
+                    .then(() => showToast(t('orbit.ctxAddedHostToast'), 2200, 'info'))
+                    .catch(() => showToast(t('orbit.ctxAddHostFailed'), 3000, 'error'));
+                })}>
+                  <OrbitIcon size={14} /> {t('orbit.ctxAddToSessionHost')}
+                </div>
+              )}
               <div
                 className={`context-menu-item context-menu-item--submenu ${playlistSubmenuOpen && playlistSongIds[0] === song.id ? 'active' : ''}`}
                 data-playlist-trigger-id={song.id}
@@ -1596,6 +1605,15 @@ export default function ContextMenu() {
                   <OrbitIcon size={14} /> {t('orbit.ctxAddToSession')}
                 </div>
               )}
+              {orbitRole === 'host' && (
+                <div className="context-menu-item" onClick={() => handleAction(() => {
+                  hostEnqueueToOrbit(song.id)
+                    .then(() => showToast(t('orbit.ctxAddedHostToast'), 2200, 'info'))
+                    .catch(() => showToast(t('orbit.ctxAddHostFailed'), 3000, 'error'));
+                })}>
+                  <OrbitIcon size={14} /> {t('orbit.ctxAddToSessionHost')}
+                </div>
+              )}
               <div
                 className={`context-menu-item context-menu-item--submenu ${playlistSubmenuOpen && playlistSongIds[0] === song.id ? 'active' : ''}`}
                 data-playlist-trigger-id={song.id}

src/components/OrbitStartModal.tsx

@@ -13,6 +13,7 @@ import {
 } from '../utils/orbit';
 import { randomOrbitSessionName } from '../utils/orbitNames';
 import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
 import { isLanUrl } from '../hooks/useConnectionStatus';
 import { ORBIT_DEFAULT_MAX_USERS } from '../api/orbit';
 
@@ -35,6 +36,7 @@ export default function OrbitStartModal({ onClose }: Props) {
   const [error, setError]         = useState<string | null>(null);
   const [copied, setCopied]       = useState(false);
   const [hasCopied, setHasCopied] = useState(false);
+  const [clearQueue, setClearQueue] = useState(false);
 
   const server     = useAuthStore.getState().getActiveServer();
   const serverBase = server?.url ?? '';
@@ -76,6 +78,7 @@ export default function OrbitStartModal({ onClose }: Props) {
 
     setBusy(true);
     try {
+      if (clearQueue) usePlayerStore.getState().clearQueue();
       await startOrbitSession({ name: trimmed, maxUsers, sid });
       onClose();
     } catch (e) {
@@ -182,6 +185,23 @@ export default function OrbitStartModal({ onClose }: Props) {
           <div className="orbit-start-modal__helper">{t('orbit.helperMax')}</div>
         </div>
 
+        <div className="orbit-start-modal__field">
+          <label className="orbit-start-modal__toggle-row">
+            <div className="orbit-start-modal__toggle-text">
+              <div className="orbit-start-modal__label">{t('orbit.labelClearQueue')}</div>
+              <div className="orbit-start-modal__helper">{t('orbit.helperClearQueue')}</div>
+            </div>
+            <span className="toggle-switch">
+              <input
+                type="checkbox"
+                checked={clearQueue}
+                onChange={e => setClearQueue(e.target.checked)}
+              />
+              <span className="toggle-track" />
+            </span>
+          </label>
+        </div>
+
         <div className="orbit-start-modal__field">
           <label className="orbit-start-modal__label">{t('orbit.labelLink')}</label>
           <div className="orbit-start-modal__link">