From 0e789cb38cf1d2979654660966711375dff4aa2a Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sun, 13 Sep 2026 08:13:55 +0800
Subject: [PATCH] revert(ui): move Doctor trigger back to the page toolbar

Undo the Doctor relocation from fe160134 while keeping that commit's
unrelated header changes (full-width header, 32px click targets,
role/tabindex plus Enter/Space activation).

- Restore the .doctor-control-group button in controls.html
- Drop the .doctor-toggle icon and the hamburger menu entry from the header
- Remove the Header.js 'doctor' dropdown action forwarding to the button
- Drop the header-scoped doctor-toggle styles
- Restore the .doctor-trigger styles (desktop and mobile) in doctor-modal.css
---
 static/css/components/header.css             | 21 --------------------
 static/css/components/modal/doctor-modal.css | 19 ++++++++++++++++++
 static/js/components/Header.js               |  7 -------
 templates/components/controls.html           |  7 +++++++
 templates/components/header.html             | 10 ----------
 5 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/static/css/components/header.css b/static/css/components/header.css
index 800fc05d..c66242a2 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -349,27 +349,6 @@
   transform: translateY(-2px);
 }
 
-/* Doctor trigger in the header: accent-tinted icon with the status badge
-   pinned to the corner like the other header badges. */
-.header-controls .doctor-toggle i {
-  color: var(--lora-accent);
-}
-
-.header-controls .doctor-toggle:hover i {
-  color: inherit;
-}
-
-.header-controls .doctor-status-badge {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  font-size: 10px;
-  border: 2px solid var(--card-bg);
-}
-
 .theme-toggle {
   position: relative;
 }
diff --git a/static/css/components/modal/doctor-modal.css b/static/css/components/modal/doctor-modal.css
index e5e0ad9d..ebbb3bbb 100644
--- a/static/css/components/modal/doctor-modal.css
+++ b/static/css/components/modal/doctor-modal.css
@@ -1,3 +1,13 @@
+.doctor-trigger {
+    min-width: 120px;
+    position: relative;
+    border-color: color-mix(in srgb, var(--lora-accent) 24%, var(--border-color));
+}
+
+.doctor-trigger i {
+    color: var(--lora-accent);
+}
+
 .doctor-status-badge {
     display: inline-flex;
     align-items: center;
@@ -237,6 +247,15 @@
 }
 
 @media (max-width: 760px) {
+    .doctor-trigger {
+        min-width: auto;
+        padding-inline: 10px;
+    }
+
+    .doctor-trigger span:not(.doctor-status-badge) {
+        display: none;
+    }
+
     .doctor-hero,
     .doctor-footer {
         flex-direction: column;
diff --git a/static/js/components/Header.js b/static/js/components/Header.js
index 56133956..af702313 100644
--- a/static/js/components/Header.js
+++ b/static/js/components/Header.js
@@ -308,13 +308,6 @@ export class HeaderManager {
         case 'notifications':
           updateService.toggleUpdateModal();
           break;
-        case 'doctor': {
-          const doctorToggle = document.getElementById('doctorTriggerBtn');
-          if (doctorToggle) {
-            doctorToggle.click();
-          }
-          break;
-        }
         case 'support':
           if (window.modalManager) {
             window.modalManager.toggleModal('supportModal');
diff --git a/templates/components/controls.html b/templates/components/controls.html
index 9a7dc1db..b542371d 100644
--- a/templates/components/controls.html
+++ b/templates/components/controls.html
@@ -144,6 +144,13 @@
                 </button>
             </div>
             {% endif %}
+            <div class="control-group doctor-control-group">
+                <button id="doctorTriggerBtn" class="doctor-trigger" title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}">
+                    <i class="fas fa-stethoscope"></i>
+                    <span>{{ t('doctor.title', default='Doctor') }}</span>
+                    <span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
+                </button>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/components/header.html b/templates/components/header.html
index 23bc15e3..bfe75268 100644
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -74,12 +74,6 @@
     <!-- Right section: Controls -->
     <div class="header-right">
       <div class="header-controls" id="headerControls">
-        <div class="doctor-toggle" id="doctorTriggerBtn" role="button" tabindex="0"
-          title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}"
-          aria-label="{{ t('doctor.title', default='Doctor') }}">
-          <i class="fas fa-stethoscope"></i>
-          <span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
-        </div>
         <div class="theme-toggle" role="button" tabindex="0" title="{{ t('header.theme.toggle') }}"
           aria-label="{{ t('header.theme.toggle') }}">
           <i class="fas fa-moon dark-icon"></i>
@@ -127,10 +121,6 @@
           <i class="fas fa-bell"></i>
           <span>{{ t('header.actions.notifications') }}</span>
         </div>
-        <div class="dropdown-item" data-action="doctor">
-          <i class="fas fa-stethoscope"></i>
-          <span>{{ t('doctor.title', default='Doctor') }}</span>
-        </div>
         <div class="dropdown-divider"></div>
         <div class="dropdown-item" data-action="support">
           <i class="fas fa-heart"></i>