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

bun.lock

@@ -10,6 +10,7 @@
         "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@t3-oss/env-nextjs": "^0.12.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -255,6 +256,8 @@
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
+
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
@@ -269,6 +272,8 @@
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
 
+    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
+
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
     "@react-leaflet/core": ["@react-leaflet/core@3.0.0", "", { "peerDependencies": { "leaflet": "^1.9.0", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ=="],
@@ -995,6 +1000,8 @@
 
     "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
+    "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.7.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.7.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA=="],

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@t3-oss/env-nextjs": "^0.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

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 */}
+      {/* Right Drawer - only show after map loads */}
-      <Drawer
+      {isMapLoaded && (
-        shop={selectedShop}
+        <Drawer
-        shops={COFFEE_SHOPS}
+          shop={selectedShop}
-        onSelect={setSelectedShop}
+          shops={COFFEE_SHOPS}
-        onClose={() => setSelectedShop(null)}
+          onSelect={setSelectedShop}
-        isOpen={isDiscoveryOpen}
+          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">
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
-                    <Coffee className="h-16 w-16 text-muted-foreground/50 animate-pulse" />
+                    <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
+            <TooltipProvider>
-              variant="ghost"
+              <Tooltip open={showTooltip} onOpenChange={setShowTooltip}>
-              size="icon"
+                <TooltipTrigger asChild>
-              onClick={onToggleDiscovery}
+                  <Button
-              className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`}
+                    variant="ghost"
-            >
+                    size="icon"
-              <PanelLeft className="h-5 w-5" />
+                    onClick={() => {
-              <span className="sr-only">Toggle Panel</span>
+                      onToggleDiscovery();
-            </Button>
+                      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 }