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,24 +21,22 @@ 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 />
+    <main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
+      <Navbar />
 
-        {/* Map Background */}
-        <div className="absolute inset-0 z-0">
-          <MapLoader
-            shops={COFFEE_SHOPS}
-            onShopSelect={(shop) => setSelectedShop(shop)}
-          />
-        </div>
-
-        {/* Right Drawer */}
-        <Drawer
-          shop={selectedShop}
-          onClose={() => setSelectedShop(null)}
+      {/* Map Background */}
+      <div className="absolute inset-0 z-0">
+        <MapLoader
+          shops={COFFEE_SHOPS}
+          onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => setSelectedShop(shop)}
         />
-      </main>
-    </HydrateClient>
+      </div>
+
+      {/* Right Drawer */}
+      <Drawer
+        shop={selectedShop}
+        onClose={() => setSelectedShop(null)}
+      />
+    </main>
   );
 }

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() {