fix: resolved issues with styling

src/components/PageComponents/Messages/TraceRoute.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+
+vi.mock("@core/stores/deviceStore");
+
+describe("TraceRoute", () => {
+  const mockNodes = new Map([
+    [
+      1,
+      { num: 1, user: { longName: "Node A" } },
+    ],
+    [
+      2,
+      { num: 2, user: { longName: "Node B" } },
+    ],
+    [
+      3,
+      { num: 3, user: { longName: "Node C" } },
+    ],
+  ]);
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    (useDevice as Mock).mockReturnValue({
+      nodes: mockNodes,
+    });
+  });
+
+  it("renders the route to destination with SNR values", () => {
+    render(
+      <TraceRoute
+        from={{ user: { longName: "Source Node" } } as any}
+        to={{ user: { longName: "Destination Node" } } as any}
+        route={[1, 2]}
+        snrTowards={[10, 20, 30]}
+      />
+    );
+
+    expect(screen.getByText("Route to destination:")).toBeInTheDocument();
+    expect(screen.getByText("Destination Node")).toBeInTheDocument();
+
+    expect(screen.getByText("Node A")).toBeInTheDocument();
+    expect(screen.getByText("Node B")).toBeInTheDocument();
+
+    expect(screen.getAllByText(/↓/)).toHaveLength(3); // startNode + 2 hops
+    expect(screen.getByText("↓ 10dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 20dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 30dB")).toBeInTheDocument();
+    expect(screen.getByText("Source Node")).toBeInTheDocument();
+  });
+
+  it("renders the route back when provided", () => {
+    render(
+      <TraceRoute
+        from={{ user: { longName: "Source Node" } } as any}
+        to={{ user: { longName: "Destination Node" } } as any}
+        route={[1]}
+        snrTowards={[15, 25]}
+        routeBack={[3]}
+        snrBack={[35, 45]}
+      />
+    );
+
+    expect(screen.getByText("Route back:")).toBeInTheDocument();
+    expect(screen.getByText("Node C")).toBeInTheDocument();
+    expect(screen.getByText("↓ 35dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 45dB")).toBeInTheDocument();
+  });
+
+  it("renders '??' for missing SNR values", () => {
+    render(
+      <TraceRoute
+        from={{ user: { longName: "Source" } } as any}
+        to={{ user: { longName: "Dest" } } as any}
+        route={[1]}
+      />
+    );
+
+    expect(screen.getAllByText("↓ ??dB").length).toBeGreaterThan(0);
+  });
+
+  it("renders hop hex if node is not found", () => {
+    render(
+      <TraceRoute
+        from={{ user: { longName: "Source" } } as any}
+        to={{ user: { longName: "Dest" } } as any}
+        route={[99]}
+      />
+    );
+
+    expect(screen.getByText(/^!63$/)).toBeInTheDocument(); // 99 in hex 
+  });
+});

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -11,6 +11,33 @@ export interface TraceRouteProps {
   snrBack?: Array<number>;
 }
 
+interface RoutePathProps {
+  title: string;
+  startNode?: Protobuf.Mesh.NodeInfo;
+  endNode?: Protobuf.Mesh.NodeInfo;
+  path: number[];
+  snr?: number[];
+}
+
+const RoutePath = ({ title, startNode, endNode, path, snr }: RoutePathProps) => {
+  const { nodes } = useDevice();
+
+  return (
+    <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-slate-900 dark:text-slate-900">
+      <p className="font-semibold">{title}</p>
+      <p>{startNode?.user?.longName}</p>
+      <p>↓ {snr?.[0] ?? "??"}dB</p>
+      {path.map((hop, i) => (
+        <span key={nodes.get(hop)?.num ?? hop}>
+          <p>{nodes.get(hop)?.user?.longName ?? `!${numberToHexUnpadded(hop)}`}</p>
+          <p>↓ {snr?.[i + 1] ?? "??"}dB</p>
+        </span>
+      ))}
+      <p>{endNode?.user?.longName}</p>
+    </span>
+  );
+};
+
 export const TraceRoute = ({
   from,
   to,
@@ -19,43 +46,24 @@ export const TraceRoute = ({
   snrTowards,
   snrBack,
 }: TraceRouteProps) => {
-  const { nodes } = useDevice();
-
   return (
     <div className="ml-5 flex">
-      <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
-        <p className="font-semibold">Route to destination:</p>
-        <p>{to?.user?.longName}</p>
-        <p>↓ {snrTowards?.[0] ? snrTowards[0] : "??"}dB</p>
-        {route.map((hop, i) => (
-          <span key={nodes.get(hop)?.num}>
-            <p>
-              {nodes.get(hop)?.user?.longName ?? `!${numberToHexUnpadded(hop)}`}
-            </p>
-            <p>↓ {snrTowards?.[i + 1] ? snrTowards[i + 1] : "??"}dB</p>
-          </span>
-        ))}
-        {from?.user?.longName}
-      </span>
-      {routeBack
-        ? (
-          <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
-            <p className="font-semibold">Route back:</p>
-            <p>{from?.user?.longName}</p>
-            <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
-            {routeBack.map((hop, i) => (
-              <span key={nodes.get(hop)?.num}>
-                <p>
-                  {nodes.get(hop)?.user?.longName ??
-                    `!${numberToHexUnpadded(hop)}`}
-                </p>
-                <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
-              </span>
-            ))}
-            {to?.user?.longName}
-          </span>
-        )
-        : null}
+      <RoutePath
+        title="Route to destination:"
+        startNode={to}
+        endNode={from}
+        path={route}
+        snr={snrTowards}
+      />
+      {routeBack && (
+        <RoutePath
+          title="Route back:"
+          startNode={from}
+          endNode={to}
+          path={routeBack}
+          snr={snrBack}
+        />
+      )}
     </div>
   );
 };