From 4330a746b18b520b72922dc4cbee2fe5dc382bf6 Mon Sep 17 00:00:00 2001
From: HexWarrior6 <3083512469@qq.com>
Date: Fri, 14 Nov 2025 09:46:06 +0800
Subject: [PATCH 1/2] feat(search): add search history functionality and
 dropdown menu styling

---
 frontend/src/components/SearchArticles.tsx | 169 +++++++++++++++++++--
 frontend/src/styles/SearchPage.module.scss |  73 +++++++++
 2 files changed, 230 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/SearchArticles.tsx b/frontend/src/components/SearchArticles.tsx
index 704bea1..5066dc1 100644
--- a/frontend/src/components/SearchArticles.tsx
+++ b/frontend/src/components/SearchArticles.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Article, EvidenceType, ArticleStatus } from "../types/article";
 import styles from "../styles/SearchPage.module.scss";
 
-// Enhanced search functionality with real-time suggestions
+// Enhanced search functionality with real-time suggestions and search history
 
 const SearchArticles: React.FC = () => {
   const [keywords, setKeywords] = useState("");
@@ -19,6 +19,66 @@ const SearchArticles: React.FC = () => {
   const [sortField, setSortField] = useState<keyof Article>("createdAt");
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
   const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+  const [showHistoryDropdown, setShowHistoryDropdown] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Load search history from localStorage on component mount
+  useEffect(() => {
+    const savedHistory = localStorage.getItem('searchHistory');
+    if (savedHistory) {
+      try {
+        const history = JSON.parse(savedHistory);
+        if (Array.isArray(history)) {
+          setSearchHistory(history);
+        }
+      } catch (e) {
+        console.error('Error parsing search history from localStorage:', e);
+      }
+    }
+  }, []);
+
+  // Save search history to localStorage whenever searchHistory changes
+  useEffect(() => {
+    localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
+  }, [searchHistory]);
+
+  // Update dropdown position when it's shown or when the window is resized
+  useEffect(() => {
+    const updatePosition = () => {
+      if (showHistoryDropdown && searchInputRef.current) {
+        const inputRect = searchInputRef.current.getBoundingClientRect();
+        setDropdownPosition({
+          top: inputRect.bottom + window.scrollY,
+          left: inputRect.left + window.scrollX,
+          width: inputRect.width,
+        });
+      }
+    };
+
+    // Only update position when dropdown is shown
+    if (showHistoryDropdown) {
+      // Use setTimeout to ensure element is rendered before calculating position
+      setTimeout(updatePosition, 0);
+    }
+
+    // Add event listeners for scroll and resize to update position
+    const handleScrollAndResize = () => {
+      if (showHistoryDropdown) {
+        updatePosition();
+      }
+    };
+
+    window.addEventListener('scroll', handleScrollAndResize);
+    window.addEventListener('resize', handleScrollAndResize);
+
+    return () => {
+      window.removeEventListener('scroll', handleScrollAndResize);
+      window.removeEventListener('resize', handleScrollAndResize);
+    };
+  }, [showHistoryDropdown]);
 
   // Enhanced search function with debouncing
   useEffect(() => {
@@ -37,6 +97,15 @@ const SearchArticles: React.FC = () => {
     setError(null);
     setSearchPerformed(true);
 
+    // Add to search history if the search term is not already in the history
+    if (keywords.trim()) {
+      setSearchHistory(prev => {
+        const newHistory = prev.filter(item => item.toLowerCase() !== keywords.trim().toLowerCase());
+        // Limit history to 10 items
+        return [keywords.trim(), ...newHistory].slice(0, 10);
+      });
+    }
+
     try {
       const params = new URLSearchParams();
       if (keywords.trim()) params.append("keywords", keywords.trim());
@@ -79,6 +148,20 @@ const SearchArticles: React.FC = () => {
     }
   };
 
+  const handleHistoryItemClick = (searchTerm: string) => {
+    setKeywords(searchTerm);
+    setShowHistoryDropdown(false);
+    // Focus the search input after setting the value
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  };
+
+  const handleClearHistory = () => {
+    setSearchHistory([]);
+    localStorage.removeItem('searchHistory');
+  };
+
   // Handle table sorting
   const handleSort = (field: keyof Article) => {
     if (sortField === field) {
@@ -103,6 +186,22 @@ const SearchArticles: React.FC = () => {
     setSearchPerformed(false);
   };
 
+  // Close the dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (searchInputRef.current && !searchInputRef.current.contains(target) &&
+          dropdownRef.current && !dropdownRef.current.contains(target)) {
+        setShowHistoryDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
     <>
       {/* Search Form Container */}
@@ -112,16 +211,62 @@ const SearchArticles: React.FC = () => {
           {/* Main Search Bar */}
           <div className={styles.mainSearchSection}>
             <div className={styles.searchBarContainer}>
-              <input
-                id="keywords"
-                type="text"
-                value={keywords}
-                onChange={(e) => setKeywords(e.target.value)}
-                onKeyPress={handleKeyPress}
-                className={styles.mainSearchInput}
-                placeholder="Enter keywords to search across titles, authors, and claims..."
-                aria-label="Search keywords"
-              />
+                <input
+                  id="keywords"
+                  type="text"
+                  value={keywords}
+                  onChange={(e) => setKeywords(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  onFocus={() => setShowHistoryDropdown(true)}
+                  onClick={() => setShowHistoryDropdown(true)}
+                  className={styles.mainSearchInput}
+                  placeholder="Enter keywords to search across titles, authors, and claims..."
+                  aria-label="Search keywords"
+                  autoComplete="off"
+                  ref={searchInputRef}
+                />
+                {showHistoryDropdown && (
+                  <div
+                    className={styles.searchHistoryDropdown}
+                    ref={dropdownRef}
+                    style={{
+                      top: `${dropdownPosition.top + 4}px`,  // Add 4px gap
+                      left: `${dropdownPosition.left}px`,
+                      width: `${dropdownPosition.width}px`,
+                    }}
+                  >
+                    {searchHistory.length > 0 ? (
+                      <>
+                        <div className={styles.historyHeader}>
+                          <span>Recent Searches</span>
+                          <button
+                            className={styles.clearHistoryButton}
+                            onClick={handleClearHistory}
+                            aria-label="Clear search history"
+                          >
+                            Clear
+                          </button>
+                        </div>
+                        <ul className={styles.historyList}>
+                          {searchHistory.map((item, index) => (
+                            <li
+                              key={index}
+                              className={styles.historyItem}
+                              onClick={() => handleHistoryItemClick(item)}
+                            >
+                              <span className={styles.historyIcon}>🕒</span>
+                              <span className={styles.historyText}>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ) : (
+                      <div className={styles.noHistoryMessage}>
+                        <p>No recent searches</p>
+                      </div>
+                    )}
+                  </div>
+                )}
               <button
                 onClick={handleSearch}
                 disabled={loading}
diff --git a/frontend/src/styles/SearchPage.module.scss b/frontend/src/styles/SearchPage.module.scss
index aa70229..d514dbb 100644
--- a/frontend/src/styles/SearchPage.module.scss
+++ b/frontend/src/styles/SearchPage.module.scss
@@ -160,6 +160,7 @@
 .searchBarContainer {
   display: flex;
   gap: 0.5rem;
+  position: relative; /* Make this the positioning context for dropdown */
 }
 
 .mainSearchInput {
@@ -177,6 +178,78 @@
   }
 }
 
+.searchHistoryDropdown {
+  position: fixed; /* Fixed position to escape parent containers and position absolutely */
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  z-index: 1000; /* Higher z-index to appear above parent */
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.historyHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-weight: 600;
+  color: #374151;
+  background-color: #f9fafb;
+  border-radius: 8px 8px 0 0;
+}
+
+.noHistoryMessage {
+  padding: 1rem;
+  text-align: center;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.clearHistoryButton {
+  background: none;
+  border: none;
+  color: #3b82f6;
+  cursor: pointer;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #eff6ff;
+  }
+}
+
+.historyList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.historyItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid #f3f4f6;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: #f9fafb;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.historyIcon {
+  font-size: 1rem;
+}
+
 .mainSearchButton {
   display: inline-flex;
   align-items: center;

From 2a7ccbdee77df1df165a256e91e05967da2f7906 Mon Sep 17 00:00:00 2001
From: HexWarrior6 <3083512469@qq.com>
Date: Fri, 14 Nov 2025 10:00:43 +0800
Subject: [PATCH 2/2] fix(components): fix search dropdown positioning and
 adjust navbar z-index

---
 .../components/PopulatedNavBar.module.scss    |   2 +-
 frontend/src/components/SearchArticles.tsx    | 147 +++++++++++++-----
 2 files changed, 107 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/PopulatedNavBar.module.scss b/frontend/src/components/PopulatedNavBar.module.scss
index d2577fa..c6a3daa 100644
--- a/frontend/src/components/PopulatedNavBar.module.scss
+++ b/frontend/src/components/PopulatedNavBar.module.scss
@@ -4,7 +4,7 @@
   padding: 0 var(--spacing-lg);
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 1001;
 }
 
 .navContainer {
diff --git a/frontend/src/components/SearchArticles.tsx b/frontend/src/components/SearchArticles.tsx
index 5066dc1..480fee6 100644
--- a/frontend/src/components/SearchArticles.tsx
+++ b/frontend/src/components/SearchArticles.tsx
@@ -50,11 +50,23 @@ const SearchArticles: React.FC = () => {
     const updatePosition = () => {
       if (showHistoryDropdown && searchInputRef.current) {
         const inputRect = searchInputRef.current.getBoundingClientRect();
-        setDropdownPosition({
-          top: inputRect.bottom + window.scrollY,
-          left: inputRect.left + window.scrollX,
-          width: inputRect.width,
-        });
+        // Calculate position relative to the offset parent instead of viewport
+        const offsetParent = searchInputRef.current.offsetParent as HTMLElement;
+        if (offsetParent) {
+          const parentRect = offsetParent.getBoundingClientRect();
+          setDropdownPosition({
+            top: inputRect.bottom - parentRect.top, // Position relative to parent
+            left: inputRect.left - parentRect.left, // Position relative to parent
+            width: inputRect.width,
+          });
+        } else {
+          // Fallback to document coordinates if no offset parent
+          setDropdownPosition({
+            top: inputRect.bottom + window.scrollY,
+            left: inputRect.left + window.scrollX,
+            width: inputRect.width,
+          });
+        }
       }
     };
 
@@ -225,46 +237,55 @@ const SearchArticles: React.FC = () => {
                   autoComplete="off"
                   ref={searchInputRef}
                 />
+                {/* This is where the dropdown would be rendered in the normal DOM */}
+                {/* The actual dropdown will be rendered in a portal-like fashion */}
                 {showHistoryDropdown && (
                   <div
-                    className={styles.searchHistoryDropdown}
-                    ref={dropdownRef}
-                    style={{
-                      top: `${dropdownPosition.top + 4}px`,  // Add 4px gap
-                      left: `${dropdownPosition.left}px`,
-                      width: `${dropdownPosition.width}px`,
-                    }}
+                    id="search-history-dropdown-portal"
+                    style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
                   >
-                    {searchHistory.length > 0 ? (
-                      <>
-                        <div className={styles.historyHeader}>
-                          <span>Recent Searches</span>
-                          <button
-                            className={styles.clearHistoryButton}
-                            onClick={handleClearHistory}
-                            aria-label="Clear search history"
-                          >
-                            Clear
-                          </button>
-                        </div>
-                        <ul className={styles.historyList}>
-                          {searchHistory.map((item, index) => (
-                            <li
-                              key={index}
-                              className={styles.historyItem}
-                              onClick={() => handleHistoryItemClick(item)}
+                    <div
+                      className={styles.searchHistoryDropdown}
+                      ref={dropdownRef}
+                      style={{
+                        top: `${dropdownPosition.top + 4}px`,  // Add 4px gap
+                        left: `${dropdownPosition.left}px`,
+                        width: `${dropdownPosition.width}px`,
+                        position: 'absolute',
+                        pointerEvents: 'auto',
+                      }}
+                    >
+                      {searchHistory.length > 0 ? (
+                        <>
+                          <div className={styles.historyHeader}>
+                            <span>Recent Searches</span>
+                            <button
+                              className={styles.clearHistoryButton}
+                              onClick={handleClearHistory}
+                              aria-label="Clear search history"
                             >
-                              <span className={styles.historyIcon}>🕒</span>
-                              <span className={styles.historyText}>{item}</span>
-                            </li>
-                          ))}
-                        </ul>
-                      </>
-                    ) : (
-                      <div className={styles.noHistoryMessage}>
-                        <p>No recent searches</p>
-                      </div>
-                    )}
+                              Clear
+                            </button>
+                          </div>
+                          <ul className={styles.historyList}>
+                            {searchHistory.map((item, index) => (
+                              <li
+                                key={index}
+                                className={styles.historyItem}
+                                onClick={() => handleHistoryItemClick(item)}
+                              >
+                                <span className={styles.historyIcon}>🕒</span>
+                                <span className={styles.historyText}>{item}</span>
+                              </li>
+                            ))}
+                          </ul>
+                        </>
+                      ) : (
+                        <div className={styles.noHistoryMessage}>
+                          <p>No recent searches</p>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 )}
               <button
@@ -281,6 +302,50 @@ const SearchArticles: React.FC = () => {
                   "Search"
                 )}
               </button>
+              {/* Search history dropdown positioned separately to avoid clipping */}
+              {showHistoryDropdown && (
+                <div
+                  className={styles.searchHistoryDropdown}
+                  ref={dropdownRef}
+                  style={{
+                    top: `${dropdownPosition.top + 4}px`,  // Add 4px gap
+                    left: `${dropdownPosition.left}px`,
+                    width: `${dropdownPosition.width}px`,
+                    position: 'absolute',
+                  }}
+                >
+                  {searchHistory.length > 0 ? (
+                    <>
+                      <div className={styles.historyHeader}>
+                        <span>Recent Searches</span>
+                        <button
+                          className={styles.clearHistoryButton}
+                          onClick={handleClearHistory}
+                          aria-label="Clear search history"
+                        >
+                          Clear
+                        </button>
+                      </div>
+                      <ul className={styles.historyList}>
+                        {searchHistory.map((item, index) => (
+                          <li
+                            key={index}
+                            className={styles.historyItem}
+                            onClick={() => handleHistoryItemClick(item)}
+                          >
+                            <span className={styles.historyIcon}>🕒</span>
+                            <span className={styles.historyText}>{item}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </>
+                  ) : (
+                    <div className={styles.noHistoryMessage}>
+                      <p>No recent searches</p>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>