fix: enhance node card and details card to handle disabled state

Author: kastov

src/widgets/dashboard/nodes/node-card/node-card.widget.tsx

@@ -68,8 +68,8 @@ export const NodeCardWidget = memo((props: IProps) => {
     }, [node.trafficUsedBytes, node.trafficLimitBytes, node.isTrafficTrackingActive])
 
     const isOnline = useMemo(() => {
-        return node.isConnected && node.xrayUptime !== '0'
-    }, [node.isConnected, node.xrayUptime])
+        return node.isConnected && node.xrayUptime !== '0' && !node.isDisabled
+    }, [node.isConnected, node.xrayUptime, node.isDisabled])
 
     const getProgressColor = useCallback(() => {
         if (trafficData.fallbackProgress) return 'teal.6'
@@ -101,6 +101,14 @@ export const NodeCardWidget = memo((props: IProps) => {
         let borderColor = 'rgba(239, 68, 68, 0.3)'
         let boxShadow = 'rgba(239, 68, 68, 0.2)'
 
+        if (node.isDisabled) {
+            backgroundColor = 'rgba(107, 114, 128, 0.15)'
+            borderColor = 'rgba(107, 114, 128, 0.3)'
+            boxShadow = 'rgba(107, 114, 128, 0.2)'
+
+            return { backgroundColor, borderColor, boxShadow }
+        }
+
         if (node.isConnected) {
             backgroundColor = 'rgba(45, 212, 191, 0.15)'
             borderColor = 'rgba(45, 212, 191, 0.3)'
@@ -109,10 +117,6 @@ export const NodeCardWidget = memo((props: IProps) => {
             backgroundColor = 'rgba(245, 158, 11, 0.15)'
             borderColor = 'rgba(245, 158, 11, 0.3)'
             boxShadow = 'rgba(245, 158, 11, 0.2)'
-        } else if (node.isDisabled) {
-            backgroundColor = 'rgba(107, 114, 128, 0.15)'
-            borderColor = 'rgba(107, 114, 128, 0.3)'
-            boxShadow = 'rgba(107, 114, 128, 0.2)'
         } else {
             backgroundColor = 'rgba(239, 68, 68, 0.15)'
             borderColor = 'rgba(239, 68, 68, 0.3)'

src/widgets/dashboard/nodes/node-details-card/node-details-card.widget.tsx

@@ -73,6 +73,16 @@ export const NodeDetailsCardWidget = memo(({ node, fetchedNode }: IProps) => {
             return { icon, color, backgroundColor, borderColor, boxShadow }
         }
 
+        if (nodeData.isDisabled) {
+            icon = <TbWifiOff size={18} style={{ color: 'var(--mantine-color-gray-6)' }} />
+            color = 'gray'
+            backgroundColor = 'rgba(107, 114, 128, 0.15)'
+            borderColor = 'rgba(107, 114, 128, 0.3)'
+            boxShadow = 'rgba(107, 114, 128, 0.2)'
+
+            return { icon, color, backgroundColor, borderColor, boxShadow }
+        }
+
         if (nodeData.isConnected) {
             icon = <TbWifi size={18} style={{ color: 'var(--mantine-color-teal-6)' }} />
             color = 'teal'
@@ -90,12 +100,6 @@ export const NodeDetailsCardWidget = memo(({ node, fetchedNode }: IProps) => {
             backgroundColor = 'rgba(245, 158, 11, 0.15)'
             borderColor = 'rgba(245, 158, 11, 0.3)'
             boxShadow = 'rgba(245, 158, 11, 0.2)'
-        } else if (nodeData.isDisabled) {
-            icon = <TbWifiOff size={18} style={{ color: 'var(--mantine-color-gray-6)' }} />
-            color = 'gray'
-            backgroundColor = 'rgba(107, 114, 128, 0.15)'
-            borderColor = 'rgba(107, 114, 128, 0.3)'
-            boxShadow = 'rgba(107, 114, 128, 0.2)'
         } else {
             icon = <PiWarningCircle size={18} style={{ color: 'var(--mantine-color-red-6)' }} />
             color = 'red'