code fixes and adding modal

src/components/SightingOverview/SightingOverview.tsx

@@ -5,15 +5,15 @@ import { useOverviewOverlay } from "../../hooks/useOverviewOverlay";
 import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
 import NavigationArrow from "../UI/NavigationArrow";
-import { useSwipeable } from "react-swipeable";
-import { useNavigate } from "react-router";
+// import { useSwipeable } from "react-swipeable";
+// import { useNavigate } from "react-router";
 
 const SightingOverview = () => {
-  const navigate = useNavigate();
-  const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/front-camera-settings"),
-    trackMouse: true,
-  });
+  // const navigate = useNavigate();
+  // const handlers = useSwipeable({
+  //   onSwipedRight: () => navigate("/front-camera-settings"),
+  //   trackMouse: true,
+  // });
   const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);
 
   const imgRef = useRef<HTMLImageElement | null>(null);
@@ -23,51 +23,51 @@ const SightingOverview = () => {
     setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
   }, []);
 
-  const { effectiveSelected, side, mostRecent, noSighting, isPending } =
-    useSightingFeedContext();
+  const { effectiveSelected, side, mostRecent } = useSightingFeedContext();
 
   useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (noSighting || isPending) return <p>loading</p>;
+  // if (noSighting || isPending) return <p>loading</p>;
+
   return (
-    <div className="mt-2 grid gap-3">
-      <div className="inline-block w-[90%] mx-auto" {...handlers}>
+    <div className="flex flex-col">
+      <div className="grid gap-3">
         <NavigationArrow side={side} />
-        <div className="relative aspect-[1280/800]">
-          <img
-            ref={imgRef}
-            onLoad={() => {
-              sync();
-              setOverlayMode((m) => m);
-            }}
-            src={mostRecent?.overviewUrl || BLANK_IMG}
-            alt="overview"
-            className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10"
-            onClick={onOverviewClick}
-            style={{
-              display: mostRecent?.overviewUrl ? "block" : "none",
-            }}
-          />
-          <canvas
-            ref={canvasRef}
-            className="absolute inset-0 w-full h-full object-contain z-20 pointer-events-none"
-          />
+        <div className="inline-block w-full mx-auto">
+          <div className="relative aspect-[1280/800]">
+            <img
+              ref={imgRef}
+              onLoad={() => {
+                sync();
+                setOverlayMode((m) => m);
+              }}
+              src={mostRecent?.overviewUrl || BLANK_IMG}
+              alt="overview"
+              className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10 "
+              onClick={onOverviewClick}
+              style={{
+                display: mostRecent?.overviewUrl ? "block" : "none",
+              }}
+            />
+            <canvas
+              ref={canvasRef}
+              className="absolute inset-0 w-full h-full object-contain z-20 pointer-events-none "
+            />
+          </div>
+        </div>
+        <div className="text-xs opacity-80">
+          Overlay:{" "}
+          {overlayMode === 0
+            ? "Off"
+            : overlayMode === 1
+            ? "Plate box"
+            : "Track + box"}{" "}
+          (click image to toggle)
         </div>
       </div>
-
       <SightingWidgetDetails effectiveSelected={effectiveSelected} />
-
-      <div className="text-xs opacity-80">
-        Overlay:{" "}
-        {overlayMode === 0
-          ? "Off"
-          : overlayMode === 1
-          ? "Plate box"
-          : "Track + box"}{" "}
-        (click image to toggle)
-      </div>
     </div>
   );
 };