From bdee1557601c54555dcfffff0878543d840cf826 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 5 Dec 2025 10:25:10 -0500
Subject: [PATCH] feat: add tooltips to map markers displaying shop names

---
 src/app/page.tsx                   | 30 +++++++++++++++++-------------
 src/components/Drawer.tsx          |  2 +-
 src/components/LocateControl.tsx   |  2 +-
 src/components/Map.tsx             | 10 ++++++++--
 src/components/MapStyleControl.tsx |  2 +-
 src/components/Navbar.tsx          |  2 +-
 src/components/ZoomControls.tsx    |  6 +++---
 7 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 721f4ca..4996e97 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -22,8 +22,23 @@ export default function HomePage() {
 
   return (
     <main className="relative h-dvh w-screen overflow-hidden bg-black text-white font-serif">
-      {/* Navbar - always visible */}
-      <Navbar isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={() => setIsDiscoveryOpen(!isDiscoveryOpen)} />
+      {/* Unified shadow container for navbar + drawer */}
+      <div className="absolute top-0 left-0 right-0 bottom-0 pointer-events-none z-[1000]" style={{ boxShadow: 'inset 0 0 40px 10px rgb(0 0 0 / 0.3)' }}>
+        {/* Navbar - always visible */}
+        <Navbar isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={() => setIsDiscoveryOpen(!isDiscoveryOpen)} />
+
+        {/* Right Drawer - only render after mount to prevent hydration mismatch */}
+        {mounted && (
+          <Drawer
+            shop={selectedShop}
+            shops={COFFEE_SHOPS}
+            onSelect={setSelectedShop}
+            onClose={() => setSelectedShop(null)}
+            isOpen={isDiscoveryOpen}
+            onToggleOpen={() => setIsDiscoveryOpen(false)}
+          />
+        )}
+      </div>
 
       {/* Map Background */}
       <div className="absolute inset-0 z-0">
@@ -36,17 +51,6 @@ export default function HomePage() {
         />
       </div>
 
-      {/* Right Drawer - only render after mount to prevent hydration mismatch */}
-      {mounted && (
-        <Drawer
-          shop={selectedShop}
-          shops={COFFEE_SHOPS}
-          onSelect={setSelectedShop}
-          onClose={() => setSelectedShop(null)}
-          isOpen={isDiscoveryOpen}
-          onToggleOpen={() => setIsDiscoveryOpen(false)}
-        />
-      )}
       <WelcomeModal />
     </main>
   );
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index f1b36ba..d1c380d 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -48,7 +48,7 @@ export default function Drawer({ shop, shops, onSelect, onClose, isOpen, onToggl
         <div
             className={`absolute top-20 left-0 h-[calc(100dvh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
         >
-            <Card className="h-full w-full bg-background/40 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0 transition-all duration-300">
+            <Card className="h-full w-full bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-r-xl p-0 border-0 transition-all duration-300">
                 {shop ? (
                     // Details View
                     // Details View
diff --git a/src/components/LocateControl.tsx b/src/components/LocateControl.tsx
index 9c0be1b..51fbfd9 100644
--- a/src/components/LocateControl.tsx
+++ b/src/components/LocateControl.tsx
@@ -72,7 +72,7 @@ export function LocateControl() {
             size="icon"
             onClick={handleLocate}
             disabled={loading}
-            className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
+            className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
         >
             <Locate className={`h-5 w-5 ${loading ? 'animate-pulse' : ''}`} />
             <span className="sr-only">Locate me</span>
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 86af300..cf73a14 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MapContainer, TileLayer, Marker, useMap } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Tooltip, useMap } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import { useState, useEffect } from 'react';
@@ -140,7 +140,13 @@ const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
                     eventHandlers={{
                         click: () => onShopSelect(shop),
                     }}
-                />
+                >
+                    <Tooltip direction="top" offset={[0, -20]} opacity={0.9}>
+                        <div className="font-serif font-semibold text-sm">
+                            {shop.name}
+                        </div>
+                    </Tooltip>
+                </Marker>
             ))}
         </MapContainer>
     );
diff --git a/src/components/MapStyleControl.tsx b/src/components/MapStyleControl.tsx
index 7dcad32..11e7820 100644
--- a/src/components/MapStyleControl.tsx
+++ b/src/components/MapStyleControl.tsx
@@ -19,7 +19,7 @@ export function MapStyleControl({ currentStyle, onStyleChange }: MapStyleControl
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground">
+                <Button variant="outline" size="icon" className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground">
                     <Layers className="h-5 w-5" />
                     <span className="sr-only">Change map style</span>
                 </Button>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b3797e9..0c20025 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -41,7 +41,7 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
   return (
     <>
       <div className="absolute top-4 left-4 right-4 z-[1000] flex justify-center pointer-events-none">
-        <div className="bg-background/60 backdrop-blur-2xl border border-border/50 shadow-2xl rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
+        <div className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border border-border/50 rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
           <div className="flex items-center gap-2 relative">
             {/* Pulsing indicator ring - only during onboarding */}
             {isOnboarding && showTooltip && (
diff --git a/src/components/ZoomControls.tsx b/src/components/ZoomControls.tsx
index 2e7930c..953816e 100644
--- a/src/components/ZoomControls.tsx
+++ b/src/components/ZoomControls.tsx
@@ -13,7 +13,7 @@ export function ZoomControls() {
                 variant="outline"
                 size="icon"
                 onClick={() => map.zoomIn()}
-                className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
+                className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground hover:bg-background/70 dark:hover:bg-background/75"
             >
                 <Plus className="h-5 w-5" />
                 <span className="sr-only">Zoom in</span>
@@ -22,7 +22,7 @@ export function ZoomControls() {
                 variant="outline"
                 size="icon"
                 onClick={() => map.zoomOut()}
-                className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
+                className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground hover:bg-background/70 dark:hover:bg-background/75"
             >
                 <Minus className="h-5 w-5" />
                 <span className="sr-only">Zoom out</span>
@@ -31,7 +31,7 @@ export function ZoomControls() {
                 variant="outline"
                 size="icon"
                 onClick={() => map.setView([40.9645, -76.8845], 15)}
-                className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
+                className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground hover:bg-background/70 dark:hover:bg-background/75"
             >
                 <Home className="h-5 w-5" />
                 <span className="sr-only">Reset view</span>