1 files changed, 60 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/music-app-settings.js
new file mode 100644
index 0000000..8ce2ab6
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app-settings.js
@@ -0,0 +1,60 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { ToggleSwitch, useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+/**
+ * The Music app's operator settings.
+ *
+ * Same shape as Videos, minus a credential: MusicBrainz's read endpoints need
+ * no API key, only a descriptive User-Agent, and that is one operator identity
+ * held node-wide rather than a per-group setting (docs/musicbay.md §3.2).
+ *
+ * Several folders, for the same reason Videos has several: a music library
+ * that lives on two drives had no way to say so.
+ */
+function MusicSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
+  const { busy, msg, run } = useSaver();
+  const [directories, setDirectories] = useState(settings.musicDirectories || []);
+  const [mbEnabled, setMbEnabled] = useState(settings.musicbrainzEnabled !== false);
+
+  useEffect(() => {
+    setDirectories(settings.musicDirectories || []);
+  }, [settings.musicDirectories]);
+  useEffect(() => {
+    setMbEnabled(settings.musicbrainzEnabled !== false);
+  }, [settings.musicbrainzEnabled]);
+
+  const current = settings.musicDirectories || [];
+  const dirsDirty = directories.length !== current.length
+    || directories.some((d, i) => d !== current[i]);
+
+  return html`
+    <div class="app-settings">
+      <${FolderPickerField}
+        label=${t('settings_app.music_directories_label')}
+        hint=${t('settings_app.music_directories_hint')}
+        roots=${roots} dirs=${dirs} mode="multi"
+        value=${directories} disabled=${busy}
+        onChange=${setDirectories} />
+
+      <button class="app-save" 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.musicbrainz_title')}</h4>
+      <p class="settings-hint">${t('settings_node.musicbrainz_hint')}</p>
+      <div class="settings-row">
+        <${ToggleSwitch} checked=${mbEnabled} disabled=${busy}
+          onChange=${(v) => { setMbEnabled(v);
+                              run(() => transport.setMusicbrainzEnabled(v, signFn)); }}
+          label=${mbEnabled ? t('settings_node.musicbrainz_enabled')
+                            : t('settings_node.musicbrainz_disabled')} />
+      </div>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { MusicSettings };