feat(wetter): Wetter auf dem Schreibtisch und in der Leiste

Zwei Schalter, unabhaengig voneinander: Schreibtisch, Leiste, beides oder
keins. Die Stadt wird einmal gesucht und mit ihren Koordinaten gespeichert,
sonst suchte jede Abfrage den Ort erneut.

Geholt wird serverseitig und zehn Minuten zwischengespeichert. Der Grund ist
nicht Sparsamkeit: Die Leiste steht auf jeder Seite jeder App, und fragte sie
selbst an, ginge bei jedem Seitenaufruf eine Anfrage samt IP an einen Fremden —
und die CSP jeder App muesste ihn erlauben.

Kein Ort eingestellt oder Dienst nicht erreichbar: 204, und das Symbol bleibt
weg. Eine Zahl von gestern waere schlechter als keine.

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

web/honeybar/honeybar.js

@@ -51,6 +51,8 @@
   // nur an Ursprünge, die selbst als App eingetragen sind.
   const appsUrl = d("apps", script ? new URL("../api/apps", script.src).href : "");
   const appsKey = d("key", "");
+  // Dieselbe Herkunft wie die App-Liste: Wo /api/apps liegt, liegt /api/weather.
+  const wetterUrl = appsUrl ? appsUrl.replace(/\/apps(\?|$)/, "/weather$1") : "";
 
   let apps = DEFAULT_APPS;
   let settings = null;
@@ -67,6 +69,33 @@
   const SAFE = "env(safe-area-inset-top, 0px)";
   const HOEHE = "calc(" + BAR_H + "px + " + SAFE + ")";
 
+  /* Wettersymbole als Pixelraster, dieselben Namen wie in weather.go.
+     Sie stehen auch in os.js — bis die geteilte Symbolquelle (1.3) gebaut ist,
+     ist das die kleinere Sünde: Die Leiste soll eine einzelne Datei bleiben,
+     die eine fremde App mit einer Zeile einbindet. */
+  const WX = {
+    sonne:    "............;.....##.....;..#..##..#..;...#....#...;....####....;..##....##..;..##....##..;....####....;...#....#...;..#..##..#..;.....##.....;............",
+    heiter:   "............;...##.......;..####..#...;...##..###..;......#####.;...####...#.;..#....##.#.;.##........#;#..........#;.##########.;............;............",
+    wolke:    "............;....####....;...#....#...;..#......##.;.##........#;##.........#;#..........#;#..........#;.##########.;............;............;............",
+    nebel:    "............;....####....;..##....##..;.##.......#.;#..........#;.##########.;............;.#########..;............;..#########.;............;.#########..",
+    regen:    "............;....####....;...#....#...;..#......##.;.##........#;##.........#;.##########.;............;..#..#..#...;.#..#..#....;..#..#..#...;.#..#..#....",
+    schnee:   "............;....####....;...#....#...;..#......##.;.##........#;##.........#;.##########.;............;..#...#...#.;.#.#.#.#.#..;..#...#...#.;............",
+    gewitter: "............;....####....;...#....#...;..#......##.;.##........#;##.........#;.##########.;......##....;.....##.....;....####....;......##....;.....##.....",
+  };
+
+  function wxSvg(name) {
+    const grid = (WX[name] || WX.wolke).split(";");
+    let d = "";
+    grid.forEach((row, y) => {
+      let run = 0;
+      for (let x = 0; x <= row.length; x++) {
+        if (row[x] === "#") run++;
+        else if (run) { d += `<rect x="${x - run}" y="${y}" width="${run}" height="1"/>`; run = 0; }
+      }
+    });
+    return `<svg viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">${d}</svg>`;
+  }
+
   const host = document.createElement("honey-bar");
   host.style.cssText = [
     "position:fixed", "top:0", "left:0", "right:0",
@@ -127,6 +156,16 @@
       .user { color: var(--p); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .user[hidden] { display: none; }
       .clock { color: var(--p-mid); font-variant-numeric: tabular-nums; }
+      .wx {
+        display: flex; align-items: center; gap: 5px; color: var(--p-mid);
+        border-color: transparent; padding: 2px 4px;
+      }
+      .wx[hidden] { display: none; }
+      .wx:hover { color: var(--p); border-color: var(--p-dim); }
+      .wx svg { width: 14px; height: 14px; display: block; }
+      /* Am Handy nur das Symbol: 32 px Höhe und die Apps daneben lassen der
+         Temperatur keinen Platz mehr. */
+      @media (max-width: 700px) { .wx .grad { display: none; } }
       .menu-btn { border-color: var(--p-dim); line-height: 1; padding: 3px 7px; }
       .menu-btn:hover { background: var(--p-faint); }
       .menu {
@@ -151,6 +190,7 @@
       <nav class="apps" id="apps"></nav>
       <div class="right">
         <span class="user" id="user" hidden></span>
+        <button class="wx" id="wx" hidden title="Wetter"></button>
         <span class="clock" id="clock"></span>
         <button class="menu-btn" id="menuBtn" aria-haspopup="true" aria-expanded="false">&#9662;</button>
       </div>
@@ -215,6 +255,36 @@
     });
   }
 
+  /**
+   * Das Wetter neben der Uhr — nur wenn in HoneyOS eingeschaltet und ein Ort
+   * eingestellt ist. Der Server antwortet sonst mit 204, und dann bleibt hier
+   * schlicht nichts stehen: lieber kein Symbol als eines ohne Aussage.
+   */
+  async function wetter() {
+    if (!settings || settings.weatherBar !== "on") return;
+    let w;
+    try {
+      if (!wetterUrl) return;
+      const res = await fetch(wetterUrl, {
+        cache: "no-store",
+        credentials: "include",
+        headers: appsKey ? { "X-HoneyOS-Key": appsKey } : {},
+      });
+      if (res.status !== 200) return;
+      w = await res.json();
+    } catch {
+      return; // offline oder HoneyOS aus — die App geht das nichts an
+    }
+    const el = root.getElementById("wx");
+    el.innerHTML = wxSvg(w.glyph) + `<span class="grad">${Math.round(w.grad)}°</span>`;
+    el.title = `${w.ort}: ${w.text}, ${Math.round(w.grad)}°`;
+    el.hidden = false;
+    // Ein Klick führt dorthin, wo der Ort eingestellt wird. Ändern lässt er
+    // sich hier nicht: Die Leiste liest über den Schlüssel und darf nichts
+    // schreiben — und über eine Site-Grenze wüsste sie ohnehin nicht, für wen.
+    el.onclick = () => window.open(homeUrl, "_blank", "noopener");
+  }
+
   /**
    * Zeigt an, wer angemeldet ist. Die Leiste steckt in der App selbst, der
    * Aufruf geht also an denselben Ursprung — kein CORS, keine Freigabe nötig.
@@ -411,6 +481,7 @@
     else document.addEventListener("DOMContentLoaded", mount, { once: true });
 
     showUser();
+    wetter();
   }
 
   start();

web/index.html

@@ -53,6 +53,13 @@
             </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>
+            <div class="win-bar"><span class="win-title">wetter</span><span class="win-dots">&#9679;&#9679;&#9679;</span></div>
+            <div class="win-body wx-body"></div>
+          </section>
+
           <!-- App-Kacheln -->
           <section class="tiles" id="tiles" aria-label="Apps starten"></section>
         </main>
@@ -61,6 +68,8 @@
         <div class="deskspace" id="deskspace" hidden>
           <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>
 
         <footer class="taskbar" id="taskbar" hidden>

web/os.js

@@ -26,11 +26,20 @@ const DEFAULT_SETTINGS = {
   flicker: "on",
   glow: "on",
   openIn: "tab", // tab | same
+  // Wetter. Zwei Schalter statt einem: Der Schreibtisch und die Leiste sind
+  // zwei verschiedene Orte, und wer das Wetter beim Arbeiten in einer App will,
+  // will es nicht zwingend auch auf einer Seite, die er selten aufruft.
+  weatherBar: "off",
+  weatherDesk: "off",
+  weatherCity: "",
+  weatherLat: "",
+  weatherLon: "",
 };
 
 const state = {
   cfg: { user: "", hostname: "honeyos", version: "…", apps: [] },
   me: null, // {sub, name, picture} sobald angemeldet
+  weather: null, // zuletzt geholtes Wetter, oder null
   oidc: false,
   settings: { ...DEFAULT_SETTINGS },
   probes: {}, // appId -> "up" | "down" | "unknown"
@@ -47,6 +56,107 @@ const isTouch = () => window.matchMedia("(pointer: coarse)").matches;
  * im Retro-Raster statt aus einer Icon-Bibliothek zu kommen.
  */
 const GLYPHS = {
+  // Wettersymbole. Dieselben Namen wie in weather.go (wmo) und in der Leiste —
+  // solange 1.3 (geteilte Symbolquelle) nicht gebaut ist, stehen sie zweimal da.
+  sonne: [
+    "............",
+    ".....##.....",
+    "..#..##..#..",
+    "...#....#...",
+    "....####....",
+    "..##....##..",
+    "..##....##..",
+    "....####....",
+    "...#....#...",
+    "..#..##..#..",
+    ".....##.....",
+    "............",
+  ],
+  heiter: [
+    "............",
+    "...##.......",
+    "..####..#...",
+    "...##..###..",
+    "......#####.",
+    "...####...#.",
+    "..#....##.#.",
+    ".##........#",
+    "#..........#",
+    ".##########.",
+    "............",
+    "............",
+  ],
+  wolke: [
+    "............",
+    "....####....",
+    "...#....#...",
+    "..#......##.",
+    ".##........#",
+    "##.........#",
+    "#..........#",
+    "#..........#",
+    ".##########.",
+    "............",
+    "............",
+    "............",
+  ],
+  nebel: [
+    "............",
+    "....####....",
+    "..##....##..",
+    ".##.......#.",
+    "#..........#",
+    ".##########.",
+    "............",
+    ".#########..",
+    "............",
+    "..#########.",
+    "............",
+    ".#########..",
+  ],
+  regen: [
+    "............",
+    "....####....",
+    "...#....#...",
+    "..#......##.",
+    ".##........#",
+    "##.........#",
+    ".##########.",
+    "............",
+    "..#..#..#...",
+    ".#..#..#....",
+    "..#..#..#...",
+    ".#..#..#....",
+  ],
+  schnee: [
+    "............",
+    "....####....",
+    "...#....#...",
+    "..#......##.",
+    ".##........#",
+    "##.........#",
+    ".##########.",
+    "............",
+    "..#...#...#.",
+    ".#.#.#.#.#..",
+    "..#...#...#.",
+    "............",
+  ],
+  gewitter: [
+    "............",
+    "....####....",
+    "...#....#...",
+    "..#......##.",
+    ".##........#",
+    "##.........#",
+    ".##########.",
+    "......##....",
+    ".....##.....",
+    "....####....",
+    "......##....",
+    ".....##.....",
+  ],
+
   cloud: [
     "............",
     "....####....",
@@ -346,6 +456,11 @@ function renderShell() {
   renderMenubarApps();
   renderMode();
   tickClock();
+  // Nicht abgewartet: Das Wetter kommt von außen und darf den Aufbau des
+  // Schreibtischs nicht verzögern. Danach alle 10 Minuten, im selben Takt,
+  // in dem der Server seinen Zwischenspeicher erneuert.
+  loadWeather();
+  setInterval(loadWeather, 10 * 60 * 1000);
 }
 
 function renderMenubarApps() {
@@ -383,9 +498,57 @@ function renderMode() {
     renderTiles();
   }
   renderStats();
+  renderWeather();
   paintProbes();
 }
 
+/* ── Wetter ────────────────────────────────────────────────────────────────
+ *
+ * Der Server holt es und legt es zehn Minuten beiseite; hier wird nur gezeigt,
+ * was er hergibt. Kein Ort eingestellt oder Dienst nicht erreichbar: 204, und
+ * das Widget bleibt weg. Eine Zahl von gestern wäre schlechter als keine.
+ */
+async function loadWeather() {
+  if (!state.settings.weatherCity) {
+    state.weather = null;
+    renderWeather();
+    return;
+  }
+  try {
+    state.weather = await api("/api/weather");
+  } catch {
+    state.weather = null;
+  }
+  renderWeather();
+}
+
+function weatherHtml(w) {
+  return `
+    <div class="wx">
+      <span class="wx-glyph">${glyphSvg(w.glyph)}</span>
+      <div class="wx-text">
+        <b class="wx-temp">${Math.round(w.grad)}°</b>
+        <span class="wx-desc">${w.text}</span>
+        <span class="wx-city">${w.ort}</span>
+      </div>
+    </div>`;
+}
+
+function renderWeather() {
+  const an = state.settings.weatherDesk === "on" && state.weather;
+  const tile = $("wxTile");
+  const desk = $("wxDesk");
+  const desktopMode = state.settings.mode === "desktop";
+
+  tile.hidden = !an || desktopMode;
+  desk.hidden = !an || !desktopMode;
+  if (!an) return;
+
+  const html = weatherHtml(state.weather);
+  tile.querySelector(".wx-body").innerHTML = html;
+  desk.innerHTML = html;
+}
+
 function setMode(mode) {
   if (state.settings.mode === mode) return;
   state.settings.mode = mode;
@@ -875,6 +1038,19 @@ function openSettings() {
       ${seg("openIn", [["tab", "neuer tab"], ["same", "gleiches fenster"]], s.openIn)}
     </div>
 
+    <div class="field">
+      <span class="label">Wetter</span>
+      ${seg("weatherDesk", [["on", "auf dem schreibtisch"], ["off", "aus"]], s.weatherDesk)}
+      <div style="height:6px"></div>
+      ${seg("weatherBar", [["on", "in der leiste"], ["off", "aus"]], s.weatherBar)}
+      <div class="wx-city-row">
+        <input id="wxQuery" type="text" placeholder="Stadt suchen …" autocomplete="off" />
+        <button class="btn" id="btnWxSearch">suchen</button>
+      </div>
+      <div id="wxResults" class="wx-results"></div>
+      <p class="ae-hint" id="wxCurrent" style="margin-left:0"></p>
+    </div>
+
     <div class="field">
       <span class="label">Programme</span>
       <button class="btn" id="btnApps">${state.cfg.apps.length} eingetragen — verwalten …</button>
@@ -902,10 +1078,58 @@ function openSettings() {
           state.settings[key] = btn.dataset.v;
           saveSettings();
           renderStats();
+          if (key.startsWith("weather")) loadWeather();
           if (key === "openIn" && state.settings.mode === "terminal") renderTiles();
         });
       });
 
+      const zeigeOrt = () => {
+        root.querySelector("#wxCurrent").textContent = state.settings.weatherCity
+          ? `eingestellt: ${state.settings.weatherCity}`
+          : "kein Ort eingestellt — ohne Ort bleibt das Wetter aus.";
+      };
+      zeigeOrt();
+
+      const suchen = async () => {
+        const q = root.querySelector("#wxQuery").value.trim();
+        const out = root.querySelector("#wxResults");
+        if (!q) return;
+        out.textContent = "suche …";
+        let orte;
+        try {
+          orte = await api("/api/weather/search?q=" + encodeURIComponent(q));
+        } catch {
+          out.textContent = "Ortssuche nicht erreichbar.";
+          return;
+        }
+        if (!orte || !orte.length) {
+          out.textContent = "nichts gefunden.";
+          return;
+        }
+        out.innerHTML = orte
+          .map((o, i) => `<button type="button" class="wx-hit" data-i="${i}">${o.name}<span>${o.land}</span></button>`)
+          .join("");
+        out.querySelectorAll(".wx-hit").forEach((b) =>
+          b.addEventListener("click", () => {
+            const o = orte[Number(b.dataset.i)];
+            // Koordinaten mitspeichern: Sonst müsste jede Wetterabfrage den Ort
+            // erneut suchen — zwei Anfragen nach draußen statt einer.
+            state.settings.weatherCity = o.name;
+            state.settings.weatherLat = String(o.lat);
+            state.settings.weatherLon = String(o.lon);
+            saveSettings();
+            out.innerHTML = "";
+            root.querySelector("#wxQuery").value = "";
+            zeigeOrt();
+            loadWeather();
+          })
+        );
+      };
+      root.querySelector("#btnWxSearch").addEventListener("click", suchen);
+      root.querySelector("#wxQuery").addEventListener("keydown", (e) => {
+        if (e.key === "Enter") { e.preventDefault(); suchen(); }
+      });
+
       root.querySelector("#btnApps").addEventListener("click", openApps);
     },
     420

web/style.css

@@ -885,3 +885,72 @@ body {
   color: var(--p-mid);
 }
 .saveline[data-kind="err"] { color: #ff7a5c; }
+
+/* ── Wetter ────────────────────────────────────────────────────────────────
+   Zweimal dasselbe Feld: als Fenster im Terminal-Modus, als kleines Schild
+   oben rechts auf dem Schreibtisch. Ein Aufbau, zwei Rahmen. */
+.wx {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.wx-glyph {
+  display: block;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 44px;
+  color: var(--p);
+}
+.wx-glyph svg { width: 100%; height: 100%; display: block; }
+.wx-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+.wx-temp { font-size: 22px; color: var(--p); }
+.wx-desc { color: var(--p-mid); }
+.wx-city {
+  color: var(--p-dim);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Terminal-Modus: ein Fenster wie die anderen, aber schmal. Über die volle
+   Breite gezogen sähe eine Temperatur nach Bekanntmachung aus, nicht nach
+   Widget. */
+.win-weather { max-width: 320px; align-self: start; }
+
+/* Schreibtisch-Modus: schwebendes Schild, rechts unter der Menüleiste. Nicht
+   verschiebbar wie ein Fenster — ein Widget, das man erst suchen muss, ist
+   keins. */
+.deskwidget {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  z-index: 5;
+  padding: 10px 14px;
+  background: var(--bg);
+  border: 1px solid var(--p-faint);
+  box-shadow: 0 0 0 1px var(--bg), 4px 4px 0 rgba(0, 0, 0, 0.5);
+}
+@media (max-width: 620px) {
+  /* Am Handy stünde es über der Symbolspalte. */
+  .deskwidget { position: static; margin: 10px; }
+}
+
+/* Ortssuche in den Einstellungen */
+.wx-city-row { display: flex; gap: 6px; margin-top: 8px; }
+.wx-city-row input { flex: 1; min-width: 0; }
+.wx-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
+.wx-hit {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 5px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--p-mid);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.wx-hit span { color: var(--p-dim); font-size: 12px; }
+.wx-hit:hover { border-color: var(--p-faint); color: var(--p); }