From 1b520755611340609ce79d1e8e1d12c34dc1dcd6 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 20 Dec 2025 22:01:57 -0500
Subject: [PATCH] yo

---
 src/components/Map/MapView.jsx | 41 ++++++++++++++--
 src/styles/overlays.css        | 88 ++++++++++++++++++++++++++++++++++
 2 files changed, 124 insertions(+), 5 deletions(-)

diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx
index 979fc08..34a2aaa 100644
--- a/src/components/Map/MapView.jsx
+++ b/src/components/Map/MapView.jsx
@@ -72,6 +72,8 @@ export default function MapView({
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState("");
 
+  const [searchQuery, setSearchQuery] = useState("");
+
   const bottomCategories = FILTER_CATEGORY_MAP[mainFilter] || ["All"];
 
   /* SW_SUBCAT_ICONS:BEGIN */
@@ -222,8 +224,15 @@ setIsCreating(true);
     setDraftCoords(null);
   };
 
-  const handleSearchClick = () => {
-    alert("🔍 Search feature coming soon!");
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    const q = (searchQuery || "").trim();
+    if (!q) return;
+    alert(`🔍 Search: ${q} (coming soon!)`);
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery("");
   };
 
   const handleSubmitPost = async () => {
@@ -330,9 +339,31 @@ const authorName = (username || "").trim() || "anon";
         {status && <div className="map-status">{status}</div>}
 
         <div className="map-overlay map-overlay-top">
-          <button className="chip-pill" onClick={handleSearchClick}>
-            Look at…
-          </button>
+          <form className="sw-searchbar" onSubmit={handleSearchSubmit} role="search" aria-label="Search">
+            <i className="fa-solid fa-magnifying-glass sw-search-icon" />
+            <input
+              className="sw-search-input"
+              type="search"
+              placeholder="Look at… (city, topic, @user)"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              autoCapitalize="none"
+              autoCorrect="off"
+              spellCheck={false}
+            />
+            {searchQuery ? (
+              <button
+                type="button"
+                className="sw-search-clear"
+                onClick={handleClearSearch}
+                aria-label="Clear search"
+                title="Clear"
+              >
+                ✕
+              </button>
+            ) : null}
+          </form>
+
           <button className="chip-pill" onClick={handleOpenCreate}>
             Place your wire
           </button>
diff --git a/src/styles/overlays.css b/src/styles/overlays.css
index 61bc6f6..ba4c41d 100644
--- a/src/styles/overlays.css
+++ b/src/styles/overlays.css
@@ -4,6 +4,9 @@
 .map-overlay-top {
   top: .7rem; left:50%; transform:translateX(-50%);
   display:flex; gap:.6rem; align-items:center;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: min(980px, calc(100vw - 24px));
 }
 
 .map-overlay-left {
@@ -76,3 +79,88 @@
   cursor: pointer;
   box-shadow: 0 5px 12px rgba(0,0,0,.7), 0 0 12px rgba(56,189,248,.35);
 }
+
+
+/* SW_SEARCHBAR:BEGIN */
+.sw-searchbar{
+  pointer-events: auto;
+  display:flex;
+  align-items:center;
+  gap: .55rem;
+  padding: 0.42rem 0.70rem;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.92);
+  border: 1px solid rgba(148, 163, 184, 0.85);
+  box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22);
+  backdrop-filter: blur(10px);
+  min-height: 38px;
+}
+
+.sw-searchbar:focus-within{
+  border-color: rgba(56,189,248,.85);
+  box-shadow: 0 8px 18px rgba(0,0,0,.72), 0 0 18px rgba(56,189,248,.35);
+}
+
+.sw-search-icon{
+  font-size: 14px;
+  opacity: .95;
+}
+
+.sw-search-input{
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #e5e7eb;
+  font-size: 0.80rem;
+  font-weight: 800;
+  width: min(52vw, 360px);
+  min-width: 160px;
+}
+
+.sw-search-input::placeholder{
+  color: rgba(203, 213, 225, 0.88);
+  font-weight: 800;
+}
+
+.sw-search-clear{
+  border: none;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: rgba(2,6,23,.35);
+  border: 1px solid rgba(148,163,184,.35);
+  color: #e5e7eb;
+  font-weight: 900;
+  display:grid;
+  place-items:center;
+}
+
+.sw-search-clear:active{ transform: scale(0.97); }
+
+/* Light theme */
+body[data-theme="light"] .sw-searchbar{
+  background: rgba(255,255,255,0.92);
+  border-color: rgba(148, 163, 184, 0.85);
+  box-shadow: 0 8px 18px rgba(0,0,0,.10);
+}
+body[data-theme="light"] .sw-search-input{
+  color:#0B1220;
+}
+body[data-theme="light"] .sw-search-input::placeholder{
+  color: rgba(91, 103, 122, 0.92);
+}
+body[data-theme="light"] .sw-search-clear{
+  background: rgba(255,255,255,.85);
+  color:#0B1220;
+  border-color: rgba(148,163,184,.55);
+}
+
+/* Tight phones: keep it clean */
+@media (max-width: 420px){
+  .sw-search-input{
+    width: min(72vw, 320px);
+    min-width: 120px;
+  }
+}
+/* SW_SEARCHBAR:END */