feat(client): Phase 2 — per-app settings panes, folder tree, multi-directory

Each app's settings were inlined in `group-settings.js` — TMDB, MusicBrainz,
and one folder picker per app, each with its own draft state and save handler
saying the same thing about a different key. They are one file per app now,
reached through the `apps.js` registry, and the page that renders them names no
application at all: adding one is a registry entry and a settings file.

The line between the two is what makes that true. What every app has — folders
— the page does generically, through one `saveDirectories` bound to the app.
What one app alone has, its pane does itself with the transport it is handed.
An app that only needs directories touches neither `group-settings.js` nor
`group-page.js`, which is `test_app_settings_plugin.py`'s subject.

`settings-ui.js` exists because a pane importing the page that renders it is a
cycle, and ES modules answer that with a temporal-dead-zone ReferenceError at
first render — a component that silently does not appear, the fault already
recorded in CLAUDE.md about hook ordering.

The flat depth-indented `<select>` of every folder in the library becomes a
modal tree. It asks the node for nothing: the tree is derived from paths the
client already holds, so it shows exactly what the group's index contains and
adds no folder-browsing protocol. For Chat's attachment folder — the one
directory that is written to rather than read — read-only roots are greyed
out, so the node's refusal arrives before the operator picks rather than when
somebody sends a file.

Videos and Music take a list of folders. A library on two drives could not be
described before; the only recourse was pointing the app at a parent containing
both, which pulls in everything else under it. The scalar shapes survive on the
wire alone, for a node speaking MNP 1.0, and the client reads them as a
one-element list.

Two things the tests caught that I would not have:

`test_asset_versioning` — six new modules were missing from `_ASSETS`. Reached
through the registry rather than imported by name, they are exactly the files
nothing else would notice changing, and a stale one is served from cache with
no version bump.

And `node --check foo.js` does **not** reliably report a module syntax error:
it accepted `${/* ... */''}` — htm template syntax pasted into a plain object
literal — and reported success. A `.mjs` copy forces the module parser and
reports it. The suite had no syntax check at all, which is how that reached a
file; `test_spa_syntax.py` does it for every module now, and pins that the
loose path is not what it uses.

Suite: 12 failures, all pre-existing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011pvMdvLBG92jyhvD5pD6us

1 files changed, 15 insertions, 9 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
index d03d843..57da9ff 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
@@ -57,10 +57,11 @@ function yearOf(dateStr) {
 // work for this group before that either (daemon.py's
 // _enrich_new_video_entries), so falling back to "the whole index" here
 // would just show files nothing has enriched.
-function underVideoRoot(entry, videoRoot) {
-  if (!videoRoot) return false;
+function underVideoRoot(entry, directories) {
+  const dirs = directories || [];
+  if (!dirs.length) return false;
   const p = entry.path || '';
-  return p === videoRoot || p.startsWith(videoRoot + '/');
+  return dirs.some((d) => p === d || p.startsWith(d + '/'));
 }
 
 function buildSeasons(episodes) {
@@ -96,12 +97,12 @@ function defaultSeason(show) {
   return Math.min(...(real.length ? real : numbers));
 }
 
-function groupVideoEntries(entries, videoRoot) {
+function groupVideoEntries(entries, videoDirectories) {
   const movies = [];
   const showsByTitle = new Map();
   for (const e of entries) {
     if (e.type !== 'video') continue;
-    if (!underVideoRoot(e, videoRoot)) continue;
+    if (!underVideoRoot(e, videoDirectories)) continue;
     if (e.season != null && e.episode != null) {
       const title = e.display_title || e.name;
       if (!showsByTitle.has(title)) showsByTitle.set(title, { title, episodes: [] });
@@ -1040,7 +1041,8 @@ function FlatList({ movies, shows, transportRef, gekRef, onPreview, onNeedConn }
 // ── shell ────────────────────────────────────────────────────────────────────
 
 function VideoApp({
-  groupId, transportRef, gekRef, status, entries, availableEntries, onPreview, videoRoot, tmdbConfig, isNodeAdmin,
+  groupId, transportRef, gekRef, status, entries, availableEntries, onPreview,
+  videoDirectories, tmdbConfig, isNodeAdmin,
   hideFilter, onNeedConn,
 }) {
   const [mode, setMode] = useState(loadViewMode);
@@ -1057,8 +1059,12 @@ function VideoApp({
   const setModeAndSave = (m) => { setMode(m); saveViewMode(m); };
 
   const videoEntries = availableEntries || entries;
+  // One or several folders now, so the "is anything configured" question
+  // is asked once rather than by every branch testing a string.
+  const configured = (videoDirectories || []).length > 0;
   const { movies, shows } = useMemo(
-    () => groupVideoEntries(videoEntries, videoRoot), [videoEntries, videoRoot]);
+    () => groupVideoEntries(videoEntries, videoDirectories),
+    [videoEntries, videoDirectories]);
 
   const needle = filter.trim().toLowerCase();
   const filteredMovies = useMemo(() => (typeFilter === 'series' ? [] : !needle ? movies : movies.filter(
@@ -1073,10 +1079,10 @@ function VideoApp({
     ${status === 'offline' && html`
       <p class="page-message">${t('group.offline_title')} ${t('group.offline_hint')}</p>
     `}
-    ${status === 'connected' && !videoRoot && html`
+    ${status === 'connected' && !configured && html`
       <p class="page-message">${t('video.no_root_configured')}</p>
     `}
-    ${status === 'connected' && videoRoot && html`
+    ${status === 'connected' && configured && html`
       <div class="video-toolbar">
         <button class="tb-btn ${mode === 'poster' ? 'active' : ''}"
           onClick=${() => setModeAndSave('poster')}>