Add filters to node map

package.json

@@ -51,6 +51,7 @@
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.3.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",

src/components/UI/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useId } from "react";
+import { useState, useEffect, useId } from "react";
 import { Check } from "lucide-react";
 import { Label } from "@components/UI/Label.tsx";
 import { cn } from "@core/utils/cn.ts";
@@ -32,6 +32,11 @@ export function Checkbox({
 
   const [isChecked, setIsChecked] = useState(checked || false);
 
+  // Make sure setIsChecked state updates with checked
+  useEffect(() => {
+    setIsChecked(checked || false);
+  }, [checked]);
+
   const handleToggle = () => {
     if (disabled) return;
 

src/components/UI/Slider.tsx

@@ -0,0 +1,87 @@
+import { useId, useState } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@core/utils/cn.ts";
+
+export interface SliderProps {
+  value: number[];
+  step?: number;
+  min?: number;
+  max: number;
+  onValueChange?: (value: number[]) => void;
+  onValueCommit?: (value: number[]) => void;
+  disabled?: boolean;
+  className?: string;
+  trackClassName?: string;
+  rangeClassName?: string;
+  thumbClassName?: string;
+}
+
+export function Slider({
+  value,
+  step = 1,
+  min = 0,
+  max,
+  onValueChange,
+  onValueCommit,
+  disabled = false,
+  className,
+  trackClassName,
+  rangeClassName,
+  thumbClassName,
+  ...props
+}: SliderProps) {
+  const [internalValue, setInternalValue] = useState<number[]>(value);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value! : internalValue;
+  const id = useId();
+
+  const handleValueChange = (newValue: number[]) => {
+    if (!isControlled) setInternalValue(newValue);
+    onValueChange?.(newValue);
+  };
+
+  const handleValueCommit = (newValue: number[]) => {
+    onValueCommit?.(newValue);
+  };
+
+  return (
+    <SliderPrimitive.Root
+      className={cn(
+        "relative flex items-center select-none touch-none",
+        className,
+      )}
+      value={currentValue}
+      step={step}
+      min={min}
+      max={max}
+      disabled={disabled}
+      onValueChange={handleValueChange}
+      onValueCommit={handleValueCommit}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          "relative h-2 flex-1 rounded-full bg-slate-200",
+          trackClassName,
+        )}
+      >
+        <SliderPrimitive.Range
+          className={cn(
+            "absolute h-full rounded-full bg-blue-500",
+            rangeClassName,
+          )}
+        />
+      </SliderPrimitive.Track>
+      {currentValue.map((_, i) => (
+        <SliderPrimitive.Thumb
+          key={`${id}-thumb-${i}`}
+          className={cn(
+            "block w-4 h-4 rounded-full bg-white border border-slate-400 shadow-md",
+            thumbClassName,
+          )}
+          aria-label={`Thumb ${i + 1}`}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}

src/core/hooks/useNodeFilters.ts

@@ -0,0 +1,156 @@
+import { useCallback, useMemo, useState } from "react";
+import type { Protobuf } from "@meshtastic/core";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+
+interface BooleanFilter {
+  key: string;
+  label: string;
+  type: "boolean";
+  predicate: (node: Node, value: boolean) => boolean;
+}
+
+interface RangeFilter {
+  key: string;
+  label: string;
+  type: "range";
+  bounds: [number, number];
+  predicate: (node: Node, value: [number, number]) => boolean;
+}
+
+interface SearchFilter {
+  key: string;
+  label: string;
+  type: "search";
+  predicate: (node: Node, value: string) => boolean;
+}
+
+export type FilterConfig = BooleanFilter | RangeFilter | SearchFilter;
+
+export type FilterValueMap = {
+  [C in FilterConfig as C["key"]]: C extends BooleanFilter ? boolean
+    : C extends RangeFilter ? [number, number]
+    : C extends SearchFilter ? string
+    : never;
+};
+
+// Defines all node filters in this object
+export const filterConfigs: FilterConfig[] = [
+  {
+    key: "searchText",
+    label: "Node name/number",
+    type: "search",
+    predicate: (node, text: string) => {
+      if (!text) return true;
+      const shortName = node.user?.shortName?.toString().toLowerCase() ?? "";
+      const longName = node.user?.longName?.toString().toLowerCase() ?? "";
+      const nodeNum = node.num?.toString() ?? "";
+      const nodeNumHex = numberToHexUnpadded(node.num) ?? "";
+      const search = text.toLowerCase();
+      return shortName.includes(search) || longName.includes(search) ||
+        nodeNum.includes(search) ||
+        nodeNumHex.includes(search.replace(/!/g, ""));
+    },
+  },
+  {
+    key: "favOnly",
+    label: "Show favourites only",
+    type: "boolean",
+    predicate: (node, favOnly: boolean) => !favOnly || node.isFavorite,
+  },
+  {
+    key: "hopRange",
+    label: "Number of hops",
+    type: "range",
+    bounds: [0, 7],
+    predicate: (node, [min, max]: [number, number]) => {
+      const hops = node.hopsAway ?? 7;
+      return hops >= min && hops <= max;
+    },
+  },
+  {
+    key: "channelUtilization",
+    label: "Channel Utilization (%)",
+    type: "range",
+    bounds: [0, 100],
+    predicate: (node, [min, max]: [number, number]) => {
+      const channelUtilization = node.deviceMetrics?.channelUtilization ?? 0;
+      return channelUtilization >= min && channelUtilization <= max;
+    },
+  },
+  {
+    key: "airUtilTx",
+    label: "Airtime Utilization (%)",
+    type: "range",
+    bounds: [0, 100],
+    predicate: (node, [min, max]: [number, number]) => {
+      const airUtilTx = node.deviceMetrics?.airUtilTx ?? 0;
+      return airUtilTx >= min && airUtilTx <= max;
+    },
+  },
+  {
+    key: "battery",
+    label: "Battery level (%)",
+    type: "range",
+    bounds: [0, 101],
+    predicate: (node, [min, max]: [number, number]) => {
+      const batt = node.deviceMetrics?.batteryLevel ?? 101;
+      return batt >= min && batt <= max;
+    },
+  },
+  {
+    key: "viaMqtt",
+    label: "Hide MQTT-connected nodes",
+    type: "boolean",
+    predicate: (node, hide: boolean) => !hide || !node.viaMqtt,
+  },
+];
+
+export function useNodeFilters(nodes: Protobuf.Mesh.NodeInfo[]) {
+  const defaultState = useMemo(() => {
+    return filterConfigs.reduce((acc, cfg) => {
+      switch (cfg.type) {
+        case "boolean":
+          acc[cfg.key] = false;
+          break;
+        case "range":
+          acc[cfg.key] = cfg.bounds!;
+          break;
+        case "search":
+          acc[cfg.key] = "";
+          break;
+      }
+      return acc;
+    }, {} as FilterValueMap);
+  }, []);
+
+  const [filters, setFilters] = useState<FilterValueMap>(
+    defaultState,
+  );
+
+  const resetFilters = useCallback(() => {
+    setFilters(defaultState);
+  }, [defaultState]);
+
+  const onFilterChange = useCallback(
+    <K extends keyof FilterValueMap>(key: K, value: FilterValueMap[K]) => {
+      setFilters((f) => ({ ...f, [key]: value }));
+    },
+    [],
+  );
+
+  const filteredNodes = useMemo(
+    () =>
+      nodes.filter((node) =>
+        filterConfigs.every((cfg) => cfg.predicate(node, filters[cfg.key]))
+      ),
+    [nodes, filters],
+  );
+
+  return {
+    filters,
+    onFilterChange,
+    resetFilters,
+    filteredNodes,
+    filterConfigs,
+  };
+}