From cbd12f3e52a92feb24ff63cf44c42832e8ecfa44 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 17:47:38 +0700
Subject: [PATCH] =?UTF-8?q?fix(ux):=20Batch=20A=20part=202=20=E2=80=94=20s?=
 =?UTF-8?q?tash,=20crew=20invites,=20map=20marker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stash: remove the handler-less 'Share via DM' button; action overlay stays
  visible on touch (was hover-only, so edit/delete were unreachable on mobile)
- Crew invite accept no longer claims membership is confirmed (only the founder
  ratifies the roster) — both the toast and the accepted state now say so
- Crew invite share message no longer promises a one-click join
- Map marker: don't bind the Leaflet popup when a host supplies onSpotClick
  (MapPage's bottom sheet) — both used to appear at once
---
 src/components/CrewInviteCard.tsx   |  6 +++---
 src/components/CrewInviteDialog.tsx |  2 +-
 src/components/SpotMap.tsx          | 28 ++++++++++++++++------------
 src/pages/StashPage.tsx             |  8 +-------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/CrewInviteCard.tsx b/src/components/CrewInviteCard.tsx
index b62cfd8..c5eb19c 100644
--- a/src/components/CrewInviteCard.tsx
+++ b/src/components/CrewInviteCard.tsx
@@ -40,8 +40,8 @@ export function CrewInviteCard({
       await accept({ invite });
       setDone('accepted');
       toast({
-        title: `Welcome to ${invite.crewName}! 🛹`,
-        description: 'Your membership is confirmed.',
+        title: 'Invite accepted 🛹',
+        description: `The crew founder confirms members on ${invite.crewName}. You'll appear on the roster once they approve.`,
       });
       onResolved?.();
     } catch (err) {
@@ -69,7 +69,7 @@ export function CrewInviteCard({
         {done === 'accepted' ? (
           <>
             <Check className="h-4 w-4 text-teal-400" />
-            You joined <span className="font-bold text-white">{invite.crewName}</span>
+            Accepted — <span className="font-bold text-white">{invite.crewName}</span> confirms members
           </>
         ) : (
           <>
diff --git a/src/components/CrewInviteDialog.tsx b/src/components/CrewInviteDialog.tsx
index 902d4cc..11b9563 100644
--- a/src/components/CrewInviteDialog.tsx
+++ b/src/components/CrewInviteDialog.tsx
@@ -95,7 +95,7 @@ export function CrewInviteDialog({ crew, isFounder, triggerClassName }: CrewInvi
   const crewUrl = `${window.location.origin}/crew/${crew.pubkey}/${crew.identifier}`;
   const inviteMessage =
     `Yo — join the ${crew.name} crew on SkateSpots 🛹\n${crewUrl}\n\n` +
-    `Log in with your Nostr key, then confirm your membership on the crew page.`;
+    `Log in with your Nostr key, then request to join from the crew page.`;
 
   const copy = async (text: string, which: 'link' | 'msg') => {
     try {
diff --git a/src/components/SpotMap.tsx b/src/components/SpotMap.tsx
index b27c80b..21a12bc 100644
--- a/src/components/SpotMap.tsx
+++ b/src/components/SpotMap.tsx
@@ -1113,19 +1113,23 @@ export function SpotMap({
         icon,
       });
 
-      // Create popup
+      // When the host page supplies onSpotClick (MapPage's bottom sheet), let it
+      // own the detail UI — binding the Leaflet popup too made BOTH appear at
+      // once. Standalone map usages (no handler) keep the popup.
       if (primarySpot) {
-        const spotWeather = weatherEnabled && weatherData ? weatherData.get(primarySpot.geohash) : undefined;
-        
-        // Use enhanced popup if there are marketplace items, otherwise use standard
-        const popupContent = hasGear 
-          ? createEnhancedPopupContent(primarySpot, group.marketplaceItems, () => handleViewDetails(primarySpot), spotWeather)
-          : createPopupContent(primarySpot, () => handleViewDetails(primarySpot), spotWeather);
-        
-        marker.bindPopup(popupContent, {
-          maxWidth: 350,
-          className: 'custom-popup',
-        });
+        if (!onSpotClick) {
+          const spotWeather = weatherEnabled && weatherData ? weatherData.get(primarySpot.geohash) : undefined;
+
+          // Use enhanced popup if there are marketplace items, otherwise use standard
+          const popupContent = hasGear
+            ? createEnhancedPopupContent(primarySpot, group.marketplaceItems, () => handleViewDetails(primarySpot), spotWeather)
+            : createPopupContent(primarySpot, () => handleViewDetails(primarySpot), spotWeather);
+
+          marker.bindPopup(popupContent, {
+            maxWidth: 350,
+            className: 'custom-popup',
+          });
+        }
 
         marker.on('click', () => {
           onSpotClick?.(primarySpot);
diff --git a/src/pages/StashPage.tsx b/src/pages/StashPage.tsx
index 98ada66..1f40f23 100644
--- a/src/pages/StashPage.tsx
+++ b/src/pages/StashPage.tsx
@@ -54,7 +54,6 @@ import {
   Target,
   Swords,
   Heart,
-  Send,
   Backpack,
   Trophy,
   Flame,
@@ -204,7 +203,7 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
             <span className="text-[10px] uppercase tracking-wider text-muted-foreground">{category.label}</span>
           </div>
         )}
-        <div className="absolute inset-0 bg-black/85 opacity-0 group-hover:opacity-100 transition-all duration-200 flex flex-col items-center justify-center gap-2 backdrop-blur-sm">
+        <div className="absolute inset-0 bg-black/85 transition-all duration-200 flex flex-col items-center justify-center gap-2 backdrop-blur-sm opacity-100 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100">
           <div className="flex items-center gap-2">
             <Button size="sm" variant="outline" className="h-8 border-white/30" onClick={(e) => { e.stopPropagation(); onEdit(); }}>
               <Edit3 className="h-3.5 w-3.5 mr-1" />Edit
@@ -219,11 +218,6 @@ function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fa
               <Store className="h-3 w-3 mr-1" />List on Marketplace
             </Button>
           )}
-          {item.visibility !== 'private' && (
-            <Button size="sm" variant="ghost" className="h-7 text-cyan-400 hover:text-cyan-300 hover:bg-cyan-500/10">
-              <Send className="h-3 w-3 mr-1" />Share via DM
-            </Button>
-          )}
         </div>
       </div>
       <CardContent className="p-3 space-y-2">