From 71894f4ba9cd8495bb676a7c1a32e3353369a380 Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Mon, 23 Mar 2026 02:38:25 -0400
Subject: [PATCH] refactor(ui): replace manual area tree rendering with
 TreeView component

---
 .../Components/Pages/Admin/Areas.razor        | 66 +++++++------------
 1 file changed, 22 insertions(+), 44 deletions(-)

diff --git a/src/ScadaLink.CentralUI/Components/Pages/Admin/Areas.razor b/src/ScadaLink.CentralUI/Components/Pages/Admin/Areas.razor
index c93df3a..c617872 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Admin/Areas.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/Areas.razor
@@ -96,31 +96,27 @@
                         </div>
                     }
 
-                    @if (_areas.Count == 0)
-                    {
-                        <div class="text-muted">No areas configured for this site.</div>
-                    }
-                    else
-                    {
-                        <div class="card">
-                            <div class="card-body p-2">
-                                @foreach (var node in BuildFlatTree())
-                                {
-                                    <div class="d-flex align-items-center py-1 border-bottom"
-                                         style="padding-left: @(node.Depth * 24 + 8)px;">
-                                        <span class="me-2 text-muted small">
-                                            @(node.HasChildren ? "[+]" : "  -")
-                                        </span>
-                                        <span class="flex-grow-1">@node.Area.Name</span>
-                                        <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1"
-                                                @onclick="() => EditArea(node.Area)">Edit</button>
-                                        <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                                @onclick="() => DeleteArea(node.Area)">Delete</button>
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                    }
+                    <TreeView TItem="Area" Items="@_rootAreas"
+                              ChildrenSelector='a => a.Children.OrderBy(c => c.Name).ToList()'
+                              HasChildrenSelector="a => a.Children.Any()"
+                              KeySelector="a => (object)a.Id"
+                              StorageKey="areas-tree">
+                        <NodeContent Context="area">
+                            <span>@area.Name</span>
+                        </NodeContent>
+                        <ContextMenu Context="area">
+                            <button class="dropdown-item" @onclick="() => EditArea(area)">
+                                Edit
+                            </button>
+                            <div class="dropdown-divider"></div>
+                            <button class="dropdown-item text-danger" @onclick="() => DeleteArea(area)">
+                                Delete
+                            </button>
+                        </ContextMenu>
+                        <EmptyContent>
+                            <span class="text-muted fst-italic">No areas for this site. Add one above.</span>
+                        </EmptyContent>
+                    </TreeView>
                 }
             </div>
         </div>
@@ -176,25 +172,7 @@
         }
     }
 
-    private record AreaTreeNode(Area Area, int Depth, bool HasChildren);
-
-    private List<AreaTreeNode> BuildFlatTree()
-    {
-        var result = new List<AreaTreeNode>();
-        AddChildren(null, 0, result);
-        return result;
-    }
-
-    private void AddChildren(int? parentId, int depth, List<AreaTreeNode> result)
-    {
-        var children = _areas.Where(a => a.ParentAreaId == parentId).OrderBy(a => a.Name);
-        foreach (var child in children)
-        {
-            var hasChildren = _areas.Any(a => a.ParentAreaId == child.Id);
-            result.Add(new AreaTreeNode(child, depth, hasChildren));
-            AddChildren(child.Id, depth + 1, result);
-        }
-    }
+    private List<Area> _rootAreas => _areas.Where(a => a.ParentAreaId == null).OrderBy(a => a.Name).ToList();
 
     private string GetAreaPath(Area area)
     {