applet rows: hover + click-lock highlight on every .applet-list-entry.row-3col (My Posts / My Buds / My Notes / My Scrolls / My Games) — bg shifts to --secUser, title to --quiUser (overriding the inherited --terUser link color + stripping the text-shadow the global .applet-list-entry a:hover rule had been baking in), body + ts cells come up from their dimmed 0.6 / 0.5 opacity to full --priUser so the dim middle/right cols pop against the --secUser fill; new apps/applets/static/apps/applets/row-lock.js IIFE module owns the touch-persistence state machine (single _lockedRow ref, .row-locked class toggle): clicking a row not currently locked → locks (clearing any prior lock); clicking the locked row again → unlocks; clicking another row → moves the lock to the new row; clicking anywhere not inside a .row-3col → clears the lock — mirrors the note-page notes-locked click-lock state machine but lighter (no DON/DOFF, no greeting swap, no fetch), one document-level click listener bound once via _bound re-entry guard so beforeEach _init() calls in specs don't pile up handlers; loaded globally via base.html next to applets.js since the rows render on both /billboard/ + /gameboard/; padding-inline 0.5rem + border-radius 0.25rem on the row container shrinks the highlight to a chip shape so hovered rows don't bleed all the way to the applet box edge; 6 Jasmine specs in RowLockSpec.js cover the four state-machine transitions + the "child element of row still locks the parent row" affordance (since the user can tap the body cell text, not just the title link) + the "only one row carries .row-locked at a time" invariant; SpecRunner.html updated (both static_src + the static/ runtime mirror the FT reads from per the project's static-src→static copy discipline) — TDD

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 <noreply@anthropic.com>

src/apps/applets/static/apps/applets/row-lock.js

@@ -0,0 +1,60 @@
+// Click-lock state for `.applet-list-entry.row-3col` rows on the dashboard
+// applet grids (My Posts / My Buds / My Notes / My Scrolls / My Games).
+//
+// Hover styling is pure CSS (`.applet-list-entry.row-3col:hover`); this
+// module just persists the same highlight on tap/click so touch devices can
+// pin a row to read it, and mirrors the toggle-off / shift-to-other-row /
+// click-outside-dismiss behaviour the note-page click-lock established.
+//
+// State machine (clicking …):
+//   • a row that's not locked       → lock it (clearing any prior lock)
+//   • the currently-locked row again → unlock it
+//   • a different row                → move the lock to that row
+//   • anywhere not inside a row      → clear the lock
+
+(function () {
+    'use strict';
+
+    var _lockedRow = null;
+    var _bound = false;
+
+    function _clearLock() {
+        if (_lockedRow) {
+            _lockedRow.classList.remove('row-locked');
+            _lockedRow = null;
+        }
+    }
+
+    function _onClick(e) {
+        var row = e.target.closest('.applet-list-entry.row-3col');
+        if (row) {
+            if (row === _lockedRow) {
+                _clearLock();
+            } else {
+                _clearLock();
+                row.classList.add('row-locked');
+                _lockedRow = row;
+            }
+            return;
+        }
+        _clearLock();
+    }
+
+    function _init() {
+        if (_bound) return;
+        _bound = true;
+        document.addEventListener('click', _onClick);
+    }
+
+    function _testReset() {
+        _clearLock();
+    }
+
+    window.RowLock = {
+        _init: _init,
+        _testReset: _testReset,
+        get _lockedRow() { return _lockedRow; },
+    };
+
+    document.addEventListener('DOMContentLoaded', _init);
+}());