UI adjustments

src/components/generic/Filter/FilterComponents.tsx

@@ -10,7 +10,7 @@ import { ScrollArea } from "@components/UI/ScrollArea.tsx";
 import { ToggleGroup, ToggleGroupItem } from "@components/UI/ToggleGroup.tsx";
 
 import { ReactNode } from "react";
-import type { FilterState } from "@core/hooks/useFilterNode.ts";
+import type { FilterState } from "@components/generic/Filter/useFilterNode.ts";
 import { cn } from "@core/utils/cn.ts";
 
 interface FilterAccordionItemProps {
@@ -92,7 +92,7 @@ export const FilterSlider = <K extends RangeKeys<FilterState>>({
   const defaultLabel = (
     <>
       {label}: {value[0]}
-      {showRange ? ` – ${value[1]}` : ""}
+      {showRange ? ` — ${value[1]}` : ""}
     </>
   );
 
@@ -109,8 +109,8 @@ export const FilterSlider = <K extends RangeKeys<FilterState>>({
         onValueChange={onChange(filterKey)}
         className="w-full pb-3"
         trackClassName="h-1 bg-slate-200 dark:bg-slate-700"
-        rangeClassName="bg-blue-500 dark:bg-blue-700"
+        rangeClassName="bg-blue-500 dark:bg-blue-600"
-        thumbClassName="w-3 h-3 bg-white dark:bg-slate-900 border border-slate-400 dark:border-slate-600"
+        thumbClassName="w-3 h-3 bg-white dark:bg-slate-300 border border-slate-400 dark:border-slate-100"
         aria-label={label ?? String(filterKey)}
       />
     </div>

src/components/generic/Filter/FilterControl.tsx

@@ -1,23 +1,25 @@
+import {
+  type ComponentProps,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Protobuf } from "@meshtastic/core";
 import { debounce } from "@core/utils/debounce.ts";
+import { cn } from "@core/utils/cn.ts";
+import { TimeAgo } from "@components/generic/TimeAgo.tsx";
+import type { FilterState } from "@components/generic/Filter/useFilterNode.ts";
 
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@components/UI/Popover.tsx";
+import { Input } from "@components/UI/Input.tsx";
 import { Accordion } from "@components/UI/Accordion.tsx";
-import { cn } from "@core/utils/cn.ts";
-import { TimeAgo } from "@components/generic/TimeAgo.tsx";
-import type { FilterState } from "@core/hooks/useFilterNode.ts";
 import { FunnelIcon } from "lucide-react";
-import {
+
-  type ComponentProps,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import {
   FilterAccordionItem,
   FilterMulti,
@@ -152,12 +154,12 @@ export function FilterControl({
                   <label htmlFor="nodeName" className="font-medium text-sm">
                     Node name/number
                   </label>
-                  <input
+                  <Input
                     type="text"
                     value={filterState.nodeName}
                     onChange={handleTextChange("nodeName")}
-                    placeholder="Search phrase"
+                    showClearButton
-                    className="w-full px-2 py-1 border rounded shadow-sm  dark:border-slate-600"
+                    placeholder="Meshtastic 1234"
                   />
                 </div>
               )}
@@ -175,7 +177,7 @@ export function FilterControl({
                       : localFilterState.hopsAway[0]}
                     {localFilterState.hopsAway[0] !==
                         localFilterState.hopsAway[1]
-                      ? " - " + localFilterState.hopsAway[1]
+                      ? " — " + localFilterState.hopsAway[1]
                       : ""}
                   </>
                 }
@@ -200,7 +202,7 @@ export function FilterControl({
                     {localFilterState.lastHeard[0] !==
                         localFilterState.lastHeard[1] && (
                       <>
-                        {" – "}
+                        {" — "}
                         {localFilterState.lastHeard[1] ===
                             defaultFilterValues.lastHeard[1] && ">"}
                         {formatTS(localFilterState.lastHeard[1])}

src/core/hooks/useFilterNode.test.ts → src/components/generic/Filter/useFilterNode.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { useFilterNode } from "@core/hooks/useFilterNode.ts";
+import { useFilterNode } from "@components/generic/Filter/useFilterNode.ts";
 import { Protobuf } from "@meshtastic/core";
 import { renderHook } from "@testing-library/react";
 

src/pages/Map/index.tsx

@@ -5,11 +5,14 @@ import { Sidebar } from "@components/Sidebar.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Protobuf } from "@meshtastic/core";
 import { bbox, lineString } from "@turf/turf";
-import { MapPinIcon } from "lucide-react";
+import { FunnelIcon, MapPinIcon } from "lucide-react";
 import { useCallback, useDeferredValue, useMemo, useState } from "react";
 import { Marker, Popup, useMap } from "react-map-gl/maplibre";
 import { Map } from "@components/Map.tsx";
-import { type FilterState, useFilterNode } from "@core/hooks/useFilterNode.ts";
+import {
+  type FilterState,
+  useFilterNode,
+} from "@components/generic/Filter/useFilterNode.ts";
 import { FilterControl } from "@components/generic/Filter/FilterControl.tsx";
 import { cn } from "@core/utils/cn.ts";
 
@@ -177,12 +180,13 @@ const MapPage = () => {
               sideOffset: 12,
             },
             popoverTriggerClassName: cn(
-              "fixed bottom-17 right-2 px-1 py-1 rounded shadow-md",
+              "fixed top-45.5 right-2.5 w-[29px] px-1 py-1 rounded shadow-l outline-[2px] outline-stone-600/20 ",
-              "dark:text-slate-600 dark:hover:text-slate-700 dark:bg-slate-100 dark:hover:bg-slate-200 dark:active:bg-slate-300",
+              "dark:text-slate-600 dark:hover:text-slate-700 bg-stone-50 hover:bg-stone-200 dark:bg-stone-50 dark:hover:bg-stone-200 dark:active:bg-stone-300",
               isFilterDirty(filterState)
-                ? "text-slate-100 dark:text-slate-100 bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 hover:text-slate-200 dark:hover:text-slate-200 active:bg-green-800 dark:active:bg-green-800"
+                ? "text-slate-100 dark:text-slate-100 bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 hover:text-slate-200 dark:hover:text-slate-200 active:bg-green-800 dark:active:bg-green-800 outline-green-600 dark:outline-green-700"
                 : "",
             ),
+            triggerIcon: <FunnelIcon className="w-5" />,
             showTextSearch: true,
           }}
         />

src/pages/Nodes.tsx

@@ -21,7 +21,10 @@ import {
 import { base16 } from "rfc4648";
 import { Input } from "@components/UI/Input.tsx";
 import { PageLayout } from "@components/PageLayout.tsx";
-import { type FilterState, useFilterNode } from "@core/hooks/useFilterNode.ts";
+import {
+  type FilterState,
+  useFilterNode,
+} from "@components/generic/Filter/useFilterNode.ts";
 import { FilterControl } from "@components/generic/Filter/FilterControl.tsx";
 
 export interface DeleteNoteDialogProps {