refactor(admin): group the settings page into sections (#178)

* refactor(admin): group the settings page into sections

The admin page was one long list of fields. It is now split into
"Etherpad server", "Pad types and behaviour", "External pads and
embedding" and "Diagnostics", with the pad type toggles at the top of
their section and the field hints tied to their inputs.

Saving and the diagnostic tools report next to their own buttons instead
of into a single shared status line, so feedback appears where the action
was triggered. The two areas update independently – a late response no
longer clears the other one's result.

Hints are linked with aria-describedby, the dynamic "no pad type enabled"
hint announces itself via role="status", and spacing is set with explicit
row classes rather than negative margins.

Adds tests/js/admin-settings.test.js, the first coverage for
src/admin-settings.js.

* Address PR review comments

- The Playwright health-check helper still read the save status node, so
  the admin health check spec would have failed against the new markup.
- Diagnostics fall back to the save status area when the diagnostics area
  is absent, instead of silently dropping the feedback.
- The new unit tests mocked responses without `ok: true`, so they ran
  through the error path; they now assert the success path explicitly.

* Make the pad type hint announce, prefix its sibling hint ids

role="status" was set on an element toggled via `display`, so the text
arrived as initial content rather than a change and screen readers
commonly stayed silent. The element is now always rendered and the script
writes or clears its text, which is what a live region reacts to; an
empty hint collapses via `.ep-field-hint:empty`, so nothing moves
visually. Re-rendering identical text is skipped so a server-rendered
message is not announced on load.

The six new hint ids gain the app's `epnc-` prefix, matching every other
id in the template.

* Trim the comments added while reviewing

The explanations were written for the review and read as heavy in the
final code. Kept only the reasoning that is not visible from the code
itself, at roughly a third the length.

Author: Jaggob

css/admin-settings.css

@@ -10,27 +10,73 @@
 	display: block;
 }
 
+/* Rows followed by a hint set their own gap, so it does not depend on
+   whichever `p` rule wins. */
+#etherpad-nextcloud-admin-settings .ep-field-row {
+	margin-bottom: 4px;
+}
+
 #etherpad-nextcloud-admin-settings .ep-field-hint {
-	margin-top: -8px;
+	margin-top: 0;
 	margin-bottom: 14px;
+	max-width: 640px;
+	color: var(--color-text-maxcontrast);
 }
 
-#etherpad-nextcloud-admin-settings #allow-external-pads-row {
-	margin-bottom: 6px;
+/* Lets the script empty a live region instead of hiding it — see
+   updatePadTypesHint(). */
+#etherpad-nextcloud-admin-settings .ep-field-hint:empty {
+	margin: 0;
 }
 
-#etherpad-nextcloud-admin-settings #external-pad-allowlist-row {
-	margin-bottom: 6px;
+/* A reported value, not an explanation: no muted hint styling. */
+#etherpad-nextcloud-admin-settings .ep-detected-value {
+	margin-top: 0;
+	margin-bottom: 14px;
 }
 
-#etherpad-nextcloud-admin-settings #external-pad-allowlist-hint {
-	margin-top: 0;
+/* An option and its description form one block: tight between them,
+   clear gap to the next option, hint indented under the label text. */
+#etherpad-nextcloud-admin-settings .ep-checkbox-row {
+	margin-bottom: 0;
+}
+
+#etherpad-nextcloud-admin-settings .ep-checkbox-row label {
+	margin-bottom: 0;
 }
 
+#etherpad-nextcloud-admin-settings .ep-checkbox-hint {
+	margin-top: 2px;
+	margin-bottom: 22px;
+	padding-left: 26px;
+}
+
+/* Dark and bold like Nextcloud's own section names; muted or uppercase
+   would read as secondary text next to the field labels. */
+#etherpad-nextcloud-admin-settings .ep-section-heading {
+	margin: 0 0 14px;
+	padding-top: 22px;
+	border-top: 1px solid var(--color-border);
+	font-size: 1.2em;
+	font-weight: bold;
+	color: var(--color-main-text);
+}
+
+#etherpad-nextcloud-admin-settings form > .ep-section-heading:first-child {
+	padding-top: 0;
+	border-top: none;
+}
+
+#etherpad-nextcloud-admin-settings #allow-external-pads-row {
+	margin-bottom: 6px;
+}
+
+/* Nextcloud mutes form labels; field names are primary content here. */
 #etherpad-nextcloud-admin-settings label {
 	display: block;
 	font-weight: 600;
 	margin-bottom: 6px;
+	color: var(--color-main-text);
 }
 
 #etherpad-nextcloud-admin-settings input[type="url"],
@@ -42,11 +88,13 @@
 	max-width: 640px;
 }
 
+/* Same reason, plus weight: the option heads its own block. */
 #etherpad-nextcloud-admin-settings label.checkbox {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
-	font-weight: 400;
+	font-weight: 600;
+	color: var(--color-main-text);
 }
 
 #etherpad-nextcloud-admin-settings .etherpad-nextcloud-admin-actions {
@@ -55,8 +103,8 @@
 	gap: 10px;
 }
 
-#etherpad-nextcloud-admin-settings #etherpad-nextcloud-admin-status.ep-status-success,
-#etherpad-nextcloud-admin-settings #etherpad-nextcloud-admin-status.ep-status-error {
+#etherpad-nextcloud-admin-settings .ep-status.ep-status-success,
+#etherpad-nextcloud-admin-settings .ep-status.ep-status-error {
 	color: var(--color-main-text, var(--color-text-maxcontrast, #1f2937));
 }