Update biome, fix and enforce recommended rules

src/pages/Config/DeviceConfig.tsx

@@ -53,10 +53,7 @@ export const DeviceConfig = (): JSX.Element => {
     <Tabs defaultValue="Device">
       <TabsList>
         {tabs.map((tab) => (
-          <TabsTrigger
-            key={tab.label}
-            value={tab.label}
-          >
+          <TabsTrigger key={tab.label} value={tab.label}>
             {tab.label}
           </TabsTrigger>
         ))}

src/pages/Config/ModuleConfig.tsx

@@ -5,11 +5,11 @@ import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
 import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.js";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
 import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
+import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.js";
 import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
 import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
 import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
 import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
-import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.js";
 import {
   Tabs,
   TabsContent,

src/pages/Map.tsx

@@ -14,7 +14,7 @@ import {
   ZoomInIcon,
   ZoomOutIcon,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Marker, useMap } from "react-map-gl";
 import MapGl from "react-map-gl/maplibre";
 
@@ -27,7 +27,7 @@ export const MapPage = (): JSX.Element => {
 
   const allNodes = Array.from(nodes.values());
 
-  const getBBox = () => {
+  const getBBox = useCallback(() => {
     if (!map) {
       return;
     }
@@ -64,7 +64,7 @@ export const MapPage = (): JSX.Element => {
     if (center) {
       map.easeTo(center);
     }
-  };
+  }, [allNodes, map]);
 
   useEffect(() => {
     map?.on("zoom", () => {
@@ -128,7 +128,11 @@ export const MapPage = (): JSX.Element => {
           attributionControl={false}
           renderWorldCopies={false}
           maxPitch={0}
-          style = {{filter: darkMode ? 'brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7)' : ''}}
+          style={{
+            filter: darkMode
+              ? "brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7)"
+              : "",
+          }}
           dragRotate={false}
           touchZoomRotate={false}
           initialViewState={{
@@ -161,21 +165,19 @@ export const MapPage = (): JSX.Element => {
                   key={node.num}
                   longitude={node.position.longitudeI / 1e7}
                   latitude={node.position.latitudeI / 1e7}
-                  style = {{filter: darkMode ? 'invert(1)' : ''}}
+                  style={{ filter: darkMode ? "invert(1)" : "" }}
                   anchor="bottom"
+                  onClick={() => {
+                    map?.easeTo({
+                      zoom: 12,
+                      center: [
+                        (node.position?.longitudeI ?? 0) / 1e7,
+                        (node.position?.latitudeI ?? 0) / 1e7,
+                      ],
+                    });
+                  }}
                 >
-                  <div
-                    className="flex cursor-pointer gap-2 rounded-md border bg-backgroundPrimary p-1.5"
-                    onClick={() => {
-                      map?.easeTo({
-                        zoom: 12,
-                        center: [
-                          (node.position?.longitudeI ?? 0) / 1e7,
-                          (node.position?.latitudeI ?? 0) / 1e7,
-                        ],
-                      });
-                    }}
-                  >
+                  <div className="flex cursor-pointer gap-2 rounded-md border bg-backgroundPrimary p-1.5">
                     <Hashicon value={node.num.toString()} size={22} />
                     <Subtle className={cn(zoom < 12 && "hidden")}>
                       {node.user?.longName}

src/pages/Nodes.tsx

@@ -1,15 +1,15 @@
+import { useAppStore } from "@app/core/stores/appStore";
 import { Sidebar } from "@components/Sidebar.js";
+import { Button } from "@components/UI/Button.js";
 import { Mono } from "@components/generic/Mono.js";
 import { Table } from "@components/generic/Table/index.js";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
-import { base16 } from "rfc4648";
-import { Button } from "@components/UI/Button.js";
 import { TrashIcon } from "lucide-react";
-import { useAppStore } from "@app/core/stores/appStore";
-
+import { Fragment } from "react";
+import { base16 } from "rfc4648";
 
 export interface DeleteNoteDialogProps {
   open: boolean;
@@ -40,8 +40,8 @@ export const NodesPage = (): JSX.Element => {
             { title: "Remove", type: "normal", sortable: false },
           ]}
           rows={filteredNodes.map((node) => [
-            <Hashicon size={24} value={node.num.toString()} />,
-            <h1>
+            <Hashicon key="icon" size={24} value={node.num.toString()} />,
+            <h1 key="header">
               {node.user?.longName ??
                 (node.user?.macaddr
                   ? `Meshtastic ${base16
@@ -50,34 +50,46 @@ export const NodesPage = (): JSX.Element => {
                   : `UNK: ${node.num}`)}
             </h1>,
 
-            <Mono>{Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0]}</Mono>,
-            <Mono>
+            <Mono key="model">
+              {Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0]}
+            </Mono>,
+            <Mono key="addr">
               {base16
                 .stringify(node.user?.macaddr ?? [])
                 .match(/.{1,2}/g)
                 ?.join(":") ?? "UNK"}
             </Mono>,
-            node.lastHeard === 0 ? (
-              <p>Never</p>
-            ) : (
-              <TimeAgo timestamp={node.lastHeard * 1000} />
-            ),
-            <Mono>
+            <Fragment key="lastHeard">
+              {node.lastHeard === 0 ? (
+                <p>Never</p>
+              ) : (
+                <TimeAgo timestamp={node.lastHeard * 1000} />
+              )}
+            </Fragment>,
+            <Mono key="snr">
               {node.snr}db/
               {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
               {(node.snr + 10) * 5}raw
             </Mono>,
-            <Mono>
-            {node.lastHeard != 0 ?
-              (node.viaMqtt === false && node.hopsAway === 0
-                ? "Direct": node.hopsAway.toString() + " hops away")
+            <Mono key="hops">
+              {node.lastHeard !== 0
+                ? node.viaMqtt === false && node.hopsAway === 0
+                  ? "Direct"
+                  : `${node.hopsAway.toString()} hops away`
                 : "-"}
-            {node.viaMqtt === true? ", via MQTT": ""}
-          </Mono>,
-            <Button variant="destructive" onClick={() => {
-              setNodeNumToBeRemoved(node.num);
-              setDialogOpen("nodeRemoval", true)
-            }}><TrashIcon />Remove</Button>
+              {node.viaMqtt === true ? ", via MQTT" : ""}
+            </Mono>,
+            <Button
+              key="remove"
+              variant="destructive"
+              onClick={() => {
+                setNodeNumToBeRemoved(node.num);
+                setDialogOpen("nodeRemoval", true);
+              }}
+            >
+              <TrashIcon />
+              Remove
+            </Button>,
           ])}
         />
       </div>