feat: Implement user location display with accuracy circle and marker using Leaflet events.

src/components/LocateControl.tsx

@@ -1,25 +1,71 @@
-"use client";
-
 import { Locate } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { useMap } from "react-leaflet";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
+import L from "leaflet";
 
 export function LocateControl() {
     const map = useMap();
     const [loading, setLoading] = useState(false);
+    const markerRef = useRef<L.CircleMarker | null>(null);
+    const circleRef = useRef<L.Circle | null>(null);
 
     const handleLocate = () => {
         setLoading(true);
-        map.locate().on("locationfound", function (e) {
+        map.locate({ setView: false, enableHighAccuracy: true });
-            map.flyTo(e.latlng, 16);
-            setLoading(false);
-        }).on("locationerror", function () {
-            setLoading(false);
-            alert("Could not access your location");
-        });
     };
 
+    useEffect(() => {
+        const onLocationFound = (e: L.LocationEvent) => {
+            setLoading(false);
+
+            // Remove existing markers
+            if (markerRef.current) {
+                map.removeLayer(markerRef.current);
+            }
+            if (circleRef.current) {
+                map.removeLayer(circleRef.current);
+            }
+
+            // Create accuracy circle
+            const radius = e.accuracy / 2;
+            circleRef.current = L.circle(e.latlng, {
+                radius: radius,
+                color: '#4285F4',
+                fillColor: '#4285F4',
+                fillOpacity: 0.15,
+                weight: 1,
+                opacity: 0.5
+            }).addTo(map);
+
+            // Create location dot (pulsing effect via CSS class if we wanted, but standard circleMarker for now)
+            markerRef.current = L.circleMarker(e.latlng, {
+                radius: 8,
+                fillColor: '#4285F4',
+                color: '#ffffff',
+                weight: 2,
+                opacity: 1,
+                fillOpacity: 1
+            }).addTo(map);
+
+            map.flyTo(e.latlng, 16);
+        };
+
+        const onLocationError = (e: L.ErrorEvent) => {
+            setLoading(false);
+            console.error("Location error:", e.message);
+            alert("Could not access your location");
+        };
+
+        map.on("locationfound", onLocationFound);
+        map.on("locationerror", onLocationError);
+
+        return () => {
+            map.off("locationfound", onLocationFound);
+            map.off("locationerror", onLocationError);
+        };
+    }, [map]);
+
     return (
         <Button
             variant="outline"