- {/* Navbar - always visible */}
- setIsDiscoveryOpen(!isDiscoveryOpen)} />
+ {/* Navbar - always visible */}
+ setIsDiscoveryOpen(!isDiscoveryOpen)} />
- {/* Right Drawer - only render after mount to prevent hydration mismatch */}
- {mounted && (
- setSelectedShop(null)}
- isOpen={isDiscoveryOpen}
- onToggleOpen={() => setIsDiscoveryOpen(false)}
- />
- )}
-
+ {/* Right Drawer - only render after mount to prevent hydration mismatch */}
+ {mounted && (
+
@@ -48,6 +45,7 @@ export default function HomePage() {
setSelectedShop(shop);
}}
selectedShop={selectedShop}
+ isDiscoveryOpen={isDiscoveryOpen}
/>
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index d1c380d..35a2254 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -1,4 +1,4 @@
-import { X, MapPin, Globe, Phone, Coffee, ExternalLink, Search, ChevronRight } from "lucide-react";
+import { X, MapPin, Globe, Phone, Coffee, ExternalLink, Search, ChevronRight, ChevronLeft } from "lucide-react";
import { Card } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { ScrollArea } from "~/components/ui/scroll-area";
@@ -31,10 +31,13 @@ interface DrawerProps {
export default function Drawer({ shop, shops, onSelect, onClose, isOpen, onToggleOpen }: DrawerProps) {
const [searchQuery, setSearchQuery] = useState("");
const [imageLoading, setImageLoading] = useState(true);
+ const [activeShop, setActiveShop] = useState
-
- {shop ? (
- // Details View
- // Details View
-
+
+ {/* Details View */}
+
+
-
+ {activeShop && (
+
+
+ {/* List View */}
+
+
+ {/* Header Image - Now part of scroll area */}
+
+
+ )}
+
+
+
+
+
+
+ {imageLoading && (
+
+
+ {/* Content - Overlaps image slightly or just follows */}
+
+
+ )}
+
+ 
setImageLoading(false)}
+ style={{
+ maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
+ WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
+ }}
+ />
+
+
+
+ {activeShop.name}
+ +
+
+
+
+
+ {activeShop.phone && (
+
+
+ )}
+ {activeShop.website && (
+
+
+ )}
+
+
+
+
+
+
+ About
++ {activeShop.description} +
+
+
);
diff --git a/src/components/LocateControl.tsx b/src/components/LocateControl.tsx
index 51fbfd9..81e21eb 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/65 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-xl text-foreground"
>
-
-
- {/* Header Image - Now part of scroll area */}
-
-
- ) : (
- // List View
-
- {imageLoading && (
-
-
- {/* Content - Overlaps image slightly or just follows */}
-
-
- )}
-
- 
setImageLoading(false)}
- style={{
- maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
- WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
- }}
- />
-
-
-
- {shop.name}
- -
-
-
-
-
- {shop.phone && (
-
-
- )}
- {shop.website && (
-
-
- )}
-
-
-
-
-
-
- About
-- {shop.description} -
-
-
+
+
-
-
-
- )}
+ Discover Coffee
-
-
+ Discover Coffee
+
+
-
- {filteredShops.map((s) => (
-
- 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"
- >
-
- ))}
- {filteredShops.length === 0 && (
-
- 
-
-
-
- {s.name}
-{s.address}
-
-
- )}
- No shops found matching "{searchQuery}"
-
+ {filteredShops.map((s) => (
+
+ 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"
+ >
+
+ ))}
+ {filteredShops.length === 0 && (
+
+
+
+
+
+ {s.name}
+{s.address}
+
+
+ )}
+ No shops found matching "{searchQuery}"
+
{shop.name}
diff --git a/src/components/MapLoader.tsx b/src/components/MapLoader.tsx
index 0b3f08d..7559d43 100644
--- a/src/components/MapLoader.tsx
+++ b/src/components/MapLoader.tsx
@@ -20,6 +20,7 @@ interface MapLoaderProps {
shops: CoffeeShop[];
onShopSelect: (shop: CoffeeShop) => void;
selectedShop: CoffeeShop | null;
+ isDiscoveryOpen: boolean;
}
// Move dynamic import outside component to prevent re-imports
@@ -36,6 +37,6 @@ const Map = dynamic(() => import("./Map"), {
),
});
-export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
- return ;
+export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen }: MapLoaderProps) {
+ return ;
}
diff --git a/src/components/MapStyleControl.tsx b/src/components/MapStyleControl.tsx
index 11e7820..e563a42 100644
--- a/src/components/MapStyleControl.tsx
+++ b/src/components/MapStyleControl.tsx
@@ -19,7 +19,7 @@ export function MapStyleControl({ currentStyle, onStyleChange }: MapStyleControl
return (