refactor: Add type definitions for map loader and remove unused imports and HydrateClient.

src/app/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { HydrateClient } from "~/trpc/server";
 import MapLoader from "~/components/MapLoader";
 import Navbar from "~/components/Navbar";
 import Drawer from "~/components/Drawer";
@@ -22,7 +21,6 @@ export default function Home() {
   const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
 
   return (
-    <HydrateClient>
     <main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
       <Navbar />
 
@@ -30,7 +28,7 @@ export default function Home() {
       <div className="absolute inset-0 z-0">
         <MapLoader
           shops={COFFEE_SHOPS}
-            onShopSelect={(shop) => setSelectedShop(shop)}
+          onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => setSelectedShop(shop)}
         />
       </div>
 
@@ -40,6 +38,5 @@ export default function Home() {
         onClose={() => setSelectedShop(null)}
       />
     </main>
-    </HydrateClient>
   );
 }

src/components/Map.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import { useEffect } from 'react';

src/components/MapLoader.tsx

@@ -7,6 +7,19 @@ const Map = dynamic(() => import("./Map"), {
     loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
 });
 
-export default function MapLoader({ shops, onShopSelect }: { shops: any[], onShopSelect: (shop: any) => void }) {
+interface CoffeeShop {
+    id: number;
+    name: string;
+    description: string;
+    lat: number;
+    lng: number;
+}
+
+interface MapLoaderProps {
+    shops: CoffeeShop[];
+    onShopSelect: (shop: CoffeeShop) => void;
+}
+
+export default function MapLoader({ shops, onShopSelect }: MapLoaderProps) {
     return <Map shops={shops} onShopSelect={onShopSelect} />;
 }

src/components/Navbar.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { Coffee } from "lucide-react";
 
 export default function Navbar() {