From b9ebc1d1414154e1c72585099d93cb6ac53dedba Mon Sep 17 00:00:00 2001
From: Jocadbz <joaquimmadureira@protonmail.com>
Date: Tue, 9 Jun 2026 18:55:48 -0300
Subject: [PATCH] Use cable color instead of hardcoded green for connected port
 badges

Port spans now pick up the connection's actual color for border and a
light tint for background via inline styles. The .connected CSS class
only ups the border width to 2px for emphasis. Applied to _port_list.html
shared partial and wall_sockets.html inline rendering.
---
 static/style.css            |  2 +-
 templates/_port_list.html   | 10 ++++++++--
 templates/wall_sockets.html |  5 ++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/style.css b/static/style.css
index 4ce3518..497c6dd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -121,7 +121,7 @@ th { background: var(--surface); font-weight: 600; }
     transition: border-color 0.15s, background 0.15s;
 }
 .port:hover { border-color: var(--accent); }
-.port.connected { border-color: var(--green); background: #2a4a3a; }
+.port.connected { border-width: 2px; }
 
 /* MODAL */
 .modal-overlay {
diff --git a/templates/_port_list.html b/templates/_port_list.html
index e2f2f94..cbb4ce3 100644
--- a/templates/_port_list.html
+++ b/templates/_port_list.html
@@ -4,7 +4,10 @@
         <h5>Front</h5>
         {{range .Device.Ports}}{{if eq .Side "front"}}
         {{$pid := .ID}}
-        <span class="port {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}"
+        {{$color := "#333"}}{{$bg := ""}}
+        {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
+        <span class="port {{if ne $bg ""}}connected{{end}}"
+              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
               hx-get="/connections/{{.ID}}" 
               hx-target="#modal-content"
               hx-trigger="click"
@@ -18,7 +21,10 @@
         <h5>Back</h5>
         {{range .Device.Ports}}{{if eq .Side "back"}}
         {{$pid := .ID}}
-        <span class="port {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}"
+        {{$color := "#333"}}{{$bg := ""}}
+        {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
+        <span class="port {{if ne $bg ""}}connected{{end}}"
+              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
               hx-get="/connections/{{.ID}}" 
               hx-target="#modal-content"
               hx-trigger="click"
diff --git a/templates/wall_sockets.html b/templates/wall_sockets.html
index df50b23..1185833 100644
--- a/templates/wall_sockets.html
+++ b/templates/wall_sockets.html
@@ -13,7 +13,10 @@
     <td>{{.Comment}}</td>
     <td>
         {{range .Ports}}
-        <span class="port {{$pid := .ID}}{{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}"
+        {{$pid := .ID}}{{$color := "#333"}}{{$bg := ""}}
+        {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
+        <span class="port {{if ne $bg ""}}connected{{end}}"
+              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
               hx-get="/connections/{{.ID}}"
               hx-target="#modal-content"
               hx-trigger="click"