adsd

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) => {