From 5b4ec1b2a2f0e913c2e76a9165764914c6dea0f6 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 27 Jun 2025 09:45:48 +0800
Subject: [PATCH] feat: implement disabled state for header search on
 statistics page with appropriate styling and functionality adjustments

---
 static/css/components/header.css | 44 ++++++++++++++++++++++++++++++++
 static/js/components/Header.js   | 19 ++++++++++++--
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/static/css/components/header.css b/static/css/components/header.css
index da864529..13918428 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -79,6 +79,50 @@
   flex: 1;
   max-width: 400px;
   margin: 0 1rem;
+  transition: opacity 0.2s ease;
+}
+
+/* Disabled state for header search */
+.header-search.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.header-search.disabled input {
+  background-color: var(--input-disabled-bg, #f5f5f5);
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.header-search.disabled button {
+  background-color: var(--button-disabled-bg, #e0e0e0);
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.header-search.disabled .search-icon {
+  color: var(--text-muted);
+}
+
+/* Dark theme specific styles for disabled header search */
+[data-theme="dark"] .header-search.disabled input {
+  background-color: #3a3a3a;
+  color: #888888;
+  border-color: #555555;
+}
+
+[data-theme="dark"] .header-search.disabled button {
+  background-color: #3a3a3a;
+  color: #888888;
+  border-color: #555555;
+}
+
+[data-theme="dark"] .header-search.disabled .search-icon {
+  color: #888888;
+}
+
+[data-theme="dark"] .header-search.disabled .fas {
+  color: #888888;
 }
 
 /* Header controls (formerly corner controls) */
diff --git a/static/js/components/Header.js b/static/js/components/Header.js
index 27f6d7ad..f95e3053 100644
--- a/static/js/components/Header.js
+++ b/static/js/components/Header.js
@@ -130,9 +130,24 @@ export class HeaderManager {
       const headerSearch = document.getElementById('headerSearch');
       
       if (this.currentPage === 'statistics' && headerSearch) {
-        headerSearch.style.display = 'none';
+        headerSearch.classList.add('disabled');
+        // Disable search functionality
+        const searchInput = headerSearch.querySelector('#searchInput');
+        const searchButtons = headerSearch.querySelectorAll('button');
+        if (searchInput) {
+          searchInput.disabled = true;
+          searchInput.placeholder = 'Search not available on statistics page';
+        }
+        searchButtons.forEach(btn => btn.disabled = true);
       } else if (headerSearch) {
-        headerSearch.style.display = 'flex';
+        headerSearch.classList.remove('disabled');
+        // Re-enable search functionality
+        const searchInput = headerSearch.querySelector('#searchInput');
+        const searchButtons = headerSearch.querySelectorAll('button');
+        if (searchInput) {
+          searchInput.disabled = false;
+        }
+        searchButtons.forEach(btn => btn.disabled = false);
       }
     }
 }