From c0ee70b8bb8cb7c2a863f65fae725827fb85e0a8 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 19:03:29 +0700
Subject: [PATCH] fix(ux): map empty state; marketplace-aware CreateListing
 return

- Map view now shows a 'No spots match / Clear filters' overlay when the active
  filters hide everything (it previously looked blank/unloaded)
- 'List Gear' passes returnTo=/marketplace, so the back link and the post-publish
  redirect return to Marketplace instead of dumping users on the map
---
 src/pages/CreateListingPage.tsx |  8 +++++---
 src/pages/GearSwapPage.tsx      |  2 +-
 src/pages/MapPage.tsx           | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/pages/CreateListingPage.tsx b/src/pages/CreateListingPage.tsx
index 7deb4ea..3197449 100644
--- a/src/pages/CreateListingPage.tsx
+++ b/src/pages/CreateListingPage.tsx
@@ -85,6 +85,8 @@ export default function CreateListingPage() {
 
   // Check if coming from stash
   const fromStash = searchParams.get('fromStash') === 'true';
+  // Where to return after publishing / when going back (e.g. /marketplace).
+  const returnTo = searchParams.get('returnTo') || '';
   const stashId = searchParams.get('stashId');
 
   // Form state - initialize from URL params if coming from stash
@@ -353,7 +355,7 @@ export default function CreateListingPage() {
       if (selectedSpot) {
         navigate(`/spot/${selectedSpot.pubkey}/${selectedSpot.identifier}`);
       } else {
-        navigate('/map');
+        navigate(returnTo || '/map');
       }
     } catch (error) {
       toast({
@@ -386,11 +388,11 @@ export default function CreateListingPage() {
       <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
         <div className="mb-6">
           <Link
-            to={fromStash ? '/stash' : (selectedSpot ? `/spot/${selectedSpot.pubkey}/${selectedSpot.identifier}` : '/map')}
+            to={fromStash ? '/stash' : (selectedSpot ? `/spot/${selectedSpot.pubkey}/${selectedSpot.identifier}` : (returnTo || '/map'))}
             className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4"
           >
             <ArrowLeft className="h-4 w-4 mr-2" />
-            {fromStash ? 'Back to Stash' : (selectedSpot ? `Back to ${selectedSpot.title}` : 'Back to Map')}
+            {fromStash ? 'Back to Stash' : (selectedSpot ? `Back to ${selectedSpot.title}` : (returnTo === '/marketplace' ? 'Back to Marketplace' : 'Back to Map'))}
           </Link>
           <h1
             className="text-3xl font-black uppercase neon-orange"
diff --git a/src/pages/GearSwapPage.tsx b/src/pages/GearSwapPage.tsx
index 0883f18..af46639 100644
--- a/src/pages/GearSwapPage.tsx
+++ b/src/pages/GearSwapPage.tsx
@@ -207,7 +207,7 @@ export default function GearSwapPage() {
             </p>
           </div>
 
-          <Link to="/create-listing">
+          <Link to="/create-listing?returnTo=/marketplace">
             <Button
               size="lg"
               className="gap-2 bg-orange-500 hover:bg-orange-600 text-white font-bold uppercase shadow-[0_0_20px_rgba(255,102,0,0.3)]"
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 45c9078..aed45d0 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1691,6 +1691,21 @@ export default function MapPage() {
 
 
 
+              {/* Empty state — the active filters hid everything. Without this
+                  the map just looks blank/unloaded. Only shown when the
+                  spot/shop layers are on (other layers have their own markers). */}
+              {!isLoading && (showSpots || showShops) && filteredSpots.length === 0 && (
+                <div className="pointer-events-none absolute inset-0 z-[1001] flex items-center justify-center px-4">
+                  <div className="pointer-events-auto max-w-xs rounded-2xl border border-white/10 bg-black/85 p-5 text-center shadow-2xl backdrop-blur-md">
+                    <p className="font-black uppercase tracking-wide text-white">No spots match</p>
+                    <p className="mt-1 text-xs text-gray-400">Try a different search or clear your filters.</p>
+                    <Button size="sm" className="mt-3" onClick={clearFilters}>
+                      Clear filters
+                    </Button>
+                  </div>
+                </div>
+              )}
+
               {/* Map attribution — bottom-left, sits ABOVE the mobile bottom
                   nav so it never covers the Shops & Spots buttons. Tiny + subtle. */}
               <div