diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index f6f4a38..35959ff 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -23,6 +23,8 @@ --mageforge-color-orange: #fb923c; --mageforge-color-pink: #C850C0; --mageforge-color-amber: #edb04d; + --mageforge-color-amber-alpha-15: rgba(237, 176, 77, 0.15); + --mageforge-color-amber-alpha-35: rgba(237, 176, 77, 0.35); --mageforge-bg-dark: rgba(15, 23, 42, 0.98); --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98); --mageforge-border-color: rgba(148, 163, 184, 0.15); @@ -146,12 +148,14 @@ bottom: calc(100% + 8px); left: 0; background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%); - backdrop-filter: blur(12px); border: 1px solid var(--mageforge-border-color); border-radius: 10px; - box-shadow: 0 -8px 24px var(--mageforge-shadow-lg), 0 4px 8px var(--mageforge-shadow-sm); - padding: 6px; + box-shadow: 0 -8px 24px var(--mageforge-shadow-lg), 0 6px 10px var(--mageforge-shadow-sm); + padding: 0 6px 6px; min-width: 350px; + max-height: 90vh; + overflow-y: auto; + overflow-x: hidden; font-family: var(--mageforge-font-family); display: none; opacity: 0; @@ -177,11 +181,16 @@ .mageforge-toolbar-menu-title { display: flex; + flex-wrap: wrap; align-items: center; justify-content: space-between; - padding: 4px 8px 2px; + padding: 10px 8px 2px; border-bottom: 1px solid var(--mageforge-border-color); margin-bottom: 4px; + position: sticky; + top: 0; + z-index: 99999; + background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%); } .mageforge-toolbar-menu-title-text { @@ -194,11 +203,12 @@ background-image: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; + display: block; } .mageforge-toolbar-menu-close { background: none; - border: none; + border: 1px solid var(--mageforge-border-color); cursor: pointer; color: var(--mageforge-color-slate-400); padding: 6px; @@ -254,6 +264,15 @@ color: var(--mageforge-color-red); } +.mageforge-toolbar-menu-item.mageforge-active--warning { + background: var(--mageforge-color-amber-alpha-15); + border-color: var(--mageforge-color-amber-alpha-35); +} + +.mageforge-toolbar-menu-item.mageforge-active--warning .mageforge-toolbar-menu-label { + color: var(--mageforge-color-amber); +} + .mageforge-toolbar-menu-icon { font-size: 16px; flex-shrink: 0; @@ -309,9 +328,17 @@ } .mageforge-toolbar-menu-desc { - font-size: 10px; color: var(--mageforge-color-slate-400); + font-size: 11px; line-height: 1.3; + user-select: text; + cursor: text; +} + +.mageforge-toolbar-menu-desc.mageforge-active { + color: var(--mageforge-color-orange); + font-size: 12px; + user-select: text; } .mageforge-toolbar-menu-label-row { @@ -351,6 +378,12 @@ border: 1px solid var(--mageforge-color-red-alpha-35); } +.mageforge-toolbar-menu-status--warning { + color: var(--mageforge-color-amber); + background: var(--mageforge-color-amber-alpha-15); + border: 1px solid var(--mageforge-color-amber-alpha-35); +} + /* ============================================================================ Menu Groups ========================================================================== */ @@ -421,6 +454,12 @@ z-index: 9999997; } +.mageforge-audit-overlay--warning { + background-color: var(--mageforge-color-amber-alpha-35); + outline-color: var(--mageforge-color-amber); + outline-style: dashed; +} + /* ============================================================================ Feedback Toast ========================================================================== */ diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js index 5422089..9429f37 100644 --- a/src/view/frontend/web/js/toolbar/audits.js +++ b/src/view/frontend/web/js/toolbar/audits.js @@ -94,6 +94,26 @@ export const auditMethods = { } }, + /** + * Update the description text of an audit menu item. + * Useful for audits that want to surface detail (e.g. which IDs are duplicated). + * + * @param {string} key + * @param {string} text + */ + setAuditDescription(key, text) { + if (!this.menu) return; + const item = this.menu.querySelector(`[data-audit-key="${key}"]`); + if (!item) return; + const desc = item.querySelector('.mageforge-toolbar-menu-desc'); + if (!desc) return; + const originalText = desc.dataset.originalText ?? desc.textContent; + if (!desc.dataset.originalText) desc.dataset.originalText = originalText; + const isChanged = text !== originalText; + desc.textContent = text; + desc.classList.toggle('mageforge-active', isChanged); + }, + /** * Set the inline counter badge of an audit menu item. * @@ -109,7 +129,8 @@ export const auditMethods = { if (!status) return; status.textContent = message; status.className = `mageforge-toolbar-menu-status mageforge-toolbar-menu-status--${type}`; - // Reflect error/success on the active item background + // Reflect error/warning/success on the active item background item.classList.toggle('mageforge-active--error', type === 'error'); + item.classList.toggle('mageforge-active--warning', type === 'warning'); }, }; diff --git a/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js new file mode 100644 index 0000000..2c3a24d --- /dev/null +++ b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js @@ -0,0 +1,39 @@ +/** + * MageForge Toolbar Audit – Buttons without type + * + * A