Expanded hover area for API beacon to trigger selector menu, moved inline styles to app.styles

Author: adamlui

amazongpt/greasemonkey/amazongpt.user.js

@@ -3,7 +3,7 @@
 // @description            Add AI chat & product/category summaries to Amazon shopping, powered by the latest LLMs like GPT-4o!
 // @author                 KudoAI
 // @namespace              https://kudoai.com
-// @version                2025.5.9.2
+// @version                2025.5.9.3
 // @license                MIT
 // @icon                   https://amazongpt.kudoai.com/assets/images/icons/app/black-gold-teal/icon48.png?v=8e8ed1c
 // @icon64                 https://amazongpt.kudoai.com/assets/images/icons/app/black-gold-teal/icon64.png?v=8e8ed1c
@@ -1452,7 +1452,7 @@
                                     || menu.preferredDirection == 'down' && !appIsTooLow ? 'down' : 'up'
                 Object.assign(menu.div.style, {
                     top: `${ rects.toggleBtn.top - rects.appDiv.top +(
-                        pointDirection == 'down' ? 24.5 : -rects.hoverMenu.height -13 )}px`,
+                        pointDirection == 'down' ? 30.5 : -rects.hoverMenu.height -13 )}px`,
                     right: `${ rects.appDiv.right - event.clientX - menu.div.offsetWidth
                         / ( pointDirection == 'up' ? /* center */ 2 : /* leftish-aligned */ 1.25 )}px`,
                     opacity: 1
@@ -2061,6 +2061,7 @@
                     stroke:     var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
                 #${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
                 #${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }
+                #${app.slug}-api-btn { cursor: pointer ; padding: 5px ; margin: 0 -4px 0 -7px }
                 #${app.slug} .reply-pre {
                     font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;
                     line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
@@ -3471,7 +3472,7 @@
             if (!show.reply.updatedAPIinHeader) {
                 show.reply.updatedAPIinHeader = true
                 const preHeaderLabel = appDiv.querySelector('.reply-header-text'),
-                      apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn`, style: 'cursor: pointer' })
+                      apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn` })
                 apiBeacon.textContent = '⦿'
                 apiBeacon.onmouseenter = apiBeacon.onmouseleave = apiBeacon.onclick = hoverMenus.toggle
                 apiBeacon.style.pointerEvents = config.proxyAPIenabled ? '' : 'none'

bravegpt/greasemonkey/bravegpt.user.js

@@ -148,7 +148,7 @@
 // @description:zu        Yengeza izimpendulo ze-AI ku-Brave Search (inikwa amandla yi-GPT-4o!)
 // @author                KudoAI
 // @namespace             https://kudoai.com
-// @version               2025.5.9.2
+// @version               2025.5.9.3
 // @license               MIT
 // @icon                  https://assets.bravegpt.com/images/icons/bravegpt/icon48.png?v=df624b0
 // @icon64                https://assets.bravegpt.com/images/icons/bravegpt/icon64.png?v=df624b0
@@ -1674,7 +1674,7 @@
                                     || menu.preferredDirection == 'down' && !appIsTooLow ? 'down' : 'up'
                 Object.assign(menu.div.style, {
                     top: `${ rects.toggleBtn.top - rects.appDiv.top +(
-                        pointDirection == 'down' ? 24.5 : -rects.hoverMenu.height -13 )}px`,
+                        pointDirection == 'down' ? 30.5 : -rects.hoverMenu.height -13 )}px`,
                     right: `${ rects.appDiv.right - event.clientX - menu.div.offsetWidth
                         / ( pointDirection == 'up' ? /* center */ 2 : /* leftish-aligned */ 1.25 )}px`,
                     opacity: 1
@@ -2442,6 +2442,7 @@
                     stroke:     var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
                 #${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
                 #${app.slug} .reply-header-btns { margin: 10.5px -5px 0 }
+                #${app.slug}-api-btn { cursor: pointer ; padding: 5px ; margin: 0 -4px 0 -7px }
                 #${app.slug} .reply-pre {
                     font-size: ${config.fontSize}px ; white-space: pre-wrap ;
                     font-family: Consolas, Menlo, Monaco, monospace ;
@@ -4350,7 +4351,7 @@
                 if (!show.reply.updatedAPIinHeader) {
                     show.reply.updatedAPIinHeader = true
                     const preHeaderLabel = appDiv.querySelector('.reply-header-text'),
-                          apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn`, style: 'cursor: pointer' })
+                          apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn` })
                     apiBeacon.textContent = '⦿'
                     apiBeacon.onmouseenter = apiBeacon.onmouseleave = apiBeacon.onclick = hoverMenus.toggle
                     apiBeacon.style.pointerEvents = config.proxyAPIenabled ? '' : 'none'

duckduckgpt/greasemonkey/duckduckgpt.user.js

@@ -148,7 +148,7 @@
 // @description:zu         Yengeza izimpendulo ze-AI ku-DuckDuckGo (inikwa amandla yi-GPT-4o!)
 // @author                 KudoAI
 // @namespace              https://kudoai.com
-// @version                2025.5.9.2
+// @version                2025.5.9.3
 // @license                MIT
 // @icon                   https://assets.ddgpt.com/images/icons/duckduckgpt/icon48.png?v=06af076
 // @icon64                 https://assets.ddgpt.com/images/icons/duckduckgpt/icon64.png?v=06af076
@@ -1674,7 +1674,7 @@
                                     || menu.preferredDirection == 'down' && !appIsTooLow ? 'down' : 'up'
                 Object.assign(menu.div.style, {
                     top: `${ rects.toggleBtn.top - rects.appDiv.top +(
-                        pointDirection == 'down' ? 24.5 : -rects.hoverMenu.height -13 )}px`,
+                        pointDirection == 'down' ? 30.5 : -rects.hoverMenu.height -13 )}px`,
                     right: `${ rects.appDiv.right - event.clientX - menu.div.offsetWidth
                         / ( pointDirection == 'up' ? /* center */ 2 : /* leftish-aligned */ 1.25 )}px`,
                     opacity: 1
@@ -2436,6 +2436,7 @@
                     stroke:     var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
                 #${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
                 #${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }
+                #${app.slug}-api-btn { cursor: pointer ; padding: 5px ; margin: 0 -4px 0 -7px }
                 #${app.slug} .reply-pre {
                     font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;
                     line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
@@ -4342,7 +4343,7 @@
                 if (!show.reply.updatedAPIinHeader) {
                     show.reply.updatedAPIinHeader = true
                     const preHeaderLabel = appDiv.querySelector('.reply-header-text'),
-                          apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn`, style: 'cursor: pointer' })
+                          apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn` })
                     apiBeacon.textContent = '⦿'
                     apiBeacon.onmouseenter = apiBeacon.onmouseleave = apiBeacon.onclick = hoverMenus.toggle
                     apiBeacon.style.pointerEvents = config.proxyAPIenabled ? '' : 'none'

googlegpt/greasemonkey/googlegpt.user.js

@@ -149,7 +149,7 @@
 // @description:zu           Yengeza izimpendulo ze-AI ku-Google Search (inikwa amandla yi-Google Gemma + GPT-4o!)
 // @author                   KudoAI
 // @namespace                https://kudoai.com
-// @version                  2025.5.9.2
+// @version                  2025.5.9.3
 // @license                  MIT
 // @icon                     https://assets.googlegpt.io/images/icons/googlegpt/black/icon48.png?v=59409b2
 // @icon64                   https://assets.googlegpt.io/images/icons/googlegpt/black/icon64.png?v=59409b2
@@ -1827,7 +1827,7 @@
                                     || menu.preferredDirection == 'down' && !appIsTooLow ? 'down' : 'up'
                 Object.assign(menu.div.style, {
                     top: `${ rects.toggleBtn.top - rects.appDiv.top +(
-                        pointDirection == 'down' ? 24.5 : -rects.hoverMenu.height -13 )}px`,
+                        pointDirection == 'down' ? 30.5 : -rects.hoverMenu.height -13 )}px`,
                     right: `${ rects.appDiv.right - event.clientX - menu.div.offsetWidth
                         / ( pointDirection == 'up' ? /* center */ 2 : /* leftish-aligned */ 1.25 )}px`,
                     opacity: 1
@@ -2613,6 +2613,7 @@
                     stroke:     var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
                 #${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
                 #${app.slug} .reply-header-btns { margin: 3.5px -5px 0 }
+                #${app.slug}-api-btn { cursor: pointer ; padding: 5px ; margin: 0 -4px 0 -7px }
                 #${app.slug} .reply-pre {
                     font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;
                     line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
@@ -4541,7 +4542,7 @@
                 if (!show.reply.updatedAPIinHeader) {
                     show.reply.updatedAPIinHeader = true
                     const preHeaderLabel = appDiv.querySelector('.reply-header-text'),
-                          apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn`, style: 'cursor: pointer' })
+                          apiBeacon = dom.create.elem('span', { id: `${app.slug}-api-btn` })
                     apiBeacon.textContent = '⦿'
                     apiBeacon.onmouseenter = apiBeacon.onmouseleave = apiBeacon.onclick = hoverMenus.toggle
                     apiBeacon.style.pointerEvents = config.proxyAPIenabled ? '' : 'none'