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

feat: extend module platform with UI slots, runtime components, CLI tooling and {{userId}} search support

Browse Source 
Completes the generic module platform that enables modules to contribute
UI elements, runtime JS components, and search resources without any
core hardcoding.

New generic UI slot types:
- topbar.right_item: module-contributed topbar buttons
- layout.body_end_template: module-contributed dialog/overlay templates
- layout.head_style: module-contributed global CSS
- runtime.component: declarative JS component registration with phase ordering

New infrastructure:
- ModuleAutoloader: PSR-4 autoloading for module-local PHP classes
- ModuleRuntimePageBuilder: symlinks module pages into runtime directory
- ModuleRuntimeAssetPublisher: publishes module CSS/JS to web/modules/
- ModulePermissionSynchronizer: syncs module permissions to DB
- CLI scripts: module-runtime-sync, module-build, module-migrate,
  module-permissions-sync, module-assets-sync
- {{userId}} placeholder in SearchDataService for user-scoped search queries
- Component runtime with phased initialization (early/default/late)
- AppContainer.protectExistingBindings() to prevent module→core overwrites
- Architecture tests: ModuleStructureContractTest, CoreTemplateIsolationTest,
  FrontendComponentRuntimeContractTest, AppContainerIsolationContractTest

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-03-18 22:19:56 +01:00
parent c364e2b46d
commit c7b8fd516a
139 changed files with 7591 additions and 2535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
web/js/components/app-theme-toggle.js
View File

@@ -1,7 +1,7 @@
/**
* Theme switcher — light/dark toggle and menu with server-side persistence.
*/
import { optionalEl, warnOnce } from '../core/app-dom.js';
import { warnOnce, resolveHost } from '../core/app-dom.js';
const setTheme = (theme) => {
document.documentElement.dataset.theme = theme;
@@ -10,15 +10,17 @@ const setTheme = (theme) => {
const isDarkTheme = (theme) => theme && theme.startsWith('dark');
const setIcon = (iconEl, theme) => {
if (!iconEl) {return;}
if (!iconEl) {
return;
}
iconEl.classList.remove('bi-sun-fill', 'bi-moon-stars-fill');
iconEl.classList.add(isDarkTheme(theme) ? 'bi-moon-stars-fill' : 'bi-sun-fill');
};
const updateTheme = async (menu, theme) => {
const url = menu.dataset.themeUrl;
const csrfKey = menu.dataset.csrfKey;
const csrfToken = menu.dataset.csrfToken;
const updateTheme = async (source, theme) => {
const url = source.dataset.themeUrl;
const csrfKey = source.dataset.csrfKey;
const csrfToken = source.dataset.csrfToken;
if (!url || !csrfKey || !csrfToken) {
return true;
}
@@ -28,93 +30,107 @@ const updateTheme = async (menu, theme) => {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json',
'X-Requested-With': 'fetch'
'X-Requested-With': 'fetch',
},
body
body,
});
return response.ok;
};
const initThemeMenu = () => {
const menu = optionalEl('[data-theme-menu]');
if (!menu) {return;}
const icon = menu.querySelector('[data-theme-icon]');
const options = Array.from(menu.querySelectorAll('[data-theme-option]'));
if (!options.length) {
warnOnce('UI_EL_MISSING', 'Missing theme options', { module: 'theme-toggle' });
return;
export function initThemeControls(root = document, options = {}) {
const host = resolveHost(root);
const menuSelector = String(options.menuSelector || '[data-theme-menu]').trim() || '[data-theme-menu]';
const toggleSelector = String(options.toggleSelector || '[data-theme-toggle]').trim() || '[data-theme-toggle]';
const cleanupFns = [];
const menu = host.matches?.(menuSelector) ? host : host.querySelector(menuSelector);
if (menu instanceof HTMLElement) {
const icon = menu.querySelector('[data-theme-icon]');
const optionsEls = Array.from(menu.querySelectorAll('[data-theme-option]'));
if (!optionsEls.length) {
warnOnce('UI_EL_MISSING', 'Missing theme options', { module: 'theme-toggle' });
} else {
let pending = false;
const getCurrent = () => document.documentElement.dataset.theme || '';
const setActive = (theme) => {
optionsEls.forEach((optionEl) => {
const isActive = optionEl.dataset.themeValue === theme;
optionEl.classList.toggle('active', isActive);
if (isActive) {
optionEl.setAttribute('aria-current', 'true');
} else {
optionEl.removeAttribute('aria-current');
}
});
};
setIcon(icon, getCurrent());
setActive(getCurrent());
optionsEls.forEach((optionEl) => {
const onOptionClick = async (event) => {
event.preventDefault();
if (pending) {
return;
}
const next = optionEl.dataset.themeValue || '';
if (!next) {
return;
}
const current = getCurrent();
if (next === current) {
return;
}
pending = true;
setTheme(next);
setIcon(icon, next);
setActive(next);
const ok = await updateTheme(menu, next);
if (!ok) {
setTheme(current);
setIcon(icon, current);
setActive(current);
}
pending = false;
};
optionEl.addEventListener('click', onOptionClick);
cleanupFns.push(() => optionEl.removeEventListener('click', onOptionClick));
});
}
}
let pending = false;
const getCurrent = () => document.documentElement.dataset.theme || '';
const setActive = (theme) => {
options.forEach((option) => {
const isActive = option.dataset.themeValue === theme;
option.classList.toggle('active', isActive);
if (isActive) {
option.setAttribute('aria-current', 'true');
} else {
option.removeAttribute('aria-current');
const button = host.matches?.(toggleSelector) ? host : host.querySelector(toggleSelector);
if (button instanceof HTMLButtonElement) {
const icon = button.querySelector('i');
let pending = false;
const getCurrent = () => document.documentElement.dataset.theme || '';
setIcon(icon, getCurrent());
const onButtonClick = async () => {
if (pending) {
return;
}
});
};
setIcon(icon, getCurrent());
setActive(getCurrent());
options.forEach((option) => {
option.addEventListener('click', async (event) => {
event.preventDefault();
if (pending) {return;}
const next = option.dataset.themeValue || '';
if (!next) {return;}
const current = getCurrent();
if (next === current) {return;}
const next = isDarkTheme(current) ? 'light' : 'dark';
pending = true;
setTheme(next);
setIcon(icon, next);
setActive(next);
const ok = await updateTheme(menu, next);
const ok = await updateTheme(button, next);
if (!ok) {
setTheme(current);
setIcon(icon, current);
setActive(current);
}
pending = false;
});
});
};
};
button.addEventListener('click', onButtonClick);
cleanupFns.push(() => button.removeEventListener('click', onButtonClick));
}
const initThemeToggle = () => {
const button = optionalEl('[data-theme-toggle]');
if (!button) {return;}
const icon = button.querySelector('i');
let pending = false;
const getCurrent = () => document.documentElement.dataset.theme || '';
setIcon(icon, getCurrent());
const destroy = () => {
cleanupFns.forEach((cleanup) => cleanup());
};
button.addEventListener('click', async () => {
if (pending) {return;}
const current = getCurrent();
const next = isDarkTheme(current) ? 'light' : 'dark';
pending = true;
setTheme(next);
setIcon(icon, next);
const ok = await updateTheme(button, next);
if (!ok) {
setTheme(current);
setIcon(icon, current);
}
pending = false;
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
initThemeMenu();
initThemeToggle();
});
} else {
initThemeMenu();
initThemeToggle();
return { destroy };
}
export const initThemeToggle = initThemeControls;