feat(schreibtisch): der Benutzer wird ein Widget, beide Leisten gleich hoch

Die Menueleiste war 34 px hoch, die HoneyBar in den Apps 32 — beim Wechsel sah
man den Sprung. Jetzt beide 32.

Und der Name samt Bild stand rechts in der Menueleiste. Das war das einzige
Stueck, das die HoneyBar in den Apps nicht hat — genau der Unterschied, den man
nicht sehen soll. Er sitzt jetzt als eigenes Widget auf dem Schreibtisch, mit
der Begruessung, die vorher im Systemfenster stand. Beide Leisten tragen damit
ueberall dasselbe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/os.js

@@ -447,11 +447,6 @@ function greeting() {
 
 function renderShell() {
   $("desktop").hidden = false;
-  $("mbUser").textContent = state.cfg.user;
-  if (state.me && state.me.picture) {
-    $("mbAvatar").src = state.me.picture;
-    $("mbAvatar").hidden = false;
-  }
   $("btnLogout").hidden = !state.oidc;
   renderMenubarApps();
   renderMode();
@@ -498,10 +493,45 @@ function renderMode() {
     renderTiles();
   }
   renderStats();
+  renderUser();
   renderWeather();
   paintProbes();
 }
 
+/* ── Wer angemeldet ist ────────────────────────────────────────────────────
+ *
+ * Stand früher rechts in der Menüleiste. Dort war es das einzige Stück, das
+ * die HoneyBar in den Apps nicht hat — beide sollen aber gleich aussehen, sonst
+ * merkt man beim Wechsel, dass es zwei verschiedene Leisten sind. Auf dem
+ * Schreibtisch ist ohnehin Platz dafür, und die Begrüßung gehört dazu.
+ */
+function userHtml() {
+  const bild = state.me && state.me.picture
+    ? `<img class="uw-bild" src="${escapeAttr(state.me.picture)}" alt="" />`
+    : `<span class="uw-bild uw-leer">${glyphSvg("chip")}</span>`;
+  return `
+    <div class="uw">
+      ${bild}
+      <div class="uw-text">
+        <b class="uw-name">${state.cfg.user}</b>
+        <span class="uw-gruss">${greeting()}</span>
+        <span class="uw-host">${state.cfg.user}@${state.cfg.hostname}</span>
+      </div>
+    </div>`;
+}
+
+function renderUser() {
+  const tile = $("userTile");
+  const desk = $("userDesk");
+  const desktopMode = state.settings.mode === "desktop";
+  const html = userHtml();
+
+  tile.hidden = desktopMode;
+  desk.hidden = !desktopMode;
+  tile.querySelector(".user-body").innerHTML = html;
+  desk.innerHTML = html;
+}
+
 /* ── Wetter ────────────────────────────────────────────────────────────────
  *
  * Der Server holt es und legt es zehn Minuten beiseite; hier wird nur gezeigt,
@@ -590,9 +620,7 @@ function renderStats() {
   ];
   const html = rows.map(([k, v]) => `<dt>${k}</dt><dd>${escapeHtml(v)}</dd>`).join("");
   document.querySelectorAll(".statlist").forEach((dl) => (dl.innerHTML = html));
-  document.querySelectorAll(".greet").forEach(
-    (p) => (p.textContent = `${greeting()} ${state.cfg.user}@${state.cfg.hostname}`)
-  );
+
 }
 
 function tickClock() {
@@ -709,7 +737,8 @@ function extractName(data) {
 function applyAuthName() {
   const named = Object.values(state.auth).find((a) => a.status === "in" && a.name);
   if (named) {
-    $("mbUser").textContent = named.name;
+    state.cfg.user = named.name;
+    renderUser();
     renderStats();
   }
 }