Schublade: Symbol, Name, Untertitel

Der Pfeil rechts klappt in beiden Leisten ein Raster auf statt einer
Liste. Symbol gross, Name, Untertitel als dritte Zeile — der stand
bisher nur auf den Kacheln.

Entschieden gegen Symbol allein: Acht geteilte Glyphen identifizieren
nicht, zwei Apps koennen dieselbe Wolke tragen. Und die Schublade macht
man auf, weil man sucht — der Streifen ist der Ort fuers Wiedererkennen,
dort sind die Symbole abschaltbar.

Dazu 1.4 (CORS in Aether) und 1.5 (Cookie-Sitzung fuer InkNote) aus den
Ideen gestrichen: Widgets, die Daten aus den eigenen Apps holen, sind
nicht mehr gewollt. Der Rest ist neu durchnummeriert.

web/honeybar/honeybar.js

@@ -188,6 +188,37 @@
         color: var(--p); text-shadow: var(--glow);
       }
       .menu[data-open="1"] { display: flex; }
+      /* Die Schublade: Symbol, Name, Untertitel. Sie wird absichtlich
+         aufgemacht, weil man etwas sucht — also wird gelesen, nicht nur
+         wiedererkannt. Deshalb stehen hier immer Namen, anders als im
+         Streifen oben, wo ein Blick reichen muss. */
+      .menu.apps { min-width: 318px; max-width: min(360px, calc(100vw - 12px)); }
+      /* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
+         auseinanderdruecken, und die Schublade wird breiter als der Schirm. */
+      .drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
+      .d-app {
+        display: flex; flex-direction: column; align-items: center; gap: 5px;
+        padding: 9px 4px; text-align: center; color: var(--p-mid);
+        border: 1px solid transparent; min-width: 0;
+      }
+      /* Die Regel fuer a und button oben setzt nowrap — richtig fuer den
+         Streifen, falsch
+         hier: Der Untertitel soll umbrechen statt abgeschnitten zu werden. */
+      .d-name, .d-sub { max-width: 100%; }
+      .d-sub { white-space: normal; }
+      .d-name { overflow: hidden; text-overflow: ellipsis; }
+      .d-app:hover { border-color: var(--p-dim); color: var(--p); }
+      .d-app[aria-current="page"] { border-color: var(--p); color: var(--p); }
+      .d-app .ico { width: 24px; height: 24px; }
+      .d-app .ico svg { width: 24px; height: 24px; }
+      .d-name { letter-spacing: .08em; }
+      /* Der Untertitel darf umbrechen, aber nicht wachsen — sonst stehen die
+         Kacheln unterschiedlich hoch. */
+      .d-sub {
+        font-size: 10px; line-height: 1.25; color: var(--p-dim);
+        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
       .menu a, .menu button { text-align: left; padding: 6px 8px; color: var(--p-mid); }
       .menu a:hover, .menu button:hover { background: var(--p-faint); color: var(--p); }
       .menu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
@@ -219,9 +250,9 @@
       <button id="hide" role="menuitem">HoneyBar einklappen</button>
     </div>
 
-    <div class="menu" id="menu" role="menu">
+    <div class="menu apps" id="menu" role="menu">
       <div class="head">wechseln zu</div>
-      <div id="menuApps"></div>
+      <div class="drawer" id="menuApps"></div>
     </div>`;
 
   /* ── Aussehen ─────────────────────────────────────────────────────────────
@@ -287,11 +318,22 @@
       nav.appendChild(a);
 
       const m = document.createElement("a");
+      m.className = "d-app";
       m.href = app.url;
       m.setAttribute("role", "menuitem");
       const ico = symbol(app);
       if (ico) m.appendChild(ico);
-      m.appendChild(document.createTextNode((app.id === current ? "\u25b8 " : "") + app.name));
+      const name = document.createElement("span");
+      name.className = "d-name";
+      name.textContent = app.name;
+      m.appendChild(name);
+      if (app.subtitle) {
+        const sub = document.createElement("span");
+        sub.className = "d-sub";
+        sub.textContent = app.subtitle;
+        m.appendChild(sub);
+      }
+      if (app.id === current) m.setAttribute("aria-current", "page");
       menuApps.appendChild(m);
     });
   }