asdasd

2026-06-25 01:56:01 +02:00
parent 99ca2c401c
commit f2357d53b2
3 changed files with 120 additions and 15 deletions
--- a/partials/desktop/shell.php
+++ b/partials/desktop/shell.php
@@ -9,6 +9,7 @@ $skinProfile = $desktopPayload['meta']['skin_profile'];
 $wallpaper = $desktopPayload['desktop']['wallpaper'];
 $debugShellApp = is_array($desktopPayload['shell']['debug_app'] ?? null) ? $desktopPayload['shell']['debug_app'] : null;
 $debugShellLabel = trim((string) ($debugShellApp['label'] ?? 'Debug')) ?: 'Debug';
+$sessionDisplayName = (string) ($desktopPayload['session']['display_name'] ?? 'Gast');

 $assetVersion = static function (string $publicPath): string {
    $filesystemPath = dirname(__DIR__, 2) . '/public' . $publicPath;
@@ -56,6 +57,42 @@ $renderStartIcon = static function (array $profile): string {
        default => '<span class="start-glyph start-glyph-label" aria-hidden="true">' . htmlspecialchars((string) ($profile['taskbar_icon'] ?? 'OS'), ENT_QUOTES) . '</span>',
    };
 };
+$buildInitials = static function (string $value): string {
+    $normalized = trim($value);
+
+    if ($normalized === '') {
+        return 'GU';
+    }
+
+    $parts = preg_split('/\s+/', $normalized) ?: [];
+    $parts = array_values(array_filter($parts, static fn ($part) => trim((string) $part) !== ''));
+
+    if (count($parts) <= 1) {
+        return strtoupper(substr((string) ($parts[0] ?? $normalized), 0, 2));
+    }
+
+    return strtoupper(substr((string) $parts[0], 0, 1) . substr((string) $parts[1], 0, 1));
+};
+$renderTrayVisual = static function (array $trayItem, string $displayName = '') use ($buildInitials): string {
+    $trayId = (string) ($trayItem['id'] ?? '');
+    $appId = (string) ($trayItem['app_id'] ?? '');
+
+    if ($trayId === 'account') {
+        $initials = htmlspecialchars($buildInitials($displayName), ENT_QUOTES);
+
+        return '<span class="tray-avatar" aria-hidden="true">' . $initials . '</span><span class="sr-only">Profil</span>';
+    }
+
+    if ($appId === 'fx-rates') {
+        return '<span class="tray-icon tray-icon--banknote" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><rect x="3" y="6" width="18" height="12" rx="3"></rect><circle cx="12" cy="12" r="2.5"></circle><path d="M7 9h.01M17 15h.01"></path></svg></span><span class="sr-only">FX</span>';
+    }
+
+    if ($trayId === 'gitea-deploy-status') {
+        return '<span class="tray-status-dot" aria-hidden="true"></span><span class="sr-only">Gitea Deploy Status</span>';
+    }
+
+    return htmlspecialchars((string) ($trayItem['label'] ?? ''), ENT_QUOTES);
+};
 ?><!DOCTYPE html>
 <html lang="de">
 <head>
@@ -90,7 +127,7 @@ $renderStartIcon = static function (array $profile): string {
                </div>
                <div class="system-bar-right">
                    <?php if (($desktopPayload['session']['is_admin'] ?? false) === true): ?>
-                        <button class="tray-pill tray-pill-button tray-pill-debug" id="debug-toggle-top" type="button" aria-expanded="false"><?= htmlspecialchars($debugShellLabel, ENT_QUOTES) ?></button>
+                        <button class="tray-pill tray-pill-button tray-pill-debug" id="debug-toggle-top" type="button" aria-expanded="false" title="<?= htmlspecialchars($debugShellLabel, ENT_QUOTES) ?>"><span class="tray-icon tray-icon--bug" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M9 7.5V6a3 3 0 0 1 6 0v1.5"></path><path d="M8 10.5h8a2 2 0 0 1 2 2V15a6 6 0 0 1-12 0v-2.5a2 2 0 0 1 2-2Z"></path><path d="M4 13h3M17 13h3M5.5 8.5l2 1.5M18.5 8.5l-2 1.5M7 18l-2 1.5M17 18l2 1.5"></path></svg></span><span class="sr-only"><?= htmlspecialchars($debugShellLabel, ENT_QUOTES) ?></span></button>
                    <?php endif; ?>
                    <time id="clock-top"></time>
                </div>
@@ -161,15 +198,15 @@ $renderStartIcon = static function (array $profile): string {
                <div class="tray">
                    <?php foreach ($desktopPayload['tray'] as $trayItem): ?>
                        <button
-                            class="tray-pill tray-pill-button<?= (($trayItem['id'] ?? '') === 'gitea-deploy-status') ? ' tray-pill-status tray-pill-status--idle' : '' ?>"
+                            class="tray-pill tray-pill-button<?= (($trayItem['id'] ?? '') === 'gitea-deploy-status') ? ' tray-pill-status tray-pill-status--idle' : '' ?><?= (($trayItem['id'] ?? '') === 'account') ? ' tray-pill-account' : '' ?>"
                            type="button"
                            data-tray-id="<?= htmlspecialchars((string) $trayItem['id'], ENT_QUOTES) ?>"
                            <?php if (!empty($trayItem['app_id'])): ?>data-tray-app-id="<?= htmlspecialchars((string) $trayItem['app_id'], ENT_QUOTES) ?>" title="<?= htmlspecialchars((string) ($trayItem['title'] ?? $trayItem['label'] ?? ''), ENT_QUOTES) ?>"<?php endif; ?>
-                            <?php if (empty($trayItem['app_id']) && !empty($trayItem['title'])): ?>title="<?= htmlspecialchars((string) $trayItem['title'], ENT_QUOTES) ?>"<?php endif; ?>
-                        ><?= htmlspecialchars($trayItem['label'], ENT_QUOTES) ?></button>
+                            <?php if (($trayItem['id'] ?? '') === 'account'): ?>title="<?= htmlspecialchars($sessionDisplayName, ENT_QUOTES) ?>"<?php elseif (empty($trayItem['app_id']) && !empty($trayItem['title'])): ?>title="<?= htmlspecialchars((string) $trayItem['title'], ENT_QUOTES) ?>"<?php endif; ?>
+                        ><?= $renderTrayVisual($trayItem, $sessionDisplayName) ?></button>
                    <?php endforeach; ?>
                    <?php if (($desktopPayload['session']['is_admin'] ?? false) === true): ?>
-                        <button class="tray-pill tray-pill-button tray-pill-debug" id="debug-toggle" type="button" aria-expanded="false"><?= htmlspecialchars($debugShellLabel, ENT_QUOTES) ?></button>
+                        <button class="tray-pill tray-pill-button tray-pill-debug" id="debug-toggle" type="button" aria-expanded="false" title="<?= htmlspecialchars($debugShellLabel, ENT_QUOTES) ?>"><span class="tray-icon tray-icon--bug" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M9 7.5V6a3 3 0 0 1 6 0v1.5"></path><path d="M8 10.5h8a2 2 0 0 1 2 2V15a6 6 0 0 1-12 0v-2.5a2 2 0 0 1 2-2Z"></path><path d="M4 13h3M17 13h3M5.5 8.5l2 1.5M18.5 8.5l-2 1.5M7 18l-2 1.5M17 18l2 1.5"></path></svg></span><span class="sr-only"><?= htmlspecialchars($debugShellLabel, ENT_QUOTES) ?></span></button>
                    <?php endif; ?>
                    <time id="clock"></time>
                </div>
--- a/public/assets/desktop/desktop.css
+++ b/public/assets/desktop/desktop.css
@@ -1383,7 +1383,22 @@ h1 {
    font-size: 13px;
 }

+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 .tray-pill-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
    border: 0;
    color: inherit;
    font: inherit;
@@ -1400,27 +1415,72 @@ h1 {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
 }

+.tray-pill-account {
+    min-width: 40px;
+    padding: 6px;
+}
+
+.tray-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.16);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
+
+.tray-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+}
+
+.tray-icon svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
 .tray-pill-status {
    min-width: 34px;
-    padding: 8px 9px;
+    padding: 8px;
    text-align: center;
-    font-size: 18px;
+    font-size: 16px;
    line-height: 1;
 }

-.tray-pill-status--idle {
+body .tray-pill.tray-pill-status--idle {
    color: #22c55e;
 }

-.tray-pill-status--running {
+body .tray-pill.tray-pill-status--running {
    color: #facc15;
 }

-.tray-pill-status--error,
-.tray-pill-status--unconfigured {
+body .tray-pill.tray-pill-status--error,
+body .tray-pill.tray-pill-status--unconfigured {
    color: #f97316;
 }

+.tray-status-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 999px;
+    background: currentColor;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 14px currentColor;
+}
+
 .tray-menu {
    position: absolute;
    right: 16px;
--- a/public/assets/desktop/desktop.js
+++ b/public/assets/desktop/desktop.js
@@ -177,9 +177,12 @@ if (payloadNode) {

            node.setAttribute('aria-expanded', String(debugState.open === true));
            node.classList.toggle('is-active', debugState.open === true);
-            node.textContent = debugState.open === true
+            node.setAttribute(
+                'title',
+                debugState.open === true
                    ? `${String(debugShellApp?.label || 'Debug')} an`
-                : String(debugShellApp?.label || 'Debug');
+                    : String(debugShellApp?.label || 'Debug')
+            );
        });
    };

@@ -384,7 +387,12 @@ if (payloadNode) {
        const displayName = currentUserPreferences?.profile?.name || payload.session?.display_name;

        if (accountNode && typeof displayName === 'string' && displayName.trim() !== '') {
-            accountNode.textContent = displayName;
+            accountNode.setAttribute('title', displayName);
+
+            const avatarNode = accountNode.querySelector('.tray-avatar');
+            if (avatarNode instanceof HTMLElement) {
+                avatarNode.textContent = buildInitials(displayName);
+            }
        }

        if (startMenuUserName && typeof displayName === 'string' && displayName.trim() !== '') {