diff --git a/bun.lock b/bun.lock index 19408ab..efb4efa 100644 --- a/bun.lock +++ b/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=="], diff --git a/package.json b/package.json index c547f60..dfddf17 100644 --- a/package.json +++ b/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", diff --git a/src/app/page.tsx b/src/app/page.tsx index d1c504a..bd86dd1 100644 --- a/src/app/page.tsx +++ b/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(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 (
+ {/* Navbar - always visible */} + setIsDiscoveryOpen(!isDiscoveryOpen)} /> + {/* Map Background */}
setIsDiscoveryOpen(!isDiscoveryOpen)} />
- {/* Right Drawer */} - setSelectedShop(null)} - isOpen={isDiscoveryOpen} - /> + {/* Right Drawer - only show after map loads */} + {isMapLoaded && ( + setSelectedShop(null)} + isOpen={isDiscoveryOpen} + /> + )}
); diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 4df1535..06a2e09 100644 --- a/src/components/Map.tsx +++ b/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} > -
diff --git a/src/components/MapLoader.tsx b/src/components/MapLoader.tsx index be9faa1..4022f43 100644 --- a/src/components/MapLoader.tsx +++ b/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: () => (
-
- +
+ +
), @@ -46,5 +45,5 @@ export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscove return () => clearTimeout(timer); }, []); - return ; + return ; } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 57e8a2e..fda9f13 100644 --- a/src/components/Navbar.tsx +++ b/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 ( <>
- + + + + + + +

Discover Coffee Shops

+ + +
) { + return ( + + ) +} + +function Tooltip({ + ...props +}: React.ComponentProps) { + return ( + + + + ) +} + +function TooltipTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function TooltipContent({ + className, + sideOffset = 0, + children, + ...props +}: React.ComponentProps) { + return ( + + + {children} + + + + ) +} + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }