From b3cde1bcd7a94a2bc944cdb5638bfb9ad612589c Mon Sep 17 00:00:00 2001
From: Tilen Komel <me@komelt.dev>
Date: Wed, 29 Jan 2025 13:56:48 +0100
Subject: [PATCH] Move remove button to quick options

---
 src/components/Dialog/NodeOptionsDialog.tsx | 46 ++++++++++++++-------
 src/pages/Nodes.tsx                         | 18 +++-----
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/Dialog/NodeOptionsDialog.tsx b/src/components/Dialog/NodeOptionsDialog.tsx
index 10a8d292..06a3f0b8 100644
--- a/src/components/Dialog/NodeOptionsDialog.tsx
+++ b/src/components/Dialog/NodeOptionsDialog.tsx
@@ -1,4 +1,5 @@
 import { toast } from "@app/core/hooks/useToast";
+import { useAppStore } from "@app/core/stores/appStore";
 import { useDevice } from "@app/core/stores/deviceStore";
 import {
   Dialog,
@@ -8,6 +9,7 @@ import {
 } from "@components/UI/Dialog";
 import type { Protobuf } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { TrashIcon } from "lucide-react";
 import type { JSX } from "react";
 import { Button } from "../UI/Button";
 
@@ -22,7 +24,8 @@ export const NodeOptionsDialog = ({
   open,
   onOpenChange,
 }: NodeOptionsDialogProps): JSX.Element => {
-  const { connection } = useDevice();
+  const { setDialogOpen, connection } = useDevice();
+  const { setNodeNumToBeRemoved } = useAppStore();
   const longName =
     node?.user?.longName ??
     (node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown");
@@ -30,19 +33,6 @@ export const NodeOptionsDialog = ({
     node?.user?.shortName ??
     (node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK");
 
-  function handleTraceroute() {
-    if (!node) return;
-    toast({
-      title: "Sending Traceroute, please wait...",
-    });
-    connection?.traceRoute(node.num).then(() =>
-      toast({
-        title: "Traceroute sent.",
-      }),
-    );
-    onOpenChange();
-  }
-
   function handleRequestPosition() {
     if (!node) return;
     toast({
@@ -56,6 +46,19 @@ export const NodeOptionsDialog = ({
     onOpenChange();
   }
 
+  function handleTraceroute() {
+    if (!node) return;
+    toast({
+      title: "Sending Traceroute, please wait...",
+    });
+    connection?.traceRoute(node.num).then(() =>
+      toast({
+        title: "Traceroute sent.",
+      }),
+    );
+    onOpenChange();
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -63,11 +66,24 @@ export const NodeOptionsDialog = ({
           <DialogTitle>{`${longName} (${shortName})`}</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col space-y-1">
+          <div>
+            <Button onClick={handleRequestPosition}>Request Position</Button>
+          </div>
           <div>
             <Button onClick={handleTraceroute}>Trace Route</Button>
           </div>
           <div>
-            <Button onClick={handleRequestPosition}>Request Position</Button>
+            <Button
+              key="remove"
+              variant="destructive"
+              onClick={() => {
+                setNodeNumToBeRemoved(node.num);
+                setDialogOpen("nodeRemoval", true);
+              }}
+            >
+              <TrashIcon />
+              Remove
+            </Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index d9526481..5e3b48ac 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -62,7 +62,6 @@ const NodesPage = (): JSX.Element => {
               { title: "SNR", type: "normal", sortable: true },
               { title: "Encryption", type: "normal", sortable: false },
               { title: "Connection", type: "normal", sortable: true },
-              { title: "Remove", type: "normal", sortable: false },
             ]}
             rows={filteredNodes.map((node) => [
               <span
@@ -70,7 +69,11 @@ const NodesPage = (): JSX.Element => {
                 className="h-3 w-3 rounded-full bg-accent"
               />,
 
-              <h1 key="header" onMouseDown={() => setSelectedNode(node)}>
+              <h1
+                key="header"
+                onMouseDown={() => setSelectedNode(node)}
+                className="cursor-pointer"
+              >
                 {node.user?.longName ??
                   (node.user?.macaddr
                     ? `Meshtastic ${base16
@@ -117,17 +120,6 @@ const NodesPage = (): JSX.Element => {
                   : "-"}
                 {node.viaMqtt === true ? ", via MQTT" : ""}
               </Mono>,
-              <Button
-                key="remove"
-                variant="destructive"
-                onClick={() => {
-                  setNodeNumToBeRemoved(node.num);
-                  setDialogOpen("nodeRemoval", true);
-                }}
-              >
-                <TrashIcon />
-                Remove
-              </Button>,
             ])}
           />
           <NodeOptionsDialog