Apps lassen sich in Kategorien gruppieren

Ein Feld an der App, kein zweites Datenmodell: Eine Kategorie besteht genau
so lange, wie eine App sie traegt. Damit gibt es nichts anzulegen, nichts zu
loeschen und keine zweite Reihenfolge, die mit der bestehenden aus dem Tritt
geraten koennte.

Die Reihenfolge der Ueberschriften ist die ihres ersten Auftretens in der
Liste -- also ordnen dieselben Pfeile wie bisher beides. Am Rand einer Gruppe
haengt der Pfeil die App in die Nachbargruppe um, statt zu tauschen: derselbe
Knopf zum Sortieren und zum Umkategorisieren, und keine App kann zwischen
zwei Gruppen liegen bleiben.

Eingesammelt wird im Server, beim Schreiben wie beim Lesen. Das war nicht der
erste Entwurf: Zuerst sortierte die Oberflaeche und die HoneyBar setzte ihre
Ueberschriften beim Durchlaufen -- prompt stand eine App ohne Kategorie in der
HoneyBar unter der letzten Ueberschrift und auf dem Schreibtisch ganz oben.
Bei zwei Lesern derselben Liste gehoert die Reihenfolge dorthin, wo die Liste
liegt.

Ueberschriften erscheinen, wo man sucht: Kacheln, Schublade beider Leisten,
Programme-Fenster. Nicht im App-Streifen (32 Pixel) und nicht bei den
Schreibtischsymbolen.

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

web/honeybar/honeybar.js

@@ -276,6 +276,15 @@
         padding: 4px 8px; font-size: 10px; letter-spacing: .18em;
         text-transform: uppercase; color: var(--p-dim);
       }
+      /* Ueberschrift einer Kategorie in der Schublade. Wie .head, nur mit
+         etwas Luft darueber, und sie spannt ueber alle drei Spalten der
+         Schublade — sonst stuende sie als vierte Kachel neben den Apps. */
+      .d-kopf {
+        grid-column: 1 / -1;
+        padding: 6px 4px 1px; font-size: 10px; letter-spacing: .18em;
+        text-transform: uppercase; color: var(--p-dim);
+      }
+      .d-kopf:first-child { padding-top: 0; }
       /* Dasselbe Menue, nur an der anderen Seite: das Systemmenue haengt am
          Logo links, das App-Menue am Pfeil rechts. */
       .menu.sys { left: 6px; right: auto; }
@@ -355,6 +364,13 @@
       return span;
     };
 
+    // Die Schublade bekommt Ueberschriften, der Streifen nicht: Dort sucht man
+    // eine App, hier erkennt man sie im Vorbeigehen wieder — und fuer eine
+    // Ueberschrift ist in 32 Pixeln Hoehe ohnehin kein Platz. Die Reihenfolge
+    // der Gruppen ist die ihres ersten Auftretens in der Liste; HoneyOS
+    // sortiert sie schon so, hier wird nur eingesammelt.
+    let letzteKategorie = null;
+
     apps.forEach((app) => {
       if (app.id === "honeyos") return; // steckt schon links im Logo
 
@@ -369,6 +385,17 @@
       if (app.id === current) a.setAttribute("aria-current", "page");
       nav.appendChild(a);
 
+      const kat = (app.kategorie || "").trim();
+      if (kat !== letzteKategorie) {
+        letzteKategorie = kat;
+        if (kat) {
+          const kopf = document.createElement("div");
+          kopf.className = "d-kopf";
+          kopf.textContent = kat;
+          menuApps.appendChild(kopf);
+        }
+      }
+
       const m = document.createElement("a");
       m.className = "d-app";
       m.href = app.url;