From 38ece61b318dd394c454726d531be4d7bc977d5a Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 17:42:57 +0700
Subject: [PATCH] refactor(Managers): standardize button group styling and
 layout across ASNs, Domains, and IPRanges managers for improved UI
 consistency and user experience

---
 frontend/src/ASNsNewManager.jsx    | 69 ++++++++++++++------------
 frontend/src/DomainsNewManager.jsx | 20 ++------
 frontend/src/IPRangesManager.jsx   | 78 +++++++++++++++---------------
 3 files changed, 81 insertions(+), 86 deletions(-)

diff --git a/frontend/src/ASNsNewManager.jsx b/frontend/src/ASNsNewManager.jsx
index 033cf4c..005585d 100644
--- a/frontend/src/ASNsNewManager.jsx
+++ b/frontend/src/ASNsNewManager.jsx
@@ -769,37 +769,44 @@ function ASNsNewManager() {
                           </td>
                           <td>{renderCommunityBadge(item.community)}</td>
                           <td className="text-end">
-                            {editingAsn === item.asn ? (
-                              <>
-                                <CommunityAutocompleteInput
-                                  value={editingValue}
-                                  onChange={setEditingValue}
-                                  communities={communities}
-                                  onKeyDown={(e) => handleEditKeyDown(e, item.asn)}
-                                  className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                                  style={{ width: '150px' }}
-                                  useShortValue={true}
-                                />
-                                <Tooltip content="Сохранить (Enter)">
-                                  <button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
-                                </Tooltip>
-                                <Tooltip content="Отмена (Esc)">
-                                  <button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
-                                </Tooltip>
-                              </>
-                            ) : (
-                              <>
-                                <Tooltip content="Редактировать" position="top">
-                                  <button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать"><IconEdit size={16} /></button>
-                                </Tooltip>
-                                <Tooltip content="Копировать" position="top">
-                                  <button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.asn} ${item.community}`)} title="Копировать"><IconCopy size={16} /></button>
-                                </Tooltip>
-                                <Tooltip content="Удалить" position="top">
-                                  <button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить"><IconTrash size={16} /></button>
-                                </Tooltip>
-                              </>
-                            )}
+                            <div className="btn-group btn-group-sm" role="group" aria-label={`Действия с ASN ${item.asn}`}>
+                              {editingAsn === item.asn ? (
+                                <>
+                                  <CommunityAutocompleteInput
+                                    value={editingValue}
+                                    onChange={setEditingValue}
+                                    communities={communities}
+                                    onKeyDown={(e) => handleEditKeyDown(e, item.asn)}
+                                    className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                                    style={{ width: '150px' }}
+                                    useShortValue={true}
+                                  />
+                                  <Tooltip content="Сохранить (Enter)">
+                                    <button className="btn btn-icon btn-success me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)} aria-label="Сохранить">
+                                      <IconCheck size={16} />
+                                    </button>
+                                  </Tooltip>
+                                  <Tooltip content="Отмена (Esc)">
+                                    <button className="btn btn-icon btn-secondary" onClick={handleCancelEdit} aria-label="Отмена">
+                                      <IconX size={16} />
+                                    </button>
+                                  </Tooltip>
+                                </>
+                              ) : (
+                                <>
+                                  <Tooltip content="Редактировать" position="top">
+                                    <button className="btn btn-icon btn-outline-primary me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать">
+                                      <IconEdit size={16} />
+                                    </button>
+                                  </Tooltip>
+                                  <Tooltip content="Удалить" position="top">
+                                    <button className="btn btn-icon btn-outline-danger" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить">
+                                      <IconTrash size={16} />
+                                    </button>
+                                  </Tooltip>
+                                </>
+                              )}
+                            </div>
                           </td>
                         </tr>
                       ))}
diff --git a/frontend/src/DomainsNewManager.jsx b/frontend/src/DomainsNewManager.jsx
index 54de9da..c5b2e23 100644
--- a/frontend/src/DomainsNewManager.jsx
+++ b/frontend/src/DomainsNewManager.jsx
@@ -771,7 +771,7 @@ function DomainsNewManager() {
                             </div>
                           </td>
                           <td className="text-end">
-                            <div className="btn-group">
+                            <div className="btn-group btn-group-sm" role="group" aria-label={`Действия с доменом ${item.domain}`}>
                               {editingDomain === item.domain ? (
                                 <>
                                   <CommunityAutocompleteInput
@@ -785,7 +785,7 @@ function DomainsNewManager() {
                                   />
                                   <Tooltip content="Сохранить (Enter)">
                                     <button 
-                                      className="btn btn-success btn-icon btn-sm" 
+                                      className="btn btn-icon btn-success" 
                                       onClick={() => handleSaveEdit(item.domain)} 
                                       disabled={!isValidCommunity(editingValue)}
                                       aria-label="Сохранить"
@@ -795,7 +795,7 @@ function DomainsNewManager() {
                                   </Tooltip>
                                   <Tooltip content="Отмена (Esc)">
                                     <button 
-                                      className="btn btn-secondary btn-icon btn-sm" 
+                                      className="btn btn-icon btn-secondary" 
                                       onClick={handleCancelEdit}
                                       aria-label="Отмена"
                                     >
@@ -807,7 +807,7 @@ function DomainsNewManager() {
                                 <>
                                   <Tooltip content="Редактировать" position="top">
                                     <button 
-                                      className="btn btn-outline-primary btn-icon btn-sm" 
+                                      className="btn btn-icon btn-outline-primary" 
                                       aria-label="Редактировать" 
                                       onClick={() => handleEdit(item)}
                                       title="Редактировать"
@@ -815,19 +815,9 @@ function DomainsNewManager() {
                                       <IconEdit size={16} />
                                     </button>
                                   </Tooltip>
-                                  <Tooltip content="Копировать" position="top">
-                                    <button 
-                                      className="btn btn-outline-secondary btn-icon btn-sm" 
-                                      aria-label="Копировать" 
-                                      onClick={() => copyToClipboard(`${item.domain} ${item.community}`)}
-                                      title="Копировать"
-                                    >
-                                      <IconCopy size={16} />
-                                    </button>
-                                  </Tooltip>
                                   <Tooltip content="Удалить" position="top">
                                     <button 
-                                      className="btn btn-outline-danger btn-icon btn-sm" 
+                                      className="btn btn-icon btn-outline-danger" 
                                       aria-label="Удалить" 
                                       onClick={() => confirmDelete(item)}
                                       title="Удалить"
diff --git a/frontend/src/IPRangesManager.jsx b/frontend/src/IPRangesManager.jsx
index 3edf89b..ad09223 100644
--- a/frontend/src/IPRangesManager.jsx
+++ b/frontend/src/IPRangesManager.jsx
@@ -1005,37 +1005,44 @@ function IPRangesManager() {
                           </td>
                           <td>{renderCommunityBadge(item.community)}</td>
                           <td className="text-end">
-                            {editingIp === item.ipRange ? (
-                              <>
-                                <CommunityAutocompleteInput
-                                  value={editingValue}
-                                  onChange={setEditingValue}
-                                  communities={communities}
-                                  className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                                  style={{ width: '150px' }}
-                                  onKeyDown={(e) => handleEditKeyDown(e, item.ipRange)}
-                                  useShortValue={true}
-                                />
-                                <Tooltip content="Сохранить (Enter)">
-                                  <button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.ipRange)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
-                                </Tooltip>
-                                <Tooltip content="Отмена (Esc)">
-                                  <button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
-                                </Tooltip>
-                              </>
-                            ) : (
-                              <>
-                                <Tooltip content="Редактировать" position="top">
-                                  <button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать"><IconEdit size={16} /></button>
-                                </Tooltip>
-                                <Tooltip content="Копировать" position="top">
-                                  <button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.ipRange} ${item.community}`)} title="Копировать"><IconCopy size={16} /></button>
-                                </Tooltip>
-                                <Tooltip content="Удалить" position="top">
-                                  <button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить"><IconTrash size={16} /></button>
-                                </Tooltip>
-                              </>
-                            )}
+                            <div className="btn-group btn-group-sm" role="group" aria-label={`Действия с диапазоном ${item.ipRange}`}>
+                              {editingIp === item.ipRange ? (
+                                <>
+                                  <CommunityAutocompleteInput
+                                    value={editingValue}
+                                    onChange={setEditingValue}
+                                    communities={communities}
+                                    className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                                    style={{ width: '150px' }}
+                                    onKeyDown={(e) => handleEditKeyDown(e, item.ipRange)}
+                                    useShortValue={true}
+                                  />
+                                  <Tooltip content="Сохранить (Enter)">
+                                    <button className="btn btn-icon btn-success" onClick={() => handleSaveEdit(item.ipRange)} disabled={!isValidCommunity(editingValue)} aria-label="Сохранить">
+                                      <IconCheck size={16} />
+                                    </button>
+                                  </Tooltip>
+                                  <Tooltip content="Отмена (Esc)">
+                                    <button className="btn btn-icon btn-secondary" onClick={handleCancelEdit} aria-label="Отмена">
+                                      <IconX size={16} />
+                                    </button>
+                                  </Tooltip>
+                                </>
+                              ) : (
+                                <>
+                                  <Tooltip content="Редактировать" position="top">
+                                    <button className="btn btn-icon btn-outline-primary" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать">
+                                      <IconEdit size={16} />
+                                    </button>
+                                  </Tooltip>
+                                  <Tooltip content="Удалить" position="top">
+                                    <button className="btn btn-icon btn-outline-danger" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить">
+                                      <IconTrash size={16} />
+                                    </button>
+                                  </Tooltip>
+                                </>
+                              )}
+                            </div>
                           </td>
                         </tr>
                       ))}
@@ -1054,15 +1061,6 @@ function IPRangesManager() {
               />
             </div>
           </div>
-            {/* Пагинация */}
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              totalItems={totalItems || filtered.length}
-              pageSize={pageSize}
-              onPageChange={setCurrentPage}
-            />
-            <S3MetaBar keys={["ipRanges"]} />
         </div>
       </div>