Self management

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,
+    };
 }