Review fixes

Co-Authored-By: Dan Ditomaso <[email protected]>

packages/web/public/i18n/locales/en/common.json

@@ -66,7 +66,8 @@
     "year": { "one": "Year", "plural": "Years" },
     "snr": "SNR",
     "volt": { "one": "Volt", "plural": "Volts", "suffix": "V" },
-    "record": { "one": "Records", "plural": "Records" }
+    "record": { "one": "Records", "plural": "Records" },
+    "degree": { "one": "Degree", "plural": "Degrees", "suffix": "°" }
   },
   "security": {
     "0bit": "Empty",

packages/web/src/components/PageComponents/Map/Layers/NodesLayer.tsx

@@ -83,7 +83,7 @@ export const NodesLayer = ({
       : undefined;
 
     // Always render all node markers in the cluster
-    nodes.forEach((node, i) => {
+    for (const [i, node] of nodes.entries()) {
       const isHead = i === 0;
 
       rendered.push(
@@ -109,7 +109,7 @@ export const NodesLayer = ({
           }}
         />,
       );
-    });
+    }
 
     if (nodes.length > 1) {
       rendered.push(

packages/web/src/components/PageComponents/Map/Layers/SNRLayer.tsx

@@ -165,6 +165,21 @@ function makeFeature(
   };
 }
 
+function pushIfFeature(
+  a: number,
+  b: number,
+  aPos: LngLat,
+  bPos: LngLat,
+  snr: number,
+  curved: boolean,
+  features: Feature[],
+) {
+  const feat = makeFeature(a, b, aPos, bPos, snr, curved);
+  if (feat) {
+    features.push(feat);
+  }
+}
+
 function generateNeighborLines(
   neighborInfos: NeighborInfos[],
 ): FeatureCollection {
@@ -215,26 +230,15 @@ function generateNeighborLines(
 
     if (pair.ab && pair.ba) {
       // both directions → two arcs
-      const feat1 = makeFeature(pair.a, pair.b, aPos, bPos, pair.ab, true);
+      pushIfFeature(pair.a, pair.b, aPos, bPos, pair.ab, true, features);
-      const feat2 = makeFeature(pair.b, pair.a, bPos, aPos, pair.ba, true);
+      pushIfFeature(pair.b, pair.a, bPos, aPos, pair.ba, true, features);
-
+    } else {
-      if (feat1) {
+      // only one direction → straight
-        features.push(feat1);
+      if (pair.ab) {
-      }
+        pushIfFeature(pair.a, pair.b, aPos, bPos, pair.ab, false, features);
-      if (feat2) {
-        features.push(feat2);
-      }
-    } else if (pair.ab) {
-      // only a->b, straight
-      const feat = makeFeature(pair.a, pair.b, aPos, bPos, pair.ab, false);
-      if (feat) {
-        features.push(feat);
       }
-    } else if (pair.ba) {
+      if (pair.ba) {
-      // only b->a, straight
+        pushIfFeature(pair.b, pair.a, bPos, aPos, pair.ba, false, features);
-      const feat = makeFeature(pair.b, pair.a, bPos, aPos, pair.ba, false);
-      if (feat) {
-        features.push(feat);
       }
     }
   }

packages/web/src/components/PageComponents/Map/Layers/WaypointLayer.tsx

@@ -49,7 +49,7 @@ export const WaypointLayer = ({
     return rendered;
   }
 
-  waypoints.forEach((waypoint) => {
+  for (const waypoint of waypoints) {
     const [lng, lat] = toLngLat({
       latitudeI: waypoint.latitudeI,
       longitudeI: waypoint.longitudeI,
@@ -66,7 +66,7 @@ export const WaypointLayer = ({
         onClick={(_, e) => onMarkerClick(waypoint, e)}
       />,
     );
-  });
+  }
 
   if (popupState?.type === "waypoint") {
     const [lng, lat] = toLngLat({

packages/web/src/components/PageComponents/Map/Popups/WaypointDetail.tsx

@@ -13,13 +13,11 @@ import {
   ClockFadingIcon,
   ClockPlusIcon,
   CompassIcon,
-  //Edit3Icon,
   MapPinnedIcon,
   MoveHorizontalIcon,
   NavigationIcon,
   RotateCwIcon,
   UserLockIcon,
-  UserPenIcon,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -29,24 +27,7 @@ interface WaypointDetailProps {
   onEdit: () => void;
 }
 
-const RowElement: React.FC<{
+export const WaypointDetail = ({ waypoint, myNode }: WaypointDetailProps) => {
-  label: string;
-  value: React.ReactNode | string | number | undefined;
-  icon?: React.ReactNode;
-}> = ({ label, value, icon }) => (
-  <div className="flex justify-between">
-    <span className="inline-flex items-center gap-2 text-slate-500 dark:text-slate-500">
-      {icon} {label}
-    </span>
-    <span className="inline-flex items-center gap-1">{value}</span>
-  </div>
-);
-
-export const WaypointDetail = ({
-  waypoint,
-  myNode,
-  //onEdit,
-}: WaypointDetailProps) => {
   const { t } = useTranslation("map");
   const { getNode } = useNodeDB();
 
@@ -64,106 +45,147 @@ export const WaypointDetail = ({
     : undefined;
 
   return (
-    <div className="flex flex-col gap-2 px-1 text-sm dark:text-slate-900">
+    <article
-      <div className="flex items-center my-1 justify-between">
+      aria-labelledby={`wp-${waypoint.id}-title`}
-        <div className="flex items-center gap-2 font-semibold text-slate-900 ">
+      className="flex flex-col gap-2 px-1 text-sm dark:text-slate-900"
-          {String.fromCodePoint(waypoint.icon) ?? "📍"}
+    >
+      <header className="flex items-center my-1 justify-between">
+        <h3
+          id={`wp-${waypoint.id}-title`}
+          className="flex items-center gap-2 font-semibold text-slate-900"
+        >
+          <span aria-hidden>{String.fromCodePoint(waypoint.icon) ?? "📍"}</span>
           <span>{waypoint.name}</span>
-        </div>
+        </h3>
-      </div>
+      </header>
+
       {waypoint.description && (
-        <div>
+        <p className="inline-flex items-center gap-1">{waypoint.description}</p>
-          <span className="inline-flex items-center gap-1">
-            {waypoint.description}
-          </span>
-        </div>
       )}
-      <Separator className="dark:bg-slate-200" />
+
-      <div className="flex justify-between">
+      <Separator className="dark:bg-slate-200" role="separator" />
-        <span className="inline-flex items-start gap-2 text-slate-500 dark:text-slate-500">
+
-          <MapPinnedIcon size="20" />
+      <section aria-label={t("waypointDetail.details")}>
-          <span>
+        <dl className="space-y-1.5">
-            {t("waypointDetail.longitude")} {t("waypointDetail.latitude")}
+          {/* Coordinates */}
-          </span>
+          <div className="flex flex-wrap items-start gap-x-3">
+            <dt className="inline-flex items-top gap-2 text-slate-500 min-w-0">
+              <MapPinnedIcon size={14} aria-hidden className="mt-1" />
+              <span className="truncate">
+                {t("waypointDetail.longitude")}
+                <br />
+                {t("waypointDetail.latitude")}
               </span>
-        <span className="text-right">
+            </dt>
-          {waypointLngLat[0]} {waypointLngLat[1]}
+            <dd className="ms-auto text-right">
+              <data value={waypointLngLat[0]}>{waypointLngLat[0]}</data>
+              <br />
+              <data value={waypointLngLat[1]}>{waypointLngLat[1]}</data>
+            </dd>
+          </div>
+
+          {/* Created */}
+          <div className="flex flex-wrap items-start gap-x-3">
+            <dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
+              <ClockPlusIcon size={14} aria-hidden />
+              <span className="truncate">
+                {t("waypointDetail.createdDate")}
               </span>
+            </dt>
+            <dd className="ms-auto text-right">
+              <time
+                dateTime={new Date(waypoint.metadata.created).toISOString()}
+              >
+                <TimeAgo timestamp={waypoint.metadata.created} />
+              </time>
+            </dd>
           </div>
-      <RowElement
+
-        label={t("waypointDetail.createdDate")}
+          {/* Updated */}
-        value={<TimeAgo timestamp={waypoint.metadata.created} />}
-        icon={<ClockPlusIcon size="14" />}
-      />
           {waypoint.metadata.updated && (
-        <RowElement
+            <div className="flex flex-wrap items-start gap-x-3">
-          label={t("waypointDetail.updated")}
+              <dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
-          value={<TimeAgo timestamp={waypoint.metadata.updated} />}
+                <RotateCwIcon size={14} aria-hidden />
-          icon={<RotateCwIcon size="14" />}
+                <span className="truncate">{t("waypointDetail.updated")}</span>
-        />
+              </dt>
+              <dd className="ms-auto text-right">
+                <time
+                  dateTime={new Date(waypoint.metadata.updated).toISOString()}
+                >
+                  <TimeAgo timestamp={waypoint.metadata.updated} />
+                </time>
+              </dd>
+            </div>
           )}
+
+          {/* Expires */}
           {waypoint.expire !== 0 && (
-        <RowElement
+            <div className="flex flex-wrap items-start gap-x-3">
-          label={t("waypointDetail.expires")}
+              <dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
-          value={<TimeAgo timestamp={waypoint.expire * 1000} />}
+                <ClockFadingIcon size={14} aria-hidden />
-          icon={<ClockFadingIcon size="14" />}
+                <span className="truncate">{t("waypointDetail.expires")}</span>
-        />
+              </dt>
+              <dd className="ms-auto text-right">
+                <time dateTime={new Date(waypoint.expire * 1000).toISOString()}>
+                  <TimeAgo timestamp={waypoint.expire * 1000} />
+                </time>
+              </dd>
+            </div>
           )}
-      {distance && (
+
-        <RowElement
+          {/* Distance */}
-          label={t("waypointDetail.distance")}
+          {distance != null && (
-          value={`${Math.round(distance)} ${distance === 1 ? t("unit.meter.one") : t("unit.meter.plural")}`}
+            <div className="flex flex-wrap items-start gap-x-3">
-          icon={<MoveHorizontalIcon size="14" />}
+              <dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
-        />
+                <MoveHorizontalIcon size={14} aria-hidden />
+                <span className="truncate">{t("waypointDetail.distance")}</span>
+              </dt>
+              <dd className="ms-auto text-right">
+                <data value={Math.round(distance)}>
+                  {Math.round(distance)}{" "}
+                  {distance === 1
+                    ? t("unit.meter.one")
+                    : t("unit.meter.plural")}
+                </data>
+              </dd>
+            </div>
           )}
-      {bearing && (
+
-        <RowElement
+          {/* Bearing */}
-          label={t("waypointDetail.bearing")}
+          {bearing != null && (
-          value={
+            <div className="flex flex-wrap items-start gap-x-3">
-            <>
+              <dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
+                <CompassIcon size={14} aria-hidden />
+                <span className="truncate">{t("waypointDetail.bearing")}</span>
+              </dt>
+              <dd className="ms-auto text-right inline-flex items-center ">
                 <NavigationIcon
-                size="16"
+                  size={16}
                   aria-hidden
-                className="shrink-0 origin-center transition-transform"
+                  className="shrink-0 origin-center transition-transform mr-2"
                   style={{ transform: `rotate(${bearing - 45}deg)` }}
                 />
-              {Math.round(bearing)}°
+                <data value={Math.round(bearing)}>{Math.round(bearing)}</data>
-            </>
+                <span aria-hidden>{t("unit.degree.suffix")}</span>
-          }
+              </dd>
-          icon={<CompassIcon size="14" />}
-        />
-      )}
-      <RowElement
-        label={t("waypointDetail.createdBy")}
-        value={
-          getNode(waypoint.metadata.from)?.user?.longName ??
-          t("unknown.longName")
-        }
-        icon={<UserPenIcon size="14" />}
-      />
-      {
-        waypoint.lockedTo ? (
-          <RowElement
-            label={t("waypointDetail.lockedTo")}
-            value={
-              getNode(waypoint.lockedTo)?.user?.longName ??
-              t("unknown.longName")
-            }
-            icon={<UserLockIcon size="14" />}
-          />
-        ) : null /*(
-        <div className="flex justify-end  ">
-          <button
-            type="button"
-            onClick={onEdit}
-            className="inline-flex items-center gap-1 rounded-md border border-slate-300 px-2 py-1 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700"
-          >
-            <Edit3Icon className="h-4 w-4" />
-            {t("waypointDetail.edit")}
-          </button>
             </div>
-      )*/
+          )}
-      }
+
+          {/* Locked To */}
+          {waypoint.lockedTo && (
+            <div className="flex flex-wrap items-start gap-x-3">
+              <dt className="inline-flex items-center gap-2 text-slate-500 min-w-0">
+                <UserLockIcon size={14} aria-hidden />
+                <span className="truncate">{t("waypointDetail.lockedTo")}</span>
+              </dt>
+              <dd className="ms-auto text-right">
+                {getNode(waypoint.lockedTo)?.user?.longName ??
+                  t("unknown.longName")}
+              </dd>
             </div>
+          )}
+        </dl>
+      </section>
+    </article>
   );
 };