From adfc69c656256fdd29c1c9d98ffe51c6284ceb93 Mon Sep 17 00:00:00 2001
From: PTah <papatramp@gmail.com>
Date: Fri, 5 Jun 2026 10:10:10 +1000
Subject: [PATCH] fix(ui): host name nav styled like sidebar, plain hostname
 column

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/style.css           | 26 ++++++++++++++++++++------
 frontend/src/views/HostsView.vue | 12 ++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index b7dd59a..2a987f2 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -17,15 +17,29 @@ a {
   color: #7eb8ff;
 }
 
-.sac-row-link {
-  color: #7eb8ff;
+/* Клик по хосту в таблице — как пункты левого меню (полоска слева, без подчёркивания). */
+.sac-host-nav-link {
+  display: inline-block;
+  padding: 0.2rem 0.45rem 0.2rem 0.3rem;
+  margin: -0.2rem -0.35rem;
+  border-radius: 4px;
+  border-left: 3px solid transparent;
+  color: #c5d0dc;
+  text-decoration: none;
   cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 2px;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
 }
 
-.sac-row-link:hover {
-  color: #a8d4ff;
+.sac-host-nav-link:hover {
+  background: #1e2d3d;
+  color: #fff;
+  border-left-color: #3db8ff;
+}
+
+.sac-host-nav-link.router-link-active {
+  background: #1a3a52;
+  color: #fff;
+  border-left-color: #3db8ff;
 }
 
 .layout {
diff --git a/frontend/src/views/HostsView.vue b/frontend/src/views/HostsView.vue
index a9937b6..652db86 100644
--- a/frontend/src/views/HostsView.vue
+++ b/frontend/src/views/HostsView.vue
@@ -32,15 +32,15 @@
         <tr v-for="h in sortedItems" :key="h.id">
           <td>{{ h.id }}</td>
           <td>
-            <RouterLink :to="`/hosts/${h.id}`" class="sac-row-link" :title="`Карточка хоста ${h.hostname}`">
+            <RouterLink
+              :to="`/hosts/${h.id}`"
+              class="sac-host-nav-link"
+              :title="`Карточка хоста ${h.hostname}`"
+            >
               {{ h.display_name || h.hostname }}
             </RouterLink>
           </td>
-          <td>
-            <RouterLink :to="`/hosts/${h.id}`" class="sac-row-link" :title="`Карточка хоста ${h.hostname}`">
-              {{ h.hostname }}
-            </RouterLink>
-          </td>
+          <td>{{ h.hostname }}</td>
           <td>{{ h.product_version || "—" }}</td>
           <td>{{ h.os_family }}</td>
           <td>{{ h.ipv4 || "—" }}</td>