From 64d298c6dbd3a89b8b105240443db5bb36749a12 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Tue, 7 Jul 2026 21:40:23 +0100
Subject: [PATCH] fix(catalog/webui): make the official-catalog "Re-enable"
 button inline, full-height & clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the official catalog is hidden, its "Re-enable" action rendered as a
flat, greyed-out ~27px pill pinned to the top-left of the row — shorter than
the 44px URL field and not obviously clickable (the generic .btn-secondary
loses its nebula-theme polish outside .config-actions, so it fell back to an
unstyled base button).

- The action column now align-self:stretch, so its control matches the URL
  field's height and sits inline (also vertically centres the compact × in the
  enabled state).
- The Re-enable button gets a dedicated .catalog-reenable-btn treatment: accent
  fill + accent border + hover state + an eye icon, filling the row height so it
  lines up with the input and clearly reads as a button.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../admin/config/js/catalog-manager.js        |  2 +-
 .../frontend/core/forms/css/config.css        | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js b/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js
index d04f6ce..e8efe0a 100644
--- a/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js
+++ b/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js
@@ -188,7 +188,7 @@ window.validateCatalogFormat = function (input) {
 window.officialCatalogActionHTML = function (enabled) {
   return enabled
     ? `<button type="button" class="delete-domain-btn" title="Remove the official catalog from browsing" onclick="window.deleteOfficialCatalog()"><span class="delete-icon">×</span></button>`
-    : `<button type="button" class="btn btn-secondary" style="padding:.3rem .8rem;" onclick="window.enableOfficialCatalog()">Re-enable</button>`;
+    : `<button type="button" class="catalog-reenable-btn" title="Show the official catalog in browsing again" onclick="window.enableOfficialCatalog()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Re-enable</button>`;
 };
 
 window.deleteOfficialCatalog = function () {
diff --git a/containers/libreportal/frontend/core/forms/css/config.css b/containers/libreportal/frontend/core/forms/css/config.css
index 0fe5a50..187bb79 100644
--- a/containers/libreportal/frontend/core/forms/css/config.css
+++ b/containers/libreportal/frontend/core/forms/css/config.css
@@ -324,6 +324,44 @@
   pointer-events: none;
 }
 
+/* Official-catalog row action column. align-self:stretch makes it match the
+   URL field's height (whatever that computes to), so its button sits inline and
+   the same height as the input — and centres the compact × in the enabled
+   state instead of pinning it to the top. */
+.domain-header [data-official-action] {
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Re-enable action (shown when the official catalog is hidden). A clear
+   accent-tinted, accent-bordered button with a hover state so it reads as
+   clickable — the generic .btn-secondary loses its themed polish outside
+   .config-actions and rendered as a flat, greyed-out pill. Fills the row
+   height (100% of the stretched column) to line up with the URL field. */
+.catalog-reenable-btn {
+  height: 100%;
+  padding: 0 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(var(--accent-rgb), 0.55);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+.catalog-reenable-btn:hover {
+  background: rgba(var(--accent-rgb), 0.26);
+  border-color: var(--accent);
+}
+.catalog-reenable-btn:active { transform: translateY(1px); }
+
 /* Responsive column counts — colocated here (and not in style.css)
    because the base 3-column rule above loads later than style.css,
    so the unscoped base would otherwise win the cascade against the