feat(hub): audio_root wiring, mutually-exclusive players, Settings rework

Five related pieces of polish against the Music app and Settings, all
from the same conversation:

- Music app now requires audio_root, same as Videos requires video_root:
  an empty-state message until one is set, and grouping filtered to only
  what's under it (underAudioRoot, mirroring video-app.js's
  underVideoRoot). Wires the new audio_root/audio_root_ack pair through
  transport.js and group-page.js state the same way video_root already
  flows.
- Starting one player now stops the other — opening a film closes the
  music queue, starting a track closes the video modal. Both used to run
  at once, found live.
- Group Settings reworked: every section but a bare form (invite,
  pair-operator, approve-device) is now collapsible (CollapsibleSection);
  the uploads on/off button is a real toggle switch (ToggleSwitch,
  reused for TMDB/MusicBrainz's enabled switches too, each now with an
  icon + status badge in its header instead of a plain checkbox row);
  and shared directories, the Videos root picker, and the new Music root
  picker are merged into one "Directories" section (RootFolderRow) instead
  of three separate ones scattered down the page — the root pickers only
  show once their app is actually enabled.

1 files changed, 7 insertions, 0 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
index 93b0466..727bfc2 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
@@ -87,6 +87,8 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   // Which folder is the Videos app's entry point for this group — ''
   // (the default) means the whole group index. Set from Files, per-group.
   const [videoRoot, setVideoRoot] = useState('');
+  // Same shape — the Music app's own entry point.
+  const [audioRoot, setAudioRoot] = useState('');
   // MusicBrainz on/off (per-group) + whether a contact string is configured
   // (node-wide) — docs/musicbay.md §3.2, same shape as tmdbConfig above.
   const [musicbrainzConfig, setMusicbrainzConfig] = useState(null);
@@ -238,6 +240,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
           language: ack.tmdb_language || '',
         });
         setVideoRoot(ack.video_root || '');
+        setAudioRoot(ack.audio_root || '');
         setMusicbrainzConfig({
           enabled: ack.musicbrainz_enabled !== false,
           contactConfigured: !!ack.musicbrainz_contact_configured,
@@ -255,6 +258,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
         transport.onTmdbConfig = (cfg) => setTmdbConfig((prev) => ({ ...(prev || {}), ...cfg }));
         transport.onTmdbEnabled = (enabled) => setTmdbConfig((prev) => ({ ...(prev || {}), enabled }));
         transport.onVideoRoot = (path) => setVideoRoot(path);
+        transport.onAudioRoot = (path) => setAudioRoot(path);
         transport.onMusicbrainzConfig = (cfg) =>
           setMusicbrainzConfig((prev) => ({ ...(prev || {}), ...cfg }));
         transport.onMusicbrainzEnabled = (enabled) =>
@@ -467,6 +471,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
     isNodeAdmin, operatorPaired, mayUpload, userId, setError, onPreview,
     onRefreshIndex: refreshIndex, onActivity: touchActivity,
     videoRoot, onVideoRoot: (path) => setVideoRoot(path),
+    audioRoot, onAudioRoot: (path) => setAudioRoot(path),
     tmdbConfig,
     musicbrainzConfig, onPlayQueue,
   };
@@ -591,6 +596,8 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
             entries=${entries} nodeDirs=${nodeDirs}
             videoRoot=${videoRoot}
             onVideoRoot=${(path) => setVideoRoot(path)}
+            audioRoot=${audioRoot}
+            onAudioRoot=${(path) => setAudioRoot(path)}
             onLeft=${onLeft}
             onPaired=${() => setOperatorPaired(true)} />
         `}