1 files changed, 80 insertions, 15 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/apps.js b/packages/meshbay-hub/src/meshbay_hub/static/apps.js
index 47b5bba..461bd57 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/apps.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/apps.js
@@ -3,32 +3,97 @@ 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';
+import { HelloWorldApp } from './helloworld-app.js';
+import { HelloWorldSettings } from './helloworld-app-settings.js';
+
+/**
+ * Whether apps marked `dev` are shown. Opt in once with `?dev=1`, off with
+ * `?dev=0` — persisted, the same shape as transport.js's `?trace=1`.
+ *
+ * HelloWorld exists to prove that adding an application is a registry entry
+ * and two files. Registering it normally would put a toy app in every
+ * operator's group; leaving it unregistered would prove nothing, since the
+ * claim is precisely that registration is enough. So it is registered, and
+ * hidden behind a flag that changes nothing else.
+ */
+const DEV_KEY = 'mb_dev_apps';
+(function _initDevFlag() {
+  try {
+    const params = new URLSearchParams(location.search);
+    if (params.has('dev')) {
+      if (params.get('dev') === '0') localStorage.removeItem(DEV_KEY);
+      else localStorage.setItem(DEV_KEY, '1');
+    }
+  } catch { /* localStorage unavailable — dev apps stay hidden */ }
+})();
+
+function devAppsShown() {
+  try { return localStorage.getItem(DEV_KEY) === '1'; } catch { return false; }
+}
 
 /**
  * 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 },
-  { 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 reference implementation (docs/refactor-groups.md §4.1). `dev` keeps
+  // it out of an operator's way; everything else about it is an ordinary
+  // entry, which is the point.
+  { key: 'helloworld', icon: 'chat', labelKey: 'group.tab_helloworld',
+    Component: HelloWorldApp, Settings: HelloWorldSettings, dev: true },
 ];
 
+/** Everything a reader of this page is allowed to see, in registry order. */
+function availableApps() {
+  const dev = devAppsShown();
+  return APPS.filter(a => dev || !a.dev);
+}
+
 /** The registry filtered to what this group has enabled, in registry order. */
 function visibleApps(enabledKeys) {
+  const registered = availableApps();
   const enabled = new Set(
-    enabledKeys && enabledKeys.length ? enabledKeys : APPS.map(a => a.key));
-  return APPS.filter(a => enabled.has(a.key));
+    enabledKeys && enabledKeys.length ? enabledKeys : registered.map(a => a.key));
+  return registered.filter(a => a.alwaysEnabled || enabled.has(a.key));
+}
+
+/** The apps the Settings page offers a section for, in registry order. */
+function configurableApps() {
+  return availableApps().filter(a => !a.alwaysEnabled && a.Settings);
 }
 
-export { APPS, visibleApps };
+export { APPS, availableApps, visibleApps, configurableApps };