adsd

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

@@ -3,7 +3,7 @@
         { id: 'desktop', label: 'Desktop Type' },
         { id: 'profile', label: 'Benutzerdaten' },
         { id: 'apps', label: 'App-Installation' },
-        { id: 'widgets', label: 'Widget-Installation' },
+        { id: 'widgets', label: 'Infobereich' },
     ];
 
     const escapeHtml = (value) => String(value)
@@ -35,7 +35,7 @@
             return 'Bestimmt, welche Desktop-Apps fuer diesen Benutzer sichtbar bleiben.';
         }
 
-        return 'Steuert, welche Widgets in der rechten Leiste des Desktops aktiv sind.';
+        return 'Steuert, welche Elemente im rechten Infobereich des Desktops aktiv sind.';
     };
 
     const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
@@ -101,7 +101,7 @@
                 <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 class="usm-item-meta">${widget.default_enabled ? 'Standardbereich' : 'Optionaler Bereich'}</span>
                 </span>
             </label>
         `;
@@ -177,9 +177,9 @@
 
         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>
+                <p class="usm-kicker">Infobereich</p>
+                <h2>Rechter Desktopbereich</h2>
+                <p class="usm-copy">Diese Inhalte liegen aktuell im rechten Infobereich des Desktops und werden hier benutzerbezogen ein- oder ausgeblendet.</p>
                 <div class="usm-list">
                     ${renderWidgetItems(state)}
                 </div>
@@ -205,7 +205,7 @@
                         <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>
+                            <p>Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
                         </div>
                         <div class="usm-nav-list">
                             ${SECTIONS.map((section) => `

public/assets/desktop/desktop.css

@@ -814,27 +814,6 @@ h1 {
     white-space: nowrap;
 }
 
-.tray-skins {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.tray-skin-button {
-    border: 0;
-    border-radius: 999px;
-    padding: 8px 10px;
-    background: rgba(255, 255, 255, 0.08);
-    color: inherit;
-    cursor: pointer;
-    font-size: 12px;
-}
-
-.tray-skin-button.is-active {
-    background: var(--accent);
-    color: #0f172a;
-}
-
 .tray-pill {
     padding: 8px 10px;
     border-radius: 999px;
@@ -842,22 +821,55 @@ h1 {
     font-size: 13px;
 }
 
-.tray-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 12px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.08);
+.tray-pill-button {
+    border: 0;
     color: inherit;
-    font-size: 13px;
-    text-decoration: none;
-    transition: background-color 140ms ease, transform 140ms ease;
+    font: inherit;
+    cursor: pointer;
 }
 
-.tray-action:hover {
+.tray-pill-button:hover,
+.tray-pill-button[aria-expanded="true"] {
     background: rgba(255, 255, 255, 0.16);
-    transform: translateY(-1px);
+}
+
+.tray-menu {
+    position: absolute;
+    right: 16px;
+    bottom: calc(100% + 12px);
+    display: grid;
+    gap: 8px;
+    min-width: 220px;
+    padding: 10px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    background: rgba(15, 23, 42, 0.94);
+    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
+    backdrop-filter: blur(20px);
+}
+
+.tray-menu[hidden] {
+    display: none;
+}
+
+.tray-menu-entry {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 40px;
+    padding: 10px 12px;
+    border: 0;
+    border-radius: 12px;
+    background: transparent;
+    color: #f8fafc;
+    font: inherit;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.tray-menu-entry:hover {
+    background: rgba(255, 255, 255, 0.12);
 }
 
 .window-content p:last-child {

public/assets/desktop/desktop.js

@@ -12,6 +12,7 @@ if (payloadNode) {
     const startMenuApps = document.getElementById('start-menu-apps');
     const startMenuWidgets = document.getElementById('start-menu-widgets');
     const startMenuActions = document.getElementById('start-menu-actions');
+    const accountMenu = document.getElementById('tray-account-menu');
     const clockNode = document.getElementById('clock');
     const clockTopNode = document.getElementById('clock-top');
     const windows = new Map();
@@ -179,6 +180,17 @@ if (payloadNode) {
         }
     };
 
+    const setAccountMenuOpen = (isOpen) => {
+        const accountButton = document.querySelector('.tray-pill[data-tray-id="account"]');
+
+        if (!(accountMenu instanceof HTMLElement) || !(accountButton instanceof HTMLElement)) {
+            return;
+        }
+
+        accountMenu.hidden = !isOpen;
+        accountButton.setAttribute('aria-expanded', String(isOpen));
+    };
+
     const findAppById = (appId) => payload.apps.find((app) => app.app_id === appId) || null;
 
     const dispatchUserSettingsUpdate = (detail) => {
@@ -614,6 +626,14 @@ if (payloadNode) {
         setStartMenuOpen(false);
     };
 
+    const openAccountSettings = () => {
+        const app = findAppById('user-self-management');
+        if (app) {
+            openApp(app);
+        }
+        setAccountMenuOpen(false);
+    };
+
     const applyWindowLayout = (record) => {
         const { x, y, width, height } = record.layout;
         record.node.style.left = `${x}px`;
@@ -1275,11 +1295,16 @@ if (payloadNode) {
         if (!(event.target instanceof Element) || !event.target.closest('.desktop-context-menu')) {
             closeDesktopContextMenu();
         }
+
+        if (!(event.target instanceof Element) || !event.target.closest('.tray-pill[data-tray-id="account"], #tray-account-menu')) {
+            setAccountMenuOpen(false);
+        }
     });
 
     document.addEventListener('keydown', (event) => {
         if (event.key === 'Escape') {
             closeDesktopContextMenu();
+            setAccountMenuOpen(false);
         }
     });
 
@@ -1291,6 +1316,41 @@ if (payloadNode) {
 
         const isClosed = startMenu.hasAttribute('hidden');
         setStartMenuOpen(isClosed);
+        setAccountMenuOpen(false);
+    });
+
+    document.querySelector('.tray-pill[data-tray-id="account"]')?.addEventListener('click', () => {
+        if (!(accountMenu instanceof HTMLElement)) {
+            return;
+        }
+
+        setStartMenuOpen(false);
+        setAccountMenuOpen(accountMenu.hidden);
+    });
+
+    accountMenu?.addEventListener('click', (event) => {
+        const target = event.target instanceof Element ? event.target.closest('[data-account-action]') : null;
+
+        if (!target) {
+            return;
+        }
+
+        const action = target.getAttribute('data-account-action');
+
+        if (action === 'settings') {
+            event.preventDefault();
+            openAccountSettings();
+            return;
+        }
+
+        if (action === 'login') {
+            event.preventDefault();
+            const loginApp = findAppById('desktop-login');
+            if (loginApp) {
+                openApp(loginApp);
+            }
+            setAccountMenuOpen(false);
+        }
     });
 
     window.addEventListener('desktop:user-settings-updated', (event) => {