Merge claude/2

containers/libreportal/frontend/components/admin/config/js/catalog-manager.js

@@ -25,10 +25,10 @@ class CatalogManager {
       </div>`;
   }
 
-  // The pinned official row (source #1). Renders the official URL in a read-only
+  // The pinned official row (source #1). Read-only URL input (same element/height
-  // input — same element (and height) as the third-party rows — with the badge
+  // as the third-party rows) with the badge overlaid. It can be hidden from
-  // overlaid. The hidden CFG_CATALOG_OFFICIAL_ENABLED input carries its on/off
+  // browsing via the × (opens a clear ✓/✗ confirmation); the hidden
-  // state so it saves with the rest on "Save Config".
+  // CFG_CATALOG_OFFICIAL_ENABLED input carries that state so it saves on "Save".
   _officialRow(base, enabled) {
     const url = base || '';
     const off = enabled === false;
@@ -193,14 +193,32 @@ window.officialCatalogActionHTML = function (enabled) {
 
 window.deleteOfficialCatalog = function () {
   const apply = () => window._setOfficialCatalog(false);
+  const body = `
+    <p class="catalog-effects-lead">Hiding the official catalog only changes <strong>app browsing</strong>.</p>
+    <div class="catalog-effects">
+      <div class="catalog-effect-group ok">
+        <div class="catalog-effect-title">Still works</div>
+        <ul>
+          <li>System updates &amp; security hotfixes</li>
+          <li>Apps you already have installed</li>
+          <li>Re-enabling the official catalog any time</li>
+        </ul>
+      </div>
+      <div class="catalog-effect-group no">
+        <div class="catalog-effect-title">What changes</div>
+        <ul>
+          <li>Official apps are hidden from the App Center's "Available" list</li>
+        </ul>
+      </div>
+    </div>`;
   if (window.showConfirmation) {
     window.showConfirmation(
-      'Remove the official catalog?',
+      'Hide the official catalog?',
-      'This hides the official LibrePortal catalog’s apps from the App Center. Your system updates and hotfixes are NOT affected — they always use the official release host. You can re-enable it any time. Click Save Config to apply.',
+      '', apply, 'Hide from browsing', 'Cancel', 'danger', true,
-      apply, 'Remove from browsing', 'Cancel', 'danger', true,
+      'I understand updates keep working — this only hides official apps from browsing',
-      'I understand this only hides official apps from browsing, not system updates'
+      body
     );
-  } else if (window.confirm('Remove the official catalog from browsing?')) {
+  } else if (window.confirm('Hide the official catalog from browsing?')) {
     apply();
   }
 };

containers/libreportal/frontend/core/overlays/js/confirmation-dialog.js

@@ -31,7 +31,7 @@ class ConfirmationDialog {
     
   }
 
-  show(title, message, onConfirm, confirmText = 'Confirm', cancelText = 'Cancel', confirmClass = 'primary', showDataLossCheckbox = false, checkboxText = 'I understand I will lose all my data and it cannot be undone') {
+  show(title, message, onConfirm, confirmText = 'Confirm', cancelText = 'Cancel', confirmClass = 'primary', showDataLossCheckbox = false, checkboxText = 'I understand I will lose all my data and it cannot be undone', messageHtml = '') {
 
     this.callback = onConfirm;
     
@@ -44,7 +44,7 @@ class ConfirmationDialog {
       <div class="confirmation-body">
         <div class="confirmation-content">
           <div class="confirmation-icon">⚠️</div>
-          <div class="confirmation-text">${this.escapeHtml(message)}</div>
+          <div class="confirmation-text">${messageHtml || this.escapeHtml(message)}</div>
         </div>
         ${showDataLossCheckbox ? `
           <div class="confirmation-checkbox">
@@ -142,12 +142,12 @@ function initConfirmationDialog() {
 // initConfirmationDialog() will be called centrally
 
 // Global function
-window.showConfirmation = (title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText) => {
+window.showConfirmation = (title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText, messageHtml) => {
   // Ensure dialog is initialized
   initConfirmationDialog();
 
   if (confirmationDialog) {
-    confirmationDialog.show(title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText);
+    confirmationDialog.show(title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText, messageHtml);
   } else {
     // Fallback to native confirm
     if (confirm(message)) {

containers/libreportal/frontend/core/theme/css/base.css

@@ -935,6 +935,45 @@ html[data-theme="nebula"]::after {
   flex: 1;
 }
 
+/* Structured ✓/✗ effect list for confirmations (e.g. hiding the official catalog). */
+.catalog-effects-lead {
+  margin: 0 0 12px;
+  color: var(--text-primary, #fff);
+}
+.catalog-effects {
+  display: grid;
+  gap: 10px;
+  text-align: left;
+}
+.catalog-effect-group {
+  background: rgba(0, 0, 0, 0.20);
+  border: 1px solid var(--border-color);
+  border-left: 3px solid var(--border-color);
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+.catalog-effect-group.ok { border-left-color: #2ecc71; }
+.catalog-effect-group.no { border-left-color: var(--status-warning); }
+.catalog-effect-title {
+  font-weight: 700;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+.catalog-effect-group.ok .catalog-effect-title { color: #2ecc71; }
+.catalog-effect-group.ok .catalog-effect-title::before { content: "✓ "; }
+.catalog-effect-group.no .catalog-effect-title { color: var(--status-warning); }
+.catalog-effect-group.no .catalog-effect-title::before { content: "✕ "; }
+.catalog-effects ul {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.8));
+}
+.catalog-effects li { margin: 2px 0; }
+
 .confirmation-checkbox {
   padding-top: 15px;
   border-top: 1px solid var(--border-strong);