refactor(ui): replace manual template inheritance tree with TreeView component

src/ScadaLink.CentralUI/Components/Pages/Design/Templates.razor

@@ -33,16 +33,14 @@
             <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/templates/create")'>New Template</button>
         </div>
 
-        @* Inheritance tree visualization *@
+        <TreeView TItem="TmplTreeNode" Items="_templateTreeRoots"
-        <div class="card">
+                  ChildrenSelector="n => n.Children"
-            <div class="card-body p-2">
+                  HasChildrenSelector="n => n.Children.Count > 0"
-                @foreach (var node in BuildTemplateTree())
+                  KeySelector="n => (object)n.Template.Id"
-                {
+                  StorageKey="templates-tree"
-                    <div class="d-flex align-items-center py-1 border-bottom"
+                  Selectable="true"
-                         style="padding-left: @(node.Depth * 24 + 8)px; cursor: pointer;"
+                  SelectedKeyChanged="key => { if (key is int id) _ = SelectTemplate(id); }">
-                         @onclick="() => SelectTemplate(node.Template.Id)">
+            <NodeContent Context="node">
-                        <span class="me-2 text-muted small">@(node.HasChildren ? "[+]" : "  -")</span>
-                        <span class="flex-grow-1">
                 <strong>@node.Template.Name</strong>
                 @if (node.Template.ParentTemplateId.HasValue)
                 {
@@ -52,20 +50,27 @@
                 {
                     <span class="text-muted small ms-2">@node.Template.Description</span>
                 }
-                        </span>
+                <span class="badge bg-light text-dark ms-2">
-                        <span class="badge bg-light text-dark me-2">
                     @node.Template.Attributes.Count attr, @node.Template.Alarms.Count alm, @node.Template.Scripts.Count scr
                 </span>
                 @if (node.Template.Compositions.Count > 0)
                 {
-                            <span class="badge bg-info text-dark me-2">@node.Template.Compositions.Count comp</span>
+                    <span class="badge bg-info text-dark ms-1">@node.Template.Compositions.Count comp</span>
                 }
-                        <button class="btn btn-outline-danger btn-sm py-0 px-1"
+            </NodeContent>
-                                @onclick="() => DeleteTemplate(node.Template)" @onclick:stopPropagation="true">Delete</button>
+            <ContextMenu Context="node">
-                    </div>
+                <button class="dropdown-item" @onclick="() => SelectTemplate(node.Template.Id)">
-                }
+                    Edit
-            </div>
+                </button>
-        </div>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item text-danger" @onclick="() => DeleteTemplate(node.Template)">
+                    Delete
+                </button>
+            </ContextMenu>
+            <EmptyContent>
+                <span class="text-muted fst-italic">No templates. Create one to get started.</span>
+            </EmptyContent>
+        </TreeView>
     }
     else
     {
@@ -275,6 +280,7 @@
         try
         {
             _templates = (await TemplateEngineRepository.GetAllTemplatesAsync()).ToList();
+            BuildTemplateTree();
         }
         catch (Exception ex)
         {
@@ -283,24 +289,22 @@
         _loading = false;
     }
 
-    private record TemplateTreeNode(Template Template, int Depth, bool HasChildren);
+    private record TmplTreeNode(Template Template, List<TmplTreeNode> Children);
 
-    private List<TemplateTreeNode> BuildTemplateTree()
+    private List<TmplTreeNode> _templateTreeRoots = new();
+
+    private void BuildTemplateTree()
     {
-        var result = new List<TemplateTreeNode>();
+        _templateTreeRoots = BuildTmplChildren(null);
-        AddTemplateChildren(null, 0, result);
-        return result;
     }
 
-    private void AddTemplateChildren(int? parentId, int depth, List<TemplateTreeNode> result)
+    private List<TmplTreeNode> BuildTmplChildren(int? parentId)
     {
-        var children = _templates.Where(t => t.ParentTemplateId == parentId).OrderBy(t => t.Name);
+        return _templates
-        foreach (var child in children)
+            .Where(t => t.ParentTemplateId == parentId)
-        {
+            .OrderBy(t => t.Name)
-            var hasChildren = _templates.Any(t => t.ParentTemplateId == child.Id);
+            .Select(t => new TmplTreeNode(t, BuildTmplChildren(t.Id)))
-            result.Add(new TemplateTreeNode(child, depth, hasChildren));
+            .ToList();
-            AddTemplateChildren(child.Id, depth + 1, result);
-        }
     }
 
     private async Task SelectTemplate(int templateId)