added sounds, updated nped config and tweaks + code quality improvements

src/components/SightingsWidget/SightingWidget.tsx

@@ -13,6 +13,7 @@ import HotListImg from "/Hotlist_Hit.svg";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
+import popup from "../../assets/sounds/ui/popup_open.mp3";
 import { useSound } from "react-sounds";
 
 function useNow(tickMs = 1000) {
@@ -38,7 +39,7 @@ export default function SightingHistoryWidget({
   title,
 }: SightingHistoryProps) {
   useNow(1000);
-  const { play } = useSound("notification/notification");
+  const { play } = useSound(popup);
   const {
     sightings,
     setSelectedSighting,
@@ -72,14 +73,13 @@ export default function SightingHistoryWidget({
       const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
       if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
-        play();
         dispatch({
           type: "ADD",
           payload: obj,
         });
       }
     });
-  }, [rows, dispatch, play]);
+  }, [dispatch, rows]);
 
   useEffect(() => {
     if (hasAutoOpenedRef.current) return;

src/components/SightingsWidget/SightingWidgetDetails.tsx

@@ -1,5 +1,4 @@
 import type { SightingType } from "../../types/types";
-import { useState } from "react";
 
 type SightingWidgetDetailsProps = {
   effectiveSelected: SightingType | null;
@@ -8,85 +7,38 @@ type SightingWidgetDetailsProps = {
 const SightingWidgetDetails = ({
   effectiveSelected,
 }: SightingWidgetDetailsProps) => {
-  const [advancedDetailsEnabled, setAdvancedDetailsEnabled] = useState(false);
-
-  const handleDetailsClick = () =>
-    setAdvancedDetailsEnabled(!advancedDetailsEnabled);
-
   return (
     <>
       <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
-        <div>
-          VRM:{" "}
-          <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
-        </div>
-
-        <div>
-          Make:{" "}
-          <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
-        </div>
-        <div>
-          Model:{" "}
-          <span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
-        </div>
-        <div>
-          Colour:{" "}
-          <span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
-        </div>
-        <div className="col-span-4">
-          Timestamp:{" "}
-          <span className="opacity-90">
-            {effectiveSelected?.timeStamp ?? "—"}
-          </span>
-        </div>
-        {advancedDetailsEnabled && (
-          <>
-            <div>
-              Country:{" "}
-              <span className="opacity-90">
-                {effectiveSelected?.countryCode ?? "—"}
-              </span>
-            </div>
-            <div>
-              Seen:{" "}
-              <span className="opacity-90">
-                {effectiveSelected?.seenCount ?? "—"}
-              </span>
-            </div>
-            <div>
-              Category:{" "}
-              <span className="opacity-90">
-                {effectiveSelected?.category ?? "—"}
-              </span>
-            </div>
-            <div>
-              Char Ht:{" "}
-              <span className="opacity-90">
-                {effectiveSelected?.charHeight ?? "—"}
-              </span>
-            </div>
-            <div>
-              Plate Size:{" "}
-              <span className="opacity-90">
-                {effectiveSelected?.plateSize ?? "—"}
-              </span>
-            </div>
-            <div>
-              Overview Size:{" "}
-              <span className="opacity-90">
-                {effectiveSelected?.overviewSize ?? "—"}
-              </span>
-            </div>
-          </>
+        {effectiveSelected?.vrm && (
+          <div>
+            VRM:{" "}
+            <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
+          </div>
+        )}
+
+        {effectiveSelected?.make !== "" && (
+          <div>
+            Make:{" "}
+            <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
+          </div>
+        )}
+        {effectiveSelected?.model.trim() !== "" && (
+          <div>
+            Model:{" "}
+            <span className="opacity-90">
+              {effectiveSelected?.model ?? "—"}
+            </span>
+          </div>
+        )}
+        {effectiveSelected?.color !== "" && (
+          <div>
+            Colour:{" "}
+            <span className="opacity-90">
+              {effectiveSelected?.color ?? "—"}
+            </span>
+          </div>
         )}
-      </div>
-      <div className="col-span-half">
-        <p
-          onClick={handleDetailsClick}
-          className="underline text-blue-300 hover:cursor-pointer"
-        >
-          Sighting Details
-        </p>
       </div>
     </>
   );