feat: Introduce a toggleable discovery drawer with shop search and a new 'locate me' map control.

src/app/page.tsx

@@ -9,6 +9,7 @@ import { WelcomeModal } from "~/components/WelcomeModal";
 
 export default function HomePage() {
   const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
+  const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
 
   return (
     <main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
@@ -16,15 +17,23 @@ export default function HomePage() {
       <div className="absolute inset-0 z-0">
         <MapLoader
           shops={COFFEE_SHOPS}
-          onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => setSelectedShop(shop)}
+          onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => {
+            setSelectedShop(shop);
+            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}
       />
       <WelcomeModal />
     </main>

src/components/Drawer.tsx

@@ -1,13 +1,13 @@
-import { X, MapPin, Globe, Phone, Coffee, ExternalLink } from "lucide-react";
+import { X, MapPin, Globe, Phone, Coffee, ExternalLink, Search, ChevronRight } from "lucide-react";
 import { Card } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { Separator } from "~/components/ui/separator";
 import { Skeleton } from "~/components/ui/skeleton";
+import { Input } from "~/components/ui/input";
 import { useState, useEffect } from "react";
 
-interface DrawerProps {
-    shop: {
+interface CoffeeShop {
     id: number;
     name: string;
     description: string;
@@ -17,11 +17,18 @@ interface DrawerProps {
     website: string;
     lat: number;
     lng: number;
-    } | null;
-    onClose: () => void;
 }
 
-export default function Drawer({ shop, onClose }: DrawerProps) {
+interface DrawerProps {
+    shop: CoffeeShop | null;
+    shops: CoffeeShop[];
+    onSelect: (shop: CoffeeShop) => void;
+    onClose: () => void;
+    isOpen: boolean;
+}
+
+export default function Drawer({ shop, shops, onSelect, onClose, isOpen }: DrawerProps) {
+    const [searchQuery, setSearchQuery] = useState("");
     const [imageLoading, setImageLoading] = useState(true);
 
     // Reset loading state when shop changes
@@ -31,17 +38,32 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
         }
     }, [shop]);
 
-    if (!shop) return null;
+    const filteredShops = shops.filter(s =>
+        s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        s.description.toLowerCase().includes(searchQuery.toLowerCase())
+    );
 
     return (
         <div
-            className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 transform transition-transform duration-300 ease-in-out p-4 pointer-events-none ${shop ? "translate-x-0" : "-translate-x-full"
-                }`}
+            className={`absolute top-20 left-0 h-[calc(100vh-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'}`}
         >
-            {shop && (
-                <Card className="h-full w-full bg-background/60 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0">
-                    {/* Header Image */}
-                    <div className="h-56 relative flex-shrink-0 bg-muted/20">
+            <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">
+                {shop ? (
+                    // Details View
+                    // Details View
+                    <div className="h-full flex flex-col relative">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={onClose}
+                            className="absolute top-4 right-4 z-50 bg-background/20 hover:bg-background/40 text-foreground rounded-full h-8 w-8 backdrop-blur-md border border-border/50"
+                        >
+                            <X className="w-4 h-4" />
+                        </Button>
+
+                        <ScrollArea className="flex-1 min-h-0">
+                            {/* Header Image - Now part of scroll area */}
+                            <div className="h-64 relative w-full bg-muted/20">
                                 {imageLoading && (
                                     <div
                                         className="absolute inset-0 z-10 flex items-center justify-center"
@@ -66,21 +88,11 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
                                         }}
                                     />
                                 </div>
-
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            onClick={onClose}
-                            className="absolute top-4 right-4 bg-background/20 hover:bg-background/40 text-foreground rounded-full h-8 w-8 backdrop-blur-md border border-border/50"
-                        >
-                            <X className="w-4 h-4" />
-                        </Button>
                             </div>
 
-                    {/* Content */}
-                    <ScrollArea className="flex-1 -mt-12 relative z-10 min-h-0">
-                        <div className="p-8">
-                            <h2 className="text-3xl font-bold font-serif mb-4 text-primary leading-tight">{shop.name}</h2>
+                            {/* Content - Overlaps image slightly or just follows */}
+                            <div className="p-8 -mt-12 relative z-10">
+                                <h2 className="text-3xl font-bold font-serif mb-4 text-primary leading-tight drop-shadow-md">{shop.name}</h2>
 
                                 <div className="space-y-4 mb-8">
                                     <div className="flex items-start gap-3 text-muted-foreground font-serif text-sm">
@@ -129,8 +141,51 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
                                 </div>
                             </div>
                         </ScrollArea>
-                </Card>
+                    </div>
+                ) : (
+                    // List View
+                    <div className="flex flex-col h-full">
+                        <div className="p-4 border-b border-border/50 bg-background/40 backdrop-blur-md">
+                            <h2 className="text-xl font-bold font-serif mb-4 text-primary">Discover Coffee</h2>
+                            <div className="relative">
+                                <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+                                <Input
+                                    placeholder="Search shops..."
+                                    className="pl-9 bg-background/50 border-border/50 focus:bg-background transition-colors"
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                />
+                            </div>
+                        </div>
+                        <ScrollArea className="flex-1 min-h-0">
+                            <div className="p-4 space-y-3">
+                                {filteredShops.map((s) => (
+                                    <div
+                                        key={s.id}
+                                        onClick={() => onSelect(s)}
+                                        className="group flex items-center gap-4 p-3 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer border border-transparent hover:border-border/50"
+                                    >
+                                        <div className="h-16 w-16 rounded-md overflow-hidden flex-shrink-0 bg-muted relative">
+                                            <img src={s.image} alt={s.name} className="h-full w-full object-cover" />
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <h3 className="font-semibold font-serif text-foreground truncate group-hover:text-primary transition-colors">{s.name}</h3>
+                                            <p className="text-sm text-muted-foreground truncate">{s.address}</p>
+                                        </div>
+                                        <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
+                                    </div>
+                                ))}
+                                {filteredShops.length === 0 && (
+                                    <div className="text-center py-8 text-muted-foreground">
+                                        <Coffee className="h-12 w-12 mx-auto mb-3 opacity-20" />
+                                        <p>No shops found matching "{searchQuery}"</p>
+                                    </div>
                                 )}
                             </div>
+                        </ScrollArea>
+                    </div>
+                )}
+            </Card>
+        </div>
     );
 }

src/components/LocateControl.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Locate } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { useMap } from "react-leaflet";
+import { useState } from "react";
+
+export function LocateControl() {
+    const map = useMap();
+    const [loading, setLoading] = useState(false);
+
+    const handleLocate = () => {
+        setLoading(true);
+        map.locate().on("locationfound", function (e) {
+            map.flyTo(e.latlng, 16);
+            setLoading(false);
+        }).on("locationerror", function () {
+            setLoading(false);
+            alert("Could not access your location");
+        });
+    };
+
+    return (
+        <Button
+            variant="outline"
+            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"
+        >
+            <Locate className={`h-5 w-5 ${loading ? 'animate-pulse' : ''}`} />
+            <span className="sr-only">Locate me</span>
+        </Button>
+    );
+}

src/components/Map.tsx

@@ -7,6 +7,7 @@ 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";
 
 interface CoffeeShop {
@@ -25,6 +26,8 @@ interface MapProps {
     shops: CoffeeShop[];
     onShopSelect: (shop: CoffeeShop) => void;
     selectedShop: CoffeeShop | null;
+    isDiscoveryOpen: boolean;
+    onToggleDiscovery: () => void;
 }
 
 const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) => {
@@ -42,7 +45,7 @@ const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) =>
     return null;
 };
 
-const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
+const Map = ({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapProps) => {
     useEffect(() => {
         // Fix for Leaflet default icon not found
         // @ts-expect-error Fix for Leaflet default icon not found
@@ -122,9 +125,10 @@ const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
             zoomControl={false}
             attributionControl={false}
         >
-            <Navbar />
+            <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 />
                 <ZoomControls />
                 <MapStyleControl currentStyle={mapStyle} onStyleChange={handleStyleChange} />
             </div>

src/components/MapLoader.tsx

@@ -23,8 +23,10 @@ interface MapLoaderProps {
     shops: CoffeeShop[];
     onShopSelect: (shop: CoffeeShop) => void;
     selectedShop: CoffeeShop | null;
+    isDiscoveryOpen: boolean;
+    onToggleDiscovery: () => void;
 }
 
-export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
-    return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} />;
+export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapLoaderProps) {
+    return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />;
 }

src/components/Navbar.tsx

@@ -1,23 +1,50 @@
-import { Coffee, X } from "lucide-react";
+import { Coffee, PanelLeft, X } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { useState } from "react";
 
-export default function Navbar() {
+interface NavbarProps {
+  isDiscoveryOpen: boolean;
+  onToggleDiscovery: () => void;
+}
+
+export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarProps) {
   const [showAbout, setShowAbout] = useState(false);
 
+  const handleHeaderClick = () => {
+    const event = new CustomEvent('show-welcome-modal');
+    window.dispatchEvent(event);
+  };
+
   return (
     <>
-      <div className="absolute top-0 left-0 right-0 z-[1000] p-4 pointer-events-none">
-        <div className="flex flex-row items-center justify-between px-5 py-3 bg-background/60 backdrop-blur-2xl border border-border/50 rounded-lg shadow-2xl pointer-events-auto w-full">
-          <div
-            className="flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity"
-            onClick={() => window.dispatchEvent(new Event("show-welcome-modal"))}
+      <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'}`}
             >
-            <Coffee className="w-6 h-6 text-primary" />
-            <h1 className="text-xl font-bold text-foreground font-serif tracking-wide leading-none pt-0.5">
-              Lewisburg Coffee Map
-            </h1>
+              <PanelLeft className="h-5 w-5" />
+              <span className="sr-only">Toggle Panel</span>
+            </Button>
           </div>
+
+          <div
+            className="flex items-center gap-3 px-2 cursor-pointer group absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+            onClick={handleHeaderClick}
+          >
+            <div className="bg-primary/10 p-2 rounded-lg group-hover:bg-primary/20 transition-colors">
+              <Coffee className="h-6 w-6 text-primary" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold font-serif text-foreground leading-none">Lewisburg&nbsp;Coffee&nbsp;Map</h1>
+              <p className="text-xs text-muted-foreground font-serif mt-0.5">Find&nbsp;your&nbsp;perfect&nbsp;brew</p>
+            </div>
+          </div>
+
+          <div className="w-10" /> {/* Spacer to balance the toggle button */}
         </div>
       </div>
 

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }