style(popup): decouple profile hover in header and settings

Keep avatar and name hover feedback independent in both popup profile areas.

Use a single accessible profile link for the header and settings account row so keyboard focus lands on one target, and update the popup test fixture to match.

Author: euxx

src/popup/popup.css

@@ -411,13 +411,6 @@ body.dark-theme .pat-input.input-error {
     box-shadow 0.15s;
 }
 
-.profile-link:hover .username,
-.profile-link:hover .setting-account-name,
-.profile-link:focus-visible .username,
-.profile-link:focus-visible .setting-account-name {
-  color: var(--text-highlight);
-}
-
 .profile-link:focus-visible {
   outline: 3px solid var(--action-focus);
   outline-offset: 2px;
@@ -440,7 +433,7 @@ body.dark-theme .pat-input.input-error {
     transform 0.15s ease;
 }
 
-.user-profile-link:hover .user-avatar,
+.user-profile-link .user-avatar:hover,
 .user-profile-link:focus-visible .user-avatar {
   box-shadow:
     0 0 0 1px var(--avatar-ring-highlight-color),
@@ -449,6 +442,13 @@ body.dark-theme .pat-input.input-error {
   transform: scale(1.02);
 }
 
+.user-profile-link .username:hover,
+.user-profile-link:focus-visible .username,
+.settings-profile-link .setting-account-name:hover,
+.settings-profile-link:focus-visible .setting-account-name {
+  color: var(--text-highlight);
+}
+
 .user-info .username {
   font-weight: 600;
   color: var(--text-primary);
@@ -1216,10 +1216,10 @@ body.dark-theme .settings-view {
   padding: 12px 6px 12px 0;
 }
 
-.settings-avatar-link {
-  flex-shrink: 0;
-  margin-right: 4px;
-  border-radius: 50%;
+.settings-profile-link {
+  gap: 8px;
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 .settings-avatar {
@@ -1234,8 +1234,8 @@ body.dark-theme .settings-view {
     transform 0.15s ease;
 }
 
-.settings-avatar-link:hover .settings-avatar,
-.settings-avatar-link:focus-visible .settings-avatar {
+.settings-profile-link .settings-avatar:hover,
+.settings-profile-link:focus-visible .settings-avatar {
   box-shadow:
     0 0 0 1px var(--avatar-ring-highlight-color),
     0 0 0 4px var(--avatar-ring-glow);
@@ -1247,11 +1247,7 @@ body.dark-theme .settings-view {
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 2px;
-  min-width: 0;
-}
-
-.settings-username-link {
+  gap: 4px;
   min-width: 0;
 }
 

src/popup/popup.html

@@ -158,23 +158,15 @@ <h3 class="settings-title">Settings</h3>
         </div>
         <div class="settings-content">
           <div class="setting-row setting-user-info">
-            <a
-              class="profile-link settings-avatar-link"
-              id="settings-avatar-link"
-              href="#"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <img class="settings-avatar" id="settings-avatar" src="" alt="" hidden />
-            </a>
             <div class="settings-user-details">
               <a
-                class="profile-link settings-username-link"
-                id="settings-username-link"
+                class="profile-link settings-profile-link"
+                id="settings-profile-link"
                 href="#"
                 target="_blank"
                 rel="noopener noreferrer"
               >
+                <img class="settings-avatar" id="settings-avatar" src="" alt="" hidden />
                 <span class="setting-account-name" id="settings-username">Loading...</span>
               </a>
               <span class="settings-auth-method" id="settings-auth-method"></span>

src/popup/popup.js

@@ -61,7 +61,7 @@ function updateProfileLinks(username, userInfo) {
   const displayName = username || userInfo?.login || "User";
   const ariaLabel = displayName !== "User" ? `Open ${displayName} profile` : "Open GitHub profile";
 
-  [userProfileLink, settingsAvatarLink, settingsUsernameLink].forEach((link) => {
+  [userProfileLink, settingsProfileLink].forEach((link) => {
     if (!link) return;
     if (url) {
       link.href = url;
@@ -180,8 +180,7 @@ const themeRadios = document.querySelectorAll('input[name="theme"]');
 const settingsLogoutBtn = document.getElementById("settings-logout-btn");
 const settingsUsernameEl = document.getElementById("settings-username");
 const settingsAvatarEl = document.getElementById("settings-avatar");
-const settingsAvatarLink = document.getElementById("settings-avatar-link");
-const settingsUsernameLink = document.getElementById("settings-username-link");
+const settingsProfileLink = document.getElementById("settings-profile-link");
 const settingsAuthMethodEl = document.getElementById("settings-auth-method");
 const notificationsContainer = document.getElementById("notifications-container");
 const refreshCountdownEl = document.getElementById("refresh-countdown");
@@ -409,14 +408,8 @@ async function showSettings() {
     settingsAvatarEl.src = userInfo.avatar_url;
     settingsAvatarEl.alt = userInfo.login || "User";
     settingsAvatarEl.hidden = false;
-    if (settingsAvatarLink) {
-      settingsAvatarLink.hidden = false;
-    }
   } else if (settingsAvatarEl) {
     settingsAvatarEl.hidden = true;
-    if (settingsAvatarLink) {
-      settingsAvatarLink.hidden = true;
-    }
   }
 
   // Load popup width setting

tests/popup-countdown.test.js

@@ -119,8 +119,7 @@ document.body.innerHTML = `
   <div id="notifications-container"></div>
   <span id="settings-username"></span>
   <img id="settings-avatar" />
-  <a id="settings-avatar-link"></a>
-  <a id="settings-username-link"></a>
+  <a id="settings-profile-link"></a>
   <span id="settings-auth-method"></span>
 `;