csdfsdf

docs/ANLEITUNG.md

@@ -0,0 +1,87 @@
+# Anleitung
+
+Nutzungs- und Hilfedatei fuer `desktop.kusche.berlin`.
+
+Diese Datei ist fuer spaetere Endnutzerhilfe, interne Einfuehrung und als Basis fuer einen Hilfebereich gedacht.
+
+## Einstieg
+
+Der Desktop besteht aus mehreren Hauptbereichen:
+
+- `Desktop`
+  Arbeitsflaeche mit Icons, Fenstern und Infobereich.
+
+- `Startmenue`
+  Zugang zu Benutzerfunktionen und installierten Programmen.
+
+- `Infobereich`
+  Rechter Seitenbereich fuer eingeblendete Informationskarten.
+
+- `Widget-Bereich`
+  Bereich bei Uhr und Systemleiste fuer kleine Mini-Funktionen.
+
+## Startmenue verwenden
+
+Das Startmenue ist in drei Bereiche gegliedert:
+
+1. `User Setting Bereich`
+   Hier befinden sich Benutzername, User-Icon, Einstellungen sowie Anmelden oder Abmelden.
+2. `Funktion-Bereich`
+   Hier werden die Funktionsgruppen ausgewaehlt. Aktuell ist `Programme` die erste Gruppe.
+3. `Auswahlbereich`
+   Hier erscheinen die Inhalte der aktuell gewaehlten Funktionsgruppe, zum Beispiel installierte Apps.
+
+## Programme oeffnen
+
+- Desktop-Icons koennen direkt geoeffnet werden.
+- Im Startmenue lassen sich Programme ueber den `Auswahlbereich` starten.
+- Fenster koennen verschoben, minimiert, maximiert und geschlossen werden.
+
+## Einstellungen oeffnen
+
+Die Einstellungen werden aktuell ueber die App `User Self Management` bereitgestellt.
+
+Dort koennen derzeit insbesondere verwaltet werden:
+
+- `Desktop Type` beziehungsweise Skin-Auswahl
+- persoenliche Benutzerdaten
+- sichtbare Apps
+- Inhalte des `Infobereichs`
+
+## Benutzerdaten
+
+Aktuell gelten folgende Regeln:
+
+- Standardfelder wie Name, E-Mail, Telefon, Titel und Ort koennen fuer LDAP vorbereitet oder synchronisiert werden.
+- `Geburtsdatum` bleibt derzeit lokal gespeichert.
+- nicht jedes Profilfeld wird automatisch in LDAP geschrieben.
+
+## Desktop Type und Skins
+
+Das System unterstuetzt derzeit:
+
+- `Apple`
+- `Windows`
+- `Linux`
+
+Der ausgewaehlte Desktop Type beeinflusst Darstellung und Interaktionsdetails, waehrend die gemeinsame Shell-Logik erhalten bleibt.
+
+## Infobereich
+
+Der `Infobereich` ist der rechte Desktopbereich.
+
+- Inhalte koennen benutzerbezogen ein- oder ausgeblendet werden.
+- Aenderungen sollen gespeichert bleiben.
+- Der `Infobereich` ist nicht identisch mit dem `Widget-Bereich`.
+
+## Begriffsregel
+
+Fuer sprachliche Konsistenz gilt:
+
+- rechte Desktopseite: `Infobereich`
+- Mini-Apps an Uhr/Systemleiste: `Widget-Bereich`
+- linke Startmenuespalte: `User Setting Bereich`
+- mittlere Startmenuespalte: `Funktion-Bereich`
+- rechte Startmenuespalte: `Auswahlbereich`
+
+Die verbindliche zentrale Fassung der Begriffe steht in [CONTENT.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/CONTENT.md).

docs/CONTENT.md

@@ -0,0 +1,129 @@
+# Content
+
+Zentrale Inhaltsbasis fuer `desktop.kusche.berlin`.
+
+Diese Datei dient als gemeinsame Quelle fuer:
+
+- Begriffe und offizielle Benennungen im System
+- Funktionsbeschreibung des aktuellen Systems
+- spaetere Inhalte fuer einen Hilfe-Bereich
+- zentrale Zusammenfassung der dezentralen `README.md`-Dateien
+
+## Zweck
+
+`CONTENT.md` beschreibt das System fachlich und sprachlich.
+
+Nicht hier hinein gehoeren:
+
+- technische Detailanweisungen fuer Entwickler
+- Go- und NoGo-Regeln fuer Umsetzung
+- nur ordnerspezifische Detailerklaerungen ohne Relevanz fuer das Gesamtsystem
+
+Diese Inhalte liegen in:
+
+- [ANLEITUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/ANLEITUNG.md)
+- [WEITERENTWICKLUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/WEITERENTWICKLUNG.md)
+
+## Offizielle Begriffe
+
+Diese Benennungen gelten projektweit und sollen in UI, Doku und Weiterentwicklung konsistent verwendet werden.
+
+### Oberflaechenbereiche
+
+- `Desktop`
+  Die eigentliche Arbeitsflaeche mit Icons, Fenstern, Taskbar und Infobereich.
+
+- `Infobereich`
+  Der rechte Bereich auf dem Desktop mit eingeblendeten Informationskarten oder kleinen Bereichsmodulen.
+
+- `Widget-Bereich`
+  Der Bereich bei der Uhr bzw. Systemleiste fuer kleine Widgets oder Mini-Apps.
+
+- `Setup-Bereich`
+  Der zentrale Einstellungsbereich fuer Benutzer, Desktop-Typ, Apps und Bereichsauswahl. Aktuell umgesetzt ueber `User Self Management`.
+
+### Menue-Bereiche
+
+- `User Setting Bereich`
+  Linke Menuespalte mit User-Icon, Benutzername, Einstieg in Einstellungen und Session-Aktion.
+
+- `Funktion-Bereich`
+  Mittlere Menuespalte mit Funktionsgruppen wie `Programme`.
+
+- `Auswahlbereich`
+  Rechte Menuespalte mit den Inhalten der aktuell gewaehlten Funktionsgruppe.
+
+### Systemobjekte
+
+- `App`
+  Ein bereitgestelltes System-Tool oder Modul. Eine App kann als Desktop-App, Menue-App, Systembar-Eintrag oder Quelle fuer Widgets/Funktionen auftreten.
+
+- `Widget`
+  Eine kleine Funktion oder Mini-Anzeige. Widgets sind nicht automatisch identisch mit Apps. Eine App kann Widgets bereitstellen, muss es aber nicht.
+
+- `Desktop Type`
+  Benutzerseitige Auswahl des Desktop-/Skin-Typs. Aktuell vorgesehen: `Apple`, `Windows`, `Linux`.
+
+- `Skin`
+  Technische und visuelle Auspraegung eines Desktop-Typs, inklusive Layout, Interaktionsdetails und Asset-Zuordnung.
+
+## Aktueller Systemumfang
+
+Stand dieser Datei:
+
+- gemeinsame Desktop-Shell mit den Skins `Apple`, `Windows` und `Linux`
+- frei verschiebbare Desktop-Icons
+- Icon-Positionen lokal gespeichert, pro Benutzer und pro Skin
+- automatische Schriftfarbanpassung fuer Desktop-Icons anhand des Hintergrunds
+- Fensterverwaltung mit Oeffnen, Fokussieren, Minimieren, Maximieren und Verschieben
+- konsistentes Standard-Design fuer Fensterinhalte, sofern eine App kein eigenes UI mitbringt
+- Startmenue mit `User Setting Bereich`, `Funktion-Bereich` und `Auswahlbereich`
+- rechter `Infobereich` mit benutzerbezogener Sichtbarkeit
+- `User Self Management` als Setup-App
+- lokale Benutzereinstellungen fuer Desktop-Skin, App-Auswahl, Infobereich und Profildaten
+- LDAP-Synchronisierung fuer Standardfelder wie Name, E-Mail, Telefon, Titel und Ort
+- `Geburtsdatum` aktuell bewusst nur lokal gespeichert
+- Keycloak bleibt das Auth-System
+
+## Zentrale Inhaltszusammenfassung aus bestehenden README-Dateien
+
+### Globales Projekt
+
+Aus [README.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/README.md):
+
+- `public/` ist der Web-Root fuer die Desktop-Shell
+- `src/Desktop/` enthaelt zentrale Desktop-Mechaniken
+- `partials/desktop/` enthaelt Shell-Templates
+- `modules/` bleibt Zielort fuer klassische Module
+- `temp/nexus-module-import/` ist Rohbasis fuer importierte Nexus-Module
+- Keycloak bleibt das Auth-System
+
+### Module
+
+Aus [modules/README.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/modules/README.md):
+
+- klassische Module bleiben unter `modules/<modul>/`
+- Businesslogik wird nicht in den Desktop-Core verschoben
+
+### Skins
+
+Aus [skins/README.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/skins/README.md):
+
+- `skins/<skin>/profile.php` enthaelt Skin-Metadaten
+- `skins/<skin>/vendor/` enthaelt Rohquellen und Quellpacks
+- `public/assets/desktop/skins/<skin>/` enthaelt auslieferbare CSS/JS-Dateien
+- `public/assets/desktop/skin-icons/<skin>/` enthaelt verwendete Web-Icons
+
+## Hilfe-Bereich Vorbereitung
+
+Fuer einen spaeteren Hilfebereich sollen Inhalte aus dieser Datei in Themenblcke uebernommen werden:
+
+- `Begriffe`
+- `Desktop bedienen`
+- `Menue verstehen`
+- `Fenster verwenden`
+- `Infobereich konfigurieren`
+- `Apps und Desktop Type verwalten`
+- `Benutzerdaten und Synchronisierung`
+
+Die Inhalte sollen spaeter moeglichst nicht neu erfunden, sondern aus den zentral gepflegten Dateien abgeleitet werden.

docs/README.md

@@ -1,18 +1,39 @@
 # desktop.kusche.berlin
 
-V1-Scaffold fuer die neue Desktop-Oberflaeche von Kusche.Berlin.
+Zentraler Dokumentationsindex fuer das Projekt.
 
-## Struktur
+## Zentrale Dateien
+
+- [CONTENT.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/CONTENT.md)
+  Zentrale Inhaltsbasis mit offiziellen Begriffen, Systemumfang und spaeterer Hilfe-Basis.
+
+- [ANLEITUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/ANLEITUNG.md)
+  Nutzungs- und Hilfedatei fuer Bedienung, Orientierung und spaetere Hilfebereiche.
+
+- [WEITERENTWICKLUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/WEITERENTWICKLUNG.md)
+  Regeln fuer Weiterentwicklung, Doku-Pflege, Go's und NoGo's.
+
+## Technische Projektstruktur
 
 - `public/` Web-Root mit Desktop-Shell auf `/`
-- `api/desktop.php` JSON-Payload fuer die Shell
 - `src/Desktop/` zentrale Desktop-Mechaniken
 - `partials/desktop/` Shell-Template
 - `modules/` Zielort fuer klassische Module
 - `temp/nexus-module-import/` Rohbasis fuer importierte Nexus-Module
 
-## Hinweise
+## Fachliche Hinweise
 
 - `Old-Nexus/` wird nicht technisch eingebunden.
 - Skins `Windows`, `Apple`, `Linux` laufen auf einer gemeinsamen Shell.
-- Keycloak bleibt das Auth-System; der Theme-Handoff ist in `docs/keycloak-theme-handoff.md` beschrieben.
+- Keycloak bleibt das Auth-System.
+- der Theme-Handoff ist in [keycloak-theme-handoff.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/keycloak-theme-handoff.md) beschrieben.
+
+## Dokumentationsregel
+
+Wichtige Informationen duerfen nicht nur in Unterordnern oder Einzeldateien stehen.
+
+Es gilt:
+
+- wichtige Inhalte aus Unterordner-`README.md`-Dateien werden zentral in `docs/CONTENT.md` gespiegelt
+- Nutzungswissen wird in `docs/ANLEITUNG.md` gepflegt
+- Entwicklungsregeln werden in `docs/WEITERENTWICKLUNG.md` gepflegt

docs/WEITERENTWICKLUNG.md

@@ -0,0 +1,71 @@
+# Weiterentwicklung
+
+Zentrale Arbeits- und Regeldatei fuer die Weiterentwicklung von `desktop.kusche.berlin`.
+
+Diese Datei enthaelt:
+
+- Go's und NoGo's
+- Dokumentationsregeln
+- Architektur- und Pflegehinweise
+
+## Dokumentationspflicht
+
+Die Projektdokumentation wird zentral und dezentral gleichzeitig gepflegt.
+
+Verbindlich ist:
+
+- zentrale Inhalte und Begriffe muessen in [CONTENT.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/CONTENT.md) gepflegt werden
+- Nutzungs- und Hilfetexte muessen in [ANLEITUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/ANLEITUNG.md) gepflegt werden
+- Entwicklungsregeln muessen in dieser Datei gepflegt werden
+- vorhandene `README.md`-Dateien in Unterordnern muessen weiter gepflegt werden
+- wichtige Informationen aus den einzelnen `README.md`-Dateien muessen auch zentral gehalten werden
+- bei neuen wichtigen Unterordnern ist zu pruefen, ob eine eigene `README.md` noetig ist
+
+## Go's
+
+- Desktop-Mechaniken zentral halten, nicht pro App duplizieren
+- Fensterverhalten konsistent halten
+- gemeinsame Standards fuer Fensterinhalte nutzen, sofern eine App kein bewusst eigenes UI benoetigt
+- Begriffe in UI und Doku konsistent nach `CONTENT.md` verwenden
+- Apps als bereitgestellte Systemfunktionen denken, nicht nur als sichtbare Fenster
+- Unterschiede zwischen `App`, `Infobereich` und `Widget-Bereich` sauber trennen
+- lokale Persistenz und spaetere Backend-Synchronisierung getrennt vorbereiten
+- `README.md`-Dateien in Teilbereichen aktuell halten
+- zentrale Doku bei jeder relevanten Struktur- oder Begriffsanpassung mitpflegen
+
+## NoGo's
+
+- keine stillen Umbenennungen von Bereichen ohne Aktualisierung der zentralen Doku
+- keine Rueckbauten bestehender Desktop-Mechaniken ohne ausdrueckliche Entscheidung
+- keine Vermischung von Modul-Businesslogik mit globalem Desktop-Core
+- keine Skin-Sonderlogik direkt in einzelnen Apps, wenn sie global loesbar ist
+- keine nur lokalen README-Informationen ohne zentrale Uebernahme der wichtigen Punkte
+- keine Hilfeinhalte nur in Chatverlaeufen oder Ad-hoc-Notizen belassen
+- keine produktive Architekturabhaengigkeit zu `Old-Nexus/` oder vergleichbaren Altbestaenden
+
+## Architekturregeln
+
+- `modules/<modul>/` bleibt Ort fuer klassische Module
+- globale Desktop-Mechaniken liegen im gemeinsamen Kern
+- Skins definieren Darstellung und Interaktionsdetails, nicht die Fachlogik
+- Hilfe- und Inhaltsdateien sollen spaeter maschinenlesbar oder zumindest klar strukturierbar in einen Hilfebereich ueberfuehrt werden koennen
+
+## Pflegeprozess
+
+Bei jeder groesseren Aenderung ist zu pruefen:
+
+1. Wurden offizielle Begriffe geaendert oder erweitert
+2. Wurde der Systemumfang sichtbar erweitert
+3. Braucht ein Unterordner eine gepflegte `README.md`
+4. Muessen zentrale Dateien angepasst werden
+5. Ist der Inhalt spaeter fuer einen Hilfebereich relevant
+
+## Aktuell wichtige Projektregeln
+
+- `UMSETZUNGSSTATUS.md` nur dann als erledigt markieren, wenn es ausdruecklich freigegeben wurde
+- Fokus liegt aktuell auf Desktop-UI und Apps
+- Login und Keycloak sind vorerst akzeptiert und nicht der aktuelle Hauptschwerpunkt
+- Desktop-Icons sind frei verschiebbar und werden pro Benutzer und Skin lokal gespeichert
+- die Schriftfarbe von Desktop-Icons passt sich automatisch an den Hintergrund an
+- Benutzerdaten sollen spaeter sauber in LDAP oder Keycloak geschrieben werden
+- Standard-Fensterinhalte sollen ein gemeinsames Design nutzen

modules/README.md

@@ -3,3 +3,12 @@
 Klassische Module bleiben in diesem Projekt unter `modules/<modul>/`.
 
 Die neue Desktop-Shell ist nur die UI-Schicht. Modul-Businesslogik wird nicht in den Desktop-Core verschoben.
+
+## Pflegehinweis
+
+Diese Datei muss gepflegt bleiben, wenn sich Modulstruktur oder Modulregeln aendern.
+
+Wichtige Inhalte aus dieser Datei muessen ebenfalls zentral gepflegt werden in:
+
+- [CONTENT.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/CONTENT.md)
+- [WEITERENTWICKLUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/WEITERENTWICKLUNG.md)

partials/desktop/shell.php

@@ -100,27 +100,45 @@ $renderStartIcon = static function (array $profile): string {
             <div class="window-layer" id="window-layer"></div>
 
             <section class="start-menu" id="start-menu" hidden>
-                <div class="start-menu-header">
+                <div class="start-menu-user-settings" id="start-menu-user-settings">
-                    <div>
+                    <button class="start-menu-settings-button" id="start-menu-settings-button" type="button">
-                        <p class="eyebrow">Startmenue</p>
+                        <span class="start-menu-settings-icon" aria-hidden="true">⚙</span>
-                        <h2>Desktop Aktionen</h2>
+                        <span>Einstellungen</span>
+                    </button>
+                    <button class="start-menu-user-card" id="start-menu-user-card" type="button">
+                        <span class="start-menu-user-avatar" id="start-menu-user-avatar">GU</span>
+                        <span class="start-menu-user-copy">
+                            <strong id="start-menu-user-name"><?= htmlspecialchars((string) ($desktopPayload['session']['display_name'] ?? 'Gast'), ENT_QUOTES) ?></strong>
+                            <small>User Setting Bereich</small>
+                        </span>
+                    </button>
+                    <?php if (($desktopPayload['session']['authenticated'] ?? false) === true && !empty($desktopPayload['session']['logout_url'])): ?>
+                        <a class="start-menu-session-action is-logout" id="start-menu-session-action" href="<?= htmlspecialchars((string) $desktopPayload['session']['logout_url'], ENT_QUOTES) ?>">
+                            <span class="start-menu-session-icon" aria-hidden="true">⏻</span>
+                            <span>Abmelden</span>
+                        </a>
+                    <?php else: ?>
+                        <button class="start-menu-session-action" id="start-menu-session-action" type="button" data-session-action="login">
+                            <span class="start-menu-session-icon" aria-hidden="true">→</span>
+                            <span>Anmelden</span>
+                        </button>
+                    <?php endif; ?>
+                </div>
+                <div class="start-menu-function-area">
+                    <div class="start-menu-section-title">Funktion-Bereich</div>
+                    <div class="start-menu-function-list" id="start-menu-functions">
+                        <button class="start-menu-function is-active" type="button" data-function-id="programs">
+                            <span class="start-menu-function-icon" aria-hidden="true">📁</span>
+                            <span class="start-menu-function-copy">
+                                <strong>Programme</strong>
+                                <small>Installierte Apps</small>
+                            </span>
+                        </button>
                     </div>
                 </div>
-                <div class="start-menu-column">
+                <div class="start-menu-selection-area">
-                    <div class="start-menu-block">
+                    <div class="start-menu-section-title">Auswahlbereich</div>
-                        <p class="eyebrow">Schnellaktionen</p>
+                    <div class="start-menu-selection-list" id="start-menu-apps"></div>
-                        <div id="start-menu-actions"></div>
-                    </div>
-                    <div class="start-menu-block">
-                        <p class="eyebrow">Infobereich</p>
-                        <div id="start-menu-widgets"></div>
-                    </div>
-                </div>
-                <div class="start-menu-column">
-                    <div class="start-menu-block">
-                        <p class="eyebrow">Apps</p>
-                        <div id="start-menu-apps"></div>
-                    </div>
                 </div>
             </section>
 

public/assets/desktop/desktop.css

@@ -953,16 +953,18 @@ h1 {
     bottom: calc(var(--taskbar-height) + 28px);
     z-index: 130;
     display: grid;
-    align-content: start;
+    align-content: stretch;
-    grid-template-columns: minmax(240px, 280px) minmax(280px, 360px);
+    grid-template-columns: minmax(220px, 250px) minmax(180px, 220px) minmax(320px, 1fr);
-    gap: 16px;
+    gap: 0;
-    width: min(720px, calc(100% - 48px));
+    width: min(920px, calc(100% - 48px));
-    padding: 18px;
+    min-height: 560px;
-    border-radius: 24px;
+    padding: 0;
-    background: rgba(15, 23, 42, 0.82);
+    border-radius: 22px;
-    border: 1px solid var(--shell-border);
+    background: rgba(28, 28, 32, 0.96);
-    box-shadow: var(--shadow);
+    border: 1px solid rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(24px);
+    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 {
+.start-menu-user-settings,
-    display: flex;
+.start-menu-function-area,
-    align-items: flex-start;
+.start-menu-selection-area {
-    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 {
     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: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 18px;
+    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.06);
+    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 {
+.start-menu-settings-button:hover,
-    background: rgba(255, 255, 255, 0.18);
+.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 {
+.start-menu-session-action {
-    background: var(--accent);
+    margin-top: auto;
-    color: #0f172a;
+}
+
+.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;

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 startMenuFunctions = document.getElementById('start-menu-functions');
-    const startMenuActions = document.getElementById('start-menu-actions');
+    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 = () => {
+    const renderFunctionArea = () => {
-        if (!startMenuWidgets) {
+        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>
+                    <strong>${app.title}</strong>
-                    <small>${widget.summary || ''}</small>
+                    <small>${app.summary || ''}</small>
-                </span>
-                <span class="start-menu-entry-toggle ${activeWidgets.has(widget.widget_id) ? 'is-active' : ''}">
-                    ${activeWidgets.has(widget.widget_id) ? 'On' : 'Off'}
                 </span>
+                <span class="start-menu-entry-toggle">Open</span>
             `;
             button.addEventListener('click', () => {
-                if (activeWidgets.has(widget.widget_id)) {
+                openApp(app);
-                    activeWidgets.delete(widget.widget_id);
+                closeStartMenu();
-                } else {
-                    activeWidgets.add(widget.widget_id);
-                }
-
-                renderWidgets();
-                renderMenuWidgets();
-                persistSettingsPatch({
-                    widgets: {
-                        active_ids: Array.from(activeWidgets),
-                    },
-                }).catch(() => {
-                    // Keep current desktop state even if persistence fails.
-                });
             });
-            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 = '';
+        renderFunctionArea();
-        startMenuActions.innerHTML = '';
+        renderSelectionArea();
-
-        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();
     };
 
     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) {

skins/README.md

@@ -10,3 +10,12 @@ Grundsatz:
 - `public/assets/desktop/skin-icons/<skin>/` enthaelt nur die aktuell im Frontend verwendeten Web-Icons.
 
 Damit bleiben Skin-Quellen ausserhalb des Webroots, waehrend die benoetigten Laufzeit-Assets weiter direkt vom Browser geladen werden koennen.
+
+## Pflegehinweis
+
+Diese Datei muss gepflegt bleiben, wenn sich Skin-Struktur, Asset-Fluss oder Ablageregeln aendern.
+
+Wichtige Inhalte aus dieser Datei muessen ebenfalls zentral gepflegt werden in:
+
+- [CONTENT.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/CONTENT.md)
+- [WEITERENTWICKLUNG.md](/home/lars/Schreibtisch/Projekte/desktop.kusche.berlin/docs/WEITERENTWICKLUNG.md)