From 5c10035bd964b41ce466ef16ca5ef8bb9a4507f6 Mon Sep 17 00:00:00 2001
From: Vadim Iskuchekov <egregors@pm.me>
Date: Sat, 21 Jun 2025 09:55:35 +0200
Subject: feat: add comments under client id (#3131)

---
 web/html/component/aClientTable.html | 39 ++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

(limited to 'web/html/component')

diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html
index 868112d9..8ab08679 100644
--- a/web/html/component/aClientTable.html
+++ b/web/html/component/aClientTable.html
@@ -41,14 +41,28 @@
   </template>
 </template>
 <template slot="client" slot-scope="text, client">
-  <a-tooltip>
-    <template slot="title">
-      <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
-      <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
-      <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
-    </template>
-    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
-  </a-tooltip> [[ client.email ]]
+  <div class="client-cell">
+    <div class="client-info-row">
+      <a-tooltip>
+        <template slot="title">
+          <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
+          <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
+          <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
+        </template>
+        <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
+      </a-tooltip>
+      <span class="client-email">[[ client.email ]]</span>
+    </div>
+    <div v-if="client.comment && client.comment.trim()" style="margin-left: 18px;">
+      <a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
+        <template slot="title">
+          [[ client.comment ]]
+        </template>
+        <span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
+      </a-tooltip>
+      <span v-else class="client-comment">[[ client.comment ]]</span>
+    </div>
+  </div>
 </template>
 <template slot="traffic" slot-scope="text, client">
   <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -168,6 +182,15 @@
   <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
     <template slot="content">
       <table>
+        <tr v-if="client.comment && client.comment.trim()">
+          <td colspan="3" :style="{ textAlign: 'left', borderBottom: '1px solid #f0f0f0', paddingBottom: '8px', marginBottom: '8px' }">
+            <div :style="{ fontSize: '0.9em', fontWeight: '500', marginBottom: '4px' }">[[ client.email ]]</div>
+            <div :style="{ fontSize: '0.85em', color: '#666', fontStyle: 'italic', wordBreak: 'break-word', maxWidth: '250px' }">[[ client.comment ]]</div>
+          </td>
+        </tr>
+        <tr v-else>
+          <td colspan="3" :style="{ textAlign: 'center', fontWeight: '500', paddingBottom: '8px' }">[[ client.email ]]</td>
+        </tr>
         <tr>
           <td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
         </tr>
-- 
cgit v1.2.3