feat: group the list view by section and let the groups collapse

Every page of a forum repeats its global announcements, announcements and
stickies before the first real topic. On a phone that is the whole first
screen, scrolled past on every page turn, and the rebuild made it worse: the
board separates those blocks with header rows the card stream dropped, so
what remained was one undifferentiated run of cards.

Each block now carries a header with its name and card count, and tapping it
folds the block away. The announcement blocks start folded, which is the
point of the change; folding rather than filtering keeps them reachable
without editing the script. The state is kept per kind, so a decision taken
in one forum holds in all of them.

localStorage rather than GM_setValue: no @grant, and identical behaviour in
Tampermonkey and the iOS app, against the risk that Safari clears the value
after long inactivity and the sections return to their default. That is a
reset of one preference, not data loss.

Rows are classified by the icon in their first column instead of a title
prefix, because the board marks the type nowhere else. The header labels come
from the board's own separator rows, so sections nobody anticipated still
read correctly.

The menu bar links the forum rules and the FAQ as topics. That row has
neither a topic title nor numeric columns, but it passed the layout brake and
had been yielding a ghost card at the head of every list — visible now that
it would claim a section header of its own.

CLAUDE.md

@@ -9,9 +9,10 @@ die `.user.js`-Datei ist das Produkt.
 | `rin-mobile.user.js` | `*://cs.rin.ru/forum/*` | Beide Ansichten, Weiche nach Seitentyp |
 | `dev/rin-mobile.dev.user.js` | zusaetzlich `localhost:*` | Loader, bindet per `@require file:///` das echte Script ein |
 | `dev/viewtopic.php` | — | Fixture: gespeicherter Thread, 1114 Seiten |
+| `dev/viewforum.php` | — | Fixture: Main Forum, 610 Seiten, mit Unterforen, Ankuendigungen und Stickies |
 
-Das Fixture ist ueber `.gitignore` (`dev/*.php`) ausgeschlossen. Nach einem
+Die Fixtures sind ueber `.gitignore` (`dev/*.php`) ausgeschlossen. Nach einem
-frischen Klon ist es nicht da und muss nach der Anleitung in der README neu
+frischen Klon sind sie nicht da und muessen nach der Anleitung in der README neu
 gespeichert werden — die Seite verlangt einen Login.
 
 ## Aufbau
@@ -65,6 +66,21 @@ verschwindet und nur die Beschreibung bleibt als `.rm-last` uebrig. Genau so
 war es vor 3.2. Brotkrumen und „Mark forums read" verlinken ebenfalls Foren,
 stehen aber in Zeilen ohne Forenmerkmale und werden verworfen.
 
+**Der Typ einer Themenzeile steht im Symbol, nicht am Titel.** `rinDark`
+unterscheidet `global_read.png`, `announce_read.png`, `sticky_read.png` und
+`topic_read.png` in der ersten Spalte, jeweils auch als `_locked`-Variante. Die
+Trennzeilen der Seite (`<td class="row3" colspan="6"><b>Stickies</b>`) tragen
+keinen Link und fallen beim Einsammeln durch; ihr Text ist trotzdem die beste
+Beschriftung und wird ueber die Vorgaengerzeilen nachgeschlagen. Achtung beim
+Zaehlen im Fixture: dieselben Symbole stehen unten noch einmal in der Legende,
+ein Grep zaehlt also mehr, als es Zeilen gibt.
+
+**Der Menuebalken der Seite verlinkt Themen.** „Forum rules" und die FAQ stehen
+in einer Layoutzeile ohne Tabelle oder Script darin, die Bremse in `rowKind()`
+greift dort also nicht. Ohne das Merkmal `a.topictitle` beziehungsweise zwei
+Zahlenspalten wurde daraus eine Geisterkarte am Kopf jeder Liste — mit
+Gruppenkoepfen faellt sie als eigener Abschnitt „Themen 1" auf.
+
 **Der Gruppenkopf entfaellt hinter einer Kategoriezeile.** Sonst stuende auf
 der Forenwurzel unter jeder Kategorie noch ein „FOREN n" — die Kategorie leitet
 die Foren darunter bereits ein. Die Karten werden deshalb erst vollstaendig
@@ -79,10 +95,11 @@ Zeilen mit `table`, `script`, `style` oder `form` darin sind deshalb keine
 Kandidaten, und die Beschreibung wird nur aus den direkten Textknoten der
 Titelzelle gebildet, nie aus deren gesamtem Text.
 
-**Das Theme ist `rinDark`, nicht subsilver2.** Die Klassennamen aus der
+**Das Theme ist `rinDark`, nicht subsilver2.** Fuer die Forenliste waren die
-phpBB-Dokumentation (`forumlink`, `forumdesc`) sind fuer die Forenliste
+Klassennamen aus der phpBB-Dokumentation (`forumlink`, `forumdesc`) deshalb
-deshalb nur eine Vermutung, solange kein `dev/viewforum.php` vorliegt. Die
+zunaechst nur eine Vermutung; `dev/viewforum.php` bestaetigt sie inzwischen. Der
-Erkennung faellt bewusst auf die Form der Zeile zurueck.
+Rueckfall auf die Form der Zeile bleibt trotzdem stehen — er kostet nichts und
+traegt die Erkennung, wenn das Theme wechselt.
 
 **Die Brotkrumenleiste ist fixiert, nicht sticky.** `.rm-root` traegt
 `overflow:hidden` und wuerde damit zum Scrollport einer `position:sticky`

README.md

@@ -27,12 +27,24 @@ card; category headers become section headings. Rows are recognised by phpBB's
 own `forumlink` / `forumdesc` classes, and failing that by their shape — two
 purely numeric columns are only ever a forum's topic and post count.
 
-Where forums and topics end up in the same stream of cards, a header strip
+Forums, global announcements, announcements, stickies and topics all end up in
-naming the kind and its count (`FOREN 4`, `THEMEN 3`) is inserted wherever the
+the same stream of cards, which loses the separation the original page draws
-kind changes, and forum cards additionally carry a coloured left edge. The
+between them. A header strip naming the section and its card count is therefore
-original page separates the two by putting them in tables of their own; that
+inserted wherever the kind changes, and forum cards additionally carry a
-boundary is otherwise lost. The strip is left out directly below
+coloured left edge. The label is taken from the board's own separator row
-a category heading, which already introduces the forums under it.
+(`Global Announcements`, `Stickies`, `Topics`), so sections this script does not
+know are named correctly too. Which kind a topic row is comes from the icon in
+its first column, not from its title. The strip is left out directly below a
+category heading, which already introduces the forums under it.
+
+Tapping a header collapses its section. Global announcements, announcements and
+stickies start collapsed: they precede the topics on *every* page of a forum and
+otherwise fill the first screen. The state is stored per kind in `localStorage`,
+so collapsing stickies once applies to every forum. `localStorage` is used
+rather than `GM_setValue` because it needs no `@grant` and behaves the same in
+Tampermonkey and in the iOS app; the trade-off is that Safari may clear
+script-writable storage after long inactivity, which resets the sections to
+their default.
 
 The thread navigation bar holds first / previous / next / last and a page
 indicator. Tapping the indicator opens a sheet with a number field and a grid of
@@ -206,12 +218,25 @@ Zwischenüberschriften. Erkannt werden die Zeilen an phpBBs eigenen Klassen
 `forumlink` / `forumdesc` und ersatzweise an ihrer Form — zwei rein numerische
 Spalten hat nur eine Forenzeile mit Themen- und Beitragszahl.
 
-Stehen Foren und Themen im selben Kartenstrom, wird bei jedem Wechsel ein
+Foren, globale Ankündigungen, Ankündigungen, Stickies und Themen landen alle im
-Gruppenkopf mit Art und Anzahl eingezogen (`FOREN 4`, `THEMEN 3`); Forenkarten
+selben Kartenstrom, womit die Trennung verlorengeht, die die Originalseite
-tragen zusätzlich eine farbige linke Kante. Die Originalseite trennt beide über
+zwischen ihnen zieht. Bei jedem Wechsel wird deshalb ein Gruppenkopf mit dem
-eigene Tabellen mit eigenem Kopf — diese Grenze geht sonst verloren.
+Namen des Abschnitts und der Zahl seiner Karten eingezogen; Forenkarten tragen
-Direkt unter einer Kategorieüberschrift entfällt der
+zusätzlich eine farbige linke Kante. Die Beschriftung stammt aus der Trennzeile
-Gruppenkopf, weil die Überschrift die Foren darunter schon einleitet.
+der Seite selbst (`Global Announcements`, `Stickies`, `Topics`), damit auch
+Abschnitte richtig heißen, die dieses Script nicht kennt. Welcher Art eine
+Themenzeile ist, verrät das Symbol ihrer ersten Spalte, nicht der Titel. Direkt
+unter einer Kategorieüberschrift entfällt der Gruppenkopf, weil die Überschrift
+die Foren darunter schon einleitet.
+
+Ein Tipp auf den Kopf klappt seinen Abschnitt zu. Globale Ankündigungen,
+Ankündigungen und Stickies starten zugeklappt: sie stehen auf *jeder* Seite
+eines Forums vor den Themen und füllen sonst den ersten Bildschirm. Der Zustand
+liegt je Art in `localStorage`, einmal zugeklappte Stickies gelten also in jedem
+Forum. `localStorage` statt `GM_setValue`, weil es ohne `@grant` auskommt und
+sich in Tampermonkey wie in der iOS-App gleich verhält; dafür kann Safari
+schreibbaren Speicher nach längerer Nichtnutzung räumen, dann stehen die
+Abschnitte wieder auf ihrer Voreinstellung.
 
 Die Navigationsleiste im Thread enthält erste / vorherige / nächste / letzte
 Seite und eine Positionsanzeige. Ein Tipp darauf öffnet ein Sheet mit

rin-mobile.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         RIN Mobile
 // @description  Mobile Ansicht fuer cs.rin.ru: Themenlisten als Karten, Threads als Beitragsstrom
-// @version      3.3
+// @version      3.4
 // @match        *://cs.rin.ru/forum/*
 // @run-at       document-start
 // ==/UserScript==
@@ -101,12 +101,21 @@
     /* Foren und Themen stehen auf einer Forenseite in derselben Tabelle
        untereinander. Im Kartenstrom unterscheiden sie sich sonst nur am Text,
        der Uebergang von den Unterforen zu den Themen ist nicht mehr zu sehen. */
-    .rm-group { display:flex; align-items:baseline; justify-content:space-between;
+    .rm-group { display:flex; align-items:baseline; gap:10px;
-                gap:10px; padding:11px 14px; font-size:12px; font-weight:700;
+                padding:11px 14px; font-size:12px; font-weight:700;
                 text-transform:uppercase; letter-spacing:.07em; opacity:.75;
                 background:rgba(128,128,128,.16);
-                border-bottom:1px solid rgba(128,128,128,.28); }
+                border-bottom:1px solid rgba(128,128,128,.28);
-    .rm-group .rm-count { font-weight:600; letter-spacing:0; opacity:.7; }
+                cursor:pointer; -webkit-tap-highlight-color:transparent;
+                -webkit-user-select:none; user-select:none; }
+    .rm-group:active { background:rgba(128,128,128,.26); }
+    .rm-group .rm-gname { flex:1; min-width:0; overflow:hidden;
+                          text-overflow:ellipsis; white-space:nowrap; }
+    .rm-group .rm-count { flex:none; font-weight:600; letter-spacing:0;
+                          opacity:.7; }
+    .rm-caret { flex:none; display:inline-block; font-size:10px; opacity:.7;
+                transition:transform .15s; }
+    .rm-group.rm-closed .rm-caret { transform:rotate(-90deg); }
 
     .rm-card { box-sizing:border-box !important;
                display:block !important;
@@ -493,20 +502,105 @@
     return el;
   }
 
-  // Kopf ueber einem Block gleichartiger Karten. Die Originalseite trennt Foren
+  // Ankuendigungen und Stickies stehen vor jedem Thema jeder Seite eines
-  // und Themen ueber zwei Tabellen mit eigenem Kopf; im Kartenstrom geht diese
+  // Forums. Ihr Typ steht im Symbol der ersten Spalte, nicht am Titel:
-  // Grenze verloren.
+  // global_read.png, announce_read.png, sticky_read.png gegen topic_read.png.
-  function groupHead(kind, n) {
+  function topicGroup(tr) {
-    var el = document.createElement('div');
+    var im = tr.querySelector('img[src]');
-    el.className = 'rm-group';
+    var m = im && (im.getAttribute('src') || '')
+                    .match(/\b(global|announce|sticky)_(?:un)?read/);
+    return m ? m[1] : 'thema';
+  }
+
+  // phpBB stellt jeder dieser Gruppen eine Trennzeile voran. Sie traegt keinen
+  // Link und faellt deshalb beim Einsammeln durch — ihr Text ist aber die
+  // ehrlichste Beschriftung, die es fuer die Gruppe gibt, und deckt auch
+  // Abschnitte ab, die dieses Script nicht kennt.
+  function sepLabel(tr) {
+    var p = tr.previousElementSibling, n = 0;
+    while (p && n++ < 4) {
+      if (p.dataset.rm) return '';
+      if (p.children.length === 1 && p.children[0].hasAttribute('colspan') &&
+          !p.querySelector('a, table')) {
+        var t = txt(p);
+        if (t && t.length < 40) return t;
+      }
+      p = p.previousElementSibling;
+    }
+    return '';
+  }
+
+  var GNAME = { forum: 'Foren', thema: 'Themen', sticky: 'Stickies',
+                global: 'Globale Ankündigungen', announce: 'Ankündigungen' };
+  // Genau die Gruppen, die zwischen dem Leser und den eigentlichen Themen
+  // stehen, starten zugeklappt.
+  var GSHUT = { global: 1, announce: 1, sticky: 1 };
+
+  // Der Zustand liegt in localStorage und nicht in GM_setValue: das kommt ohne
+  // @grant aus und verhaelt sich in Tampermonkey und der iOS-App gleich. Der
+  // Schluessel ist die Gruppenart, nicht ihr Name — einmal zugeklappt gilt
+  // fuer jedes Forum.
+  var GKEY = 'rm-groups';
+
+  function groupState() {
+    try { return JSON.parse(localStorage.getItem(GKEY)) || {}; }
+    catch (e) { return {}; }
+  }
+
+  function saveGroupState(group, open) {
+    try {
+      var s = groupState();
+      s[group] = open;
+      localStorage.setItem(GKEY, JSON.stringify(s));
+    } catch (e) { log.push('speichern: ' + e.message); }
+  }
+
+  // Kopf ueber einem Block gleichartiger Karten, dazu der Kasten, in den sie
+  // gehoeren: die Originalseite trennt Foren, Ankuendigungen, Stickies und
+  // Themen ueber eigene Kopfzeilen, im Kartenstrom geht diese Grenze verloren.
+  // Der Kopf ist zugleich der Schalter, der den Block zuklappt.
+  function openGroup(root, group, label, n) {
+    var saved = groupState()[group];
+    var open = saved === undefined ? !GSHUT[group] : !!saved;
+
+    var head = document.createElement('div');
+    head.className = 'rm-group';
+    head.setAttribute('role', 'button');
+
     var t = document.createElement('span');
-    t.textContent = kind === 'forum' ? 'Foren' : 'Themen';
+    t.className = 'rm-gname';
-    el.appendChild(t);
+    t.textContent = label;
+    head.appendChild(t);
+
     var c = document.createElement('span');
     c.className = 'rm-count';
     c.textContent = n;
-    el.appendChild(c);
+    head.appendChild(c);
-    return el;
+
+    var caret = document.createElement('span');
+    caret.className = 'rm-caret';
+    caret.textContent = '▼';
+    head.appendChild(caret);
+
+    var body = document.createElement('div');
+    body.className = 'rm-gbody';
+
+    function apply() {
+      head.classList.toggle('rm-closed', !open);
+      body.classList.toggle('rm-hidden', !open);
+      head.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+    apply();
+
+    head.addEventListener('click', function () {
+      open = !open;
+      apply();
+      saveGroupState(group, open);
+    });
+
+    root.appendChild(head);
+    root.appendChild(body);
+    return body;
   }
 
   // Welche Karte eine Zeile ergibt, entscheidet der erste verwertbare Link
@@ -516,8 +610,14 @@
   function rowKind(a, tr) {
     if (!txt(a) || a.classList.contains('breadcrumbs') ||
         a.closest('p.breadcrumbs')) return '';
-    if (/viewtopic\.php/.test(a.getAttribute('href') || ''))
+    if (/viewtopic\.php/.test(a.getAttribute('href') || '')) {
-      return tr.querySelector('a.forumlink') ? 'forum' : 'thema';
+      if (tr.querySelector('a.forumlink')) return 'forum';
+      // Der Menuebalken der Seite verlinkt "Forum rules" und die FAQ ebenfalls
+      // auf Themen. Die Bremse fuer Layoutzeilen weiter unten greift dort
+      // nicht, weil die Zeile weder Tabelle noch Script enthaelt — es fehlen
+      // ihr aber die Merkmale einer Themenzeile.
+      return tr.querySelector('a.topictitle') || numCells(tr) >= 2 ? 'thema' : '';
+    }
     // Das Seitengeruest besteht bei phpBB selbst aus Tabellen. Enthaelt eine
     // Zeile eine weitere Tabelle oder ein Script, ist sie Layout und keine
     // Forenzeile — ohne diese Bremse wird die halbe Seite zu einer Karte.
@@ -552,8 +652,14 @@
       if (!tr || tr.dataset.rm || !tr.closest('table')) return;
       var kind = rowKind(a, tr);
       if (!kind) return;
+      var group = kind === 'sektion' ? ''
+                : kind === 'forum' ? 'forum'
+                : topicGroup(tr);
+      // Vor dem Setzen der Marke: sepLabel liest sie an den Zeilen darueber,
+      // um an einer bereits verwerteten Zeile stehen zu bleiben.
+      var label = sepLabel(tr) || GNAME[group] || GNAME.thema;
       tr.dataset.rm = '1';
-      rows.push({ tr: tr, a: a, kind: kind });
+      rows.push({ tr: tr, a: a, kind: kind, group: group, label: label });
     });
     log.push('zeilen=' + rows.length);
     if (!rows.length) return;
@@ -570,24 +676,30 @@
         var c = r.kind === 'thema' ? convertTopic(r.tr)
               : r.kind === 'forum' ? convertForum(r.tr)
               : section(r.a);
-        if (c) items.push({ kind: r.kind, el: c });
+        if (c) items.push({ kind: r.kind, group: r.group, label: r.label, el: c });
       } catch (e) { log.push('convert: ' + e.message); }
     });
 
-    var built = 0, last = '';
+    var built = 0, last = '', box = null;
     items.forEach(function (it, i) {
-      // Eine Kategoriezeile leitet die Foren darunter bereits ein — auf der
+      if (it.kind === 'sektion') {
-      // Forenwurzel wuerde ein Gruppenkopf sie nur doppeln.
+        root.appendChild(it.el);
-      if (it.kind !== 'sektion') {
+        last = 'sektion';
-        if (it.kind !== last && last !== 'sektion') {
+        return;
-          var n = 0;
-          while (i + n < items.length && items[i + n].kind === it.kind) n++;
-          root.appendChild(groupHead(it.kind, n));
       }
       built++;
+      if (it.group !== last) {
+        // Eine Kategoriezeile leitet die Foren darunter bereits ein — auf der
+        // Forenwurzel wuerde ein Gruppenkopf sie nur doppeln.
+        if (last === 'sektion') box = root;
+        else {
+          var n = 0;
+          while (i + n < items.length && items[i + n].group === it.group) n++;
+          box = openGroup(root, it.group, it.label, n);
         }
-      last = it.kind;
+        last = it.group;
-      root.appendChild(it.el);
+      }
+      box.appendChild(it.el);
     });
     log.push('karten=' + built);
     if (!built) return;
@@ -991,7 +1103,7 @@
     if (DEBUG) {
       var d = document.createElement('div');
       d.className = 'rm-dbg';
-      d.textContent = 'RIN Mobile v3.3\n' + log.join('\n');
+      d.textContent = 'RIN Mobile v3.4\n' + log.join('\n');
       document.body.insertBefore(d, document.body.firstChild);
     }
   }