2310 lines
108 KiB
TypeScript
2310 lines
108 KiB
TypeScript
import { useState, useMemo, useEffect, lazy, Suspense, useCallback } from 'react';
|
||
import { useSeoMeta } from '@unhead/react';
|
||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||
|
||
// Lazy-load the map — Leaflet is large (~150KB) and only needed on this page
|
||
const SpotMap = lazy(() => import('@/components/SpotMap').then(m => ({ default: m.SpotMap })));
|
||
import { SpotCard, SpotCardSkeleton } from '@/components/SpotCard';
|
||
import { MapFooterStrip } from '@/components/MapFooterStrip';
|
||
import { WeatherLegend } from '@/components/WeatherLegend';
|
||
import { FirstRunChecklist } from '@/components/FirstRunChecklist';
|
||
import { WeatherToggle } from '@/components/WeatherToggle';
|
||
import { RouteDialog } from '@/components/RouteDialog';
|
||
import { TrustFilter } from '@/components/TrustFilter';
|
||
import { MapSearchSuggestions } from '@/components/MapSearchSuggestions';
|
||
import { buildSearchSuggestions, type SearchSuggestion } from '@/lib/mapSearchSuggestions';
|
||
import { filterByTrustLevel, type TrustFilterLevel } from '@/lib/trustFilter';
|
||
import { SortDropdown, type SortOption } from '@/components/SortDropdown';
|
||
import { calculateDistance } from '@/lib/sortOptions';
|
||
import { useZapTotals, zapTargetKey } from '@/hooks/useZapTotals';
|
||
import { useIsMobile } from '@/hooks/useIsMobile';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||
import { LoginArea } from '@/components/auth/LoginArea';
|
||
|
||
import { useSkateSpots } from '@/hooks/useSkateSpots';
|
||
import { useBatchSpotCommunityScores } from '@/hooks/useBatchSpotCommunityScores';
|
||
import { useRelayStatus } from '@/hooks/useRelayStatus';
|
||
import { useAutoHiddenSpots } from '@/hooks/useAutoHiddenSpots';
|
||
import { useOnlineStatus } from '@/hooks/useOfflineCache';
|
||
import { useShops } from '@/hooks/useShops';
|
||
import { useMarketplaceItems } from '@/hooks/useMarketplace';
|
||
import { useTours } from '@/hooks/useTours';
|
||
import { useUpcomingSkateEvents } from '@/hooks/useSkateEvents';
|
||
import { useCrews } from '@/hooks/useCrews';
|
||
import { useBtcMapPlaces } from '@/hooks/useBtcMapPlaces';
|
||
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
||
import { useFollowing } from '@/hooks/useFollowing';
|
||
import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
|
||
import { useBatchSpotStatus } from '@/hooks/useSpotStatus';
|
||
import { useMultipleSpotWeather } from '@/hooks/useSpotWeather';
|
||
import { useCommentCounts } from '@/hooks/useCommentCounts';
|
||
import { ImageWithFallback } from '@/components/ImageWithFallback';
|
||
import { useStash, STASH_CATEGORIES, CONDITION_LABELS, RARITY_TIERS, type StashItem } from '@/hooks/useStash';
|
||
import { useAuthor } from '@/hooks/useAuthor';
|
||
import { useSatsToUsd } from '@/hooks/useExchangeRate';
|
||
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||
import { genUserName } from '@/lib/genUserName';
|
||
import { useTranslation } from '@/contexts/language';
|
||
import { SPOT_CATEGORIES, SHELTER_INFO, SKATE_RELAY, SKATE_SPOT_KIND } from '@/lib/types';
|
||
import type { SkateSpot } from '@/lib/types';
|
||
import { spotTypeLabel } from '@/lib/spotTypeLabel';
|
||
import ngeohash from 'ngeohash';
|
||
import {
|
||
Search,
|
||
Plus,
|
||
List,
|
||
Map,
|
||
X,
|
||
ShoppingBag,
|
||
Route,
|
||
Backpack,
|
||
Package,
|
||
Target,
|
||
Star,
|
||
Zap,
|
||
ArrowRightLeft,
|
||
Shield,
|
||
Trash2,
|
||
AlertTriangle,
|
||
Bitcoin,
|
||
SlidersHorizontal,
|
||
Check,
|
||
Navigation,
|
||
ExternalLink,
|
||
MapPin,
|
||
LocateFixed,
|
||
LocateOff,
|
||
Store,
|
||
Layers,
|
||
Calendar,
|
||
MessageCircle,
|
||
ChevronDown,
|
||
Smartphone,
|
||
WifiOff,
|
||
RefreshCw,
|
||
} from 'lucide-react';
|
||
import { SpotChat } from '@/components/SpotChat';
|
||
import { useToast } from '@/hooks/useToast';
|
||
import { cn } from '@/lib/utils';
|
||
import { getCurrentPosition, GeolocationError, isNativeGeolocation } from '@/lib/geolocation';
|
||
import { getLastLocation } from '@/lib/lastLocation';
|
||
|
||
|
||
type ViewMode = 'map' | 'list';
|
||
|
||
// Compact stash item card for the drawer
|
||
function MiniStashCard({ item, onDelete }: { item: StashItem; onDelete: () => void }) {
|
||
const { t } = useTranslation();
|
||
const category = STASH_CATEGORIES[item.category];
|
||
const condition = CONDITION_LABELS[item.condition];
|
||
const rarity = (item.rarity || category.rarity) as keyof typeof RARITY_TIERS;
|
||
const rarityTier = RARITY_TIERS[rarity];
|
||
const isWishlist = item.itemType === 'wtb';
|
||
const hasImage = item.images && item.images.length > 0;
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'relative p-3 rounded-lg border-2 bg-black/60 transition-all hover:bg-black/80',
|
||
// Wishlist keeps a fixed cyan border; gear uses its rarity colour (applied
|
||
// via inline style below, since Tailwind's JIT can't see dynamically
|
||
// interpolated `border-${colour}` class names).
|
||
isWishlist && 'border-cyan-500/40',
|
||
)}
|
||
style={isWishlist ? undefined : { borderColor: rarityTier.color + '40' }}
|
||
>
|
||
{/* Wishlist badge */}
|
||
{isWishlist && (
|
||
<Badge className="absolute -top-2 -left-1 bg-cyan-500 text-black text-[9px] px-1.5 py-0">
|
||
<Target className="h-2.5 w-2.5 mr-0.5" />
|
||
{t('mapUi.wishlist')}
|
||
</Badge>
|
||
)}
|
||
|
||
<div className="flex items-start gap-2">
|
||
{/* Image or emoji */}
|
||
{hasImage ? (
|
||
<div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 border border-white/10">
|
||
<ImageWithFallback src={item.images![0]} alt={item.title} className="w-full h-full object-cover" />
|
||
</div>
|
||
) : (
|
||
<span className="text-2xl">{category.emoji}</span>
|
||
)}
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="font-bold text-sm text-white truncate">{item.title}</h4>
|
||
<p className="text-[10px] text-muted-foreground">
|
||
{item.brand && <span>{item.brand} • </span>}
|
||
{item.size && <span>{item.size}</span>}
|
||
</p>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
{!isWishlist && (
|
||
<div className="flex items-center gap-0.5">
|
||
{Array.from({ length: 5 }).map((_, i) => (
|
||
<Star
|
||
key={i}
|
||
className={cn(
|
||
'h-2.5 w-2.5',
|
||
i < condition.stars ? 'fill-yellow-400 text-yellow-400' : 'text-gray-700'
|
||
)}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
{(item.minPrice || item.maxPrice) && (
|
||
<span className="text-[10px] text-amber-400 flex items-center gap-0.5">
|
||
<Zap className="h-2.5 w-2.5" />
|
||
{isWishlist ? `≤${item.maxPrice?.toLocaleString()}` : item.minPrice?.toLocaleString()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col items-end gap-1">
|
||
<Badge
|
||
variant="outline"
|
||
className="text-[8px] px-1 py-0"
|
||
style={{ borderColor: rarityTier.color, color: rarityTier.color }}
|
||
>
|
||
{rarityTier.label}
|
||
</Badge>
|
||
<button
|
||
onClick={onDelete}
|
||
className="min-h-0 min-w-0 p-1 rounded hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
|
||
>
|
||
<Trash2 className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Stash drawer component
|
||
function StashDrawer() {
|
||
const { t } = useTranslation();
|
||
const { user } = useCurrentUser();
|
||
const { items, stats, isLoading, removeItem, isEncryptionAvailable } = useStash();
|
||
const author = useAuthor(user?.pubkey || '');
|
||
const metadata = author.data?.metadata;
|
||
const displayName = metadata?.name ?? genUserName(user?.pubkey || '');
|
||
const avatar = metadata?.picture;
|
||
const usdValue = useSatsToUsd(stats.totalValue);
|
||
|
||
const stashItems = items.filter(i => i.itemType !== 'wtb');
|
||
const wishlistItems = items.filter(i => i.itemType === 'wtb');
|
||
|
||
// Not logged in
|
||
if (!user) {
|
||
return (
|
||
<div className="p-6 text-center">
|
||
<Backpack className="h-12 w-12 mx-auto mb-4 text-[#ff6600]/50" />
|
||
<h3 className="font-bold text-lg mb-2">{t('mapUi.yourPrivateStash')}</h3>
|
||
<p className="text-sm text-muted-foreground mb-4">
|
||
{t('mapUi.stashIntro')}
|
||
</p>
|
||
<LoginArea className="justify-center" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// No encryption
|
||
if (!isEncryptionAvailable) {
|
||
return (
|
||
<div className="p-6 text-center">
|
||
<AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
|
||
<h3 className="font-bold text-lg mb-2">{t('mapUi.encryptionRequired')}</h3>
|
||
<p className="text-sm text-muted-foreground mb-4">
|
||
{t('mapUi.encryptionRequiredDesc')}
|
||
</p>
|
||
<Link to="/signers">
|
||
<Button variant="outline" size="sm">{t('common.learnMore')}</Button>
|
||
</Link>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col h-full">
|
||
{/* Profile header */}
|
||
<div className="p-4 bg-gradient-to-r from-[#ff6600]/20 to-[#ff0040]/20 border-b border-[#ff6600]/30">
|
||
<div className="flex items-center gap-3">
|
||
<Avatar className="h-12 w-12 border-2 border-[#ff6600]/50">
|
||
<AvatarImage src={avatar} alt={displayName} />
|
||
<AvatarFallback className="bg-[#ff6600]/20 text-[#ff6600] font-bold">
|
||
{displayName.slice(0, 2).toUpperCase()}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="font-bold text-white truncate">{displayName}</h3>
|
||
<p className="text-xs text-muted-foreground">{t('mapUi.itemsCount', { count: stats.total })}</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="flex items-center gap-1 text-amber-400">
|
||
<Zap className="h-3.5 w-3.5" />
|
||
<span className="font-bold text-sm">
|
||
{stats.totalValue > 999 ? Math.floor(stats.totalValue / 1000) + 'k' : stats.totalValue}
|
||
</span>
|
||
</div>
|
||
<p className="text-[10px] text-muted-foreground">
|
||
{usdValue ? `~$${usdValue.toFixed(0)}` : t('common.sats')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick stats */}
|
||
<div className="grid grid-cols-3 gap-2 p-3 border-b border-white/10">
|
||
<div className="text-center p-2 rounded bg-black/40">
|
||
<div className="text-lg font-black text-[#ff0040]">{stashItems.length}</div>
|
||
<div className="text-[9px] text-muted-foreground uppercase">{t('mapUi.items')}</div>
|
||
</div>
|
||
<div className="text-center p-2 rounded bg-black/40">
|
||
<div className="text-lg font-black text-cyan-400">{wishlistItems.length}</div>
|
||
<div className="text-[9px] text-muted-foreground uppercase">{t('mapUi.wishlist')}</div>
|
||
</div>
|
||
<div className="text-center p-2 rounded bg-black/40">
|
||
<div className="text-lg font-black text-purple-400">{Object.keys(stats.byCategory).length}</div>
|
||
<div className="text-[9px] text-muted-foreground uppercase">{t('mapUi.types')}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Items list */}
|
||
<div className="flex-1 overflow-auto p-3 space-y-2">
|
||
{isLoading ? (
|
||
Array.from({ length: 3 }).map((_, i) => (
|
||
<Skeleton key={i} className="h-20 w-full bg-white/5" />
|
||
))
|
||
) : items.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<Package className="h-10 w-10 mx-auto mb-3 text-muted-foreground/30" />
|
||
<p className="text-sm text-muted-foreground mb-3">{t('mapUi.stashEmpty')}</p>
|
||
<Link to="/stash">
|
||
<Button size="sm" className="bg-[#ff6600] hover:bg-[#ff6600]/90">
|
||
<Plus className="h-3.5 w-3.5 mr-1" />
|
||
{t('mapUi.addFirstItem')}
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* Wishlist items first */}
|
||
{wishlistItems.length > 0 && (
|
||
<div className="mb-3">
|
||
<h4 className="text-[10px] font-bold uppercase text-cyan-400 mb-2 flex items-center gap-1">
|
||
<Target className="h-3 w-3" />
|
||
{t('mapUi.wishlistCount', { count: wishlistItems.length })}
|
||
</h4>
|
||
{wishlistItems.slice(0, 3).map(item => (
|
||
<MiniStashCard
|
||
key={item.id}
|
||
item={item}
|
||
onDelete={() => removeItem.mutate(item.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Stash items */}
|
||
{stashItems.length > 0 && (
|
||
<div>
|
||
<h4 className="text-[10px] font-bold uppercase text-[#ff6600] mb-2 flex items-center gap-1">
|
||
<Package className="h-3 w-3" />
|
||
{t('mapUi.myGearCount', { count: stashItems.length })}
|
||
</h4>
|
||
<div className="space-y-2">
|
||
{stashItems.slice(0, 5).map(item => (
|
||
<MiniStashCard
|
||
key={item.id}
|
||
item={item}
|
||
onDelete={() => removeItem.mutate(item.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer actions */}
|
||
<div className="p-3 border-t border-white/10 space-y-2">
|
||
<Link to="/stash" className="block">
|
||
<Button className="w-full bg-gradient-to-r from-[#ff6600] to-[#ff0040] hover:opacity-90 font-bold">
|
||
<Backpack className="h-4 w-4 mr-2" />
|
||
{t('mapUi.openFullStash')}
|
||
</Button>
|
||
</Link>
|
||
<div className="flex gap-2">
|
||
<Link to="/stash" className="flex-1">
|
||
<Button variant="outline" size="sm" className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10">
|
||
<Plus className="h-3.5 w-3.5 mr-1" />
|
||
{t('mapUi.addItem')}
|
||
</Button>
|
||
</Link>
|
||
<Link to="/stash" className="flex-1">
|
||
<Button variant="outline" size="sm" className="w-full border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10">
|
||
<Target className="h-3.5 w-3.5 mr-1" />
|
||
{t('mapUi.wishlist')}
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// In-app directions — opens the same RouteDialog used on the detail pages.
|
||
// Deliberately NO external map handoff: routing stays inside SkateSpots.
|
||
function DirectionsButton({
|
||
lat,
|
||
lon,
|
||
label,
|
||
onDirections,
|
||
}: {
|
||
lat: string;
|
||
lon: string;
|
||
label: string;
|
||
/**
|
||
* When provided, the PARENT owns the RouteDialog. Rendering a Radix Dialog
|
||
* inside the spot's Radix Sheet stacked two modals (the sheet covered the
|
||
* route), so the map passes this and renders the dialog itself; the sheet
|
||
* then closes and the route gets the whole screen.
|
||
*/
|
||
onDirections?: (target: { lat: number; lng: number; label: string }) => void;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
const [open, setOpen] = useState(false);
|
||
const destination = useMemo(() => {
|
||
const la = parseFloat(lat);
|
||
const lo = parseFloat(lon);
|
||
return Number.isFinite(la) && Number.isFinite(lo) ? { lat: la, lng: lo } : null;
|
||
}, [lat, lon]);
|
||
|
||
return (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
className="h-12 w-full font-bold text-sm border-white/20 hover:bg-white/10 rounded-xl"
|
||
onClick={() => {
|
||
if (!destination) return;
|
||
if (onDirections) onDirections({ ...destination, label: label || 'Spot' });
|
||
else setOpen(true);
|
||
}}
|
||
disabled={!destination}
|
||
>
|
||
<Navigation className="h-4 w-4 mr-2 text-[#ccff00]" />
|
||
{t('mapUi.directions')}
|
||
</Button>
|
||
{!onDirections && (
|
||
<RouteDialog
|
||
open={open}
|
||
onOpenChange={setOpen}
|
||
destination={destination}
|
||
destinationLabel={label || 'Spot'}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
// Bottom sheet shown when a map marker is tapped
|
||
function SpotBottomSheet({
|
||
spot,
|
||
onClose,
|
||
onDirections,
|
||
}: {
|
||
spot: SkateSpot;
|
||
onClose: () => void;
|
||
onDirections: (target: { lat: number; lng: number; label: string }) => void;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
const navigate = useNavigate();
|
||
const author = useAuthor(spot.pubkey);
|
||
const metadata = author.data?.metadata;
|
||
const displayName = metadata?.name ?? genUserName(spot.pubkey);
|
||
const isShop = spot.types.includes('shop');
|
||
const route = isShop ? `/shop/${spot.pubkey}/${spot.identifier}` : `/spot/${spot.pubkey}/${spot.identifier}`;
|
||
|
||
return (
|
||
<div className="flex flex-col">
|
||
{/* Drag handle */}
|
||
<div className="flex justify-center pt-3 pb-1">
|
||
<div className="w-10 h-1 rounded-full bg-white/20" />
|
||
</div>
|
||
|
||
<div className="px-4 pb-2">
|
||
{/* Header row */}
|
||
<div className="flex items-start gap-3 mb-3">
|
||
{/* Thumbnail */}
|
||
<div className="w-16 h-16 rounded-xl overflow-hidden bg-white/5 flex-shrink-0 border border-white/10">
|
||
{spot.images[0] ? (
|
||
<ImageWithFallback src={spot.images[0]} alt={spot.title} className="w-full h-full object-cover" />
|
||
) : (
|
||
<div className="w-full h-full flex items-center justify-center text-2xl">
|
||
{isShop ? '🏪' : '🛹'}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Info */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-0.5">
|
||
<h2 className="font-black text-white text-lg leading-tight truncate">{spot.title}</h2>
|
||
</div>
|
||
{spot.location && (
|
||
<p className="text-xs text-muted-foreground flex items-center gap-1 truncate">
|
||
<MapPin className="h-3 w-3 flex-shrink-0" />
|
||
{spot.location}
|
||
</p>
|
||
)}
|
||
{/* Type badges */}
|
||
<div className="flex flex-wrap gap-1 mt-1.5">
|
||
{spot.shelter && spot.shelter !== 'outdoor' && SHELTER_INFO[spot.shelter] && (
|
||
<span
|
||
className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold"
|
||
style={{
|
||
color: SHELTER_INFO[spot.shelter].color,
|
||
backgroundColor: `${SHELTER_INFO[spot.shelter].color}25`,
|
||
}}
|
||
>
|
||
{SHELTER_INFO[spot.shelter].emoji} {SHELTER_INFO[spot.shelter].short}
|
||
</span>
|
||
)}
|
||
{spot.types.slice(0, 3).map((type) => (
|
||
<span
|
||
key={type}
|
||
className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-white/10 text-white/70"
|
||
>
|
||
{spotTypeLabel(t, type)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Close */}
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1.5 rounded-full hover:bg-white/10 text-white/40 hover:text-white transition-colors flex-shrink-0 -mt-0.5"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Description */}
|
||
{spot.description && (
|
||
<p className="text-sm text-muted-foreground line-clamp-2 mb-3">{spot.description}</p>
|
||
)}
|
||
|
||
{/* Author */}
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Avatar className="h-5 w-5">
|
||
<AvatarImage src={metadata?.picture} />
|
||
<AvatarFallback className="text-[8px] bg-white/10">{displayName.slice(0, 2).toUpperCase()}</AvatarFallback>
|
||
</Avatar>
|
||
<span className="text-xs text-muted-foreground">{t('mapUi.addedBy')} <span className="text-white/70">{displayName}</span></span>
|
||
</div>
|
||
|
||
{/* CTA buttons */}
|
||
<div className="grid grid-cols-2 gap-2 pb-safe pb-4">
|
||
<Button
|
||
onClick={() => navigate(route)}
|
||
className="h-12 font-bold text-sm bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 rounded-xl"
|
||
>
|
||
<ExternalLink className="h-4 w-4 mr-2" />
|
||
{t('mapUi.viewDetails')}
|
||
</Button>
|
||
{spot.geohash && (() => {
|
||
const { latitude, longitude } = ngeohash.decode(spot.geohash);
|
||
const lat = latitude.toFixed(6);
|
||
const lon = longitude.toFixed(6);
|
||
const label = spot.title;
|
||
return (
|
||
<div className="relative">
|
||
<DirectionsButton lat={lat} lon={lon} label={label} onDirections={onDirections} />
|
||
</div>
|
||
);
|
||
})()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function MapPage() {
|
||
const { t } = useTranslation();
|
||
|
||
useSeoMeta({
|
||
title: t('seoUi.mapTitle'),
|
||
description: t('seoUi.mapDesc'),
|
||
});
|
||
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
// ?view=gear focuses the gear layer; compute before the data hooks so hidden
|
||
// layers don't query at all.
|
||
const viewParam = searchParams.get('view');
|
||
const focusGear = viewParam === 'gear';
|
||
const [showSpots, setShowSpots] = useState(!focusGear);
|
||
const [showShops, setShowShops] = useState(!focusGear);
|
||
const [showGear, setShowGear] = useState(true);
|
||
const [showTours, setShowTours] = useState(!focusGear);
|
||
// Opt-in layers — no relay query until the user turns them on.
|
||
const [showEvents, setShowEvents] = useLocalStorage('skatespots:map-show-events', false);
|
||
const [showCrews, setShowCrews] = useLocalStorage('skatespots:map-show-crews', false);
|
||
const { user } = useCurrentUser();
|
||
// The user's own profile picture, shown on the "you are here" pin.
|
||
const meAuthor = useAuthor(user?.pubkey || '');
|
||
const userPicture = meAuthor.data?.metadata?.picture ?? null;
|
||
const { data: followingList } = useFollowing(user?.pubkey);
|
||
const followCount = followingList?.length ?? 0;
|
||
const { data: spots, isLoading: spotsLoading, refetch: refetchSpots } = useSkateSpots(2000);
|
||
const { data: shops, isLoading: shopsLoading } = useShops(500, { enabled: showShops });
|
||
|
||
// Wi-Fi present ≠ relay reachable (captive portal / relay outage). The utility
|
||
// prefers saved spots over a blank map, so we detect that honestly and say so.
|
||
// ⚠️ Two different signals on purpose:
|
||
// • deviceOffline — the DEVICE has no connection, so the pins really are
|
||
// the saved cache. This is what the "showing saved spots" banner means.
|
||
// • relayUnreachable — the canonical community relay didn't answer its probe.
|
||
// The map reads from several relays, so this can be true while fresh data
|
||
// loads fine; use it only for the "nothing at all" card, never the banner
|
||
// (that mismatch is why the banner used to stick around online).
|
||
const online = useOnlineStatus();
|
||
const relay = useRelayStatus(SKATE_RELAY);
|
||
const deviceOffline = !online;
|
||
const relayUnreachable = !online || relay.status === 'offline';
|
||
// Dismissable for the session; re-armed when the connection comes back.
|
||
const [offlineBannerDismissed, setOfflineBannerDismissed] = useState(false);
|
||
useEffect(() => {
|
||
if (online) setOfflineBannerDismissed(false);
|
||
}, [online]);
|
||
|
||
// Spots reported "not a skate spot" by ≥3 distinct accounts with NO community
|
||
// signals are hidden from the map pending a human (see useAutoHiddenSpots).
|
||
const autoHideInput = useMemo(
|
||
() => (spots ?? []).map((s) => ({ id: s.id, pubkey: s.pubkey, identifier: s.identifier })),
|
||
[spots],
|
||
);
|
||
const { autoHiddenIds } = useAutoHiddenSpots(autoHideInput);
|
||
|
||
// Tell the cold-start splash that real content has arrived, so it can reveal
|
||
// the map already populated (rather than dismissing on bare connection). We
|
||
// signal readiness when the spots query has genuinely resolved — either it
|
||
// streamed in some spots, or it finished loading (empty relay / offline). With
|
||
// IndexedDB persistence this often fires on the very first frame (cache hit),
|
||
// so returning users get an instant, already-populated reveal. The splash
|
||
// keeps its own hard cap, so this can only ever make the reveal feel readier.
|
||
useEffect(() => {
|
||
const hasSpots = Array.isArray(spots) && spots.length > 0;
|
||
if (hasSpots || !spotsLoading) {
|
||
window.dispatchEvent(new Event('skatespots:content-ready'));
|
||
}
|
||
}, [spots, spotsLoading]);
|
||
const { data: marketplaceItems, isLoading: marketplaceLoading } = useMarketplaceItems(200, { enabled: showGear });
|
||
const { data: tours, isLoading: toursLoading } = useTours(100, { enabled: showTours });
|
||
// Upcoming events for the (opt-in) Events map layer
|
||
const { data: upcomingEvents } = useUpcomingSkateEvents(100, { enabled: showEvents });
|
||
// Crews for the (opt-in) Crews map layer
|
||
const { data: crews } = useCrews(200, { enabled: showCrews });
|
||
|
||
const [viewMode, setViewMode] = useState<ViewMode>('map');
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [showSearchSuggestions, setShowSearchSuggestions] = useState(false);
|
||
const [searchActiveIndex, setSearchActiveIndex] = useState(0);
|
||
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
|
||
const [selectedSpot, setSelectedSpot] = useState<SkateSpot | null>(null);
|
||
// Tap-to-add: a logged-in tap drops this pin and shows a confirm card instead
|
||
// of yanking the user into the create form (which made the map feel broken).
|
||
const [pendingAddPin, setPendingAddPin] = useState<{ lat: number; lng: number } | null>(null);
|
||
// Directions target lives at page level (NOT inside the spot Sheet) so the
|
||
// RouteDialog is never nested inside another modal.
|
||
const [routeTarget, setRouteTarget] = useState<{ lat: number; lng: number; label: string } | null>(null);
|
||
const [weatherEnabled, setWeatherEnabled] = useState(false);
|
||
const [weatherFilter, setWeatherFilter] = useState<'all' | 'good' | 'perfect'>('all');
|
||
// Smart WoT default:
|
||
// - Logged out or <5 follows → 'all' (show everything, don't punish new/anon users)
|
||
// - Logged in with ≥5 follows → 'trusted' (sort trusted first, badge unverified)
|
||
// User can always override with the TrustFilter dropdown
|
||
const smartDefault: TrustFilterLevel = (user && followCount >= 5) ? 'trusted' : 'all';
|
||
const [trustFilter, setTrustFilter] = useState<TrustFilterLevel>(smartDefault);
|
||
const [sortBy, setSortBy] = useState<SortOption>('recent');
|
||
// Seed from the cached last-known location so the "you are here" badge and
|
||
// proximity sorting are available instantly; a fresh fix updates it.
|
||
// Mobile-only: Near Me is a mobile affordance, so desktop shows no location
|
||
// pin (or proximity sort).
|
||
const isMobile = useIsMobile();
|
||
const [userLocation, setUserLocation] = useState<{lat: number; lon: number} | null>(() => {
|
||
if (!isMobile) return null;
|
||
const cached = getLastLocation();
|
||
return cached ? { lat: cached.lat, lon: cached.lng } : null;
|
||
});
|
||
|
||
// Map entity type filters (state lives above the queries so hidden layers
|
||
// don't open relay requests).
|
||
const [showBtcMap, setShowBtcMap] = useState(false);
|
||
|
||
// Mobile filters sheet
|
||
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
|
||
|
||
// Welcome banner — show once to new/logged-out visitors, dismissible
|
||
const [welcomeDismissed, setWelcomeDismissed] = useLocalStorage('skatespots_welcome_dismissed', false);
|
||
const showWelcomeBanner = !user && !welcomeDismissed;
|
||
|
||
// Track Sasquatch panel open state so the Add Spot FAB can step aside
|
||
const [, setSasquatchPanelOpen] = useState(false);
|
||
useEffect(() => {
|
||
const handler = (e: Event) => {
|
||
setSasquatchPanelOpen((e as CustomEvent<{ open: boolean }>).detail.open);
|
||
};
|
||
window.addEventListener('sasquatch:panelchange', handler);
|
||
return () => window.removeEventListener('sasquatch:panelchange', handler);
|
||
}, []);
|
||
|
||
// Mobile "Add" speed-dial (fans out Add Spot / Shop / Event / Gear / Tour)
|
||
const [addDialOpen, setAddDialOpen] = useState(false);
|
||
// Mobile layers popover
|
||
const [layersOpen, setLayersOpen] = useState(false);
|
||
|
||
const { toast } = useToast();
|
||
|
||
// Optimistic initial view: if we have a cached last-known location, open the
|
||
// map ALREADY centered on the user's area (and zoomed to city level) instead
|
||
// of the default world view. Resolved once at mount — a fresh fix or a manual
|
||
// pan supersedes it. Makes the map feel "already yours" the moment it opens.
|
||
const [initialView] = useState(() => {
|
||
// Restore the last map view first; a brand-new device falls back to the
|
||
// cached location, then to the world view.
|
||
try {
|
||
const raw = localStorage.getItem('skatespots:map-view');
|
||
const saved = raw ? JSON.parse(raw) as { lat?: unknown; lon?: unknown; zoom?: unknown } : null;
|
||
if (
|
||
saved &&
|
||
typeof saved.lat === 'number' && Number.isFinite(saved.lat) &&
|
||
typeof saved.lon === 'number' && Number.isFinite(saved.lon) &&
|
||
typeof saved.zoom === 'number' && Number.isFinite(saved.zoom)
|
||
) {
|
||
return {
|
||
center: [saved.lat, saved.lon] as [number, number],
|
||
zoom: Math.min(18, Math.max(1, saved.zoom)),
|
||
lat: saved.lat,
|
||
lon: saved.lon,
|
||
};
|
||
}
|
||
} catch {
|
||
// fall through to the location/world default
|
||
}
|
||
const cached = getLastLocation();
|
||
return cached
|
||
? { center: [cached.lat, cached.lng] as [number, number], zoom: 12, lat: cached.lat, lon: cached.lng }
|
||
: { center: [40.7128, -74.006] as [number, number], zoom: 3, lat: 40.7128, lon: -74.006 };
|
||
});
|
||
const initialCenter = initialView.center;
|
||
const initialZoom = initialView.zoom;
|
||
|
||
// BTC Map center for fetching places — seeded from the cached location so
|
||
// location-aware layers (BTC Map, weather) query the right area immediately.
|
||
const [mapCenter, setMapCenter] = useState<{ lat: number; lon: number }>({
|
||
lat: initialView.lat,
|
||
lon: initialView.lon,
|
||
});
|
||
const handleMapMove = (center: { lat: number; lon: number; zoom?: number }) => {
|
||
setMapCenter({ lat: center.lat, lon: center.lon });
|
||
try {
|
||
localStorage.setItem('skatespots:map-view', JSON.stringify(center));
|
||
} catch {
|
||
// storage unavailable — map still works
|
||
}
|
||
};
|
||
|
||
// Near Me fly-to state
|
||
const [flyTo, setFlyTo] = useState<{ lat: number; lng: number; zoom?: number } | null>(null);
|
||
const [nearMeLoading, setNearMeLoading] = useState(false);
|
||
const [nearMeError, setNearMeError] = useState<'denied' | 'unavailable' | 'timeout' | null>(null);
|
||
const [showLocationHelp, setShowLocationHelp] = useState(false);
|
||
|
||
|
||
|
||
const handleNearMe = async () => {
|
||
// Clear previous error
|
||
setNearMeError(null);
|
||
setNearMeLoading(true);
|
||
// "Near Me" should also MEAN "show me what's near" — surface the closest
|
||
// spots first instead of leaving the list on Most Recent.
|
||
setSortBy('proximity');
|
||
|
||
// OPTIMISTIC: if we already know roughly where they are, fly there IMMEDIATELY
|
||
// so the map reacts on tap. The fresh fix below refines the exact position.
|
||
const cached = getLastLocation();
|
||
if (cached) {
|
||
setFlyTo({ lat: cached.lat, lng: cached.lng, zoom: 13 });
|
||
}
|
||
|
||
// Getting a GPS lock (especially first-time / on ROMs without Google's
|
||
// fused provider) can take a while — let the user know it's working.
|
||
const locatingToast = toast({
|
||
title: cached ? t('mapUi.refiningLocation') : t('mapUi.locatingYou'),
|
||
description: cached
|
||
? t('mapUi.refiningLocationDesc')
|
||
: t('mapUi.locatingDesc'),
|
||
duration: 60000,
|
||
});
|
||
|
||
try {
|
||
const { lat, lng } = await getCurrentPosition();
|
||
locatingToast.dismiss();
|
||
setFlyTo({ lat, lng, zoom: 14 });
|
||
setUserLocation({ lat, lon: lng });
|
||
setNearMeLoading(false);
|
||
setNearMeError(null);
|
||
toast({
|
||
title: t('mapUi.foundYou'),
|
||
description: t('mapUi.foundYouDesc'),
|
||
duration: 3000,
|
||
});
|
||
} catch (err) {
|
||
locatingToast.dismiss();
|
||
setNearMeLoading(false);
|
||
const kind = err instanceof GeolocationError ? err.kind : 'unavailable';
|
||
|
||
// Raw diagnostic text so we can see exactly what failed on-device
|
||
// (no adb needed). Shown appended to the toast + logged.
|
||
const rawMsg = err instanceof Error ? err.message : String(err);
|
||
console.warn('[NearMe] geolocation failed:', kind, rawMsg, err);
|
||
const diag = rawMsg ? ` [${rawMsg}]` : '';
|
||
|
||
if (kind === 'denied') {
|
||
setNearMeError('denied');
|
||
if (isNativeGeolocation()) {
|
||
// Native app: it's an OS permission, not a browser setting.
|
||
toast({
|
||
title: t('mapUi.locationPermissionNeeded'),
|
||
description:
|
||
t('mapUi.permissionNeededDesc') +
|
||
diag,
|
||
variant: 'destructive',
|
||
duration: 12000,
|
||
});
|
||
} else {
|
||
// Web: show the browser re-enable help sheet.
|
||
setShowLocationHelp(true);
|
||
}
|
||
} else if (kind === 'timeout') {
|
||
setNearMeError('timeout');
|
||
toast({
|
||
title: t('mapUi.locationTimedOut'),
|
||
description:
|
||
(isNativeGeolocation()
|
||
? t('mapUi.timeoutNativeDesc')
|
||
: t('mapUi.timeoutWebDesc')) + diag,
|
||
variant: 'destructive',
|
||
duration: 12000,
|
||
});
|
||
} else if (kind === 'no_provider') {
|
||
setNearMeError('unavailable');
|
||
toast({
|
||
title: t('mapUi.noLocationProvider'),
|
||
description:
|
||
(isNativeGeolocation()
|
||
? t('mapUi.noProviderNativeDesc')
|
||
: t('mapUi.noProviderWebDesc')) +
|
||
diag,
|
||
variant: 'destructive',
|
||
duration: 14000,
|
||
});
|
||
} else {
|
||
setNearMeError('unavailable');
|
||
toast({
|
||
title: t('mapUi.locationUnavailable'),
|
||
description:
|
||
(isNativeGeolocation()
|
||
? t('mapUi.unavailableNativeDesc')
|
||
: t('mapUi.unavailableWebDesc')) +
|
||
diag,
|
||
variant: 'destructive',
|
||
duration: 12000,
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
|
||
// Fetch BTC Map places when enabled
|
||
const { data: btcMapPlaces, isLoading: btcMapLoading } = useBtcMapPlaces({
|
||
lat: mapCenter.lat,
|
||
lon: mapCenter.lon,
|
||
radiusKm: 50, // 50km radius
|
||
enabled: showBtcMap,
|
||
});
|
||
|
||
const isLoading = spotsLoading || shopsLoading || marketplaceLoading || toursLoading;
|
||
|
||
// Get user's location for proximity sorting
|
||
useEffect(() => {
|
||
if (sortBy === 'proximity' && !userLocation) {
|
||
getCurrentPosition()
|
||
.then(({ lat, lng }) => setUserLocation({ lat, lon: lng }))
|
||
.catch((error) => console.warn('[MapPage] Geolocation error:', error));
|
||
}
|
||
}, [sortBy, userLocation]);
|
||
|
||
// Silent background warm-up (once, on mount): quietly refresh the location fix
|
||
// so it's cached and ready the instant the user taps "Near Me". This never
|
||
// moves the map or shows a prompt-driven toast — it just updates the badge /
|
||
// cache in the background. Skipped on native, where it would surface an OS
|
||
// permission prompt out of context (native users trigger it via "Near Me").
|
||
useEffect(() => {
|
||
if (isNativeGeolocation()) return;
|
||
let cancelled = false;
|
||
|
||
const warm = () =>
|
||
getCurrentPosition()
|
||
.then(({ lat, lng }) => {
|
||
if (!cancelled) setUserLocation({ lat, lon: lng });
|
||
})
|
||
.catch(() => {
|
||
// Silent — user hasn't asked to be located yet.
|
||
});
|
||
|
||
// Only warm up when permission is ALREADY granted — otherwise this fires the
|
||
// browser's "Allow location?" prompt the moment someone opens /map.
|
||
if (typeof navigator !== 'undefined' && navigator.permissions?.query) {
|
||
navigator.permissions
|
||
.query({ name: 'geolocation' as PermissionName })
|
||
.then((status) => {
|
||
if (!cancelled && status.state === 'granted') warm();
|
||
})
|
||
.catch(() => {
|
||
/* permissions API unavailable — don't prompt */
|
||
});
|
||
}
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, []);
|
||
|
||
// Combine spots and shops into unified list for map display
|
||
const allLocations = useMemo(() => {
|
||
const spotList = (spots || [])
|
||
.filter((spot) => !autoHiddenIds.has(spot.id))
|
||
.map(spot => ({ ...spot, isShop: false }));
|
||
const shopList = (shops || []).map(shop => ({
|
||
...shop,
|
||
title: shop.name,
|
||
// SkateSpot-shaped fields so shops can share the unified spot list/map.
|
||
tags: [] as string[],
|
||
category: 'shop',
|
||
types: ['shop' as const],
|
||
isShop: true,
|
||
accessType: undefined,
|
||
contactInfo: undefined,
|
||
}));
|
||
return [...spotList, ...shopList];
|
||
}, [spots, shops, autoHiddenIds]);
|
||
|
||
// Fetch trust scores for all creators
|
||
const locationPubkeys = useMemo(() => allLocations.map((l) => l.pubkey), [allLocations]);
|
||
const { data: trustScores } = useBatchTrustScores(locationPubkeys);
|
||
|
||
const getTrustScore = useCallback((pubkey: string) => trustScores?.get(pubkey), [trustScores]);
|
||
|
||
// Fetch community status reports for all spots (not shops), batched in one query.
|
||
const statusSpotRefs = useMemo(
|
||
() => (spots || []).map((s) => ({ pubkey: s.pubkey, identifier: s.identifier })),
|
||
[spots],
|
||
);
|
||
const { getStatus: getSpotStatus } = useBatchSpotStatus(statusSpotRefs);
|
||
|
||
// Fetch comments for popularity sorting
|
||
const spotIds = useMemo(() => allLocations.map((l) => l.event.id), [allLocations]);
|
||
const { data: commentCounts } = useCommentCounts(spotIds);
|
||
|
||
const getCommentCount = useCallback((eventId: string) => {
|
||
return commentCounts?.get(eventId) ?? 0;
|
||
}, [commentCounts]);
|
||
|
||
// Batched zap totals for "Most Zapped" sorting (ONE query for every location).
|
||
const locationEvents = useMemo(() => allLocations.map((l) => l.event), [allLocations]);
|
||
const { data: zapTotals } = useZapTotals(locationEvents);
|
||
const getZapTotal = useCallback(
|
||
(event: (typeof locationEvents)[number]) => zapTotals?.get(zapTargetKey(event))?.totalSats ?? 0,
|
||
[zapTotals],
|
||
);
|
||
|
||
// Get geohashes for weather fetching (only non-shop spots)
|
||
const spotGeohashes = useMemo(() => {
|
||
const geohashes = allLocations
|
||
.filter(spot => !spot.isShop && spot.geohash)
|
||
.map(spot => spot.geohash);
|
||
|
||
return geohashes;
|
||
}, [allLocations]);
|
||
|
||
// Fetch weather data for all spots
|
||
const { data: weatherData } = useMultipleSpotWeather(
|
||
spotGeohashes,
|
||
weatherEnabled
|
||
);
|
||
|
||
const handleMapClick = (lat: number, lng: number) => {
|
||
if (!user) return;
|
||
// Drop a pin and ask first — do NOT navigate immediately. The user confirms
|
||
// with the card below, which is the only thing that opens the create form.
|
||
setSelectedSpot(null);
|
||
setPendingAddPin({ lat, lng });
|
||
};
|
||
|
||
// Filter combined spots and shops
|
||
const filteredSpots = useMemo(() => {
|
||
let filtered = allLocations.filter((item) => {
|
||
// Entity type filter (showSpots/showShops toggles)
|
||
if (item.isShop && !showShops) return false;
|
||
if (!item.isShop && !showSpots) return false;
|
||
|
||
// Search filter
|
||
if (searchQuery) {
|
||
const query = searchQuery.toLowerCase();
|
||
const matchesTitle = item.title.toLowerCase().includes(query);
|
||
const matchesLocation = item.location?.toLowerCase().includes(query);
|
||
const matchesDescription = item.description?.toLowerCase().includes(query);
|
||
if (!matchesTitle && !matchesLocation && !matchesDescription) {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// Category filter
|
||
if (selectedCategories.length > 0) {
|
||
const hasMatchingCategory = item.types.some((type) =>
|
||
selectedCategories.includes(type)
|
||
);
|
||
if (!hasMatchingCategory) return false;
|
||
}
|
||
|
||
// Weather filter (only applies when weather is enabled AND filter is not 'all')
|
||
if (weatherEnabled && weatherFilter !== 'all' && weatherData && !item.isShop && item.geohash) {
|
||
const spotWeather = weatherData.get(item.geohash);
|
||
if (spotWeather) {
|
||
if (weatherFilter === 'perfect' && spotWeather.skateability.score < 85) {
|
||
return false;
|
||
}
|
||
if (weatherFilter === 'good' && spotWeather.skateability.score < 70) {
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
return true;
|
||
});
|
||
|
||
// Apply trust filter.
|
||
// • 'trusted' (soft): keep everything visible but float trusted content to
|
||
// the top. This must be folded into the MAIN sort below as its primary
|
||
// key — running it as a separate .sort() first is pointless because the
|
||
// sort() that follows would immediately re-order everything and wipe it
|
||
// out (which it silently did for the default trusted+recent combo).
|
||
// • 'verified'/'following' (strict): actually hide low-trust content.
|
||
const softTrust = trustFilter === 'trusted';
|
||
if (trustScores && trustFilter !== 'all' && !softTrust) {
|
||
filtered = filterByTrustLevel(filtered, trustFilter, getTrustScore);
|
||
}
|
||
|
||
// Trust tier (1 = trusted, 0 = not) used as the primary sort key in soft mode.
|
||
const trustTier = (pubkey: string) => ((getTrustScore(pubkey) ?? -1) >= 60 ? 1 : 0);
|
||
|
||
// Apply sorting. In soft-trust mode, trusted content sorts first and the
|
||
// chosen `sortBy` becomes the tiebreaker WITHIN each trust tier.
|
||
filtered.sort((a, b) => {
|
||
if (softTrust && trustScores) {
|
||
const tierDiff = trustTier(b.pubkey) - trustTier(a.pubkey);
|
||
if (tierDiff !== 0) return tierDiff;
|
||
}
|
||
switch (sortBy) {
|
||
case 'trust': {
|
||
const scoreA = getTrustScore(a.pubkey) || 0;
|
||
const scoreB = getTrustScore(b.pubkey) || 0;
|
||
if (scoreB !== scoreA) return scoreB - scoreA; // Highest trust first
|
||
return b.event.created_at - a.event.created_at; // Then newest
|
||
}
|
||
case 'proximity': {
|
||
if (!userLocation || !a.geohash || !b.geohash) return 0;
|
||
const posA = ngeohash.decode(a.geohash);
|
||
const posB = ngeohash.decode(b.geohash);
|
||
const distA = calculateDistance(userLocation.lat, userLocation.lon, posA.latitude, posA.longitude);
|
||
const distB = calculateDistance(userLocation.lat, userLocation.lon, posB.latitude, posB.longitude);
|
||
return distA - distB; // Closest first
|
||
}
|
||
case 'popular': {
|
||
const commentsA = getCommentCount(a.event.id);
|
||
const commentsB = getCommentCount(b.event.id);
|
||
if (commentsB !== commentsA) return commentsB - commentsA; // Most comments first
|
||
return b.event.created_at - a.event.created_at;
|
||
}
|
||
case 'zaps': {
|
||
const zapsA = getZapTotal(a.event);
|
||
const zapsB = getZapTotal(b.event);
|
||
if (zapsB !== zapsA) return zapsB - zapsA; // Most zapped first
|
||
return b.event.created_at - a.event.created_at;
|
||
}
|
||
case 'recent':
|
||
default:
|
||
return b.event.created_at - a.event.created_at; // Newest first
|
||
}
|
||
});
|
||
|
||
return filtered;
|
||
}, [allLocations, searchQuery, selectedCategories, weatherEnabled, weatherData, weatherFilter, showSpots, showShops, trustFilter, getTrustScore, trustScores, sortBy, userLocation, getCommentCount, getZapTotal]);
|
||
|
||
// Autocomplete for the search pill. Derived from the already-filtered list so
|
||
// it respects the active filters; keyboard navigation is owned here.
|
||
const searchSuggestions = useMemo(
|
||
() => buildSearchSuggestions(filteredSpots, searchQuery),
|
||
[filteredSpots, searchQuery],
|
||
);
|
||
|
||
useEffect(() => {
|
||
setSearchActiveIndex(0);
|
||
}, [searchQuery]);
|
||
|
||
const handleSearchSuggestion = useCallback(
|
||
(suggestion: SearchSuggestion) => {
|
||
if (suggestion.kind === 'place' && suggestion.value) {
|
||
setSearchQuery(suggestion.value);
|
||
setShowSearchSuggestions(false);
|
||
return;
|
||
}
|
||
if (suggestion.kind === 'spot' && suggestion.itemId) {
|
||
const spot = allLocations.find((l) => l.id === suggestion.itemId);
|
||
if (spot) {
|
||
if (spot.geohash) {
|
||
const { latitude, longitude } = ngeohash.decode(spot.geohash);
|
||
setFlyTo({ lat: latitude, lng: longitude, zoom: 14 });
|
||
}
|
||
setSelectedSpot(spot);
|
||
}
|
||
setShowSearchSuggestions(false);
|
||
}
|
||
},
|
||
[allLocations],
|
||
);
|
||
|
||
// Community confidence for the cards (batched, one query). Shops use a
|
||
// different kind, so only spots are scored.
|
||
const communitySpots = useMemo(
|
||
() => filteredSpots
|
||
.filter((s) => !s.isShop)
|
||
.map((s) => ({ id: s.id, pubkey: s.pubkey, identifier: s.identifier })),
|
||
[filteredSpots],
|
||
);
|
||
const { data: communityScores } = useBatchSpotCommunityScores(communitySpots);
|
||
|
||
// Spots shown as MAP MARKERS. Hide spots the community has confirmed as
|
||
// "gone" (demolished) so they don't clutter the map — they still appear
|
||
// (dimmed, with a badge) in the card list below so the record isn't lost.
|
||
const mapSpots = useMemo(() => {
|
||
return filteredSpots.filter((item) => {
|
||
if (item.isShop) return true;
|
||
const status = getSpotStatus(item.pubkey, item.identifier);
|
||
return status?.status !== 'gone';
|
||
});
|
||
}, [filteredSpots, getSpotStatus]);
|
||
|
||
const toggleCategory = (category: string) => {
|
||
setSelectedCategories((prev) =>
|
||
prev.includes(category)
|
||
? prev.filter((c) => c !== category)
|
||
: [...prev, category]
|
||
);
|
||
};
|
||
|
||
const clearFilters = () => {
|
||
setSearchQuery('');
|
||
setSelectedCategories([]);
|
||
setWeatherFilter('all');
|
||
setTrustFilter('all');
|
||
setSortBy('recent');
|
||
};
|
||
|
||
const hasActiveFilters = searchQuery || selectedCategories.length > 0 || weatherFilter !== 'all' || trustFilter !== 'all' || sortBy !== 'recent';
|
||
|
||
// Count active layer filters for mobile badge
|
||
// Count of the primary layers active — shown as a badge on the Layers button
|
||
const mobileLayerCount = [showSpots, showShops, showGear, showTours, showEvents, showCrews].filter(Boolean).length;
|
||
const totalPrimaryLayers = 6;
|
||
const activeCategoryCount = selectedCategories.length;
|
||
const totalActiveFilters = activeCategoryCount + (trustFilter !== 'all' ? 1 : 0) + (sortBy !== 'recent' ? 1 : 0);
|
||
|
||
return (
|
||
<>
|
||
{/* Full-height map container: subtract header + bottom nav on mobile, header only on desktop */}
|
||
{/* 100dvh handles iOS Safari URL bar shrink correctly */}
|
||
<div className="relative h-[calc(100dvh-var(--header-mobile)-var(--bottom-nav))] md:h-[calc(100vh-4rem)] flex flex-col">
|
||
{/* Welcome Banner — shown once to logged-out visitors. It lives ABOVE
|
||
the toolbar (both in flow) because the toolbar floats over the map:
|
||
as a later sibling the banner would sit at the container's top and
|
||
the floating toolbar would paint over it. */}
|
||
{/* First-run "get started" nudge for freshly signed-up users (hidden for
|
||
logged-out visitors, who get the welcome banner). */}
|
||
<FirstRunChecklist onFindNearby={() => void handleNearMe()} />
|
||
{showWelcomeBanner && (
|
||
<div className="relative z-10 bg-gradient-to-r from-[#ff0040]/90 via-black/95 to-[#ccff00]/20 border-b border-[#ff0040]/40 backdrop-blur">
|
||
<div className="container px-4 py-2.5 flex items-center gap-3">
|
||
<span className="text-xl flex-shrink-0">🛹</span>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-black text-white uppercase tracking-wide leading-tight">{t('mapUi.newHere')}</p>
|
||
<p className="text-xs text-white/70 leading-tight">{t('mapUi.welcomeDesc')}</p>
|
||
</div>
|
||
{/* Desktop-only: grab the mobile app via Zapstore */}
|
||
<a
|
||
href="https://zapstore.dev/apps/org.skatespots.app"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="hidden md:inline-flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 rounded-full border-2 border-[#ccff00]/50 text-[#ccff00] text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/10 active:scale-95 transition-all"
|
||
>
|
||
<Smartphone className="h-3.5 w-3.5" />
|
||
{t('mapUi.getOnZapstore')}
|
||
</a>
|
||
<Link
|
||
to="/onboarding"
|
||
className="flex-shrink-0 px-3 py-1.5 rounded-full bg-[#ccff00] text-black text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/90 active:scale-95 transition-transform"
|
||
>
|
||
{t('common.getStarted')}
|
||
</Link>
|
||
<button
|
||
onClick={() => setWelcomeDismissed(true)}
|
||
className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full hover:bg-white/10 text-white/40 hover:text-white transition-colors"
|
||
aria-label={t('mapUi.dismiss')}
|
||
>
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Toolbar ──
|
||
Mobile: floats OVER the map (absolute) so the map fills the whole
|
||
screen; the gradient fades into the map and the transparent wrapper
|
||
passes touches through to it. Desktop keeps the in-flow bar. With the
|
||
welcome banner present it drops into flow so it can't cover it. */}
|
||
<div className={cn(
|
||
'pointer-events-none inset-x-0 top-0 z-[1000]',
|
||
showWelcomeBanner
|
||
? 'relative border-b border-white/8 bg-black/95'
|
||
: 'absolute bg-gradient-to-b from-black/85 via-black/55 to-transparent pb-5',
|
||
'md:static md:z-auto md:border-b md:border-white/8 md:bg-black/95 md:pb-0 md:backdrop-blur',
|
||
)}>
|
||
<div className="pointer-events-auto px-3 py-2">
|
||
{/* Single row: search pill + view toggle + filter button */}
|
||
<div className="flex items-center gap-2">
|
||
{/* Search pill */}
|
||
<div className="relative flex-1 min-w-0">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-500 pointer-events-none" />
|
||
<Input
|
||
placeholder={t('mapPage.searchPlaceholder')}
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
onFocus={() => setShowSearchSuggestions(true)}
|
||
onBlur={() => setShowSearchSuggestions(false)}
|
||
onKeyDown={(e) => {
|
||
if (!showSearchSuggestions || searchSuggestions.length === 0) return;
|
||
if (e.key === 'ArrowDown') {
|
||
e.preventDefault();
|
||
setSearchActiveIndex((i) => Math.min(i + 1, searchSuggestions.length - 1));
|
||
} else if (e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
setSearchActiveIndex((i) => Math.max(i - 1, 0));
|
||
} else if (e.key === 'Enter') {
|
||
const suggestion = searchSuggestions[searchActiveIndex];
|
||
if (suggestion) {
|
||
e.preventDefault();
|
||
handleSearchSuggestion(suggestion);
|
||
}
|
||
} else if (e.key === 'Escape') {
|
||
setShowSearchSuggestions(false);
|
||
}
|
||
}}
|
||
className="pl-9 h-9 bg-black/50 backdrop-blur-md border-white/15 md:bg-white/5 md:border-white/10 text-white placeholder:text-gray-500 rounded-full text-sm focus:border-[#ff0040]/50 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all"
|
||
/>
|
||
{searchQuery && (
|
||
<button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white">
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
)}
|
||
{showSearchSuggestions && searchQuery.trim().length > 0 && (
|
||
<MapSearchSuggestions
|
||
suggestions={searchSuggestions}
|
||
activeIndex={searchActiveIndex}
|
||
spotsLabel={t('nav.map')}
|
||
placesLabel={t('mapPage.searchSuggestPlaces')}
|
||
emptyLabel={t('common.noResults')}
|
||
onHover={setSearchActiveIndex}
|
||
onSelect={handleSearchSuggestion}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* View toggle — compact pill */}
|
||
<div className="flex items-center rounded-full border border-white/15 bg-black/50 backdrop-blur-md md:bg-white/4 md:border-white/10 p-0.5 flex-shrink-0">
|
||
<button
|
||
className={cn('min-h-0 min-w-0 h-8 w-8 rounded-full flex items-center justify-center transition-all touch-manipulation active:scale-90',
|
||
viewMode === 'map' ? 'bg-[#ff0040] shadow-lg shadow-[#ff0040]/30' : 'text-gray-500 hover:text-gray-300')}
|
||
onClick={() => setViewMode('map')}
|
||
aria-label={t('mapUi.mapViewAria')}
|
||
>
|
||
<Map className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
className={cn('min-h-0 min-w-0 h-8 w-8 rounded-full flex items-center justify-center transition-all touch-manipulation active:scale-90',
|
||
viewMode === 'list' ? 'bg-[#ff0040] shadow-lg shadow-[#ff0040]/30' : 'text-gray-500 hover:text-gray-300')}
|
||
onClick={() => setViewMode('list')}
|
||
aria-label={t('mapUi.listViewAria')}
|
||
>
|
||
<List className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Filter button — mobile */}
|
||
<Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
|
||
<SheetTrigger asChild>
|
||
<button
|
||
className={cn(
|
||
'relative h-9 w-9 rounded-full flex items-center justify-center flex-shrink-0 border transition-all touch-manipulation active:scale-90 md:hidden',
|
||
totalActiveFilters > 0
|
||
? 'bg-[#ff0040]/25 border-[#ff0040]/60 text-[#ff0040]'
|
||
: 'bg-black/50 backdrop-blur-md border-white/15 text-gray-300 md:bg-white/5 md:border-white/10 md:text-gray-400 hover:text-gray-200 hover:border-white/20'
|
||
)}
|
||
aria-label={t('mapPage.filters')}
|
||
>
|
||
<SlidersHorizontal className="h-3.5 w-3.5" />
|
||
{totalActiveFilters > 0 && (
|
||
<span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 text-[9px] font-black bg-[#ff0040] text-white rounded-full flex items-center justify-center leading-none">
|
||
{totalActiveFilters}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</SheetTrigger>
|
||
<SheetContent side="bottom" className="h-[82vh] max-h-[680px] rounded-t-2xl px-4 flex flex-col">
|
||
<SheetHeader className="pb-2 flex-shrink-0">
|
||
<SheetTitle className="flex items-center justify-between text-base">
|
||
<span>{t('mapPage.filters')}</span>
|
||
{hasActiveFilters && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-red-400 hover:text-red-300 h-8 px-2"
|
||
onClick={() => {
|
||
clearFilters();
|
||
}}
|
||
>
|
||
<X className="h-3 w-3 mr-1" />
|
||
{t('common.clear')}
|
||
</Button>
|
||
)}
|
||
</SheetTitle>
|
||
</SheetHeader>
|
||
|
||
<div className="space-y-4 overflow-y-auto flex-1 min-h-0 -mx-4 px-4 pb-2 scroll-container">
|
||
{/* Layer toggles */}
|
||
<div>
|
||
<h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">{t('mapUi.showOnMap')}</h3>
|
||
<div className="grid grid-cols-3 gap-1.5">
|
||
<Button
|
||
variant={showSpots ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2',
|
||
showSpots ? 'bg-red-500 hover:bg-red-600' : ''
|
||
)}
|
||
onClick={() => setShowSpots(!showSpots)}
|
||
>
|
||
🛹 {t('mapUi.spots')}
|
||
</Button>
|
||
<Button
|
||
variant={showShops ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2',
|
||
showShops ? 'bg-purple-600 hover:bg-purple-700' : ''
|
||
)}
|
||
onClick={() => setShowShops(!showShops)}
|
||
>
|
||
🏪 {t('mapUi.shops')}
|
||
</Button>
|
||
<Button
|
||
variant={showGear ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2',
|
||
showGear ? 'bg-orange-500 hover:bg-orange-600' : ''
|
||
)}
|
||
onClick={() => setShowGear(!showGear)}
|
||
>
|
||
🛒 {t('mapUi.gear')}
|
||
</Button>
|
||
<Button
|
||
variant={showTours ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2',
|
||
showTours ? 'bg-cyan-500 hover:bg-cyan-600' : ''
|
||
)}
|
||
onClick={() => setShowTours(!showTours)}
|
||
>
|
||
🗺️ {t('mapUi.tours')}
|
||
</Button>
|
||
<Button
|
||
variant={showEvents ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2',
|
||
showEvents ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90' : ''
|
||
)}
|
||
onClick={() => setShowEvents(!showEvents)}
|
||
>
|
||
📅 {t('mapUi.events')}
|
||
</Button>
|
||
<Button
|
||
variant={showCrews ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2',
|
||
showCrews ? 'bg-teal-500 hover:bg-teal-600' : ''
|
||
)}
|
||
onClick={() => setShowCrews(!showCrews)}
|
||
>
|
||
🤘 {t('mapUi.crews')}
|
||
</Button>
|
||
<Button
|
||
variant={showBtcMap ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'justify-center gap-1 h-9 text-xs px-2 col-span-2',
|
||
showBtcMap ? 'bg-[#f7931a] hover:bg-[#f7931a]/90' : 'border-[#f7931a]/50 text-[#f7931a]'
|
||
)}
|
||
onClick={() => setShowBtcMap(!showBtcMap)}
|
||
>
|
||
<Bitcoin className="h-3 w-3" /> Spedn
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Spot categories */}
|
||
<div>
|
||
<h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">{t('mapUi.spotType')}</h3>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{Object.entries(SPOT_CATEGORIES).map(([key, cat]) => (
|
||
<Button
|
||
key={key}
|
||
variant={selectedCategories.includes(key) ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'gap-1 h-8 text-xs px-2',
|
||
selectedCategories.includes(key)
|
||
? 'bg-[#ff0040] hover:bg-[#ff0040]/90'
|
||
: ''
|
||
)}
|
||
onClick={() => toggleCategory(key)}
|
||
>
|
||
{cat.emoji} {spotTypeLabel(t, key)}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sort & Trust */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">{t('mapUi.sortBy')}</h3>
|
||
<SortDropdown
|
||
value={sortBy}
|
||
onChange={setSortBy}
|
||
contentType="spots"
|
||
showProximity={!!userLocation}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">{t('mapUi.trustLevel')}</h3>
|
||
<TrustFilter
|
||
value={trustFilter}
|
||
onChange={setTrustFilter}
|
||
compact
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Weather toggle */}
|
||
<div>
|
||
<h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">{t('mapUi.weather')}</h3>
|
||
<WeatherToggle
|
||
enabled={weatherEnabled}
|
||
onToggle={() => {
|
||
const newWeatherEnabled = !weatherEnabled;
|
||
setWeatherEnabled(newWeatherEnabled);
|
||
if (!newWeatherEnabled) {
|
||
setWeatherFilter('all');
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Quick actions for logged in users.
|
||
Note: Add Spot / Shop / Event / Gear / Tour live in the
|
||
map's "Add" speed-dial FAB — here we only surface the
|
||
shortcuts that aren't already on the map (Marketplace,
|
||
Stash) to avoid duplication. */}
|
||
{user && (
|
||
<div>
|
||
<h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">{t('mapUi.quickActions')}</h3>
|
||
<div className="grid grid-cols-2 gap-1.5">
|
||
<Link to="/marketplace" onClick={() => setMobileFiltersOpen(false)}>
|
||
<Button size="sm" variant="outline" className="w-full gap-1 border-orange-500/50 text-orange-400 font-bold h-9 text-xs">
|
||
<ArrowRightLeft className="h-3 w-3" />
|
||
{t('mapUi.buySellGear')}
|
||
</Button>
|
||
</Link>
|
||
<Link to="/stash" onClick={() => setMobileFiltersOpen(false)}>
|
||
<Button size="sm" variant="outline" className="w-full gap-1 border-[#ff6600]/50 text-[#ff6600] font-bold h-9 text-xs">
|
||
<Backpack className="h-3 w-3" />
|
||
{t('mapUi.stash')}
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Show Results button — sticks to bottom, never overlaps content */}
|
||
<div className="flex-shrink-0 pt-3 pb-2 border-t safe-area-bottom bg-background">
|
||
<Button
|
||
className="w-full h-12 font-bold text-base"
|
||
onClick={() => setMobileFiltersOpen(false)}
|
||
>
|
||
{t('mapUi.showResults')}
|
||
</Button>
|
||
</div>
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
{/* Desktop: Weather toggle */}
|
||
<div className="hidden md:block">
|
||
<WeatherToggle
|
||
enabled={weatherEnabled}
|
||
onToggle={() => {
|
||
const newWeatherEnabled = !weatherEnabled;
|
||
setWeatherEnabled(newWeatherEnabled);
|
||
if (!newWeatherEnabled) {
|
||
setWeatherFilter('all');
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Row 2: Entity toggles + Sort/Filter + Add buttons (DESKTOP ONLY) */}
|
||
<div className="hidden md:flex items-center gap-2 mt-2 overflow-x-auto scrollbar-hide -mx-3 px-3 sm:mx-0 sm:px-0">
|
||
{/* Layers — grouped popover (matches the mobile Layers control).
|
||
Replaces four separate entity-toggle buttons to declutter the
|
||
desktop toolbar while keeping the entity color language. */}
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="gap-1.5 font-bold text-xs px-2.5 h-8 flex-shrink-0 border-gray-700 hover:border-white/30 touch-manipulation active:scale-95"
|
||
>
|
||
<Layers className="h-3.5 w-3.5" />
|
||
<span>{t('mapUi.layers')}</span>
|
||
<span className="ml-0.5 min-w-[18px] h-[18px] px-1 text-[10px] font-black bg-[#ccff00] text-black rounded-full flex items-center justify-center leading-none">
|
||
{mobileLayerCount}
|
||
</span>
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent align="start" className="w-52 p-2 bg-black/95 border-white/15 backdrop-blur-xl">
|
||
<p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">{t('mapUi.showOnMap')}</p>
|
||
<div className="space-y-0.5">
|
||
{[
|
||
{ key: 'spots', label: t('mapUi.spots'), dot: '#ff0040', active: showSpots, toggle: () => setShowSpots(v => !v) },
|
||
{ key: 'shops', label: t('mapUi.shops'), dot: '#9333ea', active: showShops, toggle: () => setShowShops(v => !v) },
|
||
{ key: 'gear', label: t('mapUi.gear'), dot: '#f97316', active: showGear, toggle: () => setShowGear(v => !v) },
|
||
{ key: 'tours', label: t('mapUi.tours'), dot: '#06b6d4', active: showTours, toggle: () => setShowTours(v => !v) },
|
||
{ key: 'events', label: t('mapUi.events'), dot: '#ccff00', active: showEvents, toggle: () => setShowEvents(v => !v) },
|
||
{ key: 'crews', label: t('mapUi.crews'), dot: '#14b8a6', active: showCrews, toggle: () => setShowCrews(v => !v) },
|
||
].map(({ key, label, dot, active, toggle }) => (
|
||
<button
|
||
key={key}
|
||
onClick={toggle}
|
||
className={cn(
|
||
'w-full flex items-center gap-2.5 px-1.5 py-2 rounded-lg text-sm font-semibold transition-colors',
|
||
active ? 'text-white hover:bg-white/5' : 'text-gray-500 hover:bg-white/5'
|
||
)}
|
||
>
|
||
<span
|
||
className={cn('w-2.5 h-2.5 rounded-full flex-shrink-0 transition-opacity', active ? 'opacity-100' : 'opacity-30')}
|
||
style={{ backgroundColor: dot }}
|
||
/>
|
||
<span className="flex-1 text-left">{label}</span>
|
||
<span
|
||
className={cn(
|
||
'w-4 h-4 rounded flex items-center justify-center flex-shrink-0 border transition-colors',
|
||
active ? 'bg-[#ccff00] border-[#ccff00]' : 'border-white/20'
|
||
)}
|
||
>
|
||
{active && <Check className="h-3 w-3 text-black" strokeWidth={3} />}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
|
||
{/* BTC Map toggle */}
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Button
|
||
variant={showBtcMap ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
|
||
showBtcMap ? 'bg-[#f7931a] hover:bg-[#f7931a]/90 text-white' : 'border-[#f7931a]/50 text-[#f7931a] hover:bg-[#f7931a]/10'
|
||
)}
|
||
onClick={() => setShowBtcMap(!showBtcMap)}
|
||
>
|
||
<Bitcoin className="h-3.5 w-3.5" />
|
||
<span className="hidden xs:inline">SPEDN ✊</span>
|
||
{btcMapLoading && showBtcMap && (
|
||
<span className="ml-1 h-3 w-3 rounded-full border-2 border-white/30 border-t-white animate-spin" />
|
||
)}
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent side="bottom" className="max-w-[200px]">
|
||
<p className="text-xs">
|
||
{showBtcMap
|
||
? t('mapUi.btcMapShowing', { count: btcMapPlaces?.length || 0 })
|
||
: t('mapUi.btcMapShow')
|
||
}
|
||
</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
|
||
{/* Stash drawer */}
|
||
<Sheet>
|
||
<SheetTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95 border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10 hover:border-[#ff6600]"
|
||
>
|
||
<Backpack className="h-3.5 w-3.5" />
|
||
<span className="hidden xs:inline">{t('mapUi.stash')}</span>
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent side="right" className="w-[min(340px,calc(100vw-2rem))] sm:w-[400px] p-0 bg-black/95 border-l-2 border-[#ff6600]/30">
|
||
<SheetHeader className="p-4 pb-0">
|
||
<SheetTitle className="flex items-center gap-2 text-white">
|
||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center">
|
||
<Backpack className="h-4 w-4 text-white" />
|
||
</div>
|
||
{t('mapUi.myStash')}
|
||
<Badge variant="outline" className="ml-auto border-green-500/50 text-green-400 text-[10px]">
|
||
<Shield className="h-2.5 w-2.5 mr-1" />
|
||
{t('mapUi.encrypted')}
|
||
</Badge>
|
||
</SheetTitle>
|
||
</SheetHeader>
|
||
<StashDrawer />
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
{/* Separator */}
|
||
<div className="w-px h-6 bg-gray-700 flex-shrink-0 hidden sm:block" />
|
||
|
||
{/* Sort and Filter */}
|
||
<SortDropdown
|
||
value={sortBy}
|
||
onChange={setSortBy}
|
||
contentType="spots"
|
||
showProximity={!!userLocation}
|
||
/>
|
||
<TrustFilter
|
||
value={trustFilter}
|
||
onChange={setTrustFilter}
|
||
compact
|
||
/>
|
||
|
||
{/* Clear filters */}
|
||
{hasActiveFilters && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-red-400 hover:text-red-300 hover:bg-red-500/10 h-8 w-8 p-0 flex-shrink-0 touch-manipulation active:scale-95"
|
||
onClick={clearFilters}
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
|
||
{/* Spacer */}
|
||
<div className="flex-1 min-w-2" />
|
||
|
||
{/* Local Chat - live geohash channel for wherever the map is centered.
|
||
Mobile only: on desktop the toolbar is dense and DMs/crew chat cover
|
||
messaging, so we hide the standalone Local Chat trigger at md+. */}
|
||
<Sheet>
|
||
<SheetTrigger asChild>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
aria-label={t('mapUi.localChat')}
|
||
title={t('mapUi.localChat')}
|
||
className="md:hidden gap-1.5 border-2 border-purple-500/50 hover:bg-purple-500/10 text-purple-400 font-bold h-8 px-2 flex-shrink-0"
|
||
>
|
||
<MessageCircle className="h-4 w-4" />
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent
|
||
side="right"
|
||
className="w-full sm:w-[420px] p-0 flex flex-col"
|
||
>
|
||
<SheetHeader className="p-4 pb-2">
|
||
<SheetTitle className="flex items-center gap-2">
|
||
<MessageCircle className="h-5 w-5 text-purple-400" />
|
||
{t('mapUi.localChat')}
|
||
</SheetTitle>
|
||
<p className="text-xs text-muted-foreground text-left">
|
||
{t('mapUi.localChatDesc')}
|
||
</p>
|
||
</SheetHeader>
|
||
<div className="flex-1 min-h-0 p-4 pt-0">
|
||
<SpotChat
|
||
key={ngeohash.encode(mapCenter.lat, mapCenter.lon, 8)}
|
||
geohash={ngeohash.encode(mapCenter.lat, mapCenter.lon, 8)}
|
||
showPrecisionToggle
|
||
defaultPrecision="neighborhood"
|
||
className="h-full"
|
||
/>
|
||
</div>
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
{/* Add buttons - icons only on mobile */}
|
||
{user ? (
|
||
<>
|
||
{/* Primary action: add a spot (this is a map, after all) */}
|
||
<Link to="/create-spot" className="flex-shrink-0">
|
||
<Button size="sm" className="gap-1.5 bg-[#ff0040] hover:bg-[#ff0040]/90 border-2 border-[#ff0040] font-bold h-8 px-2 sm:px-3">
|
||
<Plus className="h-4 w-4" />
|
||
<span className="hidden md:inline">{t('home.addSpot')}</span>
|
||
</Button>
|
||
</Link>
|
||
{/* Secondary add actions consolidated into one menu to de-clutter */}
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="flex-shrink-0 gap-1 border-2 border-gray-700 hover:border-[#ccff00]/50 font-bold h-8 px-2 sm:px-3"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
<span className="hidden md:inline">{t('mapUi.more')}</span>
|
||
<ChevronDown className="h-3.5 w-3.5 opacity-70" />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent align="end" className="w-52 p-1.5">
|
||
<Link to="/create-shop" className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium hover:bg-[#ccff00]/10 text-[#ccff00] transition-colors">
|
||
<Store className="h-4 w-4" /> {t('shops.addShop')}
|
||
</Link>
|
||
<Link to="/marketplace" className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium hover:bg-orange-500/10 text-orange-400 transition-colors">
|
||
<ShoppingBag className="h-4 w-4" /> {t('mapUi.buySellGear')}
|
||
</Link>
|
||
<Link to="/create-tour" className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium hover:bg-cyan-500/10 text-cyan-400 transition-colors">
|
||
<Route className="h-4 w-4" /> {t('mapUi.offerTour')}
|
||
</Link>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</>
|
||
) : (
|
||
<Badge variant="outline" className="border-yellow-500/50 text-yellow-400 text-[10px] px-2 flex-shrink-0">
|
||
🔒 {t('errors.loginRequired')}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
|
||
{/* Row 3: Category filters (DESKTOP ONLY) */}
|
||
<div className="hidden md:flex items-center gap-1.5 mt-2 overflow-x-auto scrollbar-hide -mx-3 px-3 sm:mx-0 sm:px-0 pb-0.5">
|
||
{Object.entries(SPOT_CATEGORIES).map(([key, cat]) => (
|
||
<Button
|
||
key={key}
|
||
variant={selectedCategories.includes(key) ? 'default' : 'outline'}
|
||
size="sm"
|
||
className={cn(
|
||
'gap-1 font-bold text-xs flex-shrink-0 px-2.5 h-8 touch-manipulation active:scale-95',
|
||
selectedCategories.includes(key)
|
||
? 'bg-[#ff0040] hover:bg-[#ff0040]/90'
|
||
: 'border-gray-700 hover:border-[#ff0040]/50'
|
||
)}
|
||
onClick={() => toggleCategory(key)}
|
||
>
|
||
{cat.emoji} {spotTypeLabel(t, key)}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
{/* `isolate` creates a stacking context so the map's internal z-indexes
|
||
(Leaflet panes, our overlays up to z-[2000]) stay INSIDE the map. Without
|
||
it they competed with the root and the © OpenStreetMap attribution
|
||
(z-999) painted on top of the Sasquatch panel (z-40). */}
|
||
<div className="relative isolate flex-1">
|
||
{viewMode === 'map' ? (
|
||
<>
|
||
<Suspense fallback={
|
||
<div className="h-full bg-black/20 flex items-center justify-center">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-6 h-6 border-2 border-[#ff0040] border-t-transparent rounded-full animate-spin" />
|
||
<span className="text-sm text-white font-bold">{t('mapUi.loadingMap')}</span>
|
||
</div>
|
||
</div>
|
||
}>
|
||
<SpotMap
|
||
spots={mapSpots}
|
||
center={initialCenter}
|
||
zoom={initialZoom}
|
||
marketplaceItems={marketplaceItems || []}
|
||
tours={tours || []}
|
||
btcMapPlaces={btcMapPlaces || []}
|
||
selectedSpot={selectedSpot}
|
||
onSpotClick={setSelectedSpot}
|
||
onMapClick={handleMapClick}
|
||
onMapMove={handleMapMove}
|
||
enableClickToAdd={!!user}
|
||
className="h-full ss-map-floating-toolbar"
|
||
weatherEnabled={weatherEnabled}
|
||
weatherData={weatherData}
|
||
events={upcomingEvents || []}
|
||
crews={crews || []}
|
||
showSpots={showSpots}
|
||
showShops={showShops}
|
||
showGear={showGear}
|
||
showTours={showTours}
|
||
showEvents={showEvents}
|
||
showCrews={showCrews}
|
||
showBtcMap={showBtcMap}
|
||
flyTo={flyTo}
|
||
userLocation={isMobile && userLocation ? { lat: userLocation.lat, lng: userLocation.lon } : null}
|
||
userPicture={userPicture}
|
||
pendingPin={pendingAddPin}
|
||
/>
|
||
</Suspense>
|
||
|
||
{/* Tap-to-add confirm. Tapping the map drops a pin (above) and
|
||
shows this card; only "Add spot" opens the create form, so a
|
||
stray tap no longer kicks you off the map. */}
|
||
{pendingAddPin && (
|
||
<div className="pointer-events-none absolute inset-x-0 bottom-24 z-[1003] flex justify-center px-4 md:bottom-8">
|
||
<div className="pointer-events-auto flex w-full max-w-md items-center gap-3 rounded-2xl border-2 border-[#ff0040]/50 bg-black/90 px-3 py-2.5 shadow-2xl backdrop-blur-md">
|
||
<div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-[#ff0040]/20 text-lg">
|
||
📍
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-black uppercase tracking-wide text-white">
|
||
{t('mapUi.addSpotHereTitle')}
|
||
</p>
|
||
<p className="truncate text-xs text-gray-400">
|
||
{t('mapUi.addSpotHereDesc')}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-shrink-0 gap-1.5">
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-9 px-2 text-gray-400"
|
||
onClick={() => setPendingAddPin(null)}
|
||
>
|
||
{t('common.cancel')}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
className="h-9 gap-1 bg-[#ff0040] font-black uppercase hover:bg-[#ff0040]/90"
|
||
onClick={() => {
|
||
const pin = pendingAddPin;
|
||
setPendingAddPin(null);
|
||
navigate(`/create-spot?lat=${pin.lat.toFixed(6)}&lng=${pin.lng.toFixed(6)}`);
|
||
}}
|
||
>
|
||
<MapPin className="h-4 w-4" />
|
||
{t('mapUi.addSpot')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* Loading indicator — a slim, honest top bar. The map stays
|
||
visible underneath and spots stream in; we NEVER cover the map
|
||
with fake placeholder pins. An animated sweep sits on top of a
|
||
faint track so it reads as "working", plus a small labeled pill
|
||
during a genuine cold start (no markers yet) so the user knows
|
||
we're talking to the relays. */}
|
||
{isLoading && (
|
||
<>
|
||
<div className="absolute top-0 left-0 right-0 z-[1001] h-[3px] overflow-hidden bg-white/5">
|
||
<div className="ss-loadbar h-full w-1/3 bg-gradient-to-r from-[#ff0040] via-[#ff6600] to-[#ccff00]" />
|
||
</div>
|
||
{mapSpots.length === 0 && (
|
||
<div className="absolute top-[4.5rem] left-1/2 -translate-x-1/2 z-[1001] md:top-3">
|
||
<div className="flex items-center gap-2 rounded-full bg-black/60 px-3.5 py-1.5 backdrop-blur-md ring-1 ring-white/10 shadow-lg">
|
||
<span className="h-3.5 w-3.5 rounded-full border-2 border-[#ccff00]/30 border-t-[#ccff00] animate-spin" />
|
||
<span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70">
|
||
{t('mapUi.loadingSpots')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
|
||
|
||
{/* Offline / relay-down banner. The map keeps showing the
|
||
last-known spots from the local cache — this just says so
|
||
honestly, and offers a retry. Shown only once we know the relay
|
||
is unreachable, so a slow cold start never flashes it. */}
|
||
{!isLoading && deviceOffline && !offlineBannerDismissed && allLocations.length > 0 && (
|
||
<div className="absolute top-[4.5rem] left-1/2 z-[1002] -translate-x-1/2 md:top-3">
|
||
<div className="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-400/30 bg-black/75 px-3 py-1.5 shadow-lg backdrop-blur-md">
|
||
<WifiOff className="h-3.5 w-3.5 text-amber-400" />
|
||
<span className="font-mono text-[10px] uppercase tracking-[0.16em] text-amber-200/90">
|
||
{t('mapUi.offlineSavedSpots')}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
refetchSpots();
|
||
relay.recheck();
|
||
}}
|
||
className="ml-0.5 rounded-full p-1 text-amber-200/80 transition-colors hover:bg-white/10 hover:text-white"
|
||
aria-label={t('common.tryAgain')}
|
||
>
|
||
<RefreshCw className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setOfflineBannerDismissed(true)}
|
||
className="rounded-full p-1 text-amber-200/60 transition-colors hover:bg-white/10 hover:text-white"
|
||
aria-label={t('mapUi.dismiss')}
|
||
>
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 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 && allLocations.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">{t('mapUi.noSpotsMatchTitle')}</p>
|
||
<p className="mt-1 text-xs text-gray-400">{t('mapUi.noSpotsMatchDesc')}</p>
|
||
<Button size="sm" className="mt-3" onClick={clearFilters}>
|
||
{t('common.clearFilters')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Offline with nothing cached yet — don't pretend the map is
|
||
empty ("be the first to map your park"): say what's actually
|
||
wrong and offer a retry. */}
|
||
{!isLoading && relayUnreachable && (showSpots || showShops) && allLocations.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-sm rounded-2xl border border-amber-400/25 bg-black/85 p-6 text-center shadow-2xl backdrop-blur-md">
|
||
<WifiOff className="mx-auto h-7 w-7 text-amber-400" />
|
||
<p className="mt-2 font-black uppercase tracking-wide text-white">
|
||
{t('mapUi.cantReachRelays')}
|
||
</p>
|
||
<p className="mt-1 text-xs leading-relaxed text-gray-400">
|
||
{online
|
||
? t('mapUi.relayOnlineNoAnswer')
|
||
: t('mapUi.youreOffline')}{' '}
|
||
{t('mapUi.savedOnDevice')}
|
||
</p>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="mt-4 gap-2 border-white/20"
|
||
onClick={() => {
|
||
refetchSpots();
|
||
relay.recheck();
|
||
}}
|
||
>
|
||
<RefreshCw className="h-4 w-4" />
|
||
{t('common.tryAgain')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Nothing mapped here AT ALL — the honest empty map. This is the
|
||
density problem, not a filter problem, so the fix on offer is
|
||
"add the first one" rather than "clear your filters". */}
|
||
{!isLoading && !relayUnreachable && (showSpots || showShops) && allLocations.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-sm rounded-2xl border-2 border-[#ccff00]/25 bg-black/85 p-6 text-center shadow-2xl backdrop-blur-md">
|
||
<p className="text-2xl">🛹</p>
|
||
<p className="mt-2 font-black uppercase tracking-wide text-white">
|
||
{t('mapUi.noSpotsMappedYet')}
|
||
</p>
|
||
<p className="mt-1 text-xs leading-relaxed text-gray-400">
|
||
{t('mapUi.noSpotsMappedDesc')}
|
||
</p>
|
||
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-center">
|
||
<Link to="/create-spot">
|
||
<Button
|
||
size="sm"
|
||
className="w-full gap-2 bg-[#ccff00] font-black uppercase text-black hover:bg-[#ccff00]/90"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
{t('mapUi.addFirstSpot')}
|
||
</Button>
|
||
</Link>
|
||
<Button size="sm" variant="outline" className="gap-2 border-white/20" onClick={handleNearMe} disabled={nearMeLoading}>
|
||
<LocateFixed className="h-4 w-4" />
|
||
{nearMeLoading ? t('mapUi.locating') : t('mapUi.findSpotsNearMe')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Map attribution — bottom-left, sits ABOVE the mobile bottom
|
||
nav so it never covers the Shops & Spots buttons. Tiny + subtle. */}
|
||
<div
|
||
className="absolute left-1.5 z-[999] pointer-events-none bottom-[calc(5rem+env(safe-area-inset-bottom,0px)+0.25rem)] md:bottom-7"
|
||
>
|
||
<div className="bg-black/55 backdrop-blur-sm px-1.5 py-0.5 rounded text-[9px] font-medium text-gray-200/90 leading-none pointer-events-auto">
|
||
<a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">© OpenStreetMap</a>
|
||
{showBtcMap && (
|
||
<>{' · '}<a href="https://btcmap.org" target="_blank" rel="noopener noreferrer" className="text-[#f7931a] hover:text-[#ffb04d] transition-colors">BTC Map</a></>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Slim, dismissible site-links strip — the desktop footer is hidden
|
||
on this full-bleed route, so surface the links here instead. */}
|
||
{/* Weather score legend — only while the weather layer is on */}
|
||
{weatherEnabled && (
|
||
<div className="pointer-events-none absolute right-3 bottom-24 z-[1000]">
|
||
<WeatherLegend />
|
||
</div>
|
||
)}
|
||
|
||
<MapFooterStrip />
|
||
|
||
{/* Location permission help dialog */}
|
||
{showLocationHelp && (
|
||
<div className="absolute inset-0 z-[2000] flex items-end justify-center pb-[calc(5rem+env(safe-area-inset-bottom,0px))] md:items-center md:pb-0 px-4">
|
||
<div
|
||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||
onClick={() => setShowLocationHelp(false)}
|
||
/>
|
||
<div className="relative w-full max-w-sm rounded-2xl bg-[#111] border border-red-500/30 shadow-2xl p-5 space-y-4">
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-10 h-10 rounded-xl bg-red-500/15 flex items-center justify-center flex-shrink-0">
|
||
<LocateOff className="h-5 w-5 text-red-400" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-black text-white uppercase tracking-wide">{t('mapUi.locationBlocked')}</p>
|
||
<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
|
||
{t('mapUi.locationBlockedDesc')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="rounded-xl border border-white/8 bg-white/[0.03] divide-y divide-white/5 overflow-hidden">
|
||
{[
|
||
{ platform: `📱 ${t('mapUi.locationPlatformAndroid')}`, steps: t('mapUi.locationStepsAndroid') },
|
||
{ platform: `🍎 ${t('mapUi.locationPlatformIos')}`, steps: t('mapUi.locationStepsIos') },
|
||
{ platform: `💻 ${t('mapUi.locationPlatformDesktop')}`, steps: t('mapUi.locationStepsDesktop') },
|
||
{ platform: `🦊 ${t('mapUi.locationPlatformFirefox')}`, steps: t('mapUi.locationStepsFirefox') },
|
||
].map(({ platform, steps }) => (
|
||
<div key={platform} className="px-3 py-2.5">
|
||
<p className="text-xs font-bold text-white mb-0.5">{platform}</p>
|
||
<p className="text-[11px] text-muted-foreground leading-snug">{steps}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setShowLocationHelp(false);
|
||
setNearMeError(null);
|
||
}}
|
||
className="w-full py-3 rounded-xl bg-white/8 hover:bg-white/12 border border-white/10 text-sm font-bold text-white transition-all active:scale-[0.98]"
|
||
>
|
||
{t('mapUi.gotIt')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Mobile map controls (redesigned) ──────────────────────────
|
||
Right edge holds just TWO small controls: Near Me + Layers.
|
||
Primary "Add" action is a speed-dial FAB (bottom-right). This
|
||
replaces the old 12-item vertical strip. */}
|
||
<div
|
||
className={cn(
|
||
"fixed right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-all duration-200",
|
||
mobileFiltersOpen || selectedSpot || addDialOpen ? "opacity-0 pointer-events-none translate-x-2" : "opacity-100 translate-x-0"
|
||
)}
|
||
style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 6.5rem)' }}
|
||
>
|
||
{/* Near Me */}
|
||
<button
|
||
onClick={() => {
|
||
// On native a denial is an OS permission the user can grant
|
||
// and retry; only the web needs the browser re-enable sheet.
|
||
if (nearMeError === 'denied' && !isNativeGeolocation()) {
|
||
setShowLocationHelp(true);
|
||
return;
|
||
}
|
||
handleNearMe();
|
||
}}
|
||
disabled={nearMeLoading}
|
||
className={cn(
|
||
'h-11 w-11 rounded-full flex items-center justify-center shadow-lg border backdrop-blur transition-all touch-manipulation active:scale-90',
|
||
nearMeError === 'denied'
|
||
? 'bg-red-900/80 border-red-500/30'
|
||
: 'bg-black/70 border-white/15 hover:border-white/30'
|
||
)}
|
||
aria-label={t('mapUi.findSpotsNearMe')}
|
||
>
|
||
{nearMeLoading ? (
|
||
<span className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white animate-spin" />
|
||
) : nearMeError === 'denied' ? (
|
||
<LocateOff className="h-4 w-4 text-red-400" />
|
||
) : (
|
||
<LocateFixed className="h-4 w-4 text-[#ccff00]" />
|
||
)}
|
||
</button>
|
||
|
||
{/* Layers popover — labelled toggles with color dots */}
|
||
<Popover open={layersOpen} onOpenChange={setLayersOpen}>
|
||
<PopoverTrigger asChild>
|
||
<button
|
||
className={cn(
|
||
'relative h-11 w-11 rounded-full flex items-center justify-center shadow-lg border backdrop-blur transition-all touch-manipulation active:scale-90',
|
||
layersOpen
|
||
? 'bg-[#ff0040]/20 border-[#ff0040]/60'
|
||
: 'bg-black/70 border-white/15 hover:border-white/30'
|
||
)}
|
||
aria-label={t('mapUi.mapLayers')}
|
||
>
|
||
<Layers className={cn('h-4 w-4', layersOpen ? 'text-[#ff0040]' : 'text-gray-200')} />
|
||
{mobileLayerCount < totalPrimaryLayers && (
|
||
<span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[9px] font-black bg-[#ccff00] text-black rounded-full flex items-center justify-center leading-none border-2 border-black">
|
||
{mobileLayerCount}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
side="left"
|
||
align="end"
|
||
className="w-52 p-2 bg-black/95 border-white/15 backdrop-blur-xl"
|
||
>
|
||
<p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">{t('mapUi.showOnMap')}</p>
|
||
<div className="space-y-0.5">
|
||
{[
|
||
{ key: 'spots', label: t('mapUi.spots'), dot: '#ff0040', active: showSpots, toggle: () => setShowSpots(v => !v) },
|
||
{ key: 'shops', label: t('mapUi.shops'), dot: '#9333ea', active: showShops, toggle: () => setShowShops(v => !v) },
|
||
{ key: 'gear', label: t('mapUi.gear'), dot: '#f97316', active: showGear, toggle: () => setShowGear(v => !v) },
|
||
{ key: 'tours', label: t('mapUi.tours'), dot: '#06b6d4', active: showTours, toggle: () => setShowTours(v => !v) },
|
||
{ key: 'events', label: t('mapUi.events'), dot: '#ccff00', active: showEvents, toggle: () => setShowEvents(v => !v) },
|
||
{ key: 'crews', label: t('mapUi.crews'), dot: '#14b8a6', active: showCrews, toggle: () => setShowCrews(v => !v) },
|
||
].map(({ key, label, dot, active, toggle }) => (
|
||
<button
|
||
key={key}
|
||
onClick={toggle}
|
||
className={cn(
|
||
'w-full flex items-center gap-2.5 px-1.5 py-2 rounded-lg text-sm font-semibold transition-colors touch-manipulation',
|
||
active ? 'text-white hover:bg-white/5' : 'text-gray-500 hover:bg-white/5'
|
||
)}
|
||
>
|
||
<span
|
||
className={cn('w-2.5 h-2.5 rounded-full flex-shrink-0 transition-opacity', active ? 'opacity-100' : 'opacity-30')}
|
||
style={{ backgroundColor: dot }}
|
||
/>
|
||
<span className="flex-1 text-left">{label}</span>
|
||
<span
|
||
className={cn(
|
||
'w-4 h-4 rounded flex items-center justify-center flex-shrink-0 border transition-colors',
|
||
active ? 'bg-[#ccff00] border-[#ccff00]' : 'border-white/20'
|
||
)}
|
||
>
|
||
{active && <Check className="h-3 w-3 text-black" strokeWidth={3} />}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
|
||
{/* ── Add speed-dial FAB (mobile, logged in) ──────────────────── */}
|
||
{user && (
|
||
<div
|
||
className={cn(
|
||
'fixed right-4 z-[1001] md:hidden flex flex-col items-end gap-2.5 transition-all duration-200',
|
||
mobileFiltersOpen || selectedSpot ? 'opacity-0 pointer-events-none' : 'opacity-100'
|
||
)}
|
||
style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1rem)' }}
|
||
>
|
||
{/* Fan-out actions */}
|
||
{addDialOpen && (
|
||
<>
|
||
{[
|
||
{ label: t('mapUi.addSpot'), to: '/create-spot', bg: 'bg-[#ff0040]', icon: <MapPin className="h-4 w-4 text-white" /> },
|
||
{ label: t('mapUi.addShop'), to: '/create-shop', bg: 'bg-[#9333ea]', icon: <Store className="h-4 w-4 text-white" /> },
|
||
{ label: t('mapUi.addEvent'), to: '/create-event', bg: 'bg-[#ccff00]', icon: <Calendar className="h-4 w-4 text-black" /> },
|
||
{ label: t('mapUi.sellGear'), to: '/create-listing', bg: 'bg-[#f97316]', icon: <ShoppingBag className="h-4 w-4 text-white" /> },
|
||
{ label: t('mapUi.offerTour'), to: '/create-tour', bg: 'bg-[#06b6d4]', icon: <Route className="h-4 w-4 text-white" /> },
|
||
].map((a, i) => (
|
||
<Link
|
||
key={a.to}
|
||
to={a.to}
|
||
onClick={() => setAddDialOpen(false)}
|
||
className="flex items-center gap-2.5 animate-in fade-in slide-in-from-bottom-2 duration-200"
|
||
style={{ animationDelay: `${i * 40}ms` }}
|
||
>
|
||
<span className="px-2.5 py-1 rounded-lg bg-black/85 backdrop-blur text-white text-xs font-bold shadow-lg border border-white/10">
|
||
{a.label}
|
||
</span>
|
||
<span className={cn('h-11 w-11 rounded-full flex items-center justify-center shadow-lg', a.bg)}>
|
||
{a.icon}
|
||
</span>
|
||
</Link>
|
||
))}
|
||
</>
|
||
)}
|
||
|
||
{/* Main FAB */}
|
||
<button
|
||
onClick={() => setAddDialOpen(v => !v)}
|
||
className={cn(
|
||
'h-14 w-14 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 touch-manipulation active:scale-90',
|
||
addDialOpen
|
||
? 'bg-white rotate-45'
|
||
: 'bg-[#ff0040] shadow-[#ff0040]/40 hover:bg-[#ff0040]/90'
|
||
)}
|
||
aria-label={addDialOpen ? t('mapUi.closeAddMenu') : t('mapUi.addMenuAria')}
|
||
>
|
||
<Plus className={cn('h-7 w-7 transition-colors', addDialOpen ? 'text-black' : 'text-white')} strokeWidth={2.5} />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Tap-catcher to close the speed-dial */}
|
||
{addDialOpen && (
|
||
<div
|
||
className="fixed inset-0 z-[1000] md:hidden"
|
||
onClick={() => setAddDialOpen(false)}
|
||
/>
|
||
)}
|
||
</>
|
||
) : (
|
||
<div className="h-full overflow-auto">
|
||
<div className="container px-4 py-6">
|
||
{isLoading ? (
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
{Array.from({ length: 8 }).map((_, i) => (
|
||
<SpotCardSkeleton key={i} />
|
||
))}
|
||
</div>
|
||
) : filteredSpots.length > 0 ? (
|
||
<>
|
||
<p className="text-sm text-muted-foreground mb-4">
|
||
{t('mapPage.locationsFound', { count: filteredSpots.length })}
|
||
{showSpots && !showShops && ` (${t('mapPage.spotsOnly')})`}
|
||
{!showSpots && showShops && ` (${t('mapPage.shopsOnly')})`}
|
||
{showSpots && showShops && ` (${t('mapPage.spotsAndShops')})`}
|
||
</p>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 stagger-children">
|
||
{filteredSpots.map((spot) => (
|
||
<SpotCard
|
||
key={spot.id}
|
||
spot={spot}
|
||
status={spot.isShop ? null : getSpotStatus(spot.pubkey, spot.identifier)}
|
||
community={communityScores?.get(`${SKATE_SPOT_KIND}:${spot.pubkey}:${spot.identifier}`)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="text-center py-12">
|
||
<Map className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
||
<p className="text-muted-foreground mb-4">
|
||
{hasActiveFilters
|
||
? t('mapPage.noSpotsMatch')
|
||
: t('mapPage.noSpotsYet')}
|
||
</p>
|
||
{hasActiveFilters ? (
|
||
<Button variant="outline" onClick={clearFilters}>
|
||
{t('common.clearFilters')}
|
||
</Button>
|
||
) : (
|
||
user && (
|
||
<Link to="/create-spot">
|
||
<Button className="gap-2">
|
||
<Plus className="h-4 w-4" />
|
||
{t('mapPage.addFirstSpot')}
|
||
</Button>
|
||
</Link>
|
||
)
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Spot Bottom Sheet — slides up when a marker is tapped, map stays visible */}
|
||
<Sheet open={!!selectedSpot} onOpenChange={(open) => { if (!open) setSelectedSpot(null); }}>
|
||
<SheetContent
|
||
side="bottom"
|
||
hideClose
|
||
className="h-auto max-h-[55vh] rounded-t-2xl px-0 pb-0 bg-black/95 border-t border-white/10"
|
||
>
|
||
<SheetTitle className="sr-only">{selectedSpot?.title ?? t('mapUi.spotDetails')}</SheetTitle>
|
||
{selectedSpot && (
|
||
<SpotBottomSheet
|
||
spot={selectedSpot}
|
||
onClose={() => setSelectedSpot(null)}
|
||
onDirections={(target) => {
|
||
// Close the sheet first — the route dialog takes over.
|
||
setSelectedSpot(null);
|
||
setRouteTarget(target);
|
||
}}
|
||
/>
|
||
)}
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
{/* In-app route — page-level so it never stacks inside the spot Sheet. */}
|
||
<RouteDialog
|
||
open={!!routeTarget}
|
||
onOpenChange={(open) => { if (!open) setRouteTarget(null); }}
|
||
destination={routeTarget ? { lat: routeTarget.lat, lng: routeTarget.lng } : null}
|
||
destinationLabel={routeTarget?.label ?? 'Spot'}
|
||
onDestinationChange={(pick) => setRouteTarget({ lat: pick.lat, lng: pick.lng, label: pick.label })}
|
||
/>
|
||
</>
|
||
);
|
||
}
|