From 30345c2941d70b28e1ca86801c82d9ead64cecf5 Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Mon, 10 Aug 2026 16:31:55 -0400
Subject: [PATCH] style(adminui): group UNS page + modal buttons into
 btn-groups

Task 3 of the AdminUI UI sweep. Behavior-preserving markup only:

- GlobalUns: Expand/Collapse pair -> btn-group btn-group-sm (Import stays
  separate); delete-confirm footer Cancel+Delete -> btn-group.
- Area/Line/ScriptedAlarm/VirtualTag/AddReference/ImportEquipment modal
  footers: Cancel + primary -> btn-group.
- EquipmentPage: the three text-end action cells (Save name/Remove,
  Edit/Delete x2) -> btn-group btn-group-sm, me-1 spacers dropped.
- UnsTree: per-node actions become real small buttons (outline-secondary,
  outline-danger for destructive) and adjacent runs of >=2 group into
  btn-group btn-group-sm; the genuine navigation links (cluster settings,
  equipment Open) stay links. Expander/leaf placeholder adopt .tree-twist
  in place of the inline width:18px.
---
 .../Components/Pages/Uns/EquipmentPage.razor  | 18 +++++---
 .../Components/Pages/Uns/GlobalUns.razor      | 18 +++++---
 .../Shared/Uns/AddReferenceModal.razor        | 12 ++---
 .../Components/Shared/Uns/AreaModal.razor     | 12 ++---
 .../Shared/Uns/ImportEquipmentModal.razor     | 16 ++++---
 .../Components/Shared/Uns/LineModal.razor     | 12 ++---
 .../Shared/Uns/ScriptedAlarmModal.razor       | 12 ++---
 .../Components/Shared/Uns/UnsTree.razor       | 45 +++++++++++--------
 .../Shared/Uns/VirtualTagModal.razor          | 12 ++---
 9 files changed, 93 insertions(+), 64 deletions(-)

diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
index 94452818..75c8d610 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
@@ -171,8 +171,10 @@ else
                                        placeholder="(uses raw name)" />
                             </td>
                             <td class="text-end text-nowrap">
-                                <button type="button" class="btn btn-outline-secondary btn-sm me-1" @onclick="() => SaveOverride(r)">Save name</button>
-                                <button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => RemoveReference(r)">Remove</button>
+                                <div class="btn-group btn-group-sm" role="group">
+                                    <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="() => SaveOverride(r)">Save name</button>
+                                    <button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => RemoveReference(r)">Remove</button>
+                                </div>
                             </td>
                         </tr>
                     }
@@ -215,8 +217,10 @@ else
                             <td class="mono">@v.ScriptId</td>
                             <td>@(v.Enabled ? "Yes" : "No")</td>
                             <td class="text-end">
-                                <button type="button" class="btn btn-outline-secondary btn-sm me-1" @onclick="() => OpenEditVirtualTag(v.VirtualTagId)">Edit</button>
-                                <button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteVirtualTag(v.VirtualTagId)">Delete</button>
+                                <div class="btn-group btn-group-sm" role="group">
+                                    <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="() => OpenEditVirtualTag(v.VirtualTagId)">Edit</button>
+                                    <button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteVirtualTag(v.VirtualTagId)">Delete</button>
+                                </div>
                             </td>
                         </tr>
                     }
@@ -261,8 +265,10 @@ else
                             <td class="mono">@a.PredicateScriptId</td>
                             <td>@(a.Enabled ? "Yes" : "No")</td>
                             <td class="text-end">
-                                <button type="button" class="btn btn-outline-secondary btn-sm me-1" @onclick="() => OpenEditAlarm(a.ScriptedAlarmId)">Edit</button>
-                                <button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteAlarm(a.ScriptedAlarmId)">Delete</button>
+                                <div class="btn-group btn-group-sm" role="group">
+                                    <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="() => OpenEditAlarm(a.ScriptedAlarmId)">Edit</button>
+                                    <button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteAlarm(a.ScriptedAlarmId)">Delete</button>
+                                </div>
                             </td>
                         </tr>
                     }
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/GlobalUns.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/GlobalUns.razor
index a12c11c4..99c03e88 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/GlobalUns.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/GlobalUns.razor
@@ -20,8 +20,10 @@
             <input type="text" class="form-control form-control-sm" style="max-width:240px"
                    placeholder="Filter by name (substring)…"
                    @bind="_filter" @bind:event="oninput" />
-            <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="ExpandAll">Expand all</button>
-            <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="CollapseAll">Collapse all</button>
+            <div class="btn-group btn-group-sm" role="group">
+                <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="ExpandAll">Expand all</button>
+                <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="CollapseAll">Collapse all</button>
+            </div>
             <button type="button" class="btn btn-outline-primary btn-sm" @onclick="OpenImportModal">Import equipment CSV</button>
         </div>
     </div>
@@ -90,11 +92,13 @@
                     }
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-outline-secondary" @onclick="CloseModals" disabled="@_confirmBusy">Cancel</button>
-                    <button type="button" class="btn btn-danger" @onclick="ConfirmDeleteAsync" disabled="@_confirmBusy">
-                        @if (_confirmBusy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                        Delete
-                    </button>
+                    <div class="btn-group" role="group">
+                        <button type="button" class="btn btn-outline-secondary" @onclick="CloseModals" disabled="@_confirmBusy">Cancel</button>
+                        <button type="button" class="btn btn-danger" @onclick="ConfirmDeleteAsync" disabled="@_confirmBusy">
+                            @if (_confirmBusy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                            Delete
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AddReferenceModal.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AddReferenceModal.razor
index 3d05abd8..bb2709b0 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AddReferenceModal.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AddReferenceModal.razor
@@ -47,11 +47,13 @@
                     }
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
-                    <button type="button" class="btn btn-primary" @onclick="CommitAsync" disabled="@(_busy || _selected.Count == 0)">
-                        @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                        Add @_selected.Count reference@(_selected.Count == 1 ? "" : "s")
-                    </button>
+                    <div class="btn-group" role="group">
+                        <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
+                        <button type="button" class="btn btn-primary" @onclick="CommitAsync" disabled="@(_busy || _selected.Count == 0)">
+                            @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                            Add @_selected.Count reference@(_selected.Count == 1 ? "" : "s")
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AreaModal.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AreaModal.razor
index 7a1c35ee..01a6a662 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AreaModal.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AreaModal.razor
@@ -52,11 +52,13 @@
                         }
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
-                        <button type="submit" class="btn btn-primary" disabled="@_busy">
-                            @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                            @(IsNew ? "Create" : "Save changes")
-                        </button>
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
+                            <button type="submit" class="btn btn-primary" disabled="@_busy">
+                                @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                                @(IsNew ? "Create" : "Save changes")
+                            </button>
+                        </div>
                     </div>
                 </EditForm>
             </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ImportEquipmentModal.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ImportEquipmentModal.razor
index 759875b4..3a4420b1 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ImportEquipmentModal.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ImportEquipmentModal.razor
@@ -59,13 +59,15 @@
                     }
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-outline-secondary" @onclick="CloseAsync" disabled="@_busy">
-                        @(_result is null ? "Cancel" : "Close")
-                    </button>
-                    <button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@_busy">
-                        @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                        Import
-                    </button>
+                    <div class="btn-group" role="group">
+                        <button type="button" class="btn btn-outline-secondary" @onclick="CloseAsync" disabled="@_busy">
+                            @(_result is null ? "Cancel" : "Close")
+                        </button>
+                        <button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@_busy">
+                            @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                            Import
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/LineModal.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/LineModal.razor
index ed5a4c2b..a172bb15 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/LineModal.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/LineModal.razor
@@ -53,11 +53,13 @@
                         }
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
-                        <button type="submit" class="btn btn-primary" disabled="@_busy">
-                            @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                            @(IsNew ? "Create" : "Save changes")
-                        </button>
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
+                            <button type="submit" class="btn btn-primary" disabled="@_busy">
+                                @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                                @(IsNew ? "Create" : "Save changes")
+                            </button>
+                        </div>
                     </div>
                 </EditForm>
             </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ScriptedAlarmModal.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ScriptedAlarmModal.razor
index 8394a259..54643e67 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ScriptedAlarmModal.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ScriptedAlarmModal.razor
@@ -99,11 +99,13 @@
                         }
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
-                        <button type="submit" class="btn btn-primary" disabled="@_busy">
-                            @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                            @(IsNew ? "Create" : "Save changes")
-                        </button>
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
+                            <button type="submit" class="btn btn-primary" disabled="@_busy">
+                                @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                                @(IsNew ? "Create" : "Save changes")
+                            </button>
+                        </div>
                     </div>
                 </EditForm>
             </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/UnsTree.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/UnsTree.razor
index b0e1247d..9a76ffd6 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/UnsTree.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/UnsTree.razor
@@ -44,14 +44,14 @@
         <div @key="node.Key" class="d-flex align-items-center gap-1 py-1" style="@indent">
             @if (hasExpander)
             {
-                <button type="button" class="btn btn-sm btn-link p-0"
-                        @onclick="@(() => OnToggleExpand.InvokeAsync(node))" style="width:18px">
+                <button type="button" class="btn btn-sm btn-link p-0 tree-twist"
+                        @onclick="@(() => OnToggleExpand.InvokeAsync(node))">
                     @(childrenShown ? "▼" : "▶")
                 </button>
             }
             else
             {
-                <span style="width:18px"></span>
+                <span class="tree-twist"></span>
             }
             <span class="mono small">@node.DisplayName</span>
             @if (node.ChildCount > 0)
@@ -87,39 +87,46 @@
         {
             case UnsNodeKind.Enterprise:
                 // Deletes every cluster carrying this enterprise label (refuse-if-children).
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
+                <button type="button" class="btn btn-sm btn-outline-danger ms-2"
                         @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
                 break;
 
             case UnsNodeKind.Cluster:
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2"
+                // "⚙ settings" is genuine navigation and stays a link, so the two actions on
+                // either side of it are not adjacent and each carries its own margin.
+                <button type="button" class="btn btn-sm btn-outline-secondary ms-2"
                         @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Area</button>
                 <a class="btn btn-sm btn-link p-0 ms-2" href="@($"/clusters/{node.ClusterId}")">⚙ settings</a>
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
+                <button type="button" class="btn btn-sm btn-outline-danger ms-2"
                         @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
                 break;
 
             case UnsNodeKind.Area:
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2"
-                        @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Line</button>
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2"
-                        @onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
-                        @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
+                <div class="btn-group btn-group-sm ms-2" role="group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary"
+                            @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Line</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary"
+                            @onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
+                    <button type="button" class="btn btn-sm btn-outline-danger"
+                            @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
+                </div>
                 break;
 
             case UnsNodeKind.Line:
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2"
-                        @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Equipment</button>
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2"
-                        @onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
-                        @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
+                <div class="btn-group btn-group-sm ms-2" role="group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary"
+                            @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Equipment</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary"
+                            @onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
+                    <button type="button" class="btn btn-sm btn-outline-danger"
+                            @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
+                </div>
                 break;
 
             case UnsNodeKind.Equipment:
+                // "Open" is genuine navigation to the equipment detail page and stays a link.
                 <a class="btn btn-sm btn-link p-0 ms-2" href="@($"/uns/equipment/{node.EntityId}")">Open</a>
-                <button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
+                <button type="button" class="btn btn-sm btn-outline-danger ms-2"
                         @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
                 break;
         }
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/VirtualTagModal.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/VirtualTagModal.razor
index ab7a4868..b28e4642 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/VirtualTagModal.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/VirtualTagModal.razor
@@ -154,11 +154,13 @@
                         }
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@(_busy || _scriptSaving)">Cancel</button>
-                        <button type="submit" class="btn btn-primary" disabled="@(_busy || _scriptSaving)">
-                            @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
-                            @(IsNew ? "Create" : "Save changes")
-                        </button>
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@(_busy || _scriptSaving)">Cancel</button>
+                            <button type="submit" class="btn btn-primary" disabled="@(_busy || _scriptSaving)">
+                                @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                                @(IsNew ? "Create" : "Save changes")
+                            </button>
+                        </div>
                     </div>
                 </EditForm>
             </div>