Self management

public/assets/apps/user-self-management/app.css

@@ -0,0 +1,309 @@
+#user-self-management-app {
+    min-height: 100%;
+    color: #0f172a;
+    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+
+#user-self-management-app,
+#user-self-management-app * {
+    box-sizing: border-box;
+}
+
+#user-self-management-app .usm-shell {
+    min-height: 100%;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98)),
+        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%);
+}
+
+#user-self-management-app .usm-frame {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    min-height: 100%;
+}
+
+#user-self-management-app .usm-nav {
+    padding: 22px 16px;
+    border-right: 1px solid rgba(148, 163, 184, 0.25);
+    background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
+}
+
+#user-self-management-app .usm-brand {
+    margin-bottom: 18px;
+}
+
+#user-self-management-app .usm-brand h1 {
+    margin: 0 0 8px;
+    font-size: 24px;
+    line-height: 1.1;
+}
+
+#user-self-management-app .usm-brand p,
+#user-self-management-app .usm-copy,
+#user-self-management-app .usm-meta,
+#user-self-management-app .usm-note,
+#user-self-management-app .usm-status {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #475569;
+}
+
+#user-self-management-app .usm-nav-list {
+    display: grid;
+    gap: 8px;
+}
+
+#user-self-management-app .usm-nav-button {
+    width: 100%;
+    padding: 12px 14px;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.82);
+    color: inherit;
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+}
+
+#user-self-management-app .usm-nav-button.is-active {
+    background: #0f172a;
+    color: #f8fafc;
+    border-color: #0f172a;
+}
+
+#user-self-management-app .usm-main {
+    padding: 24px;
+}
+
+#user-self-management-app .usm-panel {
+    display: grid;
+    gap: 18px;
+    max-width: 1080px;
+    margin: 0 auto;
+}
+
+#user-self-management-app .usm-hero,
+#user-self-management-app .usm-card,
+#user-self-management-app .usm-actions {
+    padding: 22px;
+    border-radius: 20px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
+}
+
+#user-self-management-app .usm-hero {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+}
+
+#user-self-management-app .usm-kicker {
+    margin: 0 0 10px;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #2563eb;
+}
+
+#user-self-management-app .usm-title {
+    margin: 0 0 8px;
+    font-size: 32px;
+    line-height: 1.1;
+}
+
+#user-self-management-app .usm-pill-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+#user-self-management-app .usm-pill {
+    display: inline-flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 0 12px;
+    border-radius: 999px;
+    background: #e2e8f0;
+    font-size: 12px;
+    font-weight: 700;
+    color: #334155;
+}
+
+#user-self-management-app .usm-grid,
+#user-self-management-app .usm-choice-grid,
+#user-self-management-app .usm-list {
+    display: grid;
+    gap: 16px;
+}
+
+#user-self-management-app .usm-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+#user-self-management-app .usm-choice-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+#user-self-management-app .usm-field {
+    display: grid;
+    gap: 8px;
+}
+
+#user-self-management-app .usm-label {
+    font-size: 13px;
+    font-weight: 700;
+    color: #334155;
+}
+
+#user-self-management-app .usm-input,
+#user-self-management-app .usm-textarea {
+    width: 100%;
+    min-height: 42px;
+    padding: 10px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 12px;
+    background: #fff;
+    color: inherit;
+    font: inherit;
+}
+
+#user-self-management-app .usm-textarea {
+    min-height: 112px;
+    resize: vertical;
+}
+
+#user-self-management-app .usm-input:focus,
+#user-self-management-app .usm-textarea:focus {
+    outline: 2px solid rgba(37, 99, 235, 0.18);
+    border-color: #3b82f6;
+}
+
+#user-self-management-app .usm-choice {
+    display: grid;
+    gap: 8px;
+    padding: 16px;
+    border: 1px solid #cbd5e1;
+    border-radius: 16px;
+    background: #fff;
+    cursor: pointer;
+}
+
+#user-self-management-app .usm-choice.is-active {
+    border-color: #2563eb;
+    box-shadow: inset 0 0 0 1px #2563eb;
+    background: #eff6ff;
+}
+
+#user-self-management-app .usm-choice strong,
+#user-self-management-app .usm-item-main strong {
+    display: block;
+    margin: 0 0 4px;
+    font-size: 15px;
+}
+
+#user-self-management-app .usm-choice p,
+#user-self-management-app .usm-item-main p {
+    margin: 0;
+    font-size: 13px;
+    color: #475569;
+}
+
+#user-self-management-app .usm-item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 1px solid #dbe2ea;
+    border-radius: 16px;
+    background: #fff;
+}
+
+#user-self-management-app .usm-item input {
+    margin-top: 4px;
+}
+
+#user-self-management-app .usm-item-main {
+    min-width: 0;
+}
+
+#user-self-management-app .usm-item-meta {
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #1d4ed8;
+}
+
+#user-self-management-app .usm-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+#user-self-management-app .usm-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 42px;
+    padding: 0 18px;
+    border: 0;
+    border-radius: 999px;
+    background: #2563eb;
+    color: #f8fafc;
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+#user-self-management-app .usm-button:disabled {
+    cursor: default;
+    opacity: 0.6;
+}
+
+#user-self-management-app .usm-message {
+    font-size: 13px;
+    color: #334155;
+}
+
+#user-self-management-app .usm-message.is-error {
+    color: #b91c1c;
+}
+
+#user-self-management-app .usm-message.is-success {
+    color: #047857;
+}
+
+#user-self-management-app .usm-loading,
+#user-self-management-app .usm-error-state {
+    display: grid;
+    place-items: center;
+    min-height: 320px;
+    padding: 24px;
+}
+
+@media (max-width: 900px) {
+    #user-self-management-app .usm-frame {
+        grid-template-columns: 1fr;
+    }
+
+    #user-self-management-app .usm-nav {
+        border-right: 0;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+    }
+
+    #user-self-management-app .usm-grid,
+    #user-self-management-app .usm-choice-grid {
+        grid-template-columns: 1fr;
+    }
+
+    #user-self-management-app .usm-hero,
+    #user-self-management-app .usm-actions {
+        grid-template-columns: 1fr;
+        display: grid;
+    }
+}

public/assets/apps/user-self-management/app.js

@@ -0,0 +1,449 @@
+(() => {
+    const SECTIONS = [
+        { id: 'desktop', label: 'Desktop Type' },
+        { id: 'profile', label: 'Benutzerdaten' },
+        { id: 'apps', label: 'App-Installation' },
+        { id: 'widgets', label: 'Widget-Installation' },
+    ];
+
+    const escapeHtml = (value) => String(value)
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+
+    const clone = (value) => JSON.parse(JSON.stringify(value));
+
+    const sameSelection = (left, right) => {
+        const nextLeft = [...left].sort();
+        const nextRight = [...right].sort();
+
+        return JSON.stringify(nextLeft) === JSON.stringify(nextRight);
+    };
+
+    const summarizeSection = (sectionId) => {
+        if (sectionId === 'desktop') {
+            return 'Windows-aehnlicher Standard fuer Desktop-Typ und Skin-Auswahl.';
+        }
+
+        if (sectionId === 'profile') {
+            return 'Lokales Profil fuer Name, E-Mail, Telefon und spaetere LDAP-/Keycloak-Synchronisierung.';
+        }
+
+        if (sectionId === 'apps') {
+            return 'Bestimmt, welche Desktop-Apps fuer diesen Benutzer sichtbar bleiben.';
+        }
+
+        return 'Steuert, welche Widgets in der rechten Leiste des Desktops aktiv sind.';
+    };
+
+    const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
+        const isActive = state.draft.desktop.active_skin === skin.skin_id;
+
+        return `
+            <button
+                class="usm-choice${isActive ? ' is-active' : ''}"
+                type="button"
+                data-action="select-skin"
+                data-skin-id="${escapeHtml(skin.skin_id)}"
+            >
+                <strong>${escapeHtml(skin.label)}</strong>
+                <p>${escapeHtml(summarizeSkin(skin.skin_id))}</p>
+            </button>
+        `;
+    }).join('');
+
+    const summarizeSkin = (skinId) => {
+        if (skinId === 'apple') {
+            return 'Top-Bar, rechte Icon-Anordnung und Finder-nahe Fensterelemente.';
+        }
+
+        if (skinId === 'linux') {
+            return 'Klassische Arbeitsflaeche mit neutralem Fensterstil und Linux-Taskbar.';
+        }
+
+        return 'Standardisiertes Control-Panel-Muster mit Windows-naher Einstellungslogik.';
+    };
+
+    const renderAppItems = (state) => state.bootstrap.options.apps.map((app) => {
+        const checked = state.draft.apps.enabled_ids.includes(app.app_id);
+
+        return `
+            <label class="usm-item">
+                <input
+                    type="checkbox"
+                    data-action="toggle-app"
+                    data-app-id="${escapeHtml(app.app_id)}"
+                    ${checked ? 'checked' : ''}
+                    ${app.required ? 'disabled' : ''}
+                >
+                <span class="usm-item-main">
+                    <strong>${escapeHtml(app.title)}</strong>
+                    <p>${escapeHtml(app.summary || '')}</p>
+                    <span class="usm-item-meta">${app.required ? 'Pflicht-App' : 'Optional sichtbar'}</span>
+                </span>
+            </label>
+        `;
+    }).join('');
+
+    const renderWidgetItems = (state) => state.bootstrap.options.widgets.map((widget) => {
+        const checked = state.draft.widgets.active_ids.includes(widget.widget_id);
+
+        return `
+            <label class="usm-item">
+                <input
+                    type="checkbox"
+                    data-action="toggle-widget"
+                    data-widget-id="${escapeHtml(widget.widget_id)}"
+                    ${checked ? 'checked' : ''}
+                >
+                <span class="usm-item-main">
+                    <strong>${escapeHtml(widget.title)}</strong>
+                    <p>${escapeHtml(widget.summary || '')}</p>
+                    <span class="usm-item-meta">${widget.default_enabled ? 'Standard-Widget' : 'Optionales Widget'}</span>
+                </span>
+            </label>
+        `;
+    }).join('');
+
+    const renderProfileFields = (state) => `
+        <div class="usm-grid">
+            ${renderField('name', 'Name', state.draft.profile.name)}
+            ${renderField('email', 'E-Mail', state.draft.profile.email, 'email')}
+            ${renderField('phone', 'Telefon', state.draft.profile.phone, 'tel')}
+            ${renderField('birthdate', 'Geburtsdatum', state.draft.profile.birthdate, 'date')}
+            ${renderField('title', 'Titel', state.draft.profile.title)}
+            ${renderField('department', 'Abteilung', state.draft.profile.department)}
+            ${renderField('city', 'Ort', state.draft.profile.city)}
+            ${renderField('website', 'Website', state.draft.profile.website, 'url')}
+        </div>
+        <div class="usm-field">
+            <label class="usm-label" for="usm-notes">Notizen</label>
+            <textarea id="usm-notes" class="usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
+        </div>
+    `;
+
+    const renderField = (fieldId, label, value, type = 'text') => `
+        <div class="usm-field">
+            <label class="usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
+            <input
+                id="usm-${escapeHtml(fieldId)}"
+                class="usm-input"
+                type="${escapeHtml(type)}"
+                data-field="profile.${escapeHtml(fieldId)}"
+                value="${escapeHtml(value || '')}"
+            >
+        </div>
+    `;
+
+    const sectionContent = (state) => {
+        if (state.activeSection === 'desktop') {
+            return `
+                <section class="usm-card">
+                    <p class="usm-kicker">Desktop Type</p>
+                    <h2>Skin-Auswahl</h2>
+                    <p class="usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
+                    <div class="usm-choice-grid">
+                        ${renderSkinChoices(state)}
+                    </div>
+                </section>
+            `;
+        }
+
+        if (state.activeSection === 'profile') {
+            return `
+                <section class="usm-card">
+                    <p class="usm-kicker">Benutzerdaten</p>
+                    <h2>Persoenliches Profil</h2>
+                    <p class="usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
+                    ${renderProfileFields(state)}
+                </section>
+            `;
+        }
+
+        if (state.activeSection === 'apps') {
+            return `
+                <section class="usm-card">
+                    <p class="usm-kicker">App-Auswahl</p>
+                    <h2>Sichtbare Desktop-Apps</h2>
+                    <p class="usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
+                    <div class="usm-list">
+                        ${renderAppItems(state)}
+                    </div>
+                </section>
+            `;
+        }
+
+        return `
+            <section class="usm-card">
+                <p class="usm-kicker">Widget-Auswahl</p>
+                <h2>Aktive Widget-Leiste</h2>
+                <p class="usm-copy">Widgets bleiben Teil der Desktop-Mechanik und werden hier nur benutzerbezogen ein- oder ausgeblendet.</p>
+                <div class="usm-list">
+                    ${renderWidgetItems(state)}
+                </div>
+            </section>
+        `;
+    };
+
+    const renderApp = (root, state) => {
+        if (state.loading) {
+            root.innerHTML = '<div class="usm-loading"><p class="usm-copy">Einstellungen werden geladen.</p></div>';
+            return;
+        }
+
+        if (state.error && !state.bootstrap) {
+            root.innerHTML = `<div class="usm-error-state"><p class="usm-message is-error">${escapeHtml(state.error)}</p></div>`;
+            return;
+        }
+
+        root.innerHTML = `
+            <div class="usm-shell">
+                <div class="usm-frame">
+                    <aside class="usm-nav">
+                        <div class="usm-brand">
+                            <p class="usm-kicker">Setup</p>
+                            <h1>User Self Management</h1>
+                            <p>Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und Widgets.</p>
+                        </div>
+                        <div class="usm-nav-list">
+                            ${SECTIONS.map((section) => `
+                                <button
+                                    class="usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
+                                    type="button"
+                                    data-action="open-section"
+                                    data-section-id="${escapeHtml(section.id)}"
+                                >
+                                    <strong>${escapeHtml(section.label)}</strong>
+                                    <span class="usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
+                                </button>
+                            `).join('')}
+                        </div>
+                    </aside>
+                    <main class="usm-main">
+                        <div class="usm-panel">
+                            <section class="usm-hero">
+                                <div>
+                                    <p class="usm-kicker">Desktop Setup</p>
+                                    <h2 class="usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
+                                    <p class="usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
+                                </div>
+                                <div class="usm-pill-row">
+                                    <span class="usm-pill">LDAP: geplant</span>
+                                    <span class="usm-pill">Keycloak: geplant</span>
+                                    <span class="usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
+                                </div>
+                            </section>
+                            ${sectionContent(state)}
+                            <section class="usm-actions">
+                                <div>
+                                    <p class="usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
+                                    <p class="usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
+                                </div>
+                                <button class="usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
+                                    ${state.saving ? 'Speichert ...' : 'Aenderungen speichern'}
+                                </button>
+                            </section>
+                        </div>
+                    </main>
+                </div>
+            </div>
+        `;
+    };
+
+    const sectionTitle = (sectionId) => {
+        const current = SECTIONS.find((section) => section.id === sectionId);
+        return current ? current.label : 'Setup';
+    };
+
+    const setDraftValue = (draft, path, value) => {
+        const segments = path.split('.');
+        let cursor = draft;
+
+        segments.slice(0, -1).forEach((segment) => {
+            cursor = cursor[segment];
+        });
+
+        cursor[segments[segments.length - 1]] = value;
+    };
+
+    const toggleSelection = (collection, value) => {
+        const next = new Set(collection);
+
+        if (next.has(value)) {
+            next.delete(value);
+        } else {
+            next.add(value);
+        }
+
+        return Array.from(next);
+    };
+
+    const buildPatch = (state) => ({
+        profile: state.draft.profile,
+        desktop: {
+            active_skin: state.draft.desktop.active_skin,
+        },
+        apps: {
+            enabled_ids: state.draft.apps.enabled_ids,
+        },
+        widgets: {
+            active_ids: state.draft.widgets.active_ids,
+        },
+    });
+
+    const requiresReload = (before, after) => before.desktop.active_skin !== after.desktop.active_skin
+        || !sameSelection(before.apps.enabled_ids, after.apps.enabled_ids);
+
+    const attachInteractions = (root, state, options) => {
+        root.addEventListener('click', async (event) => {
+            const button = event.target instanceof Element ? event.target.closest('[data-action]') : null;
+
+            if (!button) {
+                return;
+            }
+
+            const action = button.dataset.action;
+
+            if (action === 'open-section') {
+                state.activeSection = button.dataset.sectionId || 'desktop';
+                renderApp(root, state);
+                return;
+            }
+
+            if (action === 'select-skin') {
+                state.draft.desktop.active_skin = button.dataset.skinId || state.draft.desktop.active_skin;
+                renderApp(root, state);
+                return;
+            }
+
+            if (action === 'save-settings') {
+                if (!options.apiBase || state.saving) {
+                    return;
+                }
+
+                state.saving = true;
+                state.error = '';
+                state.success = '';
+                renderApp(root, state);
+
+                try {
+                    const before = clone(state.bootstrap.preferences);
+                    const response = await window.fetch(options.apiBase, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            Accept: 'application/json',
+                        },
+                        body: JSON.stringify(buildPatch(state)),
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`save-failed:${response.status}`);
+                    }
+
+                    const payload = await response.json();
+                    const after = payload.preferences;
+                    state.bootstrap = payload;
+                    state.draft = clone(after);
+                    state.success = payload.meta?.requires_reload
+                        ? 'Gespeichert. Desktop wird fuer Skin- oder App-Aenderungen neu geladen.'
+                        : 'Einstellungen wurden gespeichert.';
+                    state.saving = false;
+                    renderApp(root, state);
+
+                    if (window.desktopShell?.dispatchUserSettingsUpdate) {
+                        window.desktopShell.dispatchUserSettingsUpdate({
+                            preferences: after,
+                            requiresReload: payload.meta?.requires_reload || requiresReload(before, after),
+                        });
+                    }
+
+                    return;
+                } catch (error) {
+                    state.saving = false;
+                    state.error = 'Speichern fehlgeschlagen. Die lokalen Einstellungen bleiben unveraendert.';
+                    renderApp(root, state);
+                    return;
+                }
+            }
+        });
+
+        root.addEventListener('change', (event) => {
+            const target = event.target;
+
+            if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
+                return;
+            }
+
+            if (target.dataset.field) {
+                setDraftValue(state.draft, target.dataset.field, target.value);
+                return;
+            }
+
+            if (target.dataset.appId) {
+                state.draft.apps.enabled_ids = toggleSelection(state.draft.apps.enabled_ids, target.dataset.appId);
+                renderApp(root, state);
+                return;
+            }
+
+            if (target.dataset.widgetId) {
+                state.draft.widgets.active_ids = toggleSelection(state.draft.widgets.active_ids, target.dataset.widgetId);
+                renderApp(root, state);
+            }
+        });
+    };
+
+    window.initUserSelfManagementApp = (root, options = {}) => {
+        if (!(root instanceof HTMLElement) || root.dataset.usmInitialized === 'true') {
+            return;
+        }
+
+        root.dataset.usmInitialized = 'true';
+
+        const state = {
+            loading: true,
+            saving: false,
+            error: '',
+            success: '',
+            activeSection: 'desktop',
+            bootstrap: null,
+            draft: null,
+        };
+
+        attachInteractions(root, state, options);
+        renderApp(root, state);
+
+        if (!options.apiBase) {
+            state.loading = false;
+            state.error = 'Die Setup-API ist nicht konfiguriert.';
+            renderApp(root, state);
+            return;
+        }
+
+        window.fetch(options.apiBase, {
+            headers: {
+                Accept: 'application/json',
+            },
+        })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`load-failed:${response.status}`);
+                }
+
+                return response.json();
+            })
+            .then((payload) => {
+                state.loading = false;
+                state.bootstrap = payload;
+                state.draft = clone(payload.preferences);
+                renderApp(root, state);
+            })
+            .catch(() => {
+                state.loading = false;
+                state.error = 'Die Einstellungen konnten nicht geladen werden.';
+                renderApp(root, state);
+            });
+    };
+})();

public/assets/desktop/desktop.css

@@ -284,6 +284,28 @@ h1 {
     margin-bottom: 10px;
 }
 
+.widget-card-actions {
+    margin-top: 14px;
+}
+
+.widget-card-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 36px;
+    padding: 0 14px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.82);
+    color: #f8fafc;
+    font: inherit;
+    cursor: pointer;
+}
+
+.widget-card-action:hover {
+    background: #0f172a;
+}
+
 .widget-badge {
     display: inline-grid;
     place-items: center;

public/assets/desktop/desktop.js

@@ -12,14 +12,14 @@ if (payloadNode) {
     const startMenuApps = document.getElementById('start-menu-apps');
     const startMenuWidgets = document.getElementById('start-menu-widgets');
     const startMenuActions = document.getElementById('start-menu-actions');
-    const traySkins = document.getElementById('tray-skins');
-    const traySkinsTop = document.getElementById('tray-skins-top');
     const clockNode = document.getElementById('clock');
     const clockTopNode = document.getElementById('clock-top');
     const windows = new Map();
     const activeWidgets = new Set(payload.widgets.active_ids);
     const activeSkin = payload.meta.active_skin;
     const skinProfile = payload.meta.skin_profile || {};
+    const settingsApi = payload.desktop.settings_api || '';
+    let currentUserPreferences = payload.desktop.user_preferences || {};
     const maximizeOverSystemBar = Boolean(skinProfile.maximize_over_system_bar);
     const storageScope = payload.desktop.storage_scope || 'guest';
     const storageKey = `desktop.kusche.berlin.window-state.${storageScope}`;
@@ -172,13 +172,40 @@ if (payloadNode) {
             return;
         }
 
-        const displayName = payload.session?.display_name;
+        const displayName = currentUserPreferences?.profile?.name || payload.session?.display_name;
 
         if (typeof displayName === 'string' && displayName.trim() !== '') {
             accountNode.textContent = displayName;
         }
     };
 
+    const findAppById = (appId) => payload.apps.find((app) => app.app_id === appId) || null;
+
+    const dispatchUserSettingsUpdate = (detail) => {
+        window.dispatchEvent(new CustomEvent('desktop:user-settings-updated', { detail }));
+    };
+
+    const persistSettingsPatch = async (patch) => {
+        if (!settingsApi) {
+            return null;
+        }
+
+        const response = await window.fetch(settingsApi, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+            },
+            body: JSON.stringify(patch),
+        });
+
+        if (!response.ok) {
+            throw new Error(`settings-save-failed:${response.status}`);
+        }
+
+        return response.json();
+    };
+
     const buildTaskbarButtonContent = (record) => `
         <span class="taskbar-app-button-badge">${buildAppIconMarkup(record.definition, 'taskbar-app-icon')}</span>
         <span class="taskbar-app-button-label">${escapeHtml(record.title)}</span>
@@ -236,6 +263,14 @@ if (payloadNode) {
             `;
         }
 
+        if (definition.content_mode === 'native-module' && definition.app_id === 'user-self-management') {
+            return `
+                <div class="window-content window-content--embedded window-content--module">
+                    <div id="user-self-management-app" class="window-module-host" data-module-app="user-self-management"></div>
+                </div>
+            `;
+        }
+
         if (definition.content_mode === 'iframe' && typeof definition.entry_route === 'string' && definition.entry_route !== '') {
             const title = escapeHtml(definition.title);
             const src = escapeHtml(definition.entry_route);
@@ -557,30 +592,6 @@ if (payloadNode) {
         }
     };
 
-    const navigateToSkin = (skin) => {
-        window.location.search = `?skin=${encodeURIComponent(skin)}`;
-    };
-
-    const renderTraySkins = () => {
-        [traySkins, traySkinsTop].forEach((container) => {
-            if (!container) {
-                return;
-            }
-
-            container.innerHTML = '';
-
-            payload.meta.available_skins.forEach((skin) => {
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = `tray-skin-button${skin === activeSkin ? ' is-active' : ''}`;
-                button.textContent = skin.slice(0, 3).toUpperCase();
-                button.title = skin;
-                button.addEventListener('click', () => navigateToSkin(skin));
-                container.appendChild(button);
-            });
-        });
-    };
-
     const focusWindow = (windowId) => {
         windows.forEach((record) => {
             record.node.classList.remove('is-focused');
@@ -993,6 +1004,17 @@ if (payloadNode) {
             }
         }
 
+        if (moduleHost && definition.content_mode === 'native-module' && definition.app_id === 'user-self-management') {
+            if (typeof window.initUserSelfManagementApp === 'function') {
+                window.initUserSelfManagementApp(moduleHost, {
+                    apiBase: settingsApi,
+                    activeSkin,
+                });
+            } else {
+                moduleHost.innerHTML = '<div class="window-module-error">User Self Management konnte nicht initialisiert werden.</div>';
+            }
+        }
+
         node.querySelectorAll('.window-action').forEach((action) => {
             action.addEventListener('click', (event) => {
                 event.stopPropagation();
@@ -1060,6 +1082,15 @@ if (payloadNode) {
             .forEach((widget) => {
                 const card = document.createElement('article');
                 card.className = 'widget-card';
+                const actionMarkup = widget.launch_app_id
+                    ? `
+                        <div class="widget-card-actions">
+                            <button class="widget-card-action" type="button" data-app-id="${escapeHtml(widget.launch_app_id)}">
+                                ${escapeHtml(widget.action_label || 'Oeffnen')}
+                            </button>
+                        </div>
+                    `
+                    : '';
                 card.innerHTML = `
                     <div class="widget-card-header">
                         <div>
@@ -1069,7 +1100,19 @@ if (payloadNode) {
                         <span class="widget-badge">${widget.icon || 'WG'}</span>
                     </div>
                     <p>${widget.content || ''}</p>
+                    ${actionMarkup}
                 `;
+
+                const actionButton = card.querySelector('.widget-card-action');
+                if (actionButton instanceof HTMLButtonElement && widget.launch_app_id) {
+                    actionButton.addEventListener('click', () => {
+                        const app = findAppById(widget.launch_app_id);
+                        if (app) {
+                            openApp(app);
+                        }
+                    });
+                }
+
                 widgetZoneRoot.appendChild(card);
             });
     };
@@ -1104,14 +1147,30 @@ if (payloadNode) {
 
                 renderWidgets();
                 renderMenuWidgets();
+                persistSettingsPatch({
+                    widgets: {
+                        active_ids: Array.from(activeWidgets),
+                    },
+                }).catch(() => {
+                    // Keep current desktop state even if persistence fails.
+                });
             });
             startMenuWidgets.appendChild(button);
         });
     };
 
     const runQuickAction = (actionId) => {
+        if (actionId === 'open-user-self-management') {
+            const userSetup = findAppById('user-self-management');
+            if (userSetup) {
+                openApp(userSetup);
+                closeStartMenu();
+            }
+            return;
+        }
+
         if (actionId === 'open-public-dashboard') {
-            const publicDashboard = payload.apps.find((app) => app.app_id === 'public-dashboard');
+            const publicDashboard = findAppById('public-dashboard');
             if (publicDashboard) {
                 openApp(publicDashboard);
             }
@@ -1128,14 +1187,13 @@ if (payloadNode) {
 
             renderWidgets();
             renderMenuWidgets();
-            return;
-        }
-
-        if (actionId === 'cycle-skin') {
-            const skins = payload.meta.available_skins;
-            const currentIndex = skins.indexOf(activeSkin);
-            const nextSkin = skins[(currentIndex + 1) % skins.length];
-            navigateToSkin(nextSkin);
+            persistSettingsPatch({
+                widgets: {
+                    active_ids: Array.from(activeWidgets),
+                },
+            }).catch(() => {
+                // Keep current desktop state even if persistence fails.
+            });
         }
     };
 
@@ -1235,9 +1293,33 @@ if (payloadNode) {
         setStartMenuOpen(isClosed);
     });
 
+    window.addEventListener('desktop:user-settings-updated', (event) => {
+        const preferences = event.detail?.preferences;
+        const requiresReload = Boolean(event.detail?.requiresReload);
+
+        if (preferences && typeof preferences === 'object') {
+            currentUserPreferences = preferences;
+
+            const nextWidgetIds = Array.isArray(preferences.widgets?.active_ids)
+                ? preferences.widgets.active_ids
+                : [];
+
+            activeWidgets.clear();
+            nextWidgetIds.forEach((widgetId) => activeWidgets.add(widgetId));
+            renderWidgets();
+            renderMenuWidgets();
+            updateSessionDisplay();
+        }
+
+        if (requiresReload) {
+            const nextSkin = preferences?.desktop?.active_skin || activeSkin;
+            const nextUrl = `${window.location.pathname}?skin=${encodeURIComponent(nextSkin)}`;
+            window.location.assign(nextUrl);
+        }
+    });
+
     renderWidgets();
     renderStartMenu();
-    renderTraySkins();
     setStartMenuOpen(false);
     measureDesktopBounds();
     applyStoredIconLayout();
@@ -1270,4 +1352,14 @@ if (payloadNode) {
     });
 
     window.refreshDesktopIconContrast = applyDesktopIconContrast;
+    window.desktopShell = {
+        openAppById: (appId) => {
+            const app = findAppById(appId);
+            if (app) {
+                openApp(app);
+            }
+        },
+        persistSettingsPatch,
+        dispatchUserSettingsUpdate,
+    };
 }