Feat/ettic admin UI - changes to the admin backend to get in line with new ettic backend ui styling

[r00bbert]

This PR conflicts with changes I made on #5 please first merge #5 then rebase and merge this PR

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a comprehensive admin design system with modernized styling and reusable components across all admin pages.

• Refactor

  • Redesigned Settings page with improved form controls, layout, and user experience.
  • Updated AI, Questions, and Import/Export pages to use the new design system styling.
  • Added admin footer displaying plugin version and resource links.
  • Optimized admin asset loading for better performance.

• Documentation

  • Updated README with latest stable release information and development branch clarification.

• Chores

  • Expanded translation strings for admin UI.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive admin UI redesign by implementing a scoped design system (opentrust-admin) with a complete CSS component library and vanilla-JS utilities, then migrates all existing OpenTrust admin pages (Settings, AI, Questions, Import/Export) from WordPress Settings API and legacy table-based markup to the new design-system-driven layout. It includes new Settings page scaffolding, shared Footer component, dirty-state tracking, form validation, toast notifications, and modal dialogs.

Changes

Admin Design System Implementation & Migration

Layer / File(s)	Summary
Design System Tokens & Base Styles assets/css/opentrust-admin.css	Establishes .opentrust-admin scope with color tokens (brand, surface, text, status), typography, radii, foundational global rules (box-sizing, links, code), and responsive layout overrides.
Topbar & Header Layout assets/css/opentrust-admin.css	Implements sticky dark topbar with brand cluster (mark/name/version), responsive admin-bar offsets, mobile handling, and per-row dirty-state indicator with pulse animation and reduced-motion support.
Form Controls & Input Styling assets/css/opentrust-admin.css	Defines CSS-only toggles, inputs with focus/invalid/error variants, select dropdowns with custom caret, color picker UI (swatch + hex fusion), segmented controls, and chips with checked/hover states.
Overlays, Modals & Notifications assets/css/opentrust-admin.css	Implements modal backdrop + layout/animations, toast notifications (bottom-right with in/out animations), tooltips (trigger + bubble), and notification variants (info, success, warn, error) with icons and close buttons.
OpenTrust-Specific Components & Polish assets/css/opentrust-admin.css	Adds tabbar strip, AI tab atoms (disclosure/details, provider/advanced cards, model row), Questions log styles (filter toolbar, flush cards, log table, pagination), Import/Export styles (CPT picker, preview tables, pill labels, UUID formatting), and visual polish overrides.
JavaScript Bootstrap & Initialization assets/js/opentrust-admin.js	Sets up DOM-ready IIFE that calls a sequence of initializer functions to wire media pickers, color syncing, dirty tracking, form validation, notice/toast handling, and modal behavior.
Media & Color Picker Wiring assets/js/opentrust-admin.js	Implements WordPress media picker integration for data-opentrust-media-picker elements and synchronized color picking between native color input and hex text input with #RRGGBB normalization.
Dirty State Tracking & Form Management assets/js/opentrust-admin.js	Injects per-row dirty indicators, captures initial field signatures, tracks changes via input/change events, toggles Save/Discard buttons, and updates per-row is-dirty classes and unsaved-change messaging.
Input Validation & Character Counters assets/js/opentrust-admin.js	Adds live hex validation for data-validate-hex inputs with inline error messages, and character counters for data-counter inputs with warning/error threshold styling.
Form Navigation Guard & Tab Switching assets/js/opentrust-admin.js	Intercepts tab-switch clicks to show confirmation modal when leaving unsaved changes, manages navigation consent state, blocks beforeunload when dirty, and performs redirect/discard via sessionStorage.
Notice Dismissal & Toast System assets/js/opentrust-admin.js	Implements notice close-button animations with fade/slide, toast stack infrastructure with type-based icons and auto-dismiss, toast triggering from URL query params, and WP notice scooper that reroutes settings errors into toasts.
Confirm Modal & Button Utilities assets/js/opentrust-admin.js	Provides reusable showConfirm modal with async/Promise-friendly onConfirm handling, backdrop-click/Escape closure, and setLoading helper to swap button content/spinner during operations.
Shared Admin Footer Component includes/Admin/Footer.php	New OpenTrust\Admin\Footer class providing static render() method that outputs escaped footer markup with branding, version display, and navigational resource links (Docs, GitHub, Support, Security, Leave review).
New Settings Page Scaffold includes/Admin/Settings.php	Introduces OpenTrust\Admin\Settings class wiring admin hooks for settings option registration (opentrust_settings array), menu/page creation, asset enqueueing, notice suppression, and renders custom settings page with design-system field components (toggle, segmented, number, text, select, color, media, sections-visibility chips) plus validation and sanitization.
Admin Asset Enqueueing & Optimization includes/class-opentrust-admin.php	Conditionally enqueues WordPress media uploader only on screens with media pickers (CPT edit, Settings General tab), updates opentrust-admin script to depend on jquery only (removes wp-color-picker), and scopes design-system assets to OpenTrust plugin pages.
AI Tab UI Redesign & Migration includes/class-opentrust-admin-ai.php	Refactors AI tab to use design-system components: transient notices via new ds_notice() helper with opentrust-notice markup, citation-assistant section with new layout (opentrust-block, opentrust-disclosure), summary backfill banner styled with opentrust-notice--warn, provider picker with design-system cards, and AI settings form using ds_row_number/ds_row_toggle helpers.
Questions Log Page UI Redesign includes/class-opentrust-admin-questions.php	Refactors Questions page: changed search parameter from q to search, rebuilt filter/export wiring via $log_filter_params and add_query_arg, replaced WordPress table markup with design-system components (topbar, styled notices, filter card, log table, danger-zone card), and updated pagination/export URLs.
Settings Page Redesign with Design System includes/class-opentrust-admin-settings.php	Refactors OpenTrust_Admin_Settings: registers single opentrust_settings array option instead of per-section Settings API fields, replaces do_settings_sections() with custom topbar/tabbar layout, manually renders General/Contact sections via ds_render_section_*() with ds_row_*() helpers (text, textarea, toggle, media, accent-color, sections-visibility chips).
Import & Export Tab UI Redesign includes/class-opentrust-admin-tools.php	Modernizes Import/Export tab: notice rendering switched to opentrust-notice markup with error/success/warn variants, export/import panels redesigned with componentized layout (opentrust-block, opentrust-card, opentrust-row), preview screen uses computed subtitle with counts, styled preview cards/tables with pill labels for actions.
Legacy CSS Cleanup & Admin.js Updates assets/css/admin.css, assets/js/admin.js	Removes legacy .ot-logo-upload CSS rules, updates accent-contrast handling to use native input events on hex field instead of wpColorPicker callbacks, and removes legacy media uploader wiring (replaced by design-system .opentrust-media component).
Translation Strings & Localization languages/opentrust.pot	Expands translatable strings for footer/resource links, settings labels (General, Branding, Contact, DPO), AI setup/onboarding, Questions UI (filters, logging status), Import/Export workflow (export options, conflict strategy, preview/merge), and admin UI confirmations.
Plugin Root & Framework Compatibility opentrust.php, README.md	Adds Ettic shared-template compatibility constants (OPENTRUST_FILE, OPENTRUST_URL as aliases), introduces require_once for shared admin Footer component, updates README with stable version link and main-branch development note.

🎯 4 (Complex) | ⏱️ ~75 minutes

🐰 A design system spring has sprung,
Admin pages hop along with joy!
Toasts, modals, dirty state so clean—
Each toggle, chip, and card's a toy. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 41.77% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: migrating the admin UI to align with Ettic's design system styling. It accurately reflects the overall objective of the PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/ettic-admin-ui

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

assets/js/admin.js (1)

155-171: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Initialize the override state on first render.

ot-accent-warning--override is only toggled after a change event. If the checkbox is already checked when the page loads, the warning renders with the wrong copy/state until the user touches it.

💡 Suggested fix

         if ($accentInput.length) {
             $accentInput.on('input', function () {
                 updateAccentWarning($accentInput.val());
             });
             // Initial check on page load.
             updateAccentWarning($accentInput.val());
         }
+
+        $accentWarning.toggleClass('ot-accent-warning--override', $forceExact.is(':checked'));

         // Live-toggle the override class so the warning tone updates without
         // a page reload. The actual clamping still happens server-side — the
         // class only drives the admin copy/colour swap.
         $forceExact.on('change', function () {

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/js/admin.js` around lines 155 - 171, The override CSS class for the
accent warning isn't initialized on page load when the checkbox ($forceExact) is
already checked, so set the initial state after DOM setup: when $forceExact and
$accentWarning exist, apply or remove the 'ot-accent-warning--override' class
based on $forceExact.prop('checked') (in the same area where
updateAccentWarning($accentInput.val()) is called), ensuring the live-toggle
behavior remains via the existing $forceExact.on('change') handler.

🧹 Nitpick comments (3)

includes/Admin/Settings.php (1)

44-53: 💤 Low value

Notice suppression is aggressive but intentionally scoped.

Removing all admin notices could hide important warnings. However, this is strictly scoped to settings_page_opentrust and documented as intentional for the dark hero layout. Consider adding a comment noting that critical notices (like plugin vulnerabilities) won't display on this page.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@includes/Admin/Settings.php` around lines 44 - 53, suppress_foreign_notices
aggressively removes all admin notices on the settings page (function
suppress_foreign_notices, scoped to 'settings_page_' . self::PAGE_SLUG) which
can hide critical warnings; add an explanatory comment above
suppress_foreign_notices documenting that this removal is intentional for the
dark hero layout, explicitly note that important/system/plugin vulnerability
notices will not be shown on settings_page_opentrust, and optionally add a TODO
or link to an issue describing a follow-up to surface critical notices elsewhere
if needed.

assets/js/opentrust-admin.js (2)

566-657: 💤 Low value

Modal body uses innerHTML - ensure all callers pass safe content.

The body parameter is rendered via innerHTML (line 601). Currently, all callers pass hardcoded HTML or i18n strings. This is acceptable for now, but if future callers pass user-controlled content, it could introduce XSS.

Consider documenting this expectation:

/**
 * `@param` {Object} opts
 * `@param` {string} opts.body - HTML content for modal body. MUST be sanitized if containing user input.
 */

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/js/opentrust-admin.js` around lines 566 - 657, Add a short JSDoc above
the showConfirm function explaining the opts.body contract: state that opts.body
is expected to be HTML (string) and MUST be sanitized before being passed if it
can contain user-controlled content, list other opts (title, lede, confirmText,
cancelText, danger, onConfirm) briefly, and note that callers should pass plain
text (and not HTML) if they expect automatic escaping or change the caller to
sanitize their content; reference the showConfirm function and the use of
backdrop.querySelector('[data-modal-body]').innerHTML so reviewers can locate
the innerHTML sink.

---

271-273: 💤 Low value

Hardcoded English strings for dirty label are not internationalized.

The "unsaved change" / "unsaved changes" strings are hardcoded. For consistency with the rest of the admin UI which uses esc_html_e() and translation functions, these should be localizable.

Suggested approach

Expose i18n strings via wp_localize_script from PHP:

// In JS, use:
var i18n = ( window.OpenTrustAdmin && window.OpenTrustAdmin.i18n ) || {};
labelEl.textContent = count === 1 
    ? ( i18n.unsavedChange || ' unsaved change' )
    : ( i18n.unsavedChanges || ' unsaved changes' );

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/js/opentrust-admin.js` around lines 271 - 273, Replace the hardcoded
English dirty-label strings in assets/js/opentrust-admin.js where
labelEl.textContent is set so they come from localized data: read strings from a
JS i18n object (e.g. window.OpenTrustAdmin.i18n) and fall back to the current
English defaults; then ensure the corresponding PHP enqueuing code uses
wp_localize_script (or wp_add_inline_script) to expose unsavedChange and
unsavedChanges via OpenTrustAdmin.i18n so the JS uses those keys instead of
hardcoded literals.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@includes/class-opentrust-admin-ai.php`:
- Line 317: The button text is double-escaping the ampersand because
esc_html_e() will escape HTML entities; change the string passed to esc_html_e()
from "Validate & save" to use a plain ampersand or separate words (e.g.,
"Validate & save" or "Validate and save") so the rendered label shows correctly;
update the esc_html_e(...) call in includes/class-opentrust-admin-ai.php
accordingly.

In `@includes/class-opentrust-admin-tools.php`:
- Around line 188-199: The UI text currently shows only the plugin cap
(self::UPLOAD_MAX_MB) which can mislead users if PHP/WordPress upload limits are
lower; update the render code in class-opentrust-admin-tools.php (the block that
outputs the label/paragraph and the input#ot_import_file) to compute and display
the effective upload limit by reading server settings (upload_max_filesize and
post_max_size) and converting them to MB, then use the minimum of that value and
self::UPLOAD_MAX_MB in the displayed message so the help text reflects the true
allowed size.

---

Outside diff comments:
In `@assets/js/admin.js`:
- Around line 155-171: The override CSS class for the accent warning isn't
initialized on page load when the checkbox ($forceExact) is already checked, so
set the initial state after DOM setup: when $forceExact and $accentWarning
exist, apply or remove the 'ot-accent-warning--override' class based on
$forceExact.prop('checked') (in the same area where
updateAccentWarning($accentInput.val()) is called), ensuring the live-toggle
behavior remains via the existing $forceExact.on('change') handler.

---

Nitpick comments:
In `@assets/js/opentrust-admin.js`:
- Around line 566-657: Add a short JSDoc above the showConfirm function
explaining the opts.body contract: state that opts.body is expected to be HTML
(string) and MUST be sanitized before being passed if it can contain
user-controlled content, list other opts (title, lede, confirmText, cancelText,
danger, onConfirm) briefly, and note that callers should pass plain text (and
not HTML) if they expect automatic escaping or change the caller to sanitize
their content; reference the showConfirm function and the use of
backdrop.querySelector('[data-modal-body]').innerHTML so reviewers can locate
the innerHTML sink.
- Around line 271-273: Replace the hardcoded English dirty-label strings in
assets/js/opentrust-admin.js where labelEl.textContent is set so they come from
localized data: read strings from a JS i18n object (e.g.
window.OpenTrustAdmin.i18n) and fall back to the current English defaults; then
ensure the corresponding PHP enqueuing code uses wp_localize_script (or
wp_add_inline_script) to expose unsavedChange and unsavedChanges via
OpenTrustAdmin.i18n so the JS uses those keys instead of hardcoded literals.

In `@includes/Admin/Settings.php`:
- Around line 44-53: suppress_foreign_notices aggressively removes all admin
notices on the settings page (function suppress_foreign_notices, scoped to
'settings_page_' . self::PAGE_SLUG) which can hide critical warnings; add an
explanatory comment above suppress_foreign_notices documenting that this removal
is intentional for the dark hero layout, explicitly note that
important/system/plugin vulnerability notices will not be shown on
settings_page_opentrust, and optionally add a TODO or link to an issue
describing a follow-up to surface critical notices elsewhere if needed.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 901776cf-8993-47c9-a05c-3d3aa7a31a7a

📥 Commits

Reviewing files that changed from the base of the PR and between 492e2a2 and 9f78839.

📒 Files selected for processing (14)

• README.md
• assets/css/admin.css
• assets/css/opentrust-admin.css
• assets/js/admin.js
• assets/js/opentrust-admin.js
• includes/Admin/Footer.php
• includes/Admin/Settings.php
• includes/class-opentrust-admin-ai.php
• includes/class-opentrust-admin-questions.php
• includes/class-opentrust-admin-settings.php
• includes/class-opentrust-admin-tools.php
• includes/class-opentrust-admin.php
• languages/opentrust.pot
• opentrust.php

💤 Files with no reviewable changes (1)

• assets/css/admin.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

HTML entity will be double-escaped in button text.

The & will be rendered literally as "&" because esc_html_e() will escape the ampersand. Use a plain & or separate the words.

Proposed fix

-                        <?php esc_html_e('Validate &amp; save', 'opentrust'); ?>
+                        <?php esc_html_e('Validate & save', 'opentrust'); ?>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<?php esc_html_e('Validate &amp; save', 'opentrust'); ?>
	<?php esc_html_e('Validate & save', 'opentrust'); ?>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@includes/class-opentrust-admin-ai.php` at line 317, The button text is
double-escaping the ampersand because esc_html_e() will escape HTML entities;
change the string passed to esc_html_e() from "Validate & save" to use a
plain ampersand or separate words (e.g., "Validate & save" or "Validate and
save") so the rendered label shows correctly; update the esc_html_e(...) call in
includes/class-opentrust-admin-ai.php accordingly.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Show the effective upload limit here, not just the plugin cap.

This always advertises 50 MB, but PHP/WordPress may reject a smaller upload before your own size check runs. In that case the user sees a misleading limit here and then hits the generic “No file uploaded” path.

💡 Suggested fix

+                        <?php
+                        $max_upload_mb = max(
+                            1,
+                            (int) floor(min(self::UPLOAD_MAX_MB * MB_IN_BYTES, wp_max_upload_size()) / MB_IN_BYTES)
+                        );
+                        ?>
                         <div class="opentrust-row__main">
                             <span class="opentrust-row__label"><?php esc_html_e('Export file', 'opentrust'); ?></span>
                             <p class="opentrust-row__help">
                                 <?php
                                 /* translators: %d: max upload size in MB */
-                                printf(esc_html__('ZIP archive produced by another OpenTrust install. Max %d MB.', 'opentrust'), (int) self::UPLOAD_MAX_MB);
+                                printf(esc_html__('ZIP archive produced by another OpenTrust install. Max %d MB.', 'opentrust'), $max_upload_mb);
                                 ?>
                             </p>
                         </div>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div class="opentrust-row opentrust-row--stacked">
	<div class="opentrust-row__main">
	<span class="opentrust-row__label"><?php esc_html_e('Export file', 'opentrust'); ?></span>
	<p class="opentrust-row__help">
	<?php
	/* translators: %d: max upload size in MB */
	printf(esc_html__('ZIP archive produced by another OpenTrust install. Max %d MB.', 'opentrust'), (int) self::UPLOAD_MAX_MB);
	?>
	</p>
	</div>
	<div class="opentrust-row__control opentrust-row__control--stack">
	<input type="file" id="ot_import_file" name="ot_import_file" accept=".zip" required class="opentrust-input opentrust-input--file">
	<div class="opentrust-row opentrust-row--stacked">
	<?php
	$max_upload_mb = max(
	1,
	(int) floor(min(self::UPLOAD_MAX_MB * MB_IN_BYTES, wp_max_upload_size()) / MB_IN_BYTES)
	);
	?>
	<div class="opentrust-row__main">
	<span class="opentrust-row__label"><?php esc_html_e('Export file', 'opentrust'); ?></span>
	<p class="opentrust-row__help">
	<?php
	/* translators: %d: max upload size in MB */
	printf(esc_html__('ZIP archive produced by another OpenTrust install. Max %d MB.', 'opentrust'), $max_upload_mb);
	?>
	</p>
	</div>
	<div class="opentrust-row__control opentrust-row__control--stack">
	<input type="file" id="ot_import_file" name="ot_import_file" accept=".zip" required class="opentrust-input opentrust-input--file">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@includes/class-opentrust-admin-tools.php` around lines 188 - 199, The UI text
currently shows only the plugin cap (self::UPLOAD_MAX_MB) which can mislead
users if PHP/WordPress upload limits are lower; update the render code in
class-opentrust-admin-tools.php (the block that outputs the label/paragraph and
the input#ot_import_file) to compute and display the effective upload limit by
reading server settings (upload_max_filesize and post_max_size) and converting
them to MB, then use the minimum of that value and self::UPLOAD_MAX_MB in the
displayed message so the help text reflects the true allowed size.