Symbole in beiden Leisten, aus einer Quelle

Die Pixelraster stehen jetzt in web/glyphs.json — einmal. Der Schreibtisch
laedt die Datei selbst, die HoneyBar bekommt sie mit der App-Liste mit;
sie bleibt damit eine einzelne Datei ohne zweite Anfrage. Die abgetippten
Wettersymbole in honeybar.js sind weg, und die Symbolauswahl im
Programm-Editor kommt jetzt aus derselben Datei statt aus einer Liste im
Quelltext.

Neu: Symbole neben den App-Namen im Streifen beider Leisten, mit einem
Schalter (Einstellungen -> HoneyBar) fuer beide zugleich. In den
Aufklappmenues und auf den Kacheln stehen sie immer.

web/js/os.js

@@ -123,10 +123,19 @@ function renderShell() {
 function renderMenubarApps() {
   const nav = $("mbApps");
   nav.innerHTML = "";
+  // Derselbe Schalter wie in der HoneyBar fremder Apps: Wer die Symbole dort
+  // abstellt, will sie hier auch nicht — es ist dieselbe Leiste.
+  const mitSymbol = state.settings.barGlyphs !== "off";
   state.cfg.apps.forEach((app) => {
     const b = document.createElement("button");
     b.className = "mb-app";
-    b.textContent = app.name;
+    if (mitSymbol) {
+      const ico = document.createElement("span");
+      ico.className = "mb-ico";
+      ico.innerHTML = glyphSvg(app.glyph);
+      b.appendChild(ico);
+    }
+    b.appendChild(document.createTextNode(app.name));
     b.title = `${app.name} öffnen — ${app.url}`;
     b.addEventListener("click", () => launch(app));
     nav.appendChild(b);
@@ -564,6 +573,12 @@ function openSettings() {
       ${seg("glow", [["on", "glühen an"], ["off", "aus"]], s.glow)}
     </div>
 
+    <div class="field">
+      <span class="label">HoneyBar</span>
+      ${seg("barGlyphs", [["on", "symbole an"], ["off", "nur namen"]], s.barGlyphs)}
+      <p class="ae-hint" style="margin-left:0">gilt für den App-Streifen hier und in jeder App</p>
+    </div>
+
     <div class="field">
       <span class="label">Apps öffnen</span>
       ${seg("openIn", [["tab", "neuer tab"], ["same", "gleiches fenster"]], s.openIn)}
@@ -619,6 +634,7 @@ function openSettings() {
           renderStats();
           if (key.startsWith("weather")) loadWeather();
           if (key === "openIn" && state.settings.mode === "terminal") renderTiles();
+          if (key === "barGlyphs") renderMenubarApps();
         });
       });
 
@@ -684,7 +700,11 @@ function openSettings() {
 function openApps() {
   let draft = state.cfg.apps.map((a) => ({ ...a }));
 
-  const GLYPHS_LIST = ["cloud", "note", "box", "chip", "folder", "gear", "globe", "disk"];
+  // Die Auswahl kommt aus glyphs.json selbst — wer dort ein Symbol ergänzt,
+  // kann es sofort wählen. Die Wettersymbole liegen in derselben Datei (die
+  // HoneyBar braucht beides in einer Antwort), taugen aber nicht als App-Logo.
+  const WETTER_GLYPHEN = ["sonne", "heiter", "wolke", "nebel", "regen", "schnee", "gewitter"];
+  const GLYPHS_LIST = Object.keys(GLYPHS).filter((g) => !WETTER_GLYPHEN.includes(g));
 
   const rowHtml = (a, i) => `
     <details class="approw" ${a.__neu ? "open" : ""}>
@@ -823,7 +843,14 @@ function buildAppMenu() {
     menu.innerHTML =
       `<div class="sm-head">wechseln zu</div>` +
       (state.cfg.apps.length
-        ? state.cfg.apps.map((a) => `<button data-app="${escapeAttr(a.id)}">${escapeHtml(a.name)}</button>`).join("")
+        ? state.cfg.apps
+            .map(
+              (a) =>
+                // Im Menü stehen die Symbole immer — dort ist Platz, und dort
+                // sucht man eine App, statt sie im Vorbeigehen zu erkennen.
+                `<button data-app="${escapeAttr(a.id)}"><span class="sm-ico">${glyphSvg(a.glyph)}</span>${escapeHtml(a.name)}</button>`
+            )
+            .join("")
         : `<button data-settings="1">keine app eingetragen …</button>`);
 
     menu.querySelectorAll("[data-app]").forEach((b) =>
@@ -925,7 +952,9 @@ function buildStartMenu() {
     closeAppMenu();
 
     menu.innerHTML = `<div class="sm-head">starten</div>` +
-      state.cfg.apps.map((a) => `<button data-app="${a.id}">${escapeHtml(a.name)}</button>`).join("") +
+      state.cfg.apps
+        .map((a) => `<button data-app="${escapeAttr(a.id)}"><span class="sm-ico">${glyphSvg(a.glyph)}</span>${escapeHtml(a.name)}</button>`)
+        .join("") +
       `<hr /><button data-win="programme">Programme</button>
        <button data-win="system">System</button>
        <button data-win="settings">Einstellungen</button>