feat(cli): completions, library/audio commands, server switcher

Embed bash and zsh completion scripts and add a `completions` subcommand. Extend the player CLI (library, audio device, instant mix) and surface `music_library` in snapshots. Add a shared active-server switcher in the header and locales; instant mix can reseed the queue from CLI and UI.
2026-07-21 22:15:40 +00:00 · 2026-04-15 00:56:40 +03:00
parent 19b7c8ec06
commit c75297fcf6
24 changed files with 1533 additions and 53 deletions
@@ -58,10 +58,11 @@ import { IS_LINUX } from './utils/platform';
 import { version } from '../package.json';
 import { useConnectionStatus } from './hooks/useConnectionStatus';
 import { useAuthStore } from './store/authStore';
-import { getMusicFolders, probeEntityRatingSupport } from './api/subsonic';
+import { getMusicFolders, getSimilarSongs, probeEntityRatingSupport } from './api/subsonic';
 import { useOfflineStore } from './store/offlineStore';
 import { initHotCachePrefetch } from './hotCachePrefetch';
-import { usePlayerStore, initAudioListeners } from './store/playerStore';
+import i18n from './i18n';
+import { usePlayerStore, initAudioListeners, songToTrack, shuffleArray } from './store/playerStore';
 import { useThemeStore } from './store/themeStore';
 import { useThemeScheduler } from './hooks/useThemeScheduler';
 import { useFontStore } from './store/fontStore';
@@ -453,6 +454,96 @@ function TauriEventBridge() {
    return () => { unlisten?.(); };
  }, []);

+  // CLI: `--player audio-device set …` (forwarded on Linux via single-instance).
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    listen<string>('cli:audio-device-set', async e => {
+      const raw = typeof e.payload === 'string' ? e.payload : '';
+      const deviceName = raw.length > 0 ? raw : null;
+      try {
+        await invoke('audio_set_device', { deviceName });
+        useAuthStore.getState().setAudioOutputDevice(deviceName);
+      } catch {
+        /* device open failed — do not persist (same as Settings) */
+      }
+    }).then(u => { unlisten = u; });
+    return () => { unlisten?.(); };
+  }, []);
+
+  // CLI: `--player mix append|new` from the currently playing track.
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    listen<string>('cli:instant-mix', async e => {
+      const mode = e.payload === 'append' ? 'append' : 'new';
+      const state = usePlayerStore.getState();
+      const song = state.currentTrack;
+      if (!song) {
+        showToast(i18n.t('contextMenu.cliMixNeedsTrack'), 5000, 'error');
+        return;
+      }
+      const serverId = useAuthStore.getState().activeServerId;
+      try {
+        const similar = await getSimilarSongs(song.id, 50);
+        if (serverId) useAuthStore.getState().setAudiomuseNavidromeIssue(serverId, false);
+        const base = similar.filter(s => s.id !== song.id).map(s => songToTrack(s));
+        if (mode === 'append') {
+          const toAdd = shuffleArray(base.map(t => ({ ...t, autoAdded: true as const })));
+          if (toAdd.length > 0) usePlayerStore.getState().enqueue(toAdd);
+        } else {
+          // New queue from seed: collapse to [song] first, then radio tail (not append onto old queue).
+          usePlayerStore.getState().reseedQueueForInstantMix(song);
+          const shuffled = shuffleArray(
+            base.map(t => ({ ...t, radioAdded: true as const })),
+          );
+          if (shuffled.length > 0) {
+            const aid = song.artistId?.trim() || undefined;
+            usePlayerStore.getState().enqueueRadio(shuffled, aid);
+          }
+        }
+      } catch (err) {
+        console.error('CLI instant mix failed', err);
+        if (serverId) useAuthStore.getState().setAudiomuseNavidromeIssue(serverId, true);
+        showToast(i18n.t('contextMenu.instantMixFailed'), 5000, 'error');
+      }
+    }).then(u => { unlisten = u; });
+    return () => { unlisten?.(); };
+  }, []);
+
+  // CLI: `--player library list` (Rust polls the JSON file) / `library set`.
+  useEffect(() => {
+    let u1: (() => void) | undefined;
+    let u2: (() => void) | undefined;
+    listen('cli:library-list', async () => {
+      try {
+        const folders = await getMusicFolders();
+        const auth = useAuthStore.getState();
+        const sid = auth.activeServerId;
+        const selected = sid ? (auth.musicLibraryFilterByServer[sid] ?? 'all') : 'all';
+        await invoke('cli_publish_library_list', {
+          payload: {
+            folders: folders.map(f => ({ id: f.id, name: f.name })),
+            selected,
+            active_server_id: sid,
+          },
+        });
+      } catch (e) {
+        console.error('CLI library list failed', e);
+        await invoke('cli_publish_library_list', {
+          payload: { folders: [], selected: 'all', active_server_id: null },
+        }).catch(() => {});
+      }
+    }).then(u => { u1 = u; });
+    listen<string>('cli:library-set', e => {
+      const raw = typeof e.payload === 'string' ? e.payload : '';
+      if (raw === 'all') useAuthStore.getState().setMusicLibraryFilter('all');
+      else if (raw.length > 0) useAuthStore.getState().setMusicLibraryFilter(raw);
+    }).then(u => { u2 = u; });
+    return () => {
+      u1?.();
+      u2?.();
+    };
+  }, []);
+
  // Sync tray-icon visibility with the user's stored setting.
  // Runs once on mount (initial sync) and again whenever the setting changes.
  const showTrayIcon = useAuthStore(s => s.showTrayIcon);
@@ -524,6 +615,8 @@ function TauriEventBridge() {
    const setup = async () => {
      const handlers: Array<[string, () => void]> = [
        ['media:play-pause',  () => togglePlay()],
+        ['media:play',        () => { const s = usePlayerStore.getState(); if (!s.isPlaying) s.resume(); }],
+        ['media:pause',       () => { const s = usePlayerStore.getState(); if (s.isPlaying) s.pause(); }],
        ['media:next',        () => next()],
        ['media:prev',        () => previous()],
        ['tray:play-pause',   () => togglePlay()],
@@ -559,6 +652,15 @@ function TauriEventBridge() {
        if (cancelled) { u(); return; }
        unlisten.push(u);
      }
+      {
+        const u = await listen<number>('media:set-volume', e => {
+          const p = e.payload;
+          if (typeof p !== 'number' || Number.isNaN(p)) return;
+          usePlayerStore.getState().setVolume(Math.min(1, Math.max(0, p / 100)));
+        });
+        if (cancelled) { u(); return; }
+        unlisten.push(u);
+      }

      // window:close-requested is emitted by Rust (prevent_close + emit).
      // JS decides: minimize to tray or exit, based on user setting.
@@ -577,6 +679,48 @@ function TauriEventBridge() {
    return () => { cancelled = true; unlisten.forEach(u => u()); };
  }, [togglePlay, next, previous]);

+  // `psysonic --info`: JSON snapshot under XDG_RUNTIME_DIR (Rust writes atomically).
+  useEffect(() => {
+    let tid: ReturnType<typeof setTimeout> | undefined;
+    const publish = () => {
+      const s = usePlayerStore.getState();
+      const auth = useAuthStore.getState();
+      const sid = auth.activeServerId;
+      const selected = sid ? (auth.musicLibraryFilterByServer[sid] ?? 'all') : 'all';
+      const snapshot = {
+        current_track: s.currentTrack,
+        current_radio: s.currentRadio,
+        queue: s.queue,
+        queue_index: s.queueIndex,
+        queue_length: s.queue.length,
+        is_playing: s.isPlaying,
+        current_time: s.currentTime,
+        volume: s.volume,
+        music_library: {
+          active_server_id: sid,
+          selected,
+          folders: auth.musicFolders.map(f => ({ id: f.id, name: f.name })),
+        },
+      };
+      invoke('cli_publish_player_snapshot', { snapshot }).catch(() => {});
+    };
+    publish();
+    const schedule = () => {
+      if (tid !== undefined) clearTimeout(tid);
+      tid = setTimeout(() => {
+        tid = undefined;
+        publish();
+      }, 200);
+    };
+    const unsubP = usePlayerStore.subscribe(schedule);
+    const unsubA = useAuthStore.subscribe(schedule);
+    return () => {
+      unsubP();
+      unsubA();
+      if (tid !== undefined) clearTimeout(tid);
+    };
+  }, []);
+
  return null;
 }

@@ -1,6 +1,11 @@
+import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { Check, ChevronDown } from 'lucide-react';
 import { ConnectionStatus } from '../hooks/useConnectionStatus';
+import { useAuthStore, type ServerProfile } from '../store/authStore';
+import { switchActiveServer } from '../utils/switchActiveServer';
+import { showToast } from '../utils/toast';

 interface Props {
  status: ConnectionStatus;
@@ -11,28 +16,141 @@ interface Props {
 export default function ConnectionIndicator({ status, isLan, serverName }: Props) {
  const { t } = useTranslation();
  const navigate = useNavigate();
+  const servers = useAuthStore(s => s.servers);
+  const activeServerId = useAuthStore(s => s.activeServerId);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [switchingId, setSwitchingId] = useState<string | null>(null);
+  const hostRef = useRef<HTMLDivElement>(null);
+
+  const multi = servers.length > 1;
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onDown = (e: MouseEvent) => {
+      if (hostRef.current?.contains(e.target as Node)) return;
+      setMenuOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  const goServerSettings = () => {
+    setMenuOpen(false);
+    navigate('/settings', { state: { tab: 'server' } });
+  };
+
+  const onTriggerClick = () => {
+    if (!multi) {
+      goServerSettings();
+      return;
+    }
+    setMenuOpen(o => !o);
+  };
+
+  const onPickServer = async (srv: ServerProfile) => {
+    if (srv.id === activeServerId) {
+      setMenuOpen(false);
+      return;
+    }
+    setSwitchingId(srv.id);
+    const ok = await switchActiveServer(srv);
+    setSwitchingId(null);
+    setMenuOpen(false);
+    if (!ok) {
+      showToast(t('connection.switchFailed'), 5000, 'error');
+      return;
+    }
+    navigate('/');
+  };

  const label = isLan ? 'LAN' : t('connection.extern');
-  const tooltip =
-    status === 'connected'
+  const tooltip = multi
+    ? t('connection.switchServerHint')
+    : status === 'connected'
      ? t('connection.connectedTo', { server: serverName })
      : status === 'disconnected'
-      ? t('connection.disconnectedFrom', { server: serverName })
-      : t('connection.checking');
+        ? t('connection.disconnectedFrom', { server: serverName })
+        : t('connection.checking');

  return (
-    <div
-      className="connection-indicator"
-      style={{ cursor: 'pointer' }}
-      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
-      data-tooltip={tooltip}
-      data-tooltip-pos="bottom"
-    >
-      <div className={`connection-led connection-led--${status}`} />
-      <div className="connection-meta">
-        <span className="connection-type">{label}</span>
-        <span className="connection-server">{serverName}</span>
+    <div className="connection-indicator-host" ref={hostRef}>
+      <div
+        className="connection-indicator"
+        style={{ cursor: 'pointer' }}
+        onClick={onTriggerClick}
+        data-tooltip={tooltip}
+        data-tooltip-pos="bottom"
+        role={multi ? 'button' : undefined}
+        aria-haspopup={multi ? 'menu' : undefined}
+        aria-expanded={multi ? menuOpen : undefined}
+      >
+        <div className={`connection-led connection-led--${status}`} />
+        <div className="connection-meta">
+          <span className="connection-type">{label}</span>
+          <span className="connection-server" style={{ display: 'flex', alignItems: 'center', gap: 4, maxWidth: 120 }}>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{serverName}</span>
+            {multi && (
+              <ChevronDown size={12} className={menuOpen ? 'connection-indicator-chevron--open' : undefined} style={{ flexShrink: 0, opacity: 0.85 }} aria-hidden />
+            )}
+          </span>
+        </div>
      </div>
+      {multi && menuOpen && (
+        <div
+          className="nav-library-dropdown-panel connection-indicator-dropdown-panel"
+          role="menu"
+          aria-label={t('connection.switchServerTitle')}
+        >
+          <div
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: '0.08em',
+              textTransform: 'uppercase',
+              color: 'var(--text-muted)',
+              padding: '6px 10px 4px',
+            }}
+          >
+            {t('connection.switchServerTitle')}
+          </div>
+          {servers.map(srv => {
+            const active = srv.id === activeServerId;
+            const busy = switchingId !== null;
+            const labelText = (srv.name || srv.url).trim() || srv.url;
+            return (
+              <button
+                key={srv.id}
+                type="button"
+                role="menuitem"
+                className={`nav-library-dropdown-item${active ? ' nav-library-dropdown-item--selected' : ''}`}
+                disabled={busy}
+                onClick={() => onPickServer(srv)}
+              >
+                <span className="nav-library-dropdown-item-label">{labelText}</span>
+                {switchingId === srv.id ? (
+                  <div className="spinner" style={{ width: 14, height: 14, flexShrink: 0 }} aria-hidden />
+                ) : active ? (
+                  <Check size={16} className="nav-library-dropdown-check" aria-hidden />
+                ) : (
+                  <span className="nav-library-dropdown-check-spacer" aria-hidden />
+                )}
+              </button>
+            );
+          })}
+          <div style={{ borderTop: '1px solid color-mix(in srgb, var(--text-muted) 15%, transparent)', marginTop: 2, paddingTop: 2 }} />
+          <button type="button" className="nav-library-dropdown-item" onClick={goServerSettings}>
+            <span className="nav-library-dropdown-item-label">{t('connection.manageServers')}</span>
+            <span className="nav-library-dropdown-check-spacer" aria-hidden />
+          </button>
+        </div>
+      )}
    </div>
  );
 }
@@ -1344,12 +1344,7 @@ export default function ContextMenu() {
  };

  const startInstantMix = async (song: Track) => {
-    const state = usePlayerStore.getState();
-    if (state.currentTrack?.id === song.id) {
-      if (!state.isPlaying) state.resume();
-    } else {
-      playTrack(song, [song]);
-    }
+    usePlayerStore.getState().reseedQueueForInstantMix(song);
    const serverId = useAuthStore.getState().activeServerId;
    try {
      const similar = await getSimilarSongs(song.id, 50);
@@ -101,6 +101,7 @@ export const deTranslation = {
    startRadio: 'Radio starten',
    instantMix: 'Instant Mix',
    instantMixFailed: 'Instant Mix konnte nicht erstellt werden — Server- oder Pluginfehler.',
+    cliMixNeedsTrack: 'Es läuft nichts — starte zuerst die Wiedergabe und führe den Mix-Befehl erneut aus.',
    lfmLove: 'Auf Last.fm liken',
    lfmUnlove: 'Last.fm-Like entfernen',
    favorite: 'Favorisieren',
@@ -355,6 +356,10 @@ export const deTranslation = {
    offlineFilterArtists: 'Diskografien',
    retry: 'Erneut versuchen',
    serverSettings: 'Server-Einstellungen',
+    switchServerTitle: 'Server wechseln',
+    switchServerHint: 'Klicken, um einen anderen gespeicherten Server zu wählen.',
+    manageServers: 'Server verwalten…',
+    switchFailed: 'Wechsel fehlgeschlagen — Server nicht erreichbar.',
    lastfmConnected: 'Last.fm verbunden als @{{user}}',
    lastfmSessionInvalid: 'Session ungültig — klicken zum Neu-Verbinden',
  },
@@ -102,6 +102,7 @@ export const enTranslation = {
    startRadio: 'Start Radio',
    instantMix: 'Instant Mix',
    instantMixFailed: 'Could not build Instant Mix — server or plugin error.',
+    cliMixNeedsTrack: 'Nothing is playing — start playback first, then run the mix command again.',
    lfmLove: 'Love on Last.fm',
    lfmUnlove: 'Unlove on Last.fm',
    favorite: 'Favorite',
@@ -356,6 +357,10 @@ export const enTranslation = {
    offlineFilterArtists: 'Discographies',
    retry: 'Retry',
    serverSettings: 'Server Settings',
+    switchServerTitle: 'Switch server',
+    switchServerHint: 'Click to choose another saved server.',
+    manageServers: 'Manage servers…',
+    switchFailed: 'Could not switch — server unreachable.',
    lastfmConnected: 'Last.fm connected as @{{user}}',
    lastfmSessionInvalid: 'Session invalid — click to re-connect',
  },
@@ -102,6 +102,7 @@ export const esTranslation = {
    startRadio: 'Iniciar Radio',
    instantMix: 'Mezcla Instantánea',
    instantMixFailed: 'No se pudo crear la Mezcla Instantánea — error del servidor o plugin.',
+    cliMixNeedsTrack: 'No hay nada en reproducción — inicia la reproducción y vuelve a ejecutar el comando de mezcla.',
    lfmLove: 'Favorito en Last.fm',
    lfmUnlove: 'Quitar favorito de Last.fm',
    favorite: 'Favorito',
@@ -357,6 +358,10 @@ export const esTranslation = {
    offlineFilterArtists: 'Discografías',
    retry: 'Reintentar',
    serverSettings: 'Configuración del servidor',
+    switchServerTitle: 'Cambiar servidor',
+    switchServerHint: 'Clic para elegir otro servidor guardado.',
+    manageServers: 'Gestionar servidores…',
+    switchFailed: 'No se pudo cambiar — servidor inalcanzable.',
    lastfmConnected: 'Last.fm conectado como @{{user}}',
    lastfmSessionInvalid: 'Sesión inválida — click para reconectar',
  },
@@ -101,6 +101,7 @@ export const frTranslation = {
    startRadio: 'Démarrer la radio',
    instantMix: 'Mix instantané',
    instantMixFailed: 'Impossible de créer le mix instantané — erreur serveur ou plugin.',
+    cliMixNeedsTrack: 'Aucune lecture en cours — lancez d’abord la lecture, puis relancez la commande de mix.',
    lfmLove: 'Aimer sur Last.fm',
    lfmUnlove: 'Ne plus aimer sur Last.fm',
    favorite: 'Favori',
@@ -355,6 +356,10 @@ export const frTranslation = {
    offlineFilterArtists: 'Discographies',
    retry: 'Réessayer',
    serverSettings: 'Paramètres serveur',
+    switchServerTitle: 'Changer de serveur',
+    switchServerHint: 'Cliquez pour choisir un autre serveur enregistré.',
+    manageServers: 'Gérer les serveurs…',
+    switchFailed: 'Impossible de changer — serveur injoignable.',
    lastfmConnected: 'Last.fm connecté en tant que @{{user}}',
    lastfmSessionInvalid: 'Session invalide — cliquez pour vous reconnecter',
  },
@@ -101,6 +101,7 @@ export const nbTranslation = {
    startRadio: 'Start radio',
    instantMix: 'Instant Mix',
    instantMixFailed: 'Kunne ikke lage Instant Mix — server- eller pluginfeil.',
+    cliMixNeedsTrack: 'Ingenting spilles — start avspilling først, og kjør mix-kommandoen på nytt.',
    lfmLove: 'Lik på Last.fm',
    lfmUnlove: 'Fjern fra likte på Last.fm',
    favorite: 'Favoritt',
@@ -355,6 +356,10 @@ export const nbTranslation = {
    offlineFilterArtists: 'Diskografier',
    retry: 'Prøv igjen',
    serverSettings: 'Serverinnstillinger',
+    switchServerTitle: 'Bytt server',
+    switchServerHint: 'Klikk for å velge en annen lagret server.',
+    manageServers: 'Administrer servere…',
+    switchFailed: 'Klarte ikke å bytte — serveren er utilgjengelig.',
    lastfmConnected: 'Last.fm tilkoblet som bruker @{{user}}',
    lastfmSessionInvalid: 'Sesjonen er ugyldig - klikk her for å koble til på nytt',
  },
@@ -101,6 +101,7 @@ export const nlTranslation = {
    startRadio: 'Radio starten',
    instantMix: 'Instant Mix',
    instantMixFailed: 'Instant Mix mislukt — server- of pluginfout.',
+    cliMixNeedsTrack: 'Er speelt niets — start eerst afspelen en voer het mix-commando opnieuw uit.',
    lfmLove: 'Liken op Last.fm',
    lfmUnlove: 'Niet meer liken op Last.fm',
    favorite: 'Favoriet',
@@ -354,6 +355,10 @@ export const nlTranslation = {
    offlineFilterArtists: 'Discografieën',
    retry: 'Opnieuw proberen',
    serverSettings: 'Serverinstellingen',
+    switchServerTitle: 'Server wisselen',
+    switchServerHint: 'Klik om een andere opgeslagen server te kiezen.',
+    manageServers: 'Servers beheren…',
+    switchFailed: 'Wisselen mislukt — server niet bereikbaar.',
    lastfmConnected: 'Last.fm verbonden als @{{user}}',
    lastfmSessionInvalid: 'Sessie ongeldig — klik om opnieuw te verbinden',
  },
@@ -102,6 +102,7 @@ export const ruTranslation = {
    startRadio: 'Радио по похожим',
    instantMix: 'Instant Mix',
    instantMixFailed: 'Не удалось собрать Instant Mix — ошибка сервера или плагина.',
+    cliMixNeedsTrack: 'Ничего не играет — сначала начните воспроизведение, затем снова выполните команду микса.',
    lfmLove: 'Любимое на Last.fm',
    lfmUnlove: 'Убрать с Last.fm',
    favorite: 'В избранное',
@@ -369,6 +370,10 @@ export const ruTranslation = {
    offlineFilterArtists: 'Дискографии',
    retry: 'Повторить',
    serverSettings: 'Настройки сервера',
+    switchServerTitle: 'Сменить сервер',
+    switchServerHint: 'Нажмите, чтобы выбрать другой сохранённый сервер.',
+    manageServers: 'Управление серверами…',
+    switchFailed: 'Не удалось переключиться — сервер недоступен.',
    lastfmConnected: 'Last.fm: @{{user}}',
    lastfmSessionInvalid: 'Сессия недействительна — подключите снова',
  },
@@ -101,6 +101,7 @@ export const zhTranslation = {
    startRadio: '开始电台',
    instantMix: '即时混音',
    instantMixFailed: '无法生成即时混音 — 服务器或插件出错。',
+    cliMixNeedsTrack: '当前没有正在播放的内容 — 请先开始播放，然后再执行混音命令。',
    lfmLove: '在 Last.fm 上标记喜欢',
    lfmUnlove: '取消 Last.fm 喜欢标记',
    favorite: '收藏',
@@ -350,6 +351,10 @@ export const zhTranslation = {
    offlineAlbumCount_plural: '{{n}} 张专辑',
    retry: '重试',
    serverSettings: '服务器设置',
+    switchServerTitle: '切换服务器',
+    switchServerHint: '点击选择其他已保存的服务器。',
+    manageServers: '管理服务器…',
+    switchFailed: '无法切换 — 无法连接服务器。',
    lastfmConnected: 'Last.fm 已连接为 @{{user}}',
    lastfmSessionInvalid: '会话无效 — 点击重新连接',
  },
@@ -33,6 +33,7 @@ import { useHomeStore, HomeSectionId } from '../store/homeStore';
 import { useDragDrop, useDragSource } from '../contexts/DragDropContext';
 import { ALL_NAV_ITEMS } from '../components/Sidebar';
 import { pingWithCredentials, scheduleInstantMixProbeForServer } from '../api/subsonic';
+import { switchActiveServer } from '../utils/switchActiveServer';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import { Trans, useTranslation } from 'react-i18next';
 import Equalizer from '../components/Equalizer';
@@ -572,23 +573,11 @@ export default function Settings() {

  const switchToServer = async (server: ServerProfile) => {
    setConnStatus(s => ({ ...s, [server.id]: 'testing' }));
-    try {
-      const ping = await pingWithCredentials(server.url, server.username, server.password);
-      if (ping.ok) {
-        const identity = {
-          type: ping.type,
-          serverVersion: ping.serverVersion,
-          openSubsonic: ping.openSubsonic,
-        };
-        auth.setSubsonicServerIdentity(server.id, identity);
-        scheduleInstantMixProbeForServer(server.id, server.url, server.username, server.password, identity);
-        auth.setActiveServer(server.id);
-        auth.setLoggedIn(true);
-        navigate('/');
-      } else {
-        setConnStatus(s => ({ ...s, [server.id]: 'error' }));
-      }
-    } catch {
+    const ok = await switchActiveServer(server);
+    if (ok) {
+      setConnStatus(s => ({ ...s, [server.id]: 'ok' }));
+      navigate('/');
+    } else {
      setConnStatus(s => ({ ...s, [server.id]: 'error' }));
    }
  };
@@ -64,7 +64,7 @@ export function songToTrack(song: SubsonicSong): Track {
  };
 }

-function shuffleArray<T>(items: T[]): T[] {
+export function shuffleArray<T>(items: T[]): T[] {
  const arr = [...items];
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
@@ -131,6 +131,8 @@ interface PlayerState {

  playRadio: (station: InternetRadioStation) => void;
  playTrack: (track: Track, queue?: Track[], manual?: boolean) => void;
+  /** Queue becomes `[track]` only; if already on this track, does not restart `audio_play`. */
+  reseedQueueForInstantMix: (track: Track) => void;
  pause: () => void;
  resume: () => void;
  stop: () => void;
@@ -942,6 +944,22 @@ export const usePlayerStore = create<PlayerState>()(
        touchHotCacheOnPlayback(track.id, authState.activeServerId ?? '');
      },

+      reseedQueueForInstantMix: (track) => {
+        const s = get();
+        if (s.currentTrack?.id !== track.id) {
+          get().playTrack(track, [track]);
+          return;
+        }
+        const wasPlaying = s.isPlaying;
+        set({
+          queue: [track],
+          queueIndex: 0,
+          currentTrack: track,
+        });
+        syncQueueToServer([track], track, s.currentTime);
+        if (!wasPlaying) get().resume();
+      },
+
      // ── pause / resume / togglePlay ──────────────────────────────────────────
      pause: () => {
        if (get().currentRadio) {
@@ -4090,6 +4090,24 @@ html.no-compositing .fs-seekbar-played {
 }

 /* ─ Connection Indicator ─ */
+.connection-indicator-host {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.connection-indicator-dropdown-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 220px;
+  max-width: min(320px, 85vw);
+}
+
+.connection-indicator-chevron--open {
+  transform: rotate(180deg);
+  transition: transform var(--transition-fast, 0.15s ease);
+}
+
 .connection-indicator {
  display: flex;
  align-items: center;
@@ -0,0 +1,30 @@
+import { pingWithCredentials, scheduleInstantMixProbeForServer } from '../api/subsonic';
+import type { ServerProfile } from '../store/authStore';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
+
+/**
+ * Ping, update server identity / Instant Mix probe, set active server, clear local playback
+ * and pull the new server's saved play queue.
+ */
+export async function switchActiveServer(server: ServerProfile): Promise<boolean> {
+  try {
+    const ping = await pingWithCredentials(server.url, server.username, server.password);
+    if (!ping.ok) return false;
+    const identity = {
+      type: ping.type,
+      serverVersion: ping.serverVersion,
+      openSubsonic: ping.openSubsonic,
+    };
+    const auth = useAuthStore.getState();
+    auth.setSubsonicServerIdentity(server.id, identity);
+    scheduleInstantMixProbeForServer(server.id, server.url, server.username, server.password, identity);
+    auth.setActiveServer(server.id);
+    auth.setLoggedIn(true);
+    usePlayerStore.getState().clearQueue();
+    await usePlayerStore.getState().initializeFromServerQueue();
+    return true;
+  } catch {
+    return false;
+  }
+}