bookmark AI Button visual fix

extension/content.js

@@ -3879,8 +3879,10 @@ async function addAICommentButton(container, postElement) {
     display: inline-flex;
     align-items: stretch;
     border-radius: 6px;
-    overflow: visible;
+    overflow: hidden;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
   `;
 
   const button = document.createElement('button');
@@ -3889,7 +3891,7 @@ async function addAICommentButton(container, postElement) {
   button.textContent = '✨ AI';
   button.title = 'Generiere automatisch einen passenden Kommentar';
   button.style.cssText = `
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: transparent;
     color: white;
     border: none;
     padding: 6px 12px;
@@ -3901,8 +3903,8 @@ async function addAICommentButton(container, postElement) {
     font-size: 13px;
     font-weight: 600;
     flex: 1 1 auto;
-    border-radius: 6px 0 0 6px;
-    transition: all 0.2s ease;
+    border-radius: 0;
+    transition: background-color 0.2s ease;
   `;
 
   const dropdownButton = document.createElement('button');
@@ -3914,7 +3916,7 @@ async function addAICommentButton(container, postElement) {
   dropdownButton.setAttribute('aria-haspopup', 'menu');
   dropdownButton.setAttribute('aria-expanded', 'false');
   dropdownButton.style.cssText = `
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: transparent;
     color: white;
     border: none;
     width: 34px;
@@ -3924,8 +3926,8 @@ async function addAICommentButton(container, postElement) {
     align-items: center;
     justify-content: center;
     border-left: 1px solid rgba(255, 255, 255, 0.35);
-    border-radius: 0 6px 6px 0;
-    transition: all 0.2s ease;
+    border-radius: 0;
+    transition: background-color 0.2s ease;
   `;
 
   const dropdown = document.createElement('div');
@@ -3945,6 +3947,22 @@ async function addAICommentButton(container, postElement) {
   wrapper.appendChild(dropdown);
   actionsContainer.appendChild(wrapper);
 
+  const baseWrapperShadow = '0 1px 2px rgba(0, 0, 0, 0.12)';
+  const setHoverState = (active) => {
+    if (active) {
+      wrapper.style.transform = 'translateY(-2px)';
+      wrapper.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
+      button.style.backgroundColor = 'rgba(255, 255, 255, 0.08)';
+      dropdownButton.style.backgroundColor = 'rgba(255, 255, 255, 0.08)';
+    } else {
+      wrapper.style.transform = 'translateY(0)';
+      wrapper.style.boxShadow = baseWrapperShadow;
+      button.style.backgroundColor = 'transparent';
+      dropdownButton.style.backgroundColor = 'transparent';
+    }
+  };
+  setHoverState(false);
+
   const baseButtonText = button.textContent;
 
   const resolvePostContexts = () => {
@@ -4014,39 +4032,27 @@ async function addAICommentButton(container, postElement) {
     updateNotePreview();
   };
 
-  button.addEventListener('mouseenter', () => {
+  const maybeActivateHover = () => {
     if ((button.dataset.aiState || 'idle') === 'idle') {
-      button.style.transform = 'translateY(-2px)';
-      button.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
-      dropdownButton.style.transform = 'translateY(-2px)';
-      dropdownButton.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
+      setHoverState(true);
     }
-  });
+  };
 
-  button.addEventListener('mouseleave', () => {
-    button.style.transform = 'translateY(0)';
-    button.style.boxShadow = 'none';
-    dropdownButton.style.transform = 'translateY(0)';
-    dropdownButton.style.boxShadow = 'none';
-  });
-
-  dropdownButton.addEventListener('mouseenter', () => {
-    if ((button.dataset.aiState || 'idle') === 'idle') {
-      button.style.transform = 'translateY(-2px)';
-      button.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
-      dropdownButton.style.transform = 'translateY(-2px)';
-      dropdownButton.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
+  const maybeDeactivateHover = () => {
+    if (wrapper.classList.contains('fb-tracker-ai-wrapper--open')) {
+      return;
     }
-  });
-
-  dropdownButton.addEventListener('mouseleave', () => {
-    if (!wrapper.classList.contains('fb-tracker-ai-wrapper--open')) {
-      button.style.transform = 'translateY(0)';
-      button.style.boxShadow = 'none';
-      dropdownButton.style.transform = 'translateY(0)';
-      dropdownButton.style.boxShadow = 'none';
+    if (button.matches(':hover') || dropdownButton.matches(':hover')) {
+      return;
     }
-  });
+    setHoverState(false);
+  };
+
+  button.addEventListener('mouseenter', maybeActivateHover);
+  button.addEventListener('mouseleave', maybeDeactivateHover);
+
+  dropdownButton.addEventListener('mouseenter', maybeActivateHover);
+  dropdownButton.addEventListener('mouseleave', maybeDeactivateHover);
 
   button.addEventListener('pointerdown', () => {
     const context = resolvePostContext();
@@ -4096,10 +4102,11 @@ async function addAICommentButton(container, postElement) {
     wrapper.classList.remove('fb-tracker-ai-wrapper--open');
     document.removeEventListener('click', handleOutsideClick, true);
     document.removeEventListener('keydown', handleKeydown, true);
-    button.style.transform = 'translateY(0)';
-    dropdownButton.style.transform = 'translateY(0)';
-    button.style.boxShadow = 'none';
-    dropdownButton.style.boxShadow = 'none';
+    if (button.matches(':hover') || dropdownButton.matches(':hover')) {
+      setHoverState(true);
+    } else {
+      setHoverState(false);
+    }
     dropdown.style.position = '';
     dropdown.style.top = '';
     dropdown.style.left = '';
@@ -4396,6 +4403,7 @@ async function addAICommentButton(container, postElement) {
     dropdownOpen = true;
     wrapper.classList.add('fb-tracker-ai-wrapper--open');
     dropdownButton.textContent = '▴';
+    setHoverState(true);
     mountDropdownInPortal();
     dropdown.style.display = 'block';
     dropdownButton.setAttribute('aria-expanded', 'true');
@@ -4484,6 +4492,12 @@ async function addAICommentButton(container, postElement) {
           }
         }, revertDelay);
       }
+
+      if (wrapper.classList.contains('fb-tracker-ai-wrapper--open')) {
+        setHoverState(true);
+      } else if (!(button.matches(':hover') || dropdownButton.matches(':hover'))) {
+        setHoverState(false);
+      }
     };
 
     button._aiContext = aiContext;
@@ -4492,6 +4506,7 @@ async function addAICommentButton(container, postElement) {
     button.classList.add('fb-tracker-btn-ai--processing');
     button.classList.remove('fb-tracker-btn-ai--cancelling');
     button.style.cursor = 'progress';
+    setHoverState(true);
     dropdownButton.disabled = true;
     dropdownButton.style.opacity = '0.5';
     dropdownButton.style.cursor = 'not-allowed';