From 3f933dd166ed57360af0f50059eabd8c1c214e86 Mon Sep 17 00:00:00 2001
From: Aria Stewart <aredridel@dinhe.net>
Date: Sun, 11 May 2025 20:01:43 -0400
Subject: [PATCH 1/2] Remove case-duplicated sidebarButton.tsx (#617)

---
 src/components/UI/Sidebar/sidebarButton.tsx | 81 ---------------------
 1 file changed, 81 deletions(-)
 delete mode 100644 src/components/UI/Sidebar/sidebarButton.tsx

diff --git a/src/components/UI/Sidebar/sidebarButton.tsx b/src/components/UI/Sidebar/sidebarButton.tsx
deleted file mode 100644
index 8ffc1d8d..00000000
--- a/src/components/UI/Sidebar/sidebarButton.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import { Button } from "@components/UI/Button.tsx";
-import type { LucideIcon } from "lucide-react";
-import { cn } from "@core/utils/cn.ts";
-import { useSidebar } from "@core/stores/sidebarStore.tsx";
-
-export interface SidebarButtonProps {
-  label: string;
-  count?: number;
-  active?: boolean;
-  Icon?: LucideIcon;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  preventCollapse?: boolean;
-}
-
-export const SidebarButton = ({
-  label,
-  active,
-  Icon,
-  count,
-  children,
-  onClick,
-  disabled = false,
-  preventCollapse = false,
-}: SidebarButtonProps) => {
-  const { isCollapsed: isSidebarCollapsed } = useSidebar();
-  const isButtonCollapsed = isSidebarCollapsed && !preventCollapse;
-
-  return (
-    <Button
-      onClick={onClick}
-      variant={active ? "subtle" : "ghost"}
-      size="sm"
-      className={cn(
-        "flex w-full items-center text-wrap",
-        isButtonCollapsed
-          ? "justify-center gap-0 px-2 h-9"
-          : "justify-start gap-2 min-h-9",
-      )}
-      disabled={disabled}
-    >
-      {Icon && (
-        <Icon
-          size={isButtonCollapsed ? 20 : 18}
-          className="flex-shrink-0"
-        />
-      )}
-
-      {children}
-
-      <span
-        className={cn(
-          "flex flex-wrap justify-start text-left text-wrap break-all",
-          "min-w-0",
-          "px-1",
-          "transition-all duration-300 ease-in-out",
-          isButtonCollapsed
-            ? "opacity-0 max-w-0 invisible w-0 overflow-hidden"
-            : "opacity-100 max-w-full visible flex-1 whitespace-normal",
-        )}
-      >
-        {label}
-      </span>
-
-      {!isButtonCollapsed && !active && count && count > 0 && (
-        <div
-          className={cn(
-            "ml-auto flex-shrink-0 justify-end text-white text-xs rounded-full px-1.5 py-0.5 bg-red-600",
-            "flex-shrink-0",
-            "transition-opacity duration-300 ease-in-out",
-            isButtonCollapsed ? "opacity-0 invisible" : "opacity-100 visible",
-          )}
-        >
-          {count}
-        </div>
-      )}
-    </Button>
-  );
-};

From b2bb3baa01c77978fa44ffcbc05a7a617939c0ec Mon Sep 17 00:00:00 2001
From: philon- <philon-@users.noreply.github.com>
Date: Mon, 12 May 2025 17:54:06 +0200
Subject: [PATCH 2/2] Add check for undefined hopsAway (#616)

* Add check for undefined hopsAway

Better UI for already "fixed" #351

* Change conditional
---
 src/pages/Nodes.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 78f85b71..884e116d 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -79,7 +79,6 @@ const NodesPage = (): JSX.Element => {
     },
     [hardware.myNodeNum],
   );
-
   return (
     <>
       <PageLayout
@@ -125,14 +124,14 @@ const NodesPage = (): JSX.Element => {
                 {node.user?.longName ?? numberToHexUnpadded(node.num)}
               </h1>,
               <Mono key="hops" className="w-16">
-                {node.lastHeard !== 0
-                  ? node.viaMqtt === false && node.hopsAway === 0
+                {node.hopsAway !== undefined
+                  ? node?.viaMqtt === false && node.hopsAway === 0
                     ? "Direct"
                     : `${node.hopsAway?.toString()} ${
                       node.hopsAway ?? 0 > 1 ? "hops" : "hop"
                     } away`
                   : "-"}
-                {node.viaMqtt === true ? ", via MQTT" : ""}
+                {node?.viaMqtt === true ? ", via MQTT" : ""}
               </Mono>,
               <Mono key="lastHeard">
                 {node.lastHeard === 0