feat: Add tooltip component and refactor Navbar placement to enhance map loading and mobile discovery panel behavior.

src/app/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import MapLoader from "~/components/MapLoader";
 import Drawer from "~/components/Drawer";
+import Navbar from "~/components/Navbar";
 import { COFFEE_SHOPS } from "~/lib/data";
 
 import { WelcomeModal } from "~/components/WelcomeModal";
@@ -10,9 +11,23 @@ import { WelcomeModal } from "~/components/WelcomeModal";
 export default function HomePage() {
   const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
   const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+
+  useEffect(() => {
+    // Hide discovery panel on mobile initially
+    const isMobile = window.innerWidth < 640; // sm breakpoint
+    setIsDiscoveryOpen(!isMobile);
+
+    // Mark map as loaded after a short delay
+    const timer = setTimeout(() => setIsMapLoaded(true), 500);
+    return () => clearTimeout(timer);
+  }, []);
 
   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)} />
+
       {/* Map Background */}
       <div className="absolute inset-0 z-0">
         <MapLoader
@@ -22,19 +37,19 @@ export default function HomePage() {
             setIsDiscoveryOpen(true);
           }}
           selectedShop={selectedShop}
-          isDiscoveryOpen={isDiscoveryOpen}
-          onToggleDiscovery={() => setIsDiscoveryOpen(!isDiscoveryOpen)}
         />
       </div>
 
-      {/* Right Drawer */}
-      <Drawer
-        shop={selectedShop}
-        shops={COFFEE_SHOPS}
-        onSelect={setSelectedShop}
-        onClose={() => setSelectedShop(null)}
-        isOpen={isDiscoveryOpen}
-      />
+      {/* Right Drawer - only show after map loads */}
+      {isMapLoaded && (
+        <Drawer
+          shop={selectedShop}
+          shops={COFFEE_SHOPS}
+          onSelect={setSelectedShop}
+          onClose={() => setSelectedShop(null)}
+          isOpen={isDiscoveryOpen}
+        />
+      )}
       <WelcomeModal />
     </main>
   );

src/components/Map.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { MapContainer, TileLayer, Marker, useMap } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import { useState, useEffect } from 'react';
 import { useTheme } from "next-themes";
-import Navbar from "./Navbar";
 import { MapStyleControl } from "./MapStyleControl";
 import { LocateControl } from './LocateControl';
 import { ZoomControls } from "./ZoomControls";
@@ -26,8 +25,6 @@ interface MapProps {
     shops: CoffeeShop[];
     onShopSelect: (shop: CoffeeShop) => void;
     selectedShop: CoffeeShop | null;
-    isDiscoveryOpen: boolean;
-    onToggleDiscovery: () => void;
 }
 
 const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) => {
@@ -45,7 +42,7 @@ const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) =>
     return null;
 };
 
-const Map = ({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapProps) => {
+const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
     useEffect(() => {
         // Fix for Leaflet default icon not found
         // @ts-expect-error Fix for Leaflet default icon not found
@@ -125,7 +122,6 @@ const Map = ({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDisco
             zoomControl={false}
             attributionControl={false}
         >
-            <Navbar isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />
             <MapController selectedShop={selectedShop} />
             <div className="absolute bottom-8 right-4 z-[1000] flex flex-col gap-2 items-end">
                 <LocateControl />

src/components/MapLoader.tsx

@@ -3,7 +3,7 @@
 import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { Skeleton } from "~/components/ui/skeleton";
-import { Coffee } from "lucide-react";
+import { Coffee, Loader2 } from "lucide-react";
 
 interface CoffeeShop {
     id: number;
@@ -21,11 +21,9 @@ interface MapLoaderProps {
     shops: CoffeeShop[];
     onShopSelect: (shop: CoffeeShop) => void;
     selectedShop: CoffeeShop | null;
-    isDiscoveryOpen: boolean;
-    onToggleDiscovery: () => void;
 }
 
-export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapLoaderProps) {
+export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
     const [isLoading, setIsLoading] = useState(true);
 
     const Map = dynamic(() => import("./Map"), {
@@ -33,8 +31,9 @@ export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscove
         loading: () => (
             <div className="w-full h-full relative bg-background">
                 <Skeleton className="w-full h-full absolute inset-0" />
-                <div className="absolute inset-0 flex items-center justify-center">
-                    <Coffee className="h-16 w-16 text-muted-foreground/50 animate-pulse" />
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
+                    <Coffee className="h-16 w-16 text-muted-foreground/50" />
+                    <Loader2 className="h-8 w-8 text-primary animate-spin" />
                 </div>
             </div>
         ),
@@ -46,5 +45,5 @@ export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscove
         return () => clearTimeout(timer);
     }, []);
 
-    return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />;
+    return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} />;
 }

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 import { Coffee, PanelLeft, X } from "lucide-react";
 import { Button } from "~/components/ui/button";
-import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+import { useState, useEffect } from "react";
 
 interface NavbarProps {
   isDiscoveryOpen: boolean;
@@ -9,26 +10,58 @@ interface NavbarProps {
 
 export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarProps) {
   const [showAbout, setShowAbout] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
 
   const handleHeaderClick = () => {
     const event = new CustomEvent('show-welcome-modal');
     window.dispatchEvent(event);
   };
 
+  useEffect(() => {
+    // Show tooltip hint on mobile for first-time users
+    const hasSeenHint = localStorage.getItem('discovery-panel-hint-seen');
+    const isMobile = window.innerWidth < 640;
+
+    if (!hasSeenHint && isMobile) {
+      const timer = setTimeout(() => {
+        setShowTooltip(true);
+        // Auto-hide after 5 seconds
+        setTimeout(() => {
+          setShowTooltip(false);
+          localStorage.setItem('discovery-panel-hint-seen', 'true');
+        }, 5000);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
   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="flex items-center gap-2">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onToggleDiscovery}
-              className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`}
-            >
-              <PanelLeft className="h-5 w-5" />
-              <span className="sr-only">Toggle Panel</span>
-            </Button>
+            <TooltipProvider>
+              <Tooltip open={showTooltip} onOpenChange={setShowTooltip}>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      onToggleDiscovery();
+                      setShowTooltip(false);
+                      localStorage.setItem('discovery-panel-hint-seen', 'true');
+                    }}
+                    className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`}
+                  >
+                    <PanelLeft className="h-5 w-5" />
+                    <span className="sr-only">Toggle Panel</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="bg-primary text-primary-foreground font-semibold">
+                  <p>Discover Coffee Shops</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
 
           <div

src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }