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 &&
{status}
}
-
+
+
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 */