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/inbounds.html | 99 ++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 91 insertions(+), 8 deletions(-)

(limited to 'web/html/inbounds.html')

diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 29e6b00f..1750aa44 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -79,6 +79,54 @@
     max-width: 200px;
     overflow: hidden;
   }
+  .client-comment {
+    font-size: 12px;
+    color: #888;
+    font-style: italic;
+    line-height: 1.2;
+  }
+  .dark .client-comment {
+    color: #bbb;
+  }
+  .client-email {
+    font-weight: 500;
+  }
+  .client-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .client-info-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .client-popup-item {
+    margin-bottom: 8px;
+    padding: 4px 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .dark .client-popup-item {
+    border-bottom: 1px solid #333;
+  }
+  .client-popup-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+  .client-popup-email {
+    font-weight: 500;
+    margin-bottom: 2px;
+  }
+  .client-popup-comment {
+    font-size: 11px;
+    color: #666;
+    font-style: italic;
+    max-width: 200px;
+    word-break: break-word;
+  }
+  .dark .client-popup-comment {
+    color: #aaa;
+  }
   .online-animation .ant-badge-status-dot {
     animation: onlineAnimation 1.2s linear infinite;
   }
@@ -382,25 +430,37 @@
                     <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                     <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                     </a-popover>
                     <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].depleted"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                     </a-popover>
                     <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].expiring"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
                     </a-popover>
                     <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].online"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
                     </a-popover>
@@ -479,25 +539,37 @@
                             <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                             <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                             </a-popover>
                             <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                             </a-popover>
                             <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
                             </a-popover>
                             <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
                             </a-popover>
@@ -716,6 +788,17 @@
             loading(spinning = true) {
                 this.spinning = spinning;
             },
+            getClientWithComment(email, inboundId) {
+                const dbInbound = this.dbInbounds.find(inbound => inbound.id === inboundId);
+                if (!dbInbound) return { email, comment: '' };
+                
+                const inboundSettings = JSON.parse(dbInbound.settings);
+                if (inboundSettings.clients) {
+                    const client = inboundSettings.clients.find(c => c.email === email);
+                    return client ? { email: client.email, comment: client.comment || '' } : { email, comment: '' };
+                }
+                return { email, comment: '' };
+            },
             async getDBInbounds() {
                 this.refreshing = true;
                 const msg = await HttpUtil.post('/panel/inbound/list');
-- 
cgit v1.2.3