From 790f93322e70550824aad8cf43e56c7fcad4e66c Mon Sep 17 00:00:00 2001
From: Kyle Wistrand <kyle.wistrand@gmail.com>
Date: Sat, 11 Jan 2025 20:56:03 -0800
Subject: [PATCH] feat: Make nodes on dashboard clickable

---
 src/pages/Dashboard/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index ee2c4693..bdfc660b 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -15,7 +15,7 @@ import {
 import { useMemo } from "react";
 
 export const Dashboard = () => {
-  const { setConnectDialogOpen } = useAppStore();
+  const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
@@ -38,7 +38,12 @@ export const Dashboard = () => {
               {devices.map((device) => {
                 return (
                   <li key={device.id}>
-                    <div className="px-4 py-4 sm:px-6">
+                    <button
+                      className="w-full px-4 py-4 sm:px-6 hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"
+                      onClick={() => {
+                        setSelectedDevice(device.id);
+                      }}
+                    >
                       <div className="flex items-center justify-between">
                         <p className="truncate text-sm font-medium text-accent">
                           {device.nodes.get(device.hardware.myNodeNum)?.user
@@ -75,7 +80,7 @@ export const Dashboard = () => {
                           {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
                         </div>
                       </div>
-                    </div>
+                    </button>
                   </li>
                 );
               })}