From 2859947a344cb2548779d91c155ce5b141197b4b Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Sun, 7 Dec 2025 03:44:29 +0700
Subject: [PATCH] feat: Enhance FilterManager display logic by adding detailed
 community and gateway information, improving user experience with additional
 context for selected filters.

---
 frontend/src/FilterManager.jsx | 46 +++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index c392eb3..75a33cc 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -1764,19 +1764,53 @@ function FilterManager() {
                               />
                             </td>
                             <td>
-                              <div className="d-flex align-items-center">
-                                <span className="badge bg-blue-lt text-blue me-2">
+                              <div className="d-flex align-items-start">
+                                <span className="badge bg-blue-lt text-blue me-2 mt-1">
                                   <IconHash size={12} />
                                 </span>
-                                <code className="text-blue">{filter?.community || ''}</code>
+                                <div className="flex-grow-1">
+                                  <code className="text-blue">{filter?.community || ''}</code>
+                                  {(() => {
+                                    // Ищем community в справочнике
+                                    const communityData = communities.find(c => {
+                                      if (c.value === filter?.community) return true;
+                                      const normalized = c.value.includes(':') ? c.value : `${baseAS}:${c.value}`;
+                                      return normalized === filter?.community;
+                                    });
+                                    if (communityData && (communityData.name || communityData.description)) {
+                                      return (
+                                        <div className="text-muted small mt-1">
+                                          {communityData.name && <div className="fw-bold">{communityData.name}</div>}
+                                          {communityData.description && <div>{communityData.description}</div>}
+                                        </div>
+                                      );
+                                    }
+                                    return null;
+                                  })()}
+                                </div>
                               </div>
                             </td>
                             <td>
-                              <div className="d-flex align-items-center">
-                                <span className="badge bg-green-lt text-green me-2">
+                              <div className="d-flex align-items-start">
+                                <span className="badge bg-green-lt text-green me-2 mt-1">
                                   <IconServer size={12} />
                                 </span>
-                                <code className="text-green">{filter?.gateway || ''}</code>
+                                <div className="flex-grow-1">
+                                  <code className="text-green">{filter?.gateway || ''}</code>
+                                  {(() => {
+                                    // Ищем gateway в списке шлюзов сервера
+                                    const gatewayData = selectedServerGateways.find(gw => gw.name === filter?.gateway);
+                                    if (gatewayData && (gatewayData.ip || gatewayData.comment)) {
+                                      return (
+                                        <div className="text-muted small mt-1">
+                                          {gatewayData.ip && <div className="fw-bold">{gatewayData.ip}</div>}
+                                          {gatewayData.comment && <div>{gatewayData.comment}</div>}
+                                        </div>
+                                      );
+                                    }
+                                    return null;
+                                  })()}
+                                </div>
                               </div>
                             </td>
                             <td>