Widget-Rahmen: Widgets sind Beschreibungen, keine Kaesten in der Seite

widgetAnmelden({ id, titel, wo, sichtbar, laden, leer, inhalt, takt }) —
der Rahmen macht daraus ein Fenster in der Spalte (Terminal) oder ein
Schild (Desktop), kennt lädt/fertig/nichts da/Fehler und haelt den
Nachladetakt. Benutzer, Wetter und Systemzustand sind umgestellt; aus
index.html sind vier feste Kaesten verschwunden und aus dem Raster die
Einzelplaetze.

Zwei Dinge, die erst dabei sichtbar wurden:

- Der Server meldete 'kein Ort eingestellt' und 'Dienst nicht
  erreichbar' beide als 204. Ein Ausfall sah damit aus wie ein
  abgeschaltetes Widget. Ausfall ist jetzt 502, mit Test.
- Die Reihenfolge haengt nicht mehr an der Modulauswertung: Seit
  glyphs.js seine Raster mit await auf oberster Ebene laedt, laufen
  Module ohne Symbole vorher durch — der Systemzustand stand deshalb
  ueber dem Benutzer. widgetsOrdnen() macht die Reihenfolge zur Angabe,
  und genau dort haengt spaeter die im Server gespeicherte ein.

web/js/widgets/user.js

@@ -1,5 +1,6 @@
-import { $, escapeAttr, state } from "../core.js";
+import { escapeAttr, escapeHtml, state } from "../core.js";
 import { glyphSvg } from "../glyphs.js";
+import { widgetAnmelden } from "./rahmen.js";
 
 function greeting() {
   const h = new Date().getHours();
@@ -15,30 +16,24 @@ function greeting() {
  * die HoneyBar in den Apps nicht hat — beide sollen aber gleich aussehen, sonst
  * merkt man beim Wechsel, dass es zwei verschiedene HoneyBars sind. Auf dem
  * Schreibtisch ist ohnehin Platz dafür, und die Begrüßung gehört dazu.
+ *
+ * Kein `laden`: Der Name steht schon im Zustand, seit die Seite ihn geholt hat.
  */
-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>`;
-}
-
-export 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;
-}
+widgetAnmelden({
+  id: "benutzer",
+  titel: "angemeldet",
+  inhalt() {
+    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">${escapeHtml(state.cfg.user)}</b>
+          <span class="uw-gruss">${greeting()}</span>
+          <span class="uw-host">${escapeHtml(state.cfg.user)}@${escapeHtml(state.cfg.hostname)}</span>
+        </div>
+      </div>`;
+  },
+});