fix(ui): name the section after its button, drop the folder slash, colour the widget

**"Zone sensible" said nothing.** The heading is now the name of the action in
it — "Quitter le groupe", or "Supprimer le groupe" for the owner, who sees a
different button. Worth stating because it is not quite what was asked for: a
fixed "Quitter le groupe" would have sat above a delete button for whoever owns
the group. The red goes with it; only the button is red, which is where the
warning belongs. `members.danger_title` is gone from all ten locales rather than
left behind unread.

**A folder name no longer ends in a slash.** The folder icon in the cell beside
it already says what it is.

**The transfers widget turns green while transfers run.** The badge counts them,
but a count has to be read; colour is what carries from across the room, which
is the point of a widget in the nav bar rather than on the page. Derived from
the live list on every render, so there is no state that can forget to clear
when the last transfer ends.

The class is set in `app.js` and coloured in `style.css` — either alone does
nothing and neither fails loudly, so there is a test for each half.

848 tests pass.

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

2 files changed, 48 insertions, 1 deletions

diff --git a/packages/meshbay-hub/tests/test_spa_ordering.py b/packages/meshbay-hub/tests/test_spa_ordering.py
index 1556cb7..dfc92f9 100644
--- a/packages/meshbay-hub/tests/test_spa_ordering.py
+++ b/packages/meshbay-hub/tests/test_spa_ordering.py
@@ -144,7 +144,7 @@ def test_the_roster_comes_last():
     for name, marker in (("the invite form", "onSubmit=${doInvite}"),
                          ("the pairing form", "onSubmit=${doPair}"),
                          ("the devices section", "device.mine_title"),
-                         ("leaving and deleting", "members.danger_title")):
+                         ("leaving and deleting", "group.delete_group_confirm")):
         assert panel.index(marker) < listing, f"{name} belongs above the roster"
 
 
diff --git a/packages/meshbay-hub/tests/test_transfers.py b/packages/meshbay-hub/tests/test_transfers.py
index 08743f6..35fe1cc 100644
--- a/packages/meshbay-hub/tests/test_transfers.py
+++ b/packages/meshbay-hub/tests/test_transfers.py
@@ -167,3 +167,50 @@ def test_the_rate_is_readable(tmp_path):
 say(formatSpeed(0), formatSpeed(2048), formatSpeed(5 * 1024 * 1024));
 """, tmp_path)
     assert result == ["", "2 KB/s", "5.0 MB/s"]
+
+
+# ── What the widget shows without being opened ──────────────────────────────
+
+APP = STATIC / "app.js"
+
+
+def _widget() -> str:
+    source = APP.read_text(encoding="utf-8")
+    start = source.index("function TransferWidget(")
+    return source[start:source.index("\nfunction ", start + 1)]
+
+
+def test_the_widget_marks_itself_while_transfers_run():
+    """
+    The badge counts them, but a count has to be read. Colour is what says
+    "something is moving" from across the room, which is the point of a widget
+    that lives in the nav bar rather than on the page.
+    """
+    widget = _widget()
+    assert "running.length ? 'active' : ''" in widget, (
+        "the button no longer marks itself while transfers are running")
+
+
+def test_the_mark_comes_off_when_the_last_one_finishes():
+    """`running` is derived from the live list on every render, not stored — so
+    there is no state to forget to clear."""
+    widget = _widget()
+    assert "const running = items.filter(i => i.status === 'running');" in widget
+
+
+def test_the_colour_is_defined_for_that_mark():
+    """The class is set in one file and coloured in another; either alone does
+    nothing, and neither fails loudly."""
+    css = (STATIC / "style.css").read_text(encoding="utf-8")
+    assert ".transfer-btn.active" in css
+
+
+# ── The file list ───────────────────────────────────────────────────────────
+
+def test_a_folder_name_carries_no_trailing_slash():
+    """The folder icon in the cell beside it already says what it is."""
+    source = APP.read_text(encoding="utf-8")
+    row = source[source.index('class="file-row dir-row"'):]
+    row = row[:row.index("</tr>")]
+    assert "${d}/" not in row, "the folder name is rendered with a trailing slash"
+    assert "${d}" in row