added sighting feed

src/hooks/useHiDPICanvas.ts

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+
+export function useHiDPICanvas(
+  imgRef: React.RefObject<HTMLImageElement | null>,
+  canvasRef: React.RefObject<HTMLCanvasElement | null>
+) {
+  const sync = () => {
+    const img = imgRef.current,
+      cvs = canvasRef.current;
+    if (!img || !cvs) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const w = img.clientWidth || img.naturalWidth || 0;
+    const h = img.clientHeight || img.naturalHeight || 0;
+
+    // CSS size
+    cvs.style.width = `${w}px`;
+    cvs.style.height = `${h}px`;
+
+    // backing store size (scaled for HiDPI)
+    const W = Math.max(1, Math.round(w * dpr));
+    const H = Math.max(1, Math.round(h * dpr));
+    if (cvs.width !== W || cvs.height !== H) {
+      cvs.width = W;
+      cvs.height = H;
+      const ctx = cvs.getContext("2d");
+      if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // draw in CSS px
+    }
+  };
+
+  useEffect(() => {
+    const ro = new ResizeObserver(sync); // reacts to image size changes
+    if (imgRef.current) ro.observe(imgRef.current);
+    const onResize = () => sync();
+    window.addEventListener("resize", onResize);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", onResize);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { sync };
+}