From b013a71ea6407139da65d9f8cd26601ca14dd906 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 23 Dec 2025 20:05:32 -0500
Subject: [PATCH] Feature: Add clear button and fix dropdown z-index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
1. Added clear (X) button in search bar
   - Only appears when there's text
   - Clears search query AND filters
   - Clean X icon with hover effect

2. Fixed dropdown z-index
   - Changed from z-index: 50 to z-index: 9999
   - Now appears above all other UI elements

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/Search/SmartSearchBar.jsx | 21 +++++++++++++++++++++
 src/styles/smartSearchBar.css            | 23 ++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/SmartSearchBar.jsx b/src/components/Search/SmartSearchBar.jsx
index 43ad552..5d2b920 100644
--- a/src/components/Search/SmartSearchBar.jsx
+++ b/src/components/Search/SmartSearchBar.jsx
@@ -165,6 +165,13 @@ export default function SmartSearchBar({
     return "Place / Tour / Wire";
   }, []);
 
+  const handleClear = () => {
+    setQ("");
+    setItems([]);
+    setOpen(false);
+    onSearch && onSearch(""); // Clear filters
+  };
+
   return (
     <div className="sw-search" ref={boxRef}>
       <div className="sw-search__bar">
@@ -184,6 +191,20 @@ export default function SmartSearchBar({
           aria-label="Search"
         />
 
+        {q && (
+          <button
+            type="button"
+            className="sw-search__clearBtn"
+            title="Clear search"
+            onClick={handleClear}
+            aria-label="Clear search"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+
         <div className="sw-search__icons" aria-label="Search actions">
           <button
             type="button"
diff --git a/src/styles/smartSearchBar.css b/src/styles/smartSearchBar.css
index cae51f8..6044696 100644
--- a/src/styles/smartSearchBar.css
+++ b/src/styles/smartSearchBar.css
@@ -35,6 +35,27 @@
   color: var(--sw-muted, rgba(255,255,255,0.55));
 }
 
+.sw-search__clearBtn {
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--sw-muted, rgba(255,255,255,0.60));
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease;
+}
+
+.sw-search__clearBtn:hover {
+  color: var(--sw-text, rgba(255,255,255,0.92));
+}
+
+.sw-search__clearBtn:active {
+  transform: scale(0.95);
+}
+
 .sw-search__icons {
   display: flex;
   align-items: center;
@@ -64,7 +85,7 @@
 
 .sw-search__dropdown {
   position: absolute;
-  z-index: 50;
+  z-index: 9999;
   left: 0;
   right: 0;
   margin-top: 8px;