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, 128 insertions, 0 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js
new file mode 100644
index 0000000..b2d5015
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js
@@ -0,0 +1,128 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t, getLocale, LOCALES } from './i18n.js';
+import { ToggleSwitch, useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+// MeshBay's own locale codes (i18n.js LOCALES) to the language tag TMDB
+// expects. Duplicated from nothing: this is the only place it lives now that
+// the TMDB fields moved out of the monolithic settings page.
+const TMDB_LANGUAGE_BY_LOCALE = {
+  en: 'en-US', fr: 'fr-FR', es: 'es-ES', 'pt-BR': 'pt-BR', 'zh-CN': 'zh-CN',
+  ja: 'ja-JP', de: 'de-DE', it: 'it-IT', nl: 'nl-NL', pl: 'pl-PL',
+};
+
+/**
+ * The Videos app's operator settings: which folders it works over, and the
+ * TMDB lookups it makes.
+ *
+ * Several folders now, not one. A film library is as likely to be two drives
+ * as one, and the single-root model made the second one invisible — the
+ * operator's only recourse was to point Videos at a parent containing both,
+ * which pulls in everything else under it too.
+ *
+ * The TMDB parts are two independent settings that happen to sit together:
+ * the on/off switch is per group, while the API key and the query language
+ * are node-wide, because they are one operator's credential and one shared
+ * cache (docs/mediacenter.md §5.5). They save separately for that reason.
+ */
+function VideoSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
+  const { busy, msg, run } = useSaver();
+  const [directories, setDirectories] = useState(settings.videoDirectories || []);
+  const [tmdbEnabled, setTmdbEnabled] = useState(settings.tmdbEnabled !== false);
+  const [token, setToken] = useState('');
+  const [language, setLanguage] = useState(
+    settings.tmdbLanguage || TMDB_LANGUAGE_BY_LOCALE[getLocale()] || 'en-US');
+
+  useEffect(() => {
+    setDirectories(settings.videoDirectories || []);
+  }, [settings.videoDirectories]);
+  useEffect(() => {
+    setTmdbEnabled(settings.tmdbEnabled !== false);
+  }, [settings.tmdbEnabled]);
+  useEffect(() => {
+    if (settings.tmdbLanguage) setLanguage(settings.tmdbLanguage);
+  }, [settings.tmdbLanguage]);
+
+  const current = settings.videoDirectories || [];
+  const dirsDirty = directories.length !== current.length
+    || directories.some((d, i) => d !== current[i]);
+
+  return html`
+    <div class="app-settings">
+      <${FolderPickerField}
+        label=${t('settings_app.video_directories_label')}
+        hint=${t('settings_app.video_directories_hint')}
+        roots=${roots} dirs=${dirs} mode="multi"
+        value=${directories} disabled=${busy}
+        onChange=${setDirectories} />
+
+      <button class="btn btn-small btn-secondary" style="margin-top:4px"
+        disabled=${busy || !dirsDirty}
+        onClick=${() => run(() => saveDirectories(directories))}>
+        ${busy ? t('settings_app.saving') : t('settings_app.save')}
+      </button>
+
+      <h4 class="app-settings-sub">${t('settings_node.tmdb_title')}</h4>
+      <p class="settings-hint">${t('settings_node.tmdb_hint')}</p>
+
+      <div class="settings-row">
+        <${ToggleSwitch} checked=${tmdbEnabled} disabled=${busy}
+          onChange=${(v) => { setTmdbEnabled(v);
+                              run(() => transport.setTmdbEnabled(v, signFn)); }}
+          label=${tmdbEnabled ? t('settings_node.tmdb_enabled')
+                              : t('settings_node.tmdb_disabled')} />
+      </div>
+
+      <div class="settings-row">
+        <label class="settings-label">
+          ${t('settings_node.tmdb_token_label')}
+          <input type="password" value=${token} disabled=${busy}
+            placeholder=${t('settings_node.tmdb_token_placeholder')}
+            onInput=${(e) => setToken(e.target.value)} />
+        </label>
+        ${/* No "optional", and no mention of a shipped default. A key that
+              works without one is a key somebody else is paying the rate
+              limit for, and the operator should know they are meant to have
+              their own. */''}
+        <p class="settings-hint">
+          ${settings.tmdbTokenCustomized
+            ? t('settings_node.tmdb_token_customized')
+            : t('settings_app.tmdb_token_prompt')}
+          ${' '}
+          <a href="https://www.themoviedb.org/settings/api" target="_blank"
+             rel="noopener noreferrer">${t('settings_app.tmdb_token_link')}</a>
+        </p>
+      </div>
+
+      <div class="settings-row">
+        <label class="settings-label">
+          ${t('settings_node.tmdb_language_label')}
+          <select value=${language} disabled=${busy}
+            onChange=${(e) => setLanguage(e.target.value)}>
+            ${LOCALES.map((l) => html`
+              <option key=${l.code} value=${TMDB_LANGUAGE_BY_LOCALE[l.code]}>
+                ${l.name}
+              </option>`)}
+          </select>
+        </label>
+        <p class="settings-hint">${t('settings_node.tmdb_language_hint')}</p>
+      </div>
+
+      <button class="btn btn-small btn-secondary" disabled=${busy}
+        onClick=${() => run(async () => {
+          // `undefined` for the token means "leave the stored one alone",
+          // which is not the same as `''` — that clears it. The input starts
+          // empty on every render because a secret is not read back, so
+          // sending it as a value would wipe the key every time the language
+          // was changed.
+          await transport.setTmdbConfig(token || undefined, language, signFn);
+          setToken('');
+        })}>
+        ${busy ? t('settings_app.saving') : t('settings_node.tmdb_save')}
+      </button>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { VideoSettings, TMDB_LANGUAGE_BY_LOCALE };