From b999a66fed6187f972af10be4a048153a6866687 Mon Sep 17 00:00:00 2001
From: marc <marc@shortcake.local>
Date: Sat, 29 Aug 2026 17:46:05 +0200
Subject: [PATCH] feat(schreibtisch): der Benutzer wird ein Widget, beide
 Leisten gleich hoch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/index.html | 16 +++++++++----
 web/os.js      | 47 +++++++++++++++++++++++++++++-------
 web/style.css  | 65 ++++++++++++++++++++++++++++++++++----------------
 3 files changed, 95 insertions(+), 33 deletions(-)

diff --git a/web/index.html b/web/index.html
index 8d9a67d..b4e44b8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -35,8 +35,6 @@
           </button>
           <nav class="mb-apps" id="mbApps" aria-label="Anwendungen"></nav>
           <div class="mb-right">
-            <img class="mb-avatar" id="mbAvatar" alt="" hidden />
-            <span class="mb-user" id="mbUser">&nbsp;</span>
             <span class="mb-wx" id="mbWx" hidden></span>
             <span class="mb-clock" id="clock">--:--</span>
             <button class="mb-btn" id="btnSettings" title="Einstellungen (S)">&#9881;</button>
@@ -49,11 +47,18 @@
           <section class="win win-status">
             <div class="win-bar"><span class="win-title">system</span><span class="win-dots">&#9679;&#9679;&#9679;</span></div>
             <div class="win-body">
-              <p class="greet" id="greet">Willkommen zurück.</p>
               <dl class="statlist" id="statList"></dl>
             </div>
           </section>
 
+          <!-- Wer angemeldet ist. Stand früher in der Menüleiste — dort ist
+               es aber der einzige Unterschied zur HoneyBar in den Apps
+               gewesen, und der Schreibtisch hat für so etwas Platz. -->
+          <section class="win win-user" id="userTile" hidden>
+            <div class="win-bar"><span class="win-title">angemeldet</span><span class="win-dots">&#9679;&#9679;&#9679;</span></div>
+            <div class="win-body user-body"></div>
+          </section>
+
           <!-- Wetter. Steht in beiden Betriebsarten zur Verfügung, wird aber
                nur gezeigt, wenn ein Ort eingestellt und das Widget an ist. -->
           <section class="win win-weather" id="wxTile" hidden>
@@ -70,7 +75,10 @@
           <div class="desk-icons" id="deskIcons"></div>
           <div class="windows" id="windows"></div>
           <!-- Dasselbe Wetter, im Schreibtisch-Modus als kleines Feld oben rechts -->
-          <div class="deskwidget" id="wxDesk" hidden></div>
+          <div class="deskwidgets">
+            <div class="deskwidget" id="userDesk" hidden></div>
+            <div class="deskwidget" id="wxDesk" hidden></div>
+          </div>
         </div>
 
         <footer class="taskbar" id="taskbar" hidden>
diff --git a/web/os.js b/web/os.js
index 8c48d9b..3f4b990 100644
--- a/web/os.js
+++ b/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();
   }
 }
diff --git a/web/style.css b/web/style.css
index c03c99a..c9abf21 100644
--- a/web/style.css
+++ b/web/style.css
@@ -176,13 +176,13 @@ body {
   align-items: center;
   gap: 10px;
   padding: 0 10px;
-  height: 34px;
-  flex: 0 0 34px;
+  /* 32 px — dieselbe Höhe wie honeybar.js in den Apps (BAR_H). Wer von einer
+     App auf den Schreibtisch wechselt, soll keinen Sprung sehen. */
   border-bottom: 1px solid var(--p-dim);
   background: var(--bg-raised);
   padding-top: env(safe-area-inset-top);
-  height: calc(34px + env(safe-area-inset-top));
-  flex-basis: calc(34px + env(safe-area-inset-top));
+  height: calc(32px + env(safe-area-inset-top));
+  flex: 0 0 calc(32px + env(safe-area-inset-top));
 }
 
 .mb-logo {
@@ -233,7 +233,6 @@ body {
   color: var(--p-mid);
   font-size: 12px;
 }
-.mb-user { opacity: 0.9; }
 .mb-clock { font-variant-numeric: tabular-nums; color: var(--p); }
 
 .mb-btn {
@@ -271,9 +270,10 @@ body {
      das Wetter landete dann neben „system" und schob die Kacheln in die
      schmale linke Spalte. Links stehen die Anzeigen untereinander, rechts
      gehören die Apps, über die volle Höhe. */
-  .win-status { grid-column: 1; grid-row: 1; }
-  .win-weather { grid-column: 1; grid-row: 2; }
-  .tiles { grid-column: 2; grid-row: 1 / span 2; }
+  .win-user { grid-column: 1; grid-row: 1; }
+  .win-status { grid-column: 1; grid-row: 2; }
+  .win-weather { grid-column: 1; grid-row: 3; }
+  .tiles { grid-column: 2; grid-row: 1 / span 3; }
 }
 
 /* Fenster */
@@ -309,11 +309,6 @@ body {
 
 .win-body { padding: 14px; }
 
-.greet {
-  margin: 0 0 12px;
-  font-size: 15px;
-}
-
 .statlist {
   margin: 0;
   display: grid;
@@ -823,13 +818,6 @@ body {
 .login-note b { color: var(--p-mid); font-weight: 400; }
 
 /* Nutzer in der Leiste */
-.mb-avatar {
-  width: 18px;
-  height: 18px;
-  object-fit: cover;
-  border: 1px solid var(--p-dim);
-}
-.mb-avatar[hidden] { display: none; }
 
 /* ── App-Verwaltung ────────────────────────────────────────────────────── */
 .apped { display: flex; flex-direction: column; gap: 10px; }
@@ -972,3 +960,40 @@ body {
 .mb-wx[hidden] { display: none; }
 .mb-wx svg { width: 14px; height: 14px; display: block; }
 @media (max-width: 700px) { .mb-wx-temp { display: none; } }
+
+/* ── Wer angemeldet ist ────────────────────────────────────────────────────
+   Zwei Rahmen, ein Aufbau — Fenster im Terminal-Modus, Schild auf dem
+   Schreibtisch, genau wie beim Wetter. */
+.uw { display: flex; align-items: center; gap: 12px; }
+.uw-bild {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
+  display: block;
+  border: 1px solid var(--p-dim);
+  object-fit: cover;
+  image-rendering: pixelated;
+}
+.uw-leer { color: var(--p-dim); padding: 4px; }
+.uw-leer svg { width: 100%; height: 100%; display: block; }
+.uw-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
+.uw-name { color: var(--p); font-size: 15px; }
+.uw-gruss { color: var(--p-mid); }
+.uw-host { color: var(--p-dim); font-size: 12px; }
+.win-user { max-width: 320px; align-self: start; }
+
+/* Die Schilder auf dem Schreibtisch stapeln sich oben rechts. */
+.deskwidgets {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-end;
+}
+.deskwidgets .deskwidget { position: static; }
+@media (max-width: 620px) {
+  .deskwidgets { position: static; align-items: stretch; margin: 10px; }
+}