refactor(settings): move the shell out of settings.js into settings/

settings.js is 5,721 lines and the registry/navigation/search/sidebar/
lifecycle primitives already live in static/js/settings/. What was left
behind in the coordinator was the layer above them: what happens when a
panel becomes active, where an admin-managed tab is handed to admin.js,
which elements are admin-only, the Appearance window fade, and the
public open/close. That layer reached module-global `modalEl` and
`initialized` directly, so none of it could be exercised without
booting every panel in the file — and every panel I eventually move out
would have to route back through it.

Three modules, no behavior change:

  shell.js       panel-activation side effects, the admin handoff,
                 .admin-only visibility, open()/close(). Takes what it
                 needs from settings.js as injected callbacks, the same
                 shape bindSettingsNavigation() already uses, so it
                 holds no panel state.
  peek.js        the Appearance window fade and its toggle. It is window
                 chrome rather than Appearance panel data, and it has to
                 be cleared when the user leaves that panel.
  oauthReturn.js the once-per-load return path from the Google OAuth
                 redirect. It was an IIFE running at module evaluation
                 in the middle of a 5,700-line file.

settings.js keeps open/close/syncAdminVisibility as exports, so every
caller (app.js, calendar.js, chatStream.js, gallery.js, admin.js,
modelPicker.js, slashCommands.js, chatRenderer.js, emailLibrary.js) is
untouched. 5,721 -> 5,583 lines; the settings/ modules go 887 -> 1,107.

The real-ESM coordinator smoke now links the three new files and asserts
what moved: admin-only elements hidden for a non-admin and shown for an
admin, an admin-managed tab click handed to admin.js without a second
local activation, and the Peek fade applying on Appearance and clearing
when the user navigates away. The OAuth test follows its handler to the
new file and additionally pins the coordinator wiring, since "uses the
module-local open()" is now a property of the seam rather than of one
source slice.

No new module needs a cache-busting query or an sw.js precache entry:
the existing settings/ submodules have neither, they load transitively
from settings.js's versioned URL, and sw.js serves JS network-first.

admin.js stays where it is. It has no shell to extract — open() and
close() already delegate to settingsModule, and its 4,122 lines are all
panel code. That is a panel split, not this one.
This commit is contained in:
Léo
2026-09-30 09:45:23 +02:00
parent 6105702901
commit 1c5f60539f
8 changed files with 368 additions and 172 deletions
@@ -20,6 +20,9 @@ const REAL_MODULES = new Set([
path.join(JS, 'settings/sidebar.js'),
path.join(JS, 'settings/navigation.js'),
path.join(JS, 'settings/lifecycle.js'),
path.join(JS, 'settings/shell.js'),
path.join(JS, 'settings/peek.js'),
path.join(JS, 'settings/oauthReturn.js'),
path.join(JS, 'searchProviderIcons.js'),
]);
@@ -497,6 +500,11 @@ function buildFixture(document) {
header.className = 'modal-header';
modal.appendChild(header);
const peekToggle = document.createElement('button');
peekToggle.id = 'settings-opacity-wrap';
peekToggle.className = 'theme-opacity-wrap theme-opacity-toggle hidden';
header.appendChild(peekToggle);
const close = document.createElement('button');
close.className = 'close-btn';
header.appendChild(close);
@@ -539,6 +547,14 @@ function buildFixture(document) {
panels.className = 'settings-panels';
content.appendChild(panels);
const adminCard = document.createElement('div');
adminCard.className = 'admin-card';
panels.appendChild(adminCard);
const adminOnly = document.createElement('div');
adminOnly.className = 'admin-only';
adminCard.appendChild(adminOnly);
const panelIds = [
'services',
'added-models',
@@ -590,6 +606,9 @@ function buildFixture(document) {
sidebarHandle,
searchInput,
searchResults,
peekToggle,
adminCard,
adminOnly,
services: settingsPanels.services,
appearance: settingsPanels.appearance,
ai: settingsPanels.ai,
@@ -994,6 +1013,14 @@ assert(
);
// shell.js owns admin-only visibility. A non-admin must not merely see an
// unpopulated admin control — the element has to be hidden on every open().
assert(
fixture.adminOnly.style.display === 'none',
'open() did not hide .admin-only for a non-admin',
);
// #6040 coordinator integration: initAll() must bind the real finder and
// sidebar controllers, not merely make their modules link successfully.
assert(
@@ -1050,6 +1077,28 @@ assert(
'navigation callback did not apply Appearance coordinator state',
);
assert(
!fixture.peekToggle.classList.contains('hidden'),
'Appearance activation did not reveal the Peek toggle',
);
// peek.js fades the window background via color-mix, never element opacity, so
// the controls stay readable while the user previews the page behind Settings.
fixture.peekToggle.click();
assert(
fixture.content.style.values.background
=== 'color-mix(in srgb, var(--bg) 55%, transparent)',
'Peek toggle did not fade the Settings window background',
);
assert(
fixture.adminCard.style.values.background
=== 'color-mix(in srgb, var(--panel) 55%, transparent)',
'Peek toggle did not fade the Settings cards',
);
// Direct public open() after initialization must still coordinate activation.
settings.open('ai');
@@ -1069,6 +1118,19 @@ assert(
'direct open("ai") did not clear Appearance coordinator state',
);
// Leaving Appearance with Peek still toggled on must not leave the rest of
// Settings faded — this is the bug the sync exists to prevent.
assert(
fixture.content.style.values.background === undefined
&& fixture.adminCard.style.values.background === undefined,
'leaving Appearance left the Peek fade applied',
);
assert(
fixture.peekToggle.classList.contains('hidden'),
'leaving Appearance left the Peek toggle visible',
);
// Public close() must route through the real lifecycle module.
settings.close();
@@ -1084,6 +1146,44 @@ assert(
);
// shell.js hands an admin-managed tab to admin.js and must not then perform a
// second local activation. Nothing before this point installs an admin module,
// so the earlier assertions covered the no-admin-module fallback.
const adminCalls = [];
sandbox.adminModule = {
open(tab) {
adminCalls.push(tab);
return true;
},
_initData() {
adminCalls.push('_initData');
},
};
fixture.settingsPanels.users.button.click();
assert(
adminCalls.length === 1 && adminCalls[0] === 'users',
`admin tab click did not hand "users" to the admin module: ${adminCalls}`,
);
assert(
!fixture.settingsPanels.users.button.classList.contains('active'),
'shell activated an admin tab locally after the admin module claimed it',
);
// Admin status is read per open(), not cached at initialization.
sandbox._isAdmin = true;
settings.open('services');
assert(
fixture.adminOnly.style.display === '',
'open() did not reveal .admin-only for an admin',
);
// initAll() starts some existing async panel initializers without awaiting
// them. Give already-ready continuations a chance to run before declaring the
// smoke successful, so late coordinator/setup exceptions still fail the test.
@@ -1098,4 +1198,7 @@ console.log(JSON.stringify({
navigationCallback: true,
directOpen: true,
directClose: true,
peekChrome: true,
adminVisibility: true,
adminTabHandoff: true,
}));
+14 -6
View File
@@ -4,16 +4,24 @@ from pathlib import Path
_REPO = Path(__file__).resolve().parents[1]
_HANDLER = _REPO / "static" / "js" / "settings" / "oauthReturn.js"
_COORDINATOR = _REPO / "static" / "js" / "settings.js"
def test_oauth_redirect_uses_the_module_local_settings_api():
source = (_REPO / "static" / "js" / "settings.js").read_text(encoding="utf-8")
handler = source[
source.index("(function _handleOauthRedirect"):
source.index("const settingsModule =")
]
handler = _HANDLER.read_text(encoding="utf-8")
assert "open('integrations');" in handler
assert "openSettings('integrations');" in handler
assert "window.settingsModule" not in handler
assert "window.__odysseusAppStarted" not in handler
assert "document.addEventListener('DOMContentLoaded', _showResult, { once: true })" in handler
def test_settings_coordinator_hands_the_handler_its_own_open():
source = _COORDINATOR.read_text(encoding="utf-8")
# The handler only stays window-free if the coordinator passes its own
# export in. A stray `window.settingsModule` here would reintroduce the
# load-order dependency the handler was written to avoid.
assert "handleSettingsOauthReturn({ openSettings: open });" in source
assert "from './settings/oauthReturn.js'" in source
+3
View File
@@ -114,4 +114,7 @@ def test_settings_shell_real_esm_coordinator():
"navigationCallback": True,
"directOpen": True,
"directClose": True,
"peekChrome": True,
"adminVisibility": True,
"adminTabHandoff": True,
}