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, 39 insertions, 13 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/apps.js b/packages/meshbay-hub/src/meshbay_hub/static/apps.js
index 03f85ae..6e62a42 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/apps.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/apps.js
@@ -3,25 +3,46 @@ import { FilesPanel } from './files-app.js';
 import { VideoApp } from './video-app.js';
 import { MusicApp } from './music-app.js';
 import { PhotosApp } from './photos-app.js';
+import { ChatSettings } from './chat-app-settings.js';
+import { VideoSettings } from './video-app-settings.js';
+import { MusicSettings } from './music-app-settings.js';
+import { PhotoSettings } from './photos-app-settings.js';
 
 /**
  * Every group "application", in tab order.
  *
- * Adding one (Videos, Music, Photos — none of them need an MNP change, see
- * the node's indexer classifying video/audio/image already) means a new file
- * exporting a component and one entry here. Nothing in group-page.js changes:
- * every registered component receives the same shared context (see its
- * `commonProps`) and renders itself into the active tab.
+ * Adding one means a new file exporting a component, an optional second file
+ * exporting its settings pane, and one entry here. Nothing in `group-page.js`
+ * or `group-settings.js` changes: every registered component receives the same
+ * shared context (see `commonProps`) and renders itself into the active tab,
+ * and every registered `Settings` gets its own collapsible section with a
+ * toggle, rendered by a loop that names no app.
  *
- * `key` doubles as the identifier the node's `apps_enabled` setting uses, so
- * it must match `ALLOWED_APPS` in the node's webrtc_server.py.
+ * `key` doubles as the identifier the node's `apps_enabled` setting and its
+ * `app_directories` op use, so it must match `ALLOWED_APPS` in the node's
+ * webrtc_server.py. It is also the key an app's directories are stored under
+ * (`<key>_directories`) — one identifier per app, everywhere.
+ *
+ * Fields:
+ *   key            the identifier, shared with the node
+ *   icon, labelKey the tab
+ *   Component      the app itself
+ *   Settings       its operator settings pane, if it has any (optional)
+ *   alwaysEnabled  cannot be turned off, and is not offered as a toggle
  */
 const APPS = [
-  { key: 'chat', icon: 'chat', labelKey: 'group.tab_chat', Component: ChatPanel },
-  { key: 'files', icon: 'folder', labelKey: 'group.tab_files', Component: FilesPanel, alwaysEnabled: true },
-  { key: 'video', icon: 'video', labelKey: 'group.tab_video', Component: VideoApp },
-  { key: 'music', icon: 'music', labelKey: 'group.tab_music', Component: MusicApp },
-  { key: 'photo', icon: 'image', labelKey: 'group.tab_photos', Component: PhotosApp },
+  { key: 'chat', icon: 'chat', labelKey: 'group.tab_chat',
+    Component: ChatPanel, Settings: ChatSettings },
+  // Files has no settings of its own: it works over every shared directory by
+  // definition, which is what the shared-directories table already configures.
+  { key: 'files', icon: 'folder', labelKey: 'group.tab_files',
+    Component: FilesPanel, alwaysEnabled: true },
+  { key: 'video', icon: 'video', labelKey: 'group.tab_video',
+    Component: VideoApp, Settings: VideoSettings },
+  { key: 'music', icon: 'music', labelKey: 'group.tab_music',
+    Component: MusicApp, Settings: MusicSettings },
+  { key: 'photo', icon: 'image', labelKey: 'group.tab_photos',
+    Component: PhotosApp, Settings: PhotoSettings },
 ];
 
 /** The registry filtered to what this group has enabled, in registry order. */
@@ -31,4 +52,9 @@ function visibleApps(enabledKeys) {
   return APPS.filter(a => a.alwaysEnabled || enabled.has(a.key));
 }
 
-export { APPS, visibleApps };
+/** The apps the Settings page offers a section for, in registry order. */
+function configurableApps() {
+  return APPS.filter(a => !a.alwaysEnabled && a.Settings);
+}
+
+export { APPS, visibleApps, configurableApps };