csdfsdf

2026-06-20 01:06:46 +02:00
parent 2b96be77fd
commit 162ec5322f
9 changed files with 643 additions and 142 deletions
--- a/public/assets/desktop/desktop.css
+++ b/public/assets/desktop/desktop.css
@@ -953,16 +953,18 @@ h1 {
    bottom: calc(var(--taskbar-height) + 28px);
    z-index: 130;
    display: grid;
-    align-content: start;
-    grid-template-columns: minmax(240px, 280px) minmax(280px, 360px);
-    gap: 16px;
-    width: min(720px, calc(100% - 48px));
-    padding: 18px;
-    border-radius: 24px;
-    background: rgba(15, 23, 42, 0.82);
-    border: 1px solid var(--shell-border);
-    box-shadow: var(--shadow);
-    backdrop-filter: blur(24px);
+    align-content: stretch;
+    grid-template-columns: minmax(220px, 250px) minmax(180px, 220px) minmax(320px, 1fr);
+    gap: 0;
+    width: min(920px, calc(100% - 48px));
+    min-height: 560px;
+    padding: 0;
+    border-radius: 22px;
+    background: rgba(28, 28, 32, 0.96);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.42);
+    overflow: hidden;
+    backdrop-filter: blur(18px);
 }

 .start-menu::before {
@@ -977,59 +979,159 @@ h1 {
    display: none !important;
 }

-.start-menu-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-    grid-column: 1 / -1;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.start-menu-header h2 {
-    margin-bottom: 0;
-}
-
-.start-menu-column,
-.start-menu-block {
+.start-menu-user-settings,
+.start-menu-function-area,
+.start-menu-selection-area {
    display: grid;
-    gap: 12px;
-}
-
-.start-menu-column {
    align-content: start;
 }

+.start-menu-user-settings {
+    grid-template-rows: auto auto 1fr auto;
+    gap: 16px;
+    padding: 20px 16px 16px;
+    background: linear-gradient(180deg, rgba(45, 45, 52, 0.98), rgba(32, 32, 38, 0.98));
+    border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.start-menu-function-area {
+    gap: 14px;
+    padding: 20px 14px;
+    background: rgba(36, 36, 42, 0.98);
+    border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.start-menu-selection-area {
+    gap: 14px;
+    padding: 20px 16px;
+    background: linear-gradient(180deg, rgba(40, 40, 46, 0.98), rgba(33, 33, 38, 0.98));
+}
+
+.start-menu-section-title {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: rgba(248, 250, 252, 0.66);
+}
+
+.start-menu-settings-button,
+.start-menu-user-card,
+.start-menu-session-action,
+.start-menu-function,
 .start-menu-entry {
    display: grid;
-    grid-template-columns: 44px minmax(0, 1fr) auto;
+    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 18px;
-    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-align: left;
    cursor: pointer;
+    font: inherit;
+    text-decoration: none;
+    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
 }

-.start-menu-entry:hover {
-    background: rgba(255, 255, 255, 0.18);
+.start-menu-settings-button:hover,
+.start-menu-user-card:hover,
+.start-menu-session-action:hover,
+.start-menu-function:hover,
+.start-menu-entry:hover,
+.start-menu-function.is-active {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.12);
 }

+.start-menu-function.is-active {
+    transform: translateX(2px);
+}
+
+.start-menu-settings-icon,
+.start-menu-function-icon,
+.start-menu-session-icon,
+.start-menu-entry-badge,
+.start-menu-user-avatar {
+    display: inline-grid;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.08);
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.start-menu-user-card {
+    grid-template-columns: 56px minmax(0, 1fr);
+    align-items: center;
+    padding: 16px;
+}
+
+.start-menu-user-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #60a5fa, #2563eb);
+    color: #eff6ff;
+    font-size: 15px;
+    letter-spacing: 0.04em;
+}
+
+.start-menu-user-copy,
+.start-menu-function-copy {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+}
+
+.start-menu-user-copy strong,
+.start-menu-function-copy strong,
 .start-menu-entry strong,
-.start-menu-entry span {
+.start-menu-entry span,
+.start-menu-session-action span {
    display: block;
 }

+.start-menu-user-copy small,
+.start-menu-function-copy small,
 .start-menu-entry small {
-    opacity: 0.7;
+    color: rgba(248, 250, 252, 0.66);
+}
+
+.start-menu-function-list,
+.start-menu-selection-list {
+    display: grid;
+    gap: 10px;
+    align-content: start;
+}
+
+.start-menu-selection-list {
+    max-height: 520px;
+    padding-right: 4px;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+
+.start-menu-selection-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.start-menu-selection-list::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.start-menu-entry {
+    grid-template-columns: 44px minmax(0, 1fr) auto;
+    background: rgba(255, 255, 255, 0.05);
 }

-.start-menu-entry-badge,
 .start-menu-entry-toggle {
    display: inline-grid;
    place-items: center;
@@ -1041,9 +1143,18 @@ h1 {
    font-weight: 700;
 }

-.start-menu-entry-toggle.is-active {
-    background: var(--accent);
-    color: #0f172a;
+.start-menu-session-action {
+    margin-top: auto;
+}
+
+.start-menu-session-action.is-logout .start-menu-session-icon {
+    background: rgba(220, 38, 38, 0.2);
+    color: #fca5a5;
+}
+
+.start-menu-session-action.is-logout:hover {
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.22);
 }

 .taskbar-apps {
@@ -1204,9 +1315,16 @@ h1 {
        bottom: 88px;
        transform: none;
        width: auto;
+        min-height: 0;
        grid-template-columns: 1fr;
    }

+    .start-menu-user-settings,
+    .start-menu-function-area {
+        border-right: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
    .window-layer {
        position: static;
        inset: auto;
--- a/public/assets/desktop/desktop.js
+++ b/public/assets/desktop/desktop.js
@@ -10,8 +10,12 @@ if (payloadNode) {
    const startButton = document.getElementById('start-button');
    const startMenu = document.getElementById('start-menu');
    const startMenuApps = document.getElementById('start-menu-apps');
-    const startMenuWidgets = document.getElementById('start-menu-widgets');
-    const startMenuActions = document.getElementById('start-menu-actions');
+    const startMenuFunctions = document.getElementById('start-menu-functions');
+    const startMenuSettingsButton = document.getElementById('start-menu-settings-button');
+    const startMenuUserCard = document.getElementById('start-menu-user-card');
+    const startMenuUserName = document.getElementById('start-menu-user-name');
+    const startMenuUserAvatar = document.getElementById('start-menu-user-avatar');
+    const startMenuSessionAction = document.getElementById('start-menu-session-action');
    const accountMenu = document.getElementById('tray-account-menu');
    const clockNode = document.getElementById('clock');
    const clockTopNode = document.getElementById('clock-top');
@@ -30,6 +34,7 @@ if (payloadNode) {
    let sideDesktopInset = 0;
    let bottomDesktopInset = 120;
    let iconContextMenu = null;
+    let activeFunctionArea = 'programs';
    const windowControlsMode = document.body.dataset.windowControls || 'windows';
    let wallpaperImagePromise = null;

@@ -169,15 +174,35 @@ if (payloadNode) {
    const updateSessionDisplay = () => {
        const accountNode = document.querySelector('.tray-pill[data-tray-id="account"]');

-        if (!accountNode) {
-            return;
-        }
-
        const displayName = currentUserPreferences?.profile?.name || payload.session?.display_name;

-        if (typeof displayName === 'string' && displayName.trim() !== '') {
+        if (accountNode && typeof displayName === 'string' && displayName.trim() !== '') {
            accountNode.textContent = displayName;
        }
+
+        if (startMenuUserName && typeof displayName === 'string' && displayName.trim() !== '') {
+            startMenuUserName.textContent = displayName;
+        }
+
+        if (startMenuUserAvatar) {
+            startMenuUserAvatar.textContent = buildInitials(displayName);
+        }
+    };
+
+    const buildInitials = (value) => {
+        const normalized = typeof value === 'string' ? value.trim() : '';
+
+        if (normalized === '') {
+            return 'GU';
+        }
+
+        const parts = normalized.split(/\s+/).filter(Boolean);
+
+        if (parts.length === 1) {
+            return parts[0].slice(0, 2).toUpperCase();
+        }
+
+        return `${parts[0][0] || ''}${parts[1][0] || ''}`.toUpperCase();
    };

    const setAccountMenuOpen = (isOpen) => {
@@ -1137,45 +1162,45 @@ if (payloadNode) {
            });
    };

-    const renderMenuWidgets = () => {
-        if (!startMenuWidgets) {
+    const renderFunctionArea = () => {
+        if (!startMenuFunctions) {
            return;
        }

-        startMenuWidgets.innerHTML = '';
+        startMenuFunctions.querySelectorAll('[data-function-id]').forEach((button) => {
+            const isActive = button instanceof HTMLElement && button.dataset.functionId === activeFunctionArea;
+            button.classList.toggle('is-active', isActive);
+        });
+    };

-        payload.widgets.registry.forEach((widget) => {
+    const renderSelectionArea = () => {
+        if (!startMenuApps) {
+            return;
+        }
+
+        startMenuApps.innerHTML = '';
+
+        if (activeFunctionArea !== 'programs') {
+            return;
+        }
+
+        payload.apps.forEach((app) => {
            const button = document.createElement('button');
            button.type = 'button';
-            button.className = 'start-menu-entry';
+            button.className = 'start-menu-entry start-menu-entry--app';
            button.innerHTML = `
-                <span class="start-menu-entry-badge">${widget.icon || 'WG'}</span>
+                <span class="start-menu-entry-badge">${buildAppIconMarkup(app, 'start-menu-app-icon')}</span>
                <span>
-                    <strong>${widget.title}</strong>
-                    <small>${widget.summary || ''}</small>
-                </span>
-                <span class="start-menu-entry-toggle ${activeWidgets.has(widget.widget_id) ? 'is-active' : ''}">
-                    ${activeWidgets.has(widget.widget_id) ? 'On' : 'Off'}
+                    <strong>${app.title}</strong>
+                    <small>${app.summary || ''}</small>
                </span>
+                <span class="start-menu-entry-toggle">Open</span>
            `;
            button.addEventListener('click', () => {
-                if (activeWidgets.has(widget.widget_id)) {
-                    activeWidgets.delete(widget.widget_id);
-                } else {
-                    activeWidgets.add(widget.widget_id);
-                }
-
-                renderWidgets();
-                renderMenuWidgets();
-                persistSettingsPatch({
-                    widgets: {
-                        active_ids: Array.from(activeWidgets),
-                    },
-                }).catch(() => {
-                    // Keep current desktop state even if persistence fails.
-                });
+                openApp(app);
+                closeStartMenu();
            });
-            startMenuWidgets.appendChild(button);
+            startMenuApps.appendChild(button);
        });
    };

@@ -1193,6 +1218,7 @@ if (payloadNode) {
            const publicDashboard = findAppById('public-dashboard');
            if (publicDashboard) {
                openApp(publicDashboard);
+                closeStartMenu();
            }
            return;
        }
@@ -1206,7 +1232,7 @@ if (payloadNode) {
            }

            renderWidgets();
-            renderMenuWidgets();
+            renderStartMenu();
            persistSettingsPatch({
                widgets: {
                    active_ids: Array.from(activeWidgets),
@@ -1218,49 +1244,12 @@ if (payloadNode) {
    };

    const renderStartMenu = () => {
-        if (!startMenuApps || !startMenuActions) {
+        if (!startMenuApps) {
            return;
        }

-        startMenuApps.innerHTML = '';
-        startMenuActions.innerHTML = '';
-
-        payload.apps.forEach((app) => {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'start-menu-entry';
-            button.innerHTML = `
-                <span class="start-menu-entry-badge">${buildAppIconMarkup(app, 'start-menu-app-icon')}</span>
-                <span>
-                    <strong>${app.title}</strong>
-                    <small>${app.summary || ''}</small>
-                </span>
-                <span class="start-menu-entry-toggle">Open</span>
-            `;
-            button.addEventListener('click', () => {
-                openApp(app);
-                closeStartMenu();
-            });
-            startMenuApps.appendChild(button);
-        });
-
-        payload.menu.quick_actions.forEach((action) => {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'start-menu-entry';
-            button.innerHTML = `
-                <span class="start-menu-entry-badge">QA</span>
-                <span>
-                    <strong>${action.label}</strong>
-                    <small>${action.description}</small>
-                </span>
-                <span class="start-menu-entry-toggle">Run</span>
-            `;
-            button.addEventListener('click', () => runQuickAction(action.action_id));
-            startMenuActions.appendChild(button);
-        });
-
-        renderMenuWidgets();
+        renderFunctionArea();
+        renderSelectionArea();
    };

    payload.apps.forEach((app) => {
@@ -1357,6 +1346,56 @@ if (payloadNode) {
        }
    });

+    startMenuSettingsButton?.addEventListener('click', () => {
+        openAccountSettings();
+    });
+
+    startMenuUserCard?.addEventListener('click', () => {
+        openAccountSettings();
+    });
+
+    startMenuSessionAction?.addEventListener('click', (event) => {
+        const target = event.currentTarget;
+
+        if (!(target instanceof HTMLElement) || target.dataset.sessionAction !== 'login') {
+            return;
+        }
+
+        event.preventDefault();
+        const loginApp = findAppById('desktop-login');
+        if (loginApp) {
+            openApp(loginApp);
+        }
+        closeStartMenu();
+    });
+
+    startMenuFunctions?.addEventListener('click', (event) => {
+        const target = event.target instanceof Element ? event.target.closest('[data-function-id]') : null;
+
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+
+        activeFunctionArea = target.dataset.functionId || 'programs';
+        renderStartMenu();
+    });
+
+    startMenuFunctions?.addEventListener('mouseover', (event) => {
+        const target = event.target instanceof Element ? event.target.closest('[data-function-id]') : null;
+
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+
+        const nextFunctionArea = target.dataset.functionId || 'programs';
+        if (nextFunctionArea === activeFunctionArea) {
+            return;
+        }
+
+        activeFunctionArea = nextFunctionArea;
+        renderStartMenu();
+    });
+
    window.addEventListener('desktop:user-settings-updated', (event) => {
        const preferences = event.detail?.preferences;
        const requiresReload = Boolean(event.detail?.requiresReload);
@@ -1371,8 +1410,8 @@ if (payloadNode) {
            activeWidgets.clear();
            nextWidgetIds.forEach((widgetId) => activeWidgets.add(widgetId));
            renderWidgets();
-            renderMenuWidgets();
            updateSessionDisplay();
+            renderStartMenu();
        }

        if (requiresReload) {