From bcd9006f31ce3f09bbe2bb85e109ccf66467827f Mon Sep 17 00:00:00 2001
From: Sudo-Ivan <ivan@quad4.io>
Date: Sat, 3 Jan 2026 21:45:39 -0600
Subject: [PATCH] refactor(NetworkVisualiser.vue): restructure color and
 opacity properties for edges to improve clarity and maintainability

---
 .../network-visualiser/NetworkVisualiser.vue  | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index 5be121a..47506f5 100644
--- a/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -672,7 +672,9 @@ export default {
                         },
                         selectionWidth: 3,
                         hoverWidth: 2,
-                        opacity: 0.6,
+                        color: {
+                            opacity: 0.6,
+                        },
                     },
                 }
             );
@@ -911,17 +913,19 @@ export default {
                         id: edgeId,
                         from: entry.interface,
                         to: entry.hash,
-                        color:
-                            entry.hops === 1
-                                ? isDarkMode
-                                    ? "#065f46"
-                                    : "#10b981"
-                                : isDarkMode
-                                  ? "#1e3a8a"
-                                  : "#3b82f6",
+                        color: {
+                            color:
+                                entry.hops === 1
+                                    ? isDarkMode
+                                        ? "#065f46"
+                                        : "#10b981"
+                                    : isDarkMode
+                                      ? "#1e3a8a"
+                                      : "#3b82f6",
+                            opacity: entry.hops === 1 ? 1 : 0.5,
+                        },
                         width: entry.hops === 1 ? 2 : 1,
                         dashes: entry.hops > 1,
-                        opacity: entry.hops === 1 ? 1 : 0.5,
                         hidden: this.enableOrbit,
                     });
                     processedEdgeIds.add(edgeId);