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/css/style.css

@@ -831,6 +831,47 @@ body {
 .startmenu button:hover { background: var(--p); color: var(--bg); text-shadow: none; }
 .startmenu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
 
+/* Die Schublade — der Zwilling der Schublade in honeybar.js. Symbol groß,
+   Name darunter, Untertitel als dritte Zeile: Wer sie aufmacht, sucht etwas,
+   und acht geteilte Pixelsymbole allein sagen dafür zu wenig. */
+.appmenu { min-width: 318px; max-width: min(360px, calc(100vw - 12px)); }
+/* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
+   auseinanderdrücken, und die Schublade wird breiter als der Schirm. */
+.drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
+.startmenu .drawer button.d-app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  padding: 9px 4px;
+  text-align: center;
+  border: 1px solid transparent;
+  min-width: 0;
+}
+.startmenu .drawer .d-name,
+.startmenu .drawer .d-sub { max-width: 100%; }
+.startmenu .drawer .d-name { overflow: hidden; text-overflow: ellipsis; }
+.startmenu .drawer button.d-app:hover {
+  background: none;
+  color: var(--p);
+  border-color: var(--p-dim);
+  text-shadow: var(--glow);
+}
+.d-ico { width: 24px; height: 24px; }
+.d-ico svg { width: 24px; height: 24px; display: block; }
+.d-name { letter-spacing: 0.08em; }
+/* Umbrechen darf er, wachsen nicht — sonst stehen die Kacheln unterschiedlich
+   hoch und das Raster franst aus. */
+.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;
+}
+
 @media (max-width: 620px) {
   .task-btn { min-width: 0; }
   .task-date { display: none; }

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);
     });
   }

web/js/os.js

@@ -840,17 +840,25 @@ function buildAppMenu() {
     closeSystemMenu();
     closeStartMenu();
 
+    // Dieselbe Schublade wie in honeybar.js: Symbol, Name, Untertitel. Sie wird
+    // absichtlich aufgemacht, weil man etwas sucht — also wird gelesen, nicht
+    // nur wiedererkannt. Im Streifen oben reicht ein Blick, dort ist der Name
+    // abschaltbar; hier steht er immer.
     menu.innerHTML =
       `<div class="sm-head">wechseln zu</div>` +
       (state.cfg.apps.length
-        ? state.cfg.apps
+        ? `<div class="drawer">` +
+          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>`
+                `<button class="d-app" data-app="${escapeAttr(a.id)}">
+                   <span class="d-ico">${glyphSvg(a.glyph)}</span>
+                   <span class="d-name">${escapeHtml(a.name)}</span>
+                   ${a.subtitle ? `<span class="d-sub">${escapeHtml(a.subtitle)}</span>` : ""}
+                 </button>`
             )
-            .join("")
+            .join("") +
+          `</div>`
         : `<button data-settings="1">keine app eingetragen …</button>`);
 
     menu.querySelectorAll("[data-app]").forEach((b) =>