ken/muxplex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reorganize settings dialog — add Multi-Device tab, enable/disable toggle, device name as page title

Browse Source 
- Add multi_device_enabled: false to DEFAULT_SETTINGS in settings.py
- Add fifth 'Multi-Device' tab (data-tab='devices') to settings dialog sidebar
- Move #setting-device-name, #setting-remote-instances, #add-remote-instance-btn,
  #setting-view-mode, and #setting-view-scope out of Display/Sessions tabs into
  the new dedicated devices panel
- Add #setting-multi-device-enabled checkbox at top of Multi-Device tab;
  when unchecked, all other fields in the tab are greyed out and disabled
- Gate buildSources() remote instances behind multi_device_enabled (smart default:
  treated as enabled if remote_instances is non-empty for backward compat)
- Wire device name → document.title: updates title on openSettings() and on
  every keystroke in the device name input field
- Add _updateMultiDeviceFieldsState() helper to enable/disable fields
- Add #multi-device-fields CSS transition for smooth opacity animation
- Add 19 new tests (settings, HTML, JS, CSS) covering all new behavior
This commit is contained in:
Brian Krabach
2026-03-31 06:16:44 -07:00
parent 881b6cc9f3
commit 679416a5bf
8 changed files with 380 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
muxplex/frontend/index.html
+33 -24
View File
@@ -90,6 +90,7 @@
<button class="settings-tab" data-tab="sessions">Sessions</button>
<button class="settings-tab" data-tab="notifications">Notifications</button>
<button class="settings-tab" data-tab="new-session">Commands</button>
<button class="settings-tab" data-tab="devices">Multi-Device</button>
</nav>
<div class="settings-content">
<div class="settings-panel" data-tab="display">
@@ -123,21 +124,6 @@
<option value="4">4</option>
</select>
</div>
<div class="settings-field">
<label class="settings-label" for="setting-view-mode">View Mode</label>
<select id="setting-view-mode" class="settings-select">
<option value="flat">Flat</option>
<option value="grouped">Grouped</option>
<option value="filtered">Filtered</option>
</select>
</div>
<div class="settings-field">
<label class="settings-label" for="setting-view-scope">View Scope</label>
<select id="setting-view-scope" class="settings-select">
<option value="local">Local</option>
<option value="server">Server</option>
</select>
</div>
</div>
<div class="settings-panel hidden" data-tab="sessions">
<div class="settings-field">
@@ -166,15 +152,6 @@
<label class="settings-label" for="setting-auto-open">Auto-open created sessions</label>
<input type="checkbox" id="setting-auto-open" class="settings-checkbox" checked />
</div>
<div class="settings-field">
<label class="settings-label" for="setting-device-name">Device Name</label>
<input type="text" id="setting-device-name" class="settings-input" placeholder="This device" />
</div>
<div class="settings-field settings-field--column">
<label class="settings-label">Remote Instances</label>
<div id="setting-remote-instances" class="settings-remote-list"></div>
<button id="add-remote-instance-btn" class="settings-action-btn">+ Add Remote</button>
</div>
</div>
<div class="settings-panel hidden" data-tab="notifications">
<div class="settings-field">
@@ -203,6 +180,38 @@
<button id="setting-delete-template-reset" class="settings-action-btn">Reset to default</button>
</div>
</div>
<div class="settings-panel hidden" data-tab="devices">
<div class="settings-field">
<label class="settings-label" for="setting-multi-device-enabled">Enable multi-device support</label>
<input type="checkbox" id="setting-multi-device-enabled" class="settings-checkbox" />
</div>
<div id="multi-device-fields">
<div class="settings-field">
<label class="settings-label" for="setting-device-name">Device Name</label>
<input type="text" id="setting-device-name" class="settings-input" placeholder="This device" />
</div>
<div class="settings-field">
<label class="settings-label" for="setting-view-mode">View Mode</label>
<select id="setting-view-mode" class="settings-select">
<option value="flat">Flat</option>
<option value="grouped">Grouped</option>
<option value="filtered">Filtered</option>
</select>
</div>
<div class="settings-field">
<label class="settings-label" for="setting-view-scope">View Scope</label>
<select id="setting-view-scope" class="settings-select">
<option value="local">Local</option>
<option value="server">Server</option>
</select>
</div>
<div class="settings-field settings-field--column">
<label class="settings-label">Remote Instances</label>
<div id="setting-remote-instances" class="settings-remote-list"></div>
<button id="add-remote-instance-btn" class="settings-action-btn">+ Add Remote</button>
</div>
</div>
</div>
</div>
</div>
</dialog>