fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(settings/telemetry): single card with full sub-config disclosure

Browse Source 
Collapses the two telemetry cards (Frontend telemetry + Advanced) into
one card so the master toggle and its sub-config (sampling + allowed
events) read as one coherent block. The conditional disclosure now
hides the entire sub-config when telemetry is off — previously only the
sampling fieldset hid, leaving Advanced visible with no effect.

The sampling select sits in a 2-column grid with an empty filler so it
keeps a sensible width instead of stretching across the page. Both
redundant info blockquotes are gone (the master switch carries a muted
hint, and the events block has its own caption). The simplified
component drops the now-redundant samplingRowSelector and consumes a
single data-telemetry-when-enabled wrapper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-25 18:22:23 +02:00
parent 5f3aff08cb
commit 9ee2589820
4 changed files with 57 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/js/components/app-settings-telemetry.js
View File

@@ -1,5 +1,7 @@
/**
* Tracks settings page interactions for telemetry.
* Hides the telemetry sub-config (sampling + allowed events) when the
* master toggle is off. The sub-block is one container so all dependent
* fields stay in sync together.
*/
import { resolveHost } from '../core/app-dom.js';
import { syncControlState } from '../core/app-conditional-controls.js';
@@ -7,30 +9,21 @@ import { syncControlState } from '../core/app-conditional-controls.js';
export const initTelemetrySettings = (root = document, options = {}) => {
const host = resolveHost(root);
const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]';
const samplingFieldsetSelector = String(options.samplingFieldsetSelector || '[data-telemetry-sampling-fieldset]').trim() || '[data-telemetry-sampling-fieldset]';
const samplingRowSelector = String(options.samplingRowSelector || '[data-telemetry-sampling-row]').trim() || '[data-telemetry-sampling-row]';
const dependentSelector = String(options.dependentSelector || '[data-telemetry-when-enabled]').trim() || '[data-telemetry-when-enabled]';
const toggle = host.querySelector(toggleSelector);
const samplingFieldset = host.querySelector(samplingFieldsetSelector);
const samplingRow = host.querySelector(samplingRowSelector);
const dependent = host.querySelector(dependentSelector);
if (!toggle || !samplingFieldset) {
if (!toggle || !dependent) {
return { destroy: () => {} };
}
const syncSamplingVisibility = () => {
const active = Boolean(toggle.checked);
syncControlState(samplingFieldset, active);
if (samplingRow instanceof HTMLElement) {
samplingRow.hidden = !active;
}
};
toggle.addEventListener('change', syncSamplingVisibility);
syncSamplingVisibility();
const sync = () => syncControlState(dependent, Boolean(toggle.checked));
toggle.addEventListener('change', sync);
sync();
return {
destroy: () => {
toggle.removeEventListener('change', syncSamplingVisibility);
toggle.removeEventListener('change', sync);
},
};
};