Add CameraSettings context and provider; integrate into AppProviders and VideoFeed

src/features/dashboard/components/platePatch/NumberPlate.tsx

@@ -41,7 +41,7 @@ const NumberPlate = ({ vrm, motion, size }: NumberPlateProps) => {
   return (
     <div
       className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
-        text-black px-6 py-2 text-monospace font-mono flex items-center justify-center
+        text-black px-6 py-2 text-monospace flex items-center justify-center
         ${motion ? "bg-yellow-400" : "bg-white"}`}
     >
       <div>

src/features/dashboard/components/sightingStack/SightingItem.tsx

@@ -10,10 +10,10 @@ const SightingItem = ({ sighting }: SightingItemProps) => {
   return (
     <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">
       <div>
-        <div>Ref: {sighting.ref}</div>
-        <div>vrm: {sighting.vrm}</div>
+        <div className="text-xl">
+          VRM: <span className="font-semibold">{sighting.vrm}</span>
+        </div>
       </div>
-
       <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
     </div>
   );

src/features/dashboard/components/sightingStack/SightingStack.tsx

@@ -8,11 +8,13 @@ type SightingStackProps = {
 };
 const SightingStack = ({ sightings }: SightingStackProps) => {
   return (
-    <Card className="p-4 w-full h-full md:h-[65%]">
-      <CardHeader title="Sightings" />
-      {sightings.map((sighting) => (
-        <SightingItem key={sighting.ref} sighting={sighting} />
-      ))}
+    <Card className="p-4 w-full h-full ">
+      <CardHeader title="Live Sightings" />
+      <div className="md:h-[65%]">
+        {sightings.map((sighting) => (
+          <SightingItem key={sighting.ref} sighting={sighting} />
+        ))}
+      </div>
     </Card>
   );
 };

src/features/dashboard/components/videoFeed/VideoButton.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { Text, Group, Rect } from "react-konva";
+
+type VideoButtonProps = {
+  x?: number;
+  y?: number;
+  onClick?: () => void;
+  text?: string;
+};
+
+const VideoButton = ({ x, y, onClick, text }: VideoButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <Group
+      x={x}
+      y={y}
+      onClick={onClick}
+      onMouseEnter={(e) => {
+        setIsHovered(true);
+        const container = e.target.getStage()?.container();
+        if (container) container.style.cursor = "pointer";
+      }}
+      onMouseLeave={(e) => {
+        setIsHovered(false);
+        const container = e.target.getStage()?.container();
+        if (container) container.style.cursor = "default";
+      }}
+    >
+      <Rect
+        width={100}
+        height={35}
+        fill={isHovered ? "#2563eb" : "#3b82f6"}
+        cornerRadius={8}
+        shadowBlur={isHovered ? 10 : 5}
+        shadowOpacity={0.3}
+      />
+      <Text text={text} fontSize={14} fill="white" width={100} height={35} align="center" verticalAlign="middle" />
+    </Group>
+  );
+};
+
+export default VideoButton;

src/features/dashboard/components/videoFeed/VideoFeed.tsx

@@ -2,6 +2,7 @@ import { Stage, Layer, Image, Rect } from "react-konva";
 import type { SightingType } from "../../../../utils/types";
 import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
 import { useEffect, useState } from "react";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
 
 type VideoFeedProps = {
   mostRecentSighting: SightingType;
@@ -9,13 +10,16 @@ type VideoFeedProps = {
 };
 
 const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
+  const { state: cameraSettings, dispatch } = useCameraSettingsContext();
+
+  const mode = cameraSettings.mode;
   const [size, setSize] = useState<{ width: number; height: number }>({ width: 1280, height: 960 });
-  const [mode, setMode] = useState<number>(0);
+
   const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);
 
   const handleModeChange = (newMode: number) => {
-    if (newMode > 2) setMode(0);
-    else setMode(newMode);
+    if (newMode > 2) dispatch({ type: "SET_MODE", payload: 0 });
+    else dispatch({ type: "SET_MODE", payload: newMode });
   };
 
   useEffect(() => {