From 07bc74a5210027bbdc9e86938e1b204385eacfa5 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Tue, 12 May 2026 12:38:38 +0200
Subject: [PATCH] feat(nodes): blur address column with eye-toggle, mirroring
 IndexPage IP card

---
 frontend/src/pages/nodes/NodeList.vue | 47 ++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/nodes/NodeList.vue b/frontend/src/pages/nodes/NodeList.vue
index 4deaa85c..bd84ecec 100644
--- a/frontend/src/pages/nodes/NodeList.vue
+++ b/frontend/src/pages/nodes/NodeList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
   EditOutlined,
@@ -7,6 +7,8 @@ import {
   PlusOutlined,
   ThunderboltOutlined,
   ExclamationCircleOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
 } from '@ant-design/icons-vue';
 import NodeHistoryPanel from './NodeHistoryPanel.vue';
 
@@ -26,8 +28,6 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-// Render the address column as a clickable URL so admins can jump to
-// the remote panel directly from the list.
 const dataSource = computed(() =>
   props.nodes.map((n) => ({
     ...n,
@@ -36,6 +36,8 @@ const dataSource = computed(() =>
   })),
 );
 
+const showAddress = ref(false);
+
 function statusColor(status) {
   switch (status) {
     case 'online': return 'green';
@@ -97,9 +99,19 @@ function formatPct(p) {
         </template>
       </a-table-column>
 
-      <a-table-column :title="t('pages.nodes.address')" data-index="url" :ellipsis="true">
+      <a-table-column data-index="url" :ellipsis="true">
+        <template #title>
+          <span class="address-header">
+            {{ t('pages.nodes.address') }}
+            <a-tooltip :title="t('pages.index.toggleIpVisibility')">
+              <component :is="showAddress ? EyeOutlined : EyeInvisibleOutlined" class="ip-toggle-icon"
+                @click="showAddress = !showAddress" />
+            </a-tooltip>
+          </span>
+        </template>
         <template #default="{ record }">
-          <a :href="record.url" target="_blank" rel="noopener noreferrer">{{ record.url }}</a>
+          <a :href="record.url" target="_blank" rel="noopener noreferrer"
+            :class="showAddress ? 'address-visible' : 'address-hidden'">{{ record.url }}</a>
         </template>
       </a-table-column>
 
@@ -203,4 +215,29 @@ function formatPct(p) {
   font-size: 12px;
   opacity: 0.65;
 }
+
+.address-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ip-toggle-icon {
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.ip-toggle-icon:hover {
+  opacity: 1;
+}
+
+.address-hidden {
+  filter: blur(5px);
+  transition: filter 0.2s ease;
+}
+
+.address-visible {
+  filter: none;
+}
 </style>