refactor(ui/design): card grid, SMTP split, TemplateEdit vertical-stack

Templates: <h4> in flex header, Expand/Collapse moved into a Bulk
actions dropdown, hover-visible kebab on tree nodes with aria-labels.
TreeView CSS gets a .tv-kebab opacity-on-hover utility.

TemplateCreate: form-control (not -sm) for primary inputs; accessible
Back button.

TemplateEdit: Properties card vertical-stacked with Save at the
bottom-right and Parent rendered as readonly plaintext. Add-member
forms (Attributes, Alarms, Scripts, Compositions) reflowed from
horizontal row g-2 align-items-end into cards with stacked col-12
inputs (Scripts gets rows=10). Lock/Unlock badges show full words.
Per-row Delete moved into a kebab dropdown. Tab nav gains
role="tablist" / role="tab" / aria-selected / aria-controls and panels
get role="tabpanel". Validation entries get consistent strong-and-
muted styling.

SharedScripts: migrated from table to card grid (col-lg-6) matching
Sites; cards show code preview + param/return badges + Edit + kebab.
Search filter, empty state CTA, @key.

SharedScriptForm: small ?-icon tooltips next to Parameters and Return
Definition labels.

ExternalSystems: SMTP split out to its own page; remaining tabs (
External Systems, DB Connections, Notification Lists, API Methods,
API Keys) unified as card grids with per-tab search + empty-state CTA.
Tab nav gets full ARIA instrumentation. Header gains a link to the
new SMTP page.

New page SmtpConfiguration.razor at /design/smtp: vertical-stacked
form using the existing Credentials field on the entity.

ExternalSystemForm: AuthConfig placeholder updates based on the
selected AuthType (None / ApiKey / BasicAuth).

DbConnectionForm: form-text below Connection String noting that the
value is stored in plain text and is admin-only.

ApiMethodForm: Script textarea rows=10; JSON example placeholders
for Params and Returns.

NotificationListForm: form-control sizing on Name/email inputs;
thead.table-dark -> table-light on the recipients table.

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

@@ -30,15 +30,17 @@
                 </div>
                 <div class="mb-3">
                     <label class="form-label">Params (JSON)</label>
-                    <input type="text" class="form-control" @bind="_params" />
+                    <input type="text" class="form-control" @bind="_params"
+                           placeholder='[{"name":"id","type":"Int32"}]' />
                 </div>
                 <div class="mb-3">
                     <label class="form-label">Returns (JSON)</label>
-                    <input type="text" class="form-control" @bind="_returns" />
+                    <input type="text" class="form-control" @bind="_returns"
+                           placeholder='{"type":"Boolean"}' />
                 </div>
                 <div class="mb-3">
                     <label class="form-label">Script</label>
-                    <textarea class="form-control font-monospace" rows="5" @bind="_script" style="font-size: 0.85rem;"></textarea>
+                    <textarea class="form-control font-monospace" rows="10" @bind="_script" style="font-size: 0.85rem;"></textarea>
                 </div>
 
                 @if (_formError != null)

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

@@ -27,6 +27,7 @@
                 <div class="mb-3">
                     <label class="form-label">Connection String</label>
                     <input type="text" class="form-control" @bind="_connectionString" />
+                    <div class="form-text">Treat as sensitive — visible to admins only.</div>
                 </div>
                 <div class="mb-3">
                     <label class="form-label">Max Retries</label>

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

@@ -33,11 +33,13 @@
                     <select class="form-select" @bind="_authType">
                         <option>ApiKey</option>
                         <option>BasicAuth</option>
+                        <option>None</option>
                     </select>
                 </div>
                 <div class="mb-3">
                     <label class="form-label">Auth Config (JSON)</label>
-                    <input type="text" class="form-control" @bind="_authConfig" />
+                    <input type="text" class="form-control" @bind="_authConfig"
+                           placeholder="@_authConfigPlaceholder" />
                 </div>
                 <div class="mb-3">
                     <label class="form-label">Max Retries</label>
@@ -74,6 +76,14 @@
 
     private ExternalSystemDefinition? _existing;
 
+    // Per-AuthType placeholder that hints at the expected JSON shape for AuthConfig.
+    private string _authConfigPlaceholder => _authType switch
+    {
+        "ApiKey" => "{\"key\":\"xyz\"}",
+        "BasicAuth" => "{\"username\":\"u\",\"password\":\"p\"}",
+        _ => "{}"
+    };
+
     protected override async Task OnInitializedAsync()
     {
         if (Id.HasValue)

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

@@ -11,10 +11,14 @@
 @inject NavigationManager NavigationManager
 
 <div class="container-fluid mt-3">
-    <h4 class="mb-3">Integration Definitions</h4>
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h4 class="mb-0">Integration Definitions</h4>
+        <a class="btn btn-outline-secondary btn-sm"
+           href="/design/smtp">Email configuration →</a>
+    </div>
 
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     @if (_loading)
     {
@@ -26,33 +30,74 @@
     }
     else
     {
-        <ul class="nav nav-tabs mb-3">
+        <ul class="nav nav-tabs mb-3" role="tablist">
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_tab == "extsys" ? "active" : "")" @onclick='() => _tab = "extsys"'>
+                <button class="nav-link @(_tab == "extsys" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_tab == "extsys" ? "true" : "false")"
+                        aria-controls="int-tab-extsys"
+                        @onclick='() => _tab = "extsys"'>
                     External Systems <span class="badge bg-secondary">@_externalSystems.Count</span>
                 </button>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_tab == "dbconn" ? "active" : "")" @onclick='() => _tab = "dbconn"'>
+                <button class="nav-link @(_tab == "dbconn" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_tab == "dbconn" ? "true" : "false")"
+                        aria-controls="int-tab-dbconn"
+                        @onclick='() => _tab = "dbconn"'>
                     Database Connections <span class="badge bg-secondary">@_dbConnections.Count</span>
                 </button>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_tab == "notif" ? "active" : "")" @onclick='() => _tab = "notif"'>
+                <button class="nav-link @(_tab == "notif" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_tab == "notif" ? "true" : "false")"
+                        aria-controls="int-tab-notif"
+                        @onclick='() => _tab = "notif"'>
                     Notification Lists <span class="badge bg-secondary">@_notificationLists.Count</span>
                 </button>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_tab == "inbound" ? "active" : "")" @onclick='() => _tab = "inbound"'>
+                <button class="nav-link @(_tab == "inbound" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_tab == "inbound" ? "true" : "false")"
+                        aria-controls="int-tab-inbound"
+                        @onclick='() => _tab = "inbound"'>
                     Inbound API Methods <span class="badge bg-secondary">@_apiMethods.Count</span>
                 </button>
             </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link @(_tab == "apikeys" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_tab == "apikeys" ? "true" : "false")"
+                        aria-controls="int-tab-apikeys"
+                        @onclick='() => _tab = "apikeys"'>
+                    API Keys <span class="badge bg-secondary">@_apiKeys.Count</span>
+                </button>
+            </li>
         </ul>
 
-        @if (_tab == "extsys") { @RenderExternalSystems() }
+        @if (_tab == "extsys")
-        else if (_tab == "dbconn") { @RenderDbConnections() }
+        {
-        else if (_tab == "notif") { @RenderNotificationLists() @RenderSmtpConfig() }
+            <div role="tabpanel" id="int-tab-extsys">@RenderExternalSystems()</div>
-        else if (_tab == "inbound") { @RenderInboundApiMethods() @RenderApiKeyMethodAssignments() }
+        }
+        else if (_tab == "dbconn")
+        {
+            <div role="tabpanel" id="int-tab-dbconn">@RenderDbConnections()</div>
+        }
+        else if (_tab == "notif")
+        {
+            <div role="tabpanel" id="int-tab-notif">@RenderNotificationLists()</div>
+        }
+        else if (_tab == "inbound")
+        {
+            <div role="tabpanel" id="int-tab-inbound">@RenderInboundApiMethods()</div>
+        }
+        else if (_tab == "apikeys")
+        {
+            <div role="tabpanel" id="int-tab-apikeys">@RenderApiKeys()</div>
+        }
     }
 </div>
 
@@ -63,27 +108,44 @@
 
     // External Systems
     private List<ExternalSystemDefinition> _externalSystems = new();
+    private string _extsysSearch = "";
+    private IEnumerable<ExternalSystemDefinition> FilteredExternalSystems =>
+        string.IsNullOrWhiteSpace(_extsysSearch)
+            ? _externalSystems
+            : _externalSystems.Where(es => es.Name?.Contains(_extsysSearch, StringComparison.OrdinalIgnoreCase) ?? false);
 
     // Database Connections
     private List<DatabaseConnectionDefinition> _dbConnections = new();
+    private string _dbConnSearch = "";
+    private IEnumerable<DatabaseConnectionDefinition> FilteredDbConnections =>
+        string.IsNullOrWhiteSpace(_dbConnSearch)
+            ? _dbConnections
+            : _dbConnections.Where(dc => dc.Name?.Contains(_dbConnSearch, StringComparison.OrdinalIgnoreCase) ?? false);
 
-    // SMTP Configuration
+    // API Keys
-    private List<SmtpConfiguration> _smtpConfigs = new();
-    private bool _showSmtpForm;
-    private SmtpConfiguration? _editingSmtp;
-    private string _smtpHost = "", _smtpFromAddress = "", _smtpAuthType = "OAuth2";
-    private int _smtpPort = 587;
-    private string? _smtpFormError;
-
-    // API Key list
     private List<ApiKey> _apiKeys = new();
+    private string _apiKeySearch = "";
+    private IEnumerable<ApiKey> FilteredApiKeys =>
+        string.IsNullOrWhiteSpace(_apiKeySearch)
+            ? _apiKeys
+            : _apiKeys.Where(k => k.Name?.Contains(_apiKeySearch, StringComparison.OrdinalIgnoreCase) ?? false);
 
     // Notification Lists
     private List<NotificationList> _notificationLists = new();
     private Dictionary<int, List<NotificationRecipient>> _recipients = new();
+    private string _notifSearch = "";
+    private IEnumerable<NotificationList> FilteredNotificationLists =>
+        string.IsNullOrWhiteSpace(_notifSearch)
+            ? _notificationLists
+            : _notificationLists.Where(n => n.Name?.Contains(_notifSearch, StringComparison.OrdinalIgnoreCase) ?? false);
 
     // Inbound API Methods
     private List<ApiMethod> _apiMethods = new();
+    private string _apiMethodSearch = "";
+    private IEnumerable<ApiMethod> FilteredApiMethods =>
+        string.IsNullOrWhiteSpace(_apiMethodSearch)
+            ? _apiMethods
+            : _apiMethods.Where(m => m.Name?.Contains(_apiMethodSearch, StringComparison.OrdinalIgnoreCase) ?? false);
 
     private ToastNotification _toast = default!;
     private ConfirmDialog _confirmDialog = default!;
@@ -110,7 +172,6 @@
             }
 
             _apiMethods = (await InboundApiRepository.GetAllApiMethodsAsync()).ToList();
-            _smtpConfigs = (await NotificationRepository.GetAllSmtpConfigurationsAsync()).ToList();
             _apiKeys = (await InboundApiRepository.GetAllApiKeysAsync()).ToList();
         }
         catch (Exception ex) { _errorMessage = ex.Message; }
@@ -120,27 +181,67 @@
     // ==== External Systems ====
     private RenderFragment RenderExternalSystems() => __builder =>
     {
-        <div class="d-flex justify-content-between mb-2">
+        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">External Systems</h6>
+            <h5 class="mb-0">External Systems</h5>
-            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/external-systems/create")'>Add</button>
+            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/external-systems/create")'>Add External System</button>
         </div>
 
-        <table class="table table-sm table-striped">
+        @if (_externalSystems.Count == 0)
-            <thead class="table-dark"><tr><th>Name</th><th>URL</th><th>Auth</th><th>Retries</th><th>Delay</th><th style="width:120px;">Actions</th></tr></thead>
+        {
-            <tbody>
+            <div class="text-center py-5 text-muted">
-                @foreach (var es in _externalSystems)
+                <p class="mb-3">No external systems configured.</p>
+                <button class="btn btn-primary btn-sm"
+                        @onclick='() => NavigationManager.NavigateTo("/design/external-systems/create")'>
+                    Add your first external system
+                </button>
+            </div>
+        }
+        else
+        {
+            <div class="mb-3" style="max-width: 320px;">
+                <input class="form-control form-control-sm"
+                       placeholder="Filter by name…"
+                       @bind="_extsysSearch" @bind:event="oninput" />
+            </div>
+
+            @if (!FilteredExternalSystems.Any())
+            {
+                <p class="text-muted small">No external systems match the filter.</p>
+            }
+
+            <div class="row g-3">
+                @foreach (var es in FilteredExternalSystems)
                 {
-                    <tr>
+                    <div class="col-lg-6 col-12" @key="es.Id">
-                        <td>@es.Name</td><td class="small">@es.EndpointUrl</td><td><span class="badge bg-secondary">@es.AuthType</span></td>
+                        <div class="card h-100">
-                        <td class="small">@es.MaxRetries</td><td class="small">@es.RetryDelay.TotalSeconds s</td>
+                            <div class="card-body">
-                        <td>
+                                <div class="d-flex justify-content-between align-items-start mb-2">
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/external-systems/{es.Id}/edit")'>Edit</button>
+                                    <h5 class="card-title mb-0">@es.Name</h5>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteExtSys(es)">Delete</button>
+                                    <div class="d-flex gap-1">
-                        </td>
+                                        <button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/external-systems/{es.Id}/edit")'>Edit</button>
-                    </tr>
+                                        <div class="dropdown">
+                                            <button class="btn btn-outline-secondary btn-sm"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-expanded="false"
+                                                    aria-label="@($"More actions for {es.Name}")">⋮</button>
+                                            <ul class="dropdown-menu dropdown-menu-end">
+                                                <li><button class="dropdown-item text-danger" @onclick="() => DeleteExtSys(es)">Delete</button></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="small text-muted text-truncate mb-1" title="@es.EndpointUrl">@es.EndpointUrl</p>
+                                <div>
+                                    <span class="badge bg-secondary me-1">@es.AuthType</span>
+                                    <span class="badge bg-light text-dark me-1">Max @es.MaxRetries retries</span>
+                                    <span class="badge bg-light text-dark">Delay @es.RetryDelay.TotalSeconds s</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 }
-            </tbody>
+            </div>
-        </table>
+        }
     };
 
     private async Task DeleteExtSys(ExternalSystemDefinition es)
@@ -153,27 +254,66 @@
     // ==== Database Connections ====
     private RenderFragment RenderDbConnections() => __builder =>
     {
-        <div class="d-flex justify-content-between mb-2">
+        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Database Connections</h6>
+            <h5 class="mb-0">Database Connections</h5>
-            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/db-connections/create")'>Add</button>
+            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/db-connections/create")'>Add Database Connection</button>
         </div>
 
-        <table class="table table-sm table-striped">
+        @if (_dbConnections.Count == 0)
-            <thead class="table-dark"><tr><th>Name</th><th>Connection String</th><th>Retries</th><th>Delay</th><th style="width:120px;">Actions</th></tr></thead>
+        {
-            <tbody>
+            <div class="text-center py-5 text-muted">
-                @foreach (var dc in _dbConnections)
+                <p class="mb-3">No database connections configured.</p>
+                <button class="btn btn-primary btn-sm"
+                        @onclick='() => NavigationManager.NavigateTo("/design/db-connections/create")'>
+                    Add your first database connection
+                </button>
+            </div>
+        }
+        else
+        {
+            <div class="mb-3" style="max-width: 320px;">
+                <input class="form-control form-control-sm"
+                       placeholder="Filter by name…"
+                       @bind="_dbConnSearch" @bind:event="oninput" />
+            </div>
+
+            @if (!FilteredDbConnections.Any())
+            {
+                <p class="text-muted small">No database connections match the filter.</p>
+            }
+
+            <div class="row g-3">
+                @foreach (var dc in FilteredDbConnections)
                 {
-                    <tr>
+                    <div class="col-lg-6 col-12" @key="dc.Id">
-                        <td>@dc.Name</td><td class="small text-muted text-truncate" style="max-width:400px;">@dc.ConnectionString</td>
+                        <div class="card h-100">
-                        <td class="small">@dc.MaxRetries</td><td class="small">@dc.RetryDelay.TotalSeconds s</td>
+                            <div class="card-body">
-                        <td>
+                                <div class="d-flex justify-content-between align-items-start mb-2">
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/db-connections/{dc.Id}/edit")'>Edit</button>
+                                    <h5 class="card-title mb-0">@dc.Name</h5>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteDbConn(dc)">Delete</button>
+                                    <div class="d-flex gap-1">
-                        </td>
+                                        <button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/db-connections/{dc.Id}/edit")'>Edit</button>
-                    </tr>
+                                        <div class="dropdown">
+                                            <button class="btn btn-outline-secondary btn-sm"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-expanded="false"
+                                                    aria-label="@($"More actions for {dc.Name}")">⋮</button>
+                                            <ul class="dropdown-menu dropdown-menu-end">
+                                                <li><button class="dropdown-item text-danger" @onclick="() => DeleteDbConn(dc)">Delete</button></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="small text-muted text-truncate mb-1" title="@dc.ConnectionString">@dc.ConnectionString</p>
+                                <div>
+                                    <span class="badge bg-light text-dark me-1">Max @dc.MaxRetries retries</span>
+                                    <span class="badge bg-light text-dark">Delay @dc.RetryDelay.TotalSeconds s</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 }
-            </tbody>
+            </div>
-        </table>
+        }
     };
 
     private async Task DeleteDbConn(DatabaseConnectionDefinition dc)
@@ -186,39 +326,73 @@
     // ==== Notification Lists ====
     private RenderFragment RenderNotificationLists() => __builder =>
     {
-        <div class="d-flex justify-content-between mb-2">
+        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Notification Lists</h6>
+            <h5 class="mb-0">Notification Lists</h5>
-            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/notification-lists/create")'>Add List</button>
+            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/notification-lists/create")'>Add Notification List</button>
         </div>
 
-        @foreach (var list in _notificationLists)
+        @if (_notificationLists.Count == 0)
         {
-            <div class="card mb-2">
+            <div class="text-center py-5 text-muted">
-                <div class="card-header d-flex justify-content-between align-items-center py-2">
+                <p class="mb-3">No notification lists configured.</p>
-                    <strong>@list.Name</strong>
+                <button class="btn btn-primary btn-sm"
-                    <div>
+                        @onclick='() => NavigationManager.NavigateTo("/design/notification-lists/create")'>
-                        <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/notification-lists/{list.Id}/edit")'>Edit</button>
+                    Add your first notification list
-                        <button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteNotifList(list)">Delete</button>
+                </button>
+            </div>
+        }
+        else
+        {
+            <div class="mb-3" style="max-width: 320px;">
+                <input class="form-control form-control-sm"
+                       placeholder="Filter by name…"
+                       @bind="_notifSearch" @bind:event="oninput" />
+            </div>
+
+            @if (!FilteredNotificationLists.Any())
+            {
+                <p class="text-muted small">No notification lists match the filter.</p>
+            }
+
+            <div class="row g-3">
+                @foreach (var list in FilteredNotificationLists)
+                {
+                    var recips = _recipients.GetValueOrDefault(list.Id);
+                    <div class="col-lg-6 col-12" @key="list.Id">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-start mb-2">
+                                    <h5 class="card-title mb-0">@list.Name</h5>
+                                    <div class="d-flex gap-1">
+                                        <button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/notification-lists/{list.Id}/edit")'>Edit</button>
+                                        <div class="dropdown">
+                                            <button class="btn btn-outline-secondary btn-sm"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-expanded="false"
+                                                    aria-label="@($"More actions for {list.Name}")">⋮</button>
+                                            <ul class="dropdown-menu dropdown-menu-end">
+                                                <li><button class="dropdown-item text-danger" @onclick="() => DeleteNotifList(list)">Delete</button></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                @if (recips == null || recips.Count == 0)
+                                {
+                                    <p class="text-muted small fst-italic mb-0">No recipients.</p>
+                                }
+                                else
+                                {
+                                    <div>
+                                        @foreach (var r in recips)
+                                        {
+                                            <span class="badge bg-light text-dark me-1 mb-1">@r.Name &lt;@r.EmailAddress&gt;</span>
+                                        }
+                                    </div>
+                                }
+                            </div>
+                        </div>
                     </div>
-                </div>
+                }
-                <div class="card-body p-2">
-                    @{
-                        var recips = _recipients.GetValueOrDefault(list.Id);
-                    }
-                    @if (recips == null || recips.Count == 0)
-                    {
-                        <span class="text-muted small">No recipients.</span>
-                    }
-                    else
-                    {
-                        @foreach (var r in recips)
-                        {
-                            <span class="badge bg-light text-dark me-1 mb-1">
-                                @r.Name &lt;@r.EmailAddress&gt;
-                            </span>
-                        }
-                    }
-                </div>
             </div>
         }
     };
@@ -233,28 +407,69 @@
     // ==== Inbound API Methods ====
     private RenderFragment RenderInboundApiMethods() => __builder =>
     {
-        <div class="d-flex justify-content-between mb-2">
+        <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Inbound API Methods</h6>
+            <h5 class="mb-0">Inbound API Methods</h5>
-            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/api-methods/create")'>Add Method</button>
+            <button class="btn btn-primary btn-sm" @onclick='() => NavigationManager.NavigateTo("/design/api-methods/create")'>Add API Method</button>
         </div>
 
-        <table class="table table-sm table-striped">
+        @if (_apiMethods.Count == 0)
-            <thead class="table-dark"><tr><th>Name</th><th>Timeout</th><th>Script (preview)</th><th style="width:120px;">Actions</th></tr></thead>
+        {
-            <tbody>
+            <div class="text-center py-5 text-muted">
-                @foreach (var m in _apiMethods)
+                <p class="mb-3">No API methods configured.</p>
+                <button class="btn btn-primary btn-sm"
+                        @onclick='() => NavigationManager.NavigateTo("/design/api-methods/create")'>
+                    Add your first API method
+                </button>
+            </div>
+        }
+        else
+        {
+            <div class="mb-3" style="max-width: 320px;">
+                <input class="form-control form-control-sm"
+                       placeholder="Filter by name…"
+                       @bind="_apiMethodSearch" @bind:event="oninput" />
+            </div>
+
+            @if (!FilteredApiMethods.Any())
+            {
+                <p class="text-muted small">No API methods match the filter.</p>
+            }
+
+            <div class="row g-3">
+                @foreach (var m in FilteredApiMethods)
                 {
-                    <tr>
+                    var preview = m.Script.Length > 80 ? m.Script[..80] + "…" : m.Script;
-                        <td><code>POST /api/@m.Name</code></td>
+                    <div class="col-lg-6 col-12" @key="m.Id">
-                        <td>@m.TimeoutSeconds s</td>
+                        <div class="card h-100">
-                        <td class="small font-monospace text-truncate" style="max-width:300px;">@m.Script[..Math.Min(60, m.Script.Length)]</td>
+                            <div class="card-body">
-                        <td>
+                                <div class="d-flex justify-content-between align-items-start mb-2">
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1" @onclick='() => NavigationManager.NavigateTo($"/design/api-methods/{m.Id}/edit")'>Edit</button>
+                                    <div>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1" @onclick="() => DeleteApiMethod(m)">Delete</button>
+                                        <h5 class="card-title mb-1">@m.Name</h5>
-                        </td>
+                                        <code class="small">POST /api/@m.Name</code>
-                    </tr>
+                                    </div>
+                                    <div class="d-flex gap-1">
+                                        <button class="btn btn-outline-primary btn-sm" @onclick='() => NavigationManager.NavigateTo($"/design/api-methods/{m.Id}/edit")'>Edit</button>
+                                        <div class="dropdown">
+                                            <button class="btn btn-outline-secondary btn-sm"
+                                                    data-bs-toggle="dropdown"
+                                                    aria-expanded="false"
+                                                    aria-label="@($"More actions for {m.Name}")">⋮</button>
+                                            <ul class="dropdown-menu dropdown-menu-end">
+                                                <li><button class="dropdown-item text-danger" @onclick="() => DeleteApiMethod(m)">Delete</button></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <pre class="small text-muted font-monospace mb-2"
+                                     style="white-space: pre-wrap; word-break: break-all;"
+                                     title="@m.Script">@preview</pre>
+                                <span class="badge bg-light text-dark">Timeout @m.TimeoutSeconds s</span>
+                            </div>
+                        </div>
+                    </div>
                 }
-            </tbody>
+            </div>
-        </table>
+        }
     };
 
     private async Task DeleteApiMethod(ApiMethod m)
@@ -264,115 +479,56 @@
         catch (Exception ex) { _toast.ShowError(ex.Message); }
     }
 
-    // ==== SMTP Configuration ====
+    // ==== API Keys ====
-    private RenderFragment RenderSmtpConfig() => __builder =>
+    private RenderFragment RenderApiKeys() => __builder =>
     {
-        <hr class="my-3" />
+        <div class="d-flex justify-content-between align-items-center mb-2">
-        <div class="d-flex justify-content-between mb-2">
+            <h5 class="mb-0">API Keys</h5>
-            <h6 class="mb-0">SMTP Configuration</h6>
-            @if (_smtpConfigs.Count == 0)
-            {
-                <button class="btn btn-primary btn-sm" @onclick="ShowSmtpAddForm">Add SMTP Config</button>
-            }
         </div>
 
-        @if (_showSmtpForm)
+        @if (_apiKeys.Count == 0)
         {
-            <div class="card mb-2"><div class="card-body">
+            <div class="text-center py-5 text-muted">
-                <div class="row g-2 align-items-end">
+                <p class="mb-3">No API keys configured. Add your first API key from the Admin section.</p>
-                    <div class="col-md-3"><label class="form-label small">Host</label><input type="text" class="form-control form-control-sm" @bind="_smtpHost" /></div>
-                    <div class="col-md-1"><label class="form-label small">Port</label><input type="number" class="form-control form-control-sm" @bind="_smtpPort" /></div>
-                    <div class="col-md-2"><label class="form-label small">Auth Type</label>
-                        <select class="form-select form-select-sm" @bind="_smtpAuthType"><option>OAuth2</option><option>Basic</option></select></div>
-                    <div class="col-md-3"><label class="form-label small">From Address</label><input type="email" class="form-control form-control-sm" @bind="_smtpFromAddress" /></div>
-                    <div class="col-md-3">
-                        <button class="btn btn-success btn-sm me-1" @onclick="SaveSmtpConfig">Save</button>
-                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showSmtpForm = false">Cancel</button></div>
-                </div>
-                @if (_smtpFormError != null) { <div class="text-danger small mt-1">@_smtpFormError</div> }
-            </div></div>
-        }
-
-        @foreach (var smtp in _smtpConfigs)
-        {
-            <div class="card mb-2">
-                <div class="card-body py-2">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <span class="small">
-                            <strong>@smtp.Host</strong>:@smtp.Port |
-                            Auth: <span class="badge bg-secondary">@smtp.AuthType</span> |
-                            From: @smtp.FromAddress
-                        </span>
-                        <button class="btn btn-outline-primary btn-sm py-0 px-1" @onclick="() => { _editingSmtp = smtp; _smtpHost = smtp.Host; _smtpPort = smtp.Port; _smtpAuthType = smtp.AuthType; _smtpFromAddress = smtp.FromAddress; _showSmtpForm = true; }">Edit</button>
-                    </div>
-                </div>
             </div>
         }
-    };
+        else
-
-    private void ShowSmtpAddForm()
-    {
-        _showSmtpForm = true;
-        _editingSmtp = null;
-        _smtpHost = string.Empty;
-        _smtpPort = 587;
-        _smtpAuthType = "OAuth2";
-        _smtpFromAddress = string.Empty;
-        _smtpFormError = null;
-    }
-
-    private async Task SaveSmtpConfig()
-    {
-        _smtpFormError = null;
-        if (string.IsNullOrWhiteSpace(_smtpHost) || string.IsNullOrWhiteSpace(_smtpFromAddress)) { _smtpFormError = "Host and From Address required."; return; }
-        try
         {
-            if (_editingSmtp != null)
+            <div class="mb-3" style="max-width: 320px;">
-            {
+                <input class="form-control form-control-sm"
-                _editingSmtp.Host = _smtpHost.Trim();
+                       placeholder="Filter by name…"
-                _editingSmtp.Port = _smtpPort;
+                       @bind="_apiKeySearch" @bind:event="oninput" />
-                _editingSmtp.AuthType = _smtpAuthType;
+            </div>
-                _editingSmtp.FromAddress = _smtpFromAddress.Trim();
-                await NotificationRepository.UpdateSmtpConfigurationAsync(_editingSmtp);
-            }
-            else
-            {
-                var smtp = new SmtpConfiguration(_smtpHost.Trim(), _smtpAuthType, _smtpFromAddress.Trim()) { Port = _smtpPort };
-                await NotificationRepository.AddSmtpConfigurationAsync(smtp);
-            }
-            await NotificationRepository.SaveChangesAsync();
-            _showSmtpForm = false;
-            _toast.ShowSuccess("SMTP configuration saved.");
-            await LoadAllAsync();
-        }
-        catch (Exception ex) { _smtpFormError = ex.Message; }
-    }
 
-    // ==== API Key → Method Assignments ====
+            @if (!FilteredApiKeys.Any())
-    private RenderFragment RenderApiKeyMethodAssignments() => __builder =>
+            {
-    {
+                <p class="text-muted small">No API keys match the filter.</p>
-        <hr class="my-3" />
+            }
-        <div class="d-flex justify-content-between mb-2">
-            <h6 class="mb-0">API Keys</h6>
-        </div>
 
-        <table class="table table-sm table-striped">
+            <div class="row g-3">
-            <thead class="table-dark"><tr><th>Key Name</th><th>Enabled</th><th style="width:120px;">Actions</th></tr></thead>
+                @foreach (var key in FilteredApiKeys)
-            <tbody>
-                @foreach (var key in _apiKeys)
                 {
-                    <tr>
+                    <div class="col-lg-6 col-12" @key="key.Id">
-                        <td>@key.Name</td>
+                        <div class="card h-100">
-                        <td><span class="badge @(key.IsEnabled ? "bg-success" : "bg-secondary")">@(key.IsEnabled ? "Enabled" : "Disabled")</span></td>
+                            <div class="card-body">
-                        <td>
+                                <div class="d-flex justify-content-between align-items-start mb-2">
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1" @onclick="() => ToggleApiKeyEnabled(key)">
+                                    <h5 class="card-title mb-0">@key.Name</h5>
-                                @(key.IsEnabled ? "Disable" : "Enable")
+                                    <span class="badge @(key.IsEnabled ? "bg-success" : "bg-secondary")">
-                            </button>
+                                        @(key.IsEnabled ? "Enabled" : "Disabled")
-                        </td>
+                                    </span>
-                    </tr>
+                                </div>
+                                <div class="d-flex gap-1">
+                                    <button class="btn btn-outline-primary btn-sm"
+                                            @onclick="() => ToggleApiKeyEnabled(key)">
+                                        @(key.IsEnabled ? "Disable" : "Enable")
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 }
-            </tbody>
+            </div>
-        </table>
+        }
     };
 
     private async Task ToggleApiKeyEnabled(ApiKey key)

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

@@ -44,25 +44,25 @@
             <div class="card mb-3">
                 <div class="card-body">
                     <div class="mb-2">
-                        <label class="form-label small">Name</label>
+                        <label class="form-label">Name</label>
-                        <input type="text" class="form-control form-control-sm" @bind="_recipientName" />
+                        <input type="text" class="form-control" @bind="_recipientName" />
                     </div>
                     <div class="mb-2">
-                        <label class="form-label small">Email</label>
+                        <label class="form-label">Email</label>
-                        <input type="email" class="form-control form-control-sm" @bind="_recipientEmail" />
+                        <input type="email" class="form-control" @bind="_recipientEmail" />
                     </div>
                     @if (_recipientFormError != null)
                     {
                         <div class="text-danger small mt-2">@_recipientFormError</div>
                     }
                     <div class="mt-3">
-                        <button class="btn btn-success btn-sm" @onclick="SaveRecipient">Add</button>
+                        <button class="btn btn-success" @onclick="SaveRecipient">Add</button>
                     </div>
                 </div>
             </div>
 
             <table class="table table-sm table-striped">
-                <thead class="table-dark">
+                <thead class="table-light">
                     <tr>
                         <th>Name</th>
                         <th>Email</th>

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

@@ -30,12 +30,22 @@
                            disabled="@(Id.HasValue)" />
                 </div>
                 <div class="mb-2">
-                    <label class="form-label small">Parameters (JSON)</label>
+                    <label class="form-label small">
+                        Parameters (JSON)
+                        <span class="text-muted" title='JSON array of {name, type} objects. Example: [{"name":"id","type":"Int32"},{"name":"label","type":"String"}]'>
+                            <i class="bi bi-question-circle"></i>
+                        </span>
+                    </label>
                     <input type="text" class="form-control form-control-sm" @bind="_formParameters"
                            placeholder='e.g. [{"name":"x","type":"Int32"}]' />
                 </div>
                 <div class="mb-2">
-                    <label class="form-label small">Return Definition (JSON)</label>
+                    <label class="form-label small">
+                        Return Definition (JSON)
+                        <span class="text-muted" title='JSON object with a type field. Example: {"type":"Boolean"} or {"type":"List","itemType":"Int32"}'>
+                            <i class="bi bi-question-circle"></i>
+                        </span>
+                    </label>
                     <input type="text" class="form-control form-control-sm" @bind="_formReturn"
                            placeholder='e.g. {"type":"Boolean"}' />
                 </div>

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

@@ -16,7 +16,7 @@
     </div>
 
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     @if (_loading)
     {
@@ -26,46 +26,81 @@
     {
         <div class="alert alert-danger">@_errorMessage</div>
     }
+    else if (_scripts.Count == 0)
+    {
+        <div class="text-center py-5 text-muted">
+            <p class="mb-3">No shared scripts configured.</p>
+            <button class="btn btn-primary btn-sm"
+                    @onclick='() => NavigationManager.NavigateTo("/design/shared-scripts/create")'>
+                Create your first script
+            </button>
+        </div>
+    }
     else
     {
-        <table class="table table-sm table-striped table-hover">
+        <div class="mb-3" style="max-width: 320px;">
-            <thead class="table-dark">
+            <input class="form-control form-control-sm"
-                <tr>
+                   placeholder="Filter by name or code…"
-                    <th>ID</th>
+                   @bind="_search" @bind:event="oninput" />
-                    <th>Name</th>
+        </div>
-                    <th>Code (preview)</th>
+
-                    <th>Parameters</th>
+        @if (!FilteredScripts.Any())
-                    <th>Returns</th>
+        {
-                    <th style="width: 160px;">Actions</th>
+            <p class="text-muted small">No shared scripts match the filter.</p>
-                </tr>
+        }
-            </thead>
+
-            <tbody>
+        <div class="row g-3">
-                @if (_scripts.Count == 0)
+            @foreach (var s in FilteredScripts)
-                {
+            {
-                    <tr>
+                var preview = s.Code.Length > 80
-                        <td colspan="6" class="text-muted text-center">No shared scripts configured.</td>
+                    ? s.Code[..80] + "…"
-                    </tr>
+                    : s.Code;
-                }
+                var paramCount = CountJsonArrayEntries(s.ParameterDefinitions);
-                @foreach (var script in _scripts)
+                <div class="col-lg-6 col-12" @key="s.Id">
-                {
+                    <div class="card h-100">
-                    <tr>
+                        <div class="card-body">
-                        <td>@script.Id</td>
+                            <div class="d-flex justify-content-between align-items-start mb-2">
-                        <td><strong>@script.Name</strong></td>
+                                <h5 class="card-title mb-0">@s.Name</h5>
-                        <td class="small text-muted font-monospace text-truncate" style="max-width: 300px;">
+                                <div class="d-flex gap-1">
-                            @script.Code[..Math.Min(60, script.Code.Length)]@(script.Code.Length > 60 ? "..." : "")
+                                    <button class="btn btn-outline-primary btn-sm"
-                        </td>
+                                            @onclick='() => NavigationManager.NavigateTo($"/design/shared-scripts/{s.Id}/edit")'>
-                        <td class="small text-muted">@(script.ParameterDefinitions ?? "—")</td>
+                                        Edit
-                        <td class="small text-muted">@(script.ReturnDefinition ?? "—")</td>
+                                    </button>
-                        <td>
+                                    <div class="dropdown">
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1"
+                                        <button class="btn btn-outline-secondary btn-sm"
-                                    @onclick='() => NavigationManager.NavigateTo($"/design/shared-scripts/{script.Id}/edit")'>Edit</button>
+                                                data-bs-toggle="dropdown"
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                                aria-expanded="false"
-                                    @onclick="() => DeleteScript(script)">Delete</button>
+                                                aria-label="@($"More actions for {s.Name}")">⋮</button>
-                        </td>
+                                        <ul class="dropdown-menu dropdown-menu-end">
-                    </tr>
+                                            <li>
-                }
+                                                <button class="dropdown-item text-danger"
-            </tbody>
+                                                        @onclick="() => DeleteScript(s)">Delete</button>
-        </table>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <pre class="small text-muted font-monospace mb-2"
+                                 style="white-space: pre-wrap; word-break: break-all;"
+                                 title="@s.Code">@preview</pre>
+
+                            <div>
+                                <span class="badge bg-light text-dark me-1">@paramCount params</span>
+                                @if (!string.IsNullOrWhiteSpace(s.ReturnDefinition))
+                                {
+                                    <span class="badge bg-light text-dark">returns</span>
+                                }
+                                else
+                                {
+                                    <span class="badge bg-light text-dark">void</span>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
     }
 </div>
 
@@ -79,10 +114,18 @@
     private List<SharedScript> _scripts = new();
     private bool _loading = true;
     private string? _errorMessage;
+    private string _search = "";
 
     private ToastNotification _toast = default!;
     private ConfirmDialog _confirmDialog = default!;
 
+    private IEnumerable<SharedScript> FilteredScripts =>
+        string.IsNullOrWhiteSpace(_search)
+            ? _scripts
+            : _scripts.Where(s =>
+                (s.Name?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false) ||
+                (s.Code?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false));
+
     protected override async Task OnInitializedAsync()
     {
         await LoadDataAsync();
@@ -128,4 +171,21 @@
             _toast.ShowError($"Delete failed: {ex.Message}");
         }
     }
+
+    /// <summary>
+    /// Best-effort count of JSON array entries by tallying top-level objects.
+    /// Returns 0 if the parameter definition is null/empty/malformed.
+    /// </summary>
+    private static int CountJsonArrayEntries(string? json)
+    {
+        if (string.IsNullOrWhiteSpace(json)) return 0;
+        try
+        {
+            using var doc = System.Text.Json.JsonDocument.Parse(json);
+            if (doc.RootElement.ValueKind == System.Text.Json.JsonValueKind.Array)
+                return doc.RootElement.GetArrayLength();
+        }
+        catch { /* fall through */ }
+        return 0;
+    }
 }

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

@@ -0,0 +1,222 @@
+@page "/design/smtp"
+@using ScadaLink.Security
+@using ScadaLink.Commons.Interfaces.Repositories
+@using SmtpConfigurationEntity = ScadaLink.Commons.Entities.Notifications.SmtpConfiguration
+@attribute [Authorize(Policy = AuthorizationPolicies.RequireDesign)]
+@inject INotificationRepository NotificationRepository
+@inject NavigationManager NavigationManager
+
+<div class="container-fluid mt-3">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h4 class="mb-0">SMTP Configuration</h4>
+    </div>
+
+    <ToastNotification @ref="_toast" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
+
+    @if (_loading)
+    {
+        <LoadingSpinner IsLoading="true" />
+    }
+    else if (_errorMessage != null)
+    {
+        <div class="alert alert-danger">@_errorMessage</div>
+    }
+    else
+    {
+        @if (_smtpConfigs.Count == 0 && !_showForm)
+        {
+            <div class="text-center py-5 text-muted">
+                <p class="mb-3">No SMTP configuration set.</p>
+                <button class="btn btn-primary btn-sm" @onclick="ShowAddForm">
+                    Add SMTP configuration
+                </button>
+            </div>
+        }
+        else
+        {
+            @foreach (var smtp in _smtpConfigs)
+            {
+                <div class="card mb-3" @key="smtp.Id">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <strong>@smtp.Host</strong>
+                        @if (_editingSmtp?.Id != smtp.Id || !_showForm)
+                        {
+                            <button class="btn btn-outline-primary btn-sm" @onclick="() => StartEdit(smtp)">Edit</button>
+                        }
+                    </div>
+                    <div class="card-body small">
+                        <div class="row g-2">
+                            <div class="col-md-4 text-muted">Host</div>
+                            <div class="col-md-8">@smtp.Host:@smtp.Port</div>
+                            <div class="col-md-4 text-muted">Auth Type</div>
+                            <div class="col-md-8"><span class="badge bg-secondary">@smtp.AuthType</span></div>
+                            <div class="col-md-4 text-muted">From Address</div>
+                            <div class="col-md-8">@smtp.FromAddress</div>
+                            <div class="col-md-4 text-muted">Credentials</div>
+                            <div class="col-md-8">@(string.IsNullOrWhiteSpace(smtp.Credentials) ? "(not set)" : "(stored)")</div>
+                        </div>
+                    </div>
+                </div>
+            }
+
+            @if (_showForm)
+            {
+                <div class="card mb-3">
+                    <div class="card-header">@(_editingSmtp != null ? "Edit SMTP Configuration" : "Add SMTP Configuration")</div>
+                    <div class="card-body">
+                        <div class="row g-3">
+                            <div class="col-12">
+                                <label class="form-label">Host</label>
+                                <input type="text" class="form-control" @bind="_host" placeholder="smtp.example.com" />
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label">Port</label>
+                                <input type="number" class="form-control" @bind="_port" min="1" max="65535" />
+                            </div>
+                            <div class="col-md-8">
+                                <label class="form-label">Auth Type</label>
+                                <select class="form-select" @bind="_authType">
+                                    <option>OAuth2</option>
+                                    <option>Basic</option>
+                                </select>
+                            </div>
+                            <div class="col-12">
+                                <label class="form-label">Credentials</label>
+                                <input type="password" class="form-control" @bind="_credentials"
+                                       placeholder="OAuth2 client secret or SMTP password" />
+                                <div class="form-text">Treat as sensitive — visible to admins only.</div>
+                            </div>
+                            <div class="col-12">
+                                <label class="form-label">From Address</label>
+                                <input type="email" class="form-control" @bind="_fromAddress"
+                                       placeholder="noreply@example.com" />
+                            </div>
+                            @if (_formError != null)
+                            {
+                                <div class="col-12"><div class="text-danger small">@_formError</div></div>
+                            }
+                            <div class="col-12 text-end">
+                                <button class="btn btn-outline-secondary me-1" @onclick="CancelForm">Cancel</button>
+                                <button class="btn btn-success" @onclick="Save">Save</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+            else if (_smtpConfigs.Count == 0)
+            {
+                <button class="btn btn-primary btn-sm" @onclick="ShowAddForm">Add SMTP configuration</button>
+            }
+        }
+    }
+</div>
+
+@code {
+    private bool _loading = true;
+    private string? _errorMessage;
+
+    private List<SmtpConfigurationEntity> _smtpConfigs = new();
+    private bool _showForm;
+    private SmtpConfigurationEntity? _editingSmtp;
+
+    private string _host = string.Empty;
+    private int _port = 587;
+    private string _authType = "OAuth2";
+    private string? _credentials;
+    private string _fromAddress = string.Empty;
+    private string? _formError;
+
+    private ToastNotification _toast = default!;
+    private ConfirmDialog _confirmDialog = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadAsync();
+    }
+
+    private async Task LoadAsync()
+    {
+        _loading = true;
+        _errorMessage = null;
+        try
+        {
+            _smtpConfigs = (await NotificationRepository.GetAllSmtpConfigurationsAsync()).ToList();
+        }
+        catch (Exception ex)
+        {
+            _errorMessage = ex.Message;
+        }
+        _loading = false;
+    }
+
+    private void ShowAddForm()
+    {
+        _editingSmtp = null;
+        _host = string.Empty;
+        _port = 587;
+        _authType = "OAuth2";
+        _credentials = null;
+        _fromAddress = string.Empty;
+        _formError = null;
+        _showForm = true;
+    }
+
+    private void StartEdit(SmtpConfigurationEntity smtp)
+    {
+        _editingSmtp = smtp;
+        _host = smtp.Host;
+        _port = smtp.Port;
+        _authType = smtp.AuthType;
+        _credentials = smtp.Credentials;
+        _fromAddress = smtp.FromAddress;
+        _formError = null;
+        _showForm = true;
+    }
+
+    private void CancelForm()
+    {
+        _showForm = false;
+        _formError = null;
+    }
+
+    private async Task Save()
+    {
+        _formError = null;
+        if (string.IsNullOrWhiteSpace(_host) || string.IsNullOrWhiteSpace(_fromAddress))
+        {
+            _formError = "Host and From Address are required.";
+            return;
+        }
+
+        try
+        {
+            if (_editingSmtp != null)
+            {
+                _editingSmtp.Host = _host.Trim();
+                _editingSmtp.Port = _port;
+                _editingSmtp.AuthType = _authType;
+                _editingSmtp.Credentials = _credentials?.Trim();
+                _editingSmtp.FromAddress = _fromAddress.Trim();
+                await NotificationRepository.UpdateSmtpConfigurationAsync(_editingSmtp);
+            }
+            else
+            {
+                var smtp = new SmtpConfigurationEntity(_host.Trim(), _authType, _fromAddress.Trim())
+                {
+                    Port = _port,
+                    Credentials = _credentials?.Trim()
+                };
+                await NotificationRepository.AddSmtpConfigurationAsync(smtp);
+            }
+            await NotificationRepository.SaveChangesAsync();
+            _showForm = false;
+            _toast.ShowSuccess("SMTP configuration saved.");
+            await LoadAsync();
+        }
+        catch (Exception ex)
+        {
+            _formError = ex.Message;
+        }
+    }
+}

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

@@ -11,7 +11,9 @@
 
 <div class="container-fluid mt-3">
     <div class="mb-3">
-        <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">&larr; Back</button>
+        <button class="btn btn-outline-secondary btn-sm"
+                aria-label="Back to Templates"
+                @onclick="GoBack">← Back</button>
     </div>
 
     <h4 class="mb-3">Create Template</h4>
@@ -24,13 +26,13 @@
     {
         <div class="card">
             <div class="card-body">
-                <div class="mb-2">
+                <div class="mb-3">
-                    <label class="form-label small">Name</label>
+                    <label class="form-label">Name</label>
-                    <input type="text" class="form-control form-control-sm" @bind="_createName" />
+                    <input type="text" class="form-control" @bind="_createName" />
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
-                    <label class="form-label small">Parent Template</label>
+                    <label class="form-label">Parent Template</label>
-                    <select class="form-select form-select-sm" @bind="_createParentId">
+                    <select class="form-select" @bind="_createParentId">
                         <option value="0">(None - root template)</option>
                         @foreach (var t in _templates)
                         {
@@ -38,17 +40,17 @@
                         }
                     </select>
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
-                    <label class="form-label small">Description</label>
+                    <label class="form-label">Description</label>
-                    <input type="text" class="form-control form-control-sm" @bind="_createDescription" />
+                    <input type="text" class="form-control" @bind="_createDescription" />
                 </div>
                 @if (_formError != null)
                 {
                     <div class="text-danger small mt-2">@_formError</div>
                 }
                 <div class="mt-3">
-                    <button class="btn btn-success btn-sm me-1" @onclick="CreateTemplate">Create</button>
+                    <button class="btn btn-success me-1" @onclick="CreateTemplate">Create</button>
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">Cancel</button>
+                    <button class="btn btn-outline-secondary" @onclick="GoBack">Cancel</button>
                 </div>
             </div>
         </div>

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

@@ -14,10 +14,12 @@
 
 <div class="container-fluid mt-3">
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     <div class="mb-3">
-        <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">&larr; Templates</button>
+        <button class="btn btn-outline-secondary btn-sm"
+                aria-label="Back to Templates"
+                @onclick="GoBack">← Templates</button>
     </div>
 
     @if (_loading)
@@ -173,7 +175,13 @@
                         <ul class="mb-0 small">
                             @foreach (var err in _validationResult.Errors)
                             {
-                                <li>[@err.Category] @err.Message @(err.EntityName != null ? $"({err.EntityName})" : "")</li>
+                                <li class="mb-1">
+                                    <strong>@err.Category</strong> @err.Message
+                                    @if (err.EntityName != null)
+                                    {
+                                        <span class="text-muted">(@err.EntityName)</span>
+                                    }
+                                </li>
                             }
                         </ul>
                     </div>
@@ -185,7 +193,9 @@
                         <ul class="mb-0 small">
                             @foreach (var warn in _validationResult.Warnings)
                             {
-                                <li>[@warn.Category] @warn.Message</li>
+                                <li class="mb-1">
+                                    <strong>@warn.Category</strong> <span class="text-muted">@warn.Message</span>
+                                </li>
                             }
                         </ul>
                     </div>
@@ -201,49 +211,64 @@
         <div class="card mb-3">
             <div class="card-header">Template Properties</div>
             <div class="card-body">
-                <div class="row g-2 align-items-end">
+                <div class="row g-3">
-                    <div class="col-md-3">
+                    <div class="col-12">
-                        <label class="form-label small">Name</label>
+                        <label class="form-label">Name</label>
-                        <input type="text" class="form-control form-control-sm" @bind="_editName" />
+                        <input type="text" class="form-control" @bind="_editName" />
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-12">
-                        <label class="form-label small">Description</label>
+                        <label class="form-label">Description</label>
-                        <input type="text" class="form-control form-control-sm" @bind="_editDescription" />
+                        <input type="text" class="form-control" @bind="_editDescription" />
                     </div>
-                    <div class="col-md-3">
+                    <div class="col-12">
-                        <label class="form-label small">Parent Template</label>
+                        <label class="form-label">Parent Template</label>
-                        <div class="form-control-plaintext form-control-sm">
+                        <input type="text" readonly class="form-control form-control-plaintext"
-                            @(_selectedTemplate.ParentTemplateId is int pid
+                               value="@(_selectedTemplate.ParentTemplateId is int pid
-                                ? _templates.FirstOrDefault(t => t.Id == pid)?.Name ?? $"#{pid}"
+                                        ? _templates.FirstOrDefault(t => t.Id == pid)?.Name ?? $"#{pid}"
-                                : "(none)")
+                                        : "(none)")" />
-                        </div>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-12 text-end">
-                        <button class="btn btn-primary btn-sm" @onclick="UpdateTemplateProperties">Save Properties</button>
+                        <button class="btn btn-primary" @onclick="UpdateTemplateProperties">Save Properties</button>
                     </div>
                 </div>
             </div>
         </div>
 
         @* Tabs: Attributes, Alarms, Scripts, Compositions *@
-        <ul class="nav nav-tabs mb-3">
+        <ul class="nav nav-tabs mb-3" role="tablist">
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_activeTab == "attributes" ? "active" : "")" @onclick='() => _activeTab = "attributes"'>
+                <button class="nav-link @(_activeTab == "attributes" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_activeTab == "attributes" ? "true" : "false")"
+                        aria-controls="tmpl-tab-attributes"
+                        @onclick='() => _activeTab = "attributes"'>
                     Attributes <span class="badge bg-secondary">@_attributes.Count</span>
                 </button>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_activeTab == "alarms" ? "active" : "")" @onclick='() => _activeTab = "alarms"'>
+                <button class="nav-link @(_activeTab == "alarms" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_activeTab == "alarms" ? "true" : "false")"
+                        aria-controls="tmpl-tab-alarms"
+                        @onclick='() => _activeTab = "alarms"'>
                     Alarms <span class="badge bg-secondary">@_alarms.Count</span>
                 </button>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_activeTab == "scripts" ? "active" : "")" @onclick='() => _activeTab = "scripts"'>
+                <button class="nav-link @(_activeTab == "scripts" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_activeTab == "scripts" ? "true" : "false")"
+                        aria-controls="tmpl-tab-scripts"
+                        @onclick='() => _activeTab = "scripts"'>
                     Scripts <span class="badge bg-secondary">@_scripts.Count</span>
                 </button>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" role="presentation">
-                <button class="nav-link @(_activeTab == "compositions" ? "active" : "")" @onclick='() => _activeTab = "compositions"'>
+                <button class="nav-link @(_activeTab == "compositions" ? "active" : "")"
+                        role="tab"
+                        aria-selected="@(_activeTab == "compositions" ? "true" : "false")"
+                        aria-controls="tmpl-tab-compositions"
+                        @onclick='() => _activeTab = "compositions"'>
                     Compositions <span class="badge bg-secondary">@_compositions.Count</span>
                 </button>
             </li>
@@ -251,19 +276,19 @@
 
         @if (_activeTab == "attributes")
         {
-            @RenderAttributesTab()
+            <div role="tabpanel" id="tmpl-tab-attributes">@RenderAttributesTab()</div>
         }
         else if (_activeTab == "alarms")
         {
-            @RenderAlarmsTab()
+            <div role="tabpanel" id="tmpl-tab-alarms">@RenderAlarmsTab()</div>
         }
         else if (_activeTab == "scripts")
         {
-            @RenderScriptsTab()
+            <div role="tabpanel" id="tmpl-tab-scripts">@RenderScriptsTab()</div>
         }
         else if (_activeTab == "compositions")
         {
-            @RenderCompositionsTab()
+            <div role="tabpanel" id="tmpl-tab-compositions">@RenderCompositionsTab()</div>
         }
     };
 
@@ -383,48 +408,52 @@
     private RenderFragment RenderAttributesTab() => __builder =>
     {
         <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Attributes</h6>
+            <h5 class="mb-0">Attributes</h5>
             <button class="btn btn-primary btn-sm" @onclick="() => { _showAttrForm = true; _attrFormError = null; _attrName = string.Empty; _attrValue = null; _attrIsLocked = false; _attrDataSourceRef = null; }">Add Attribute</button>
         </div>
 
         @if (_showAttrForm)
         {
-            <div class="card mb-2">
+            <div class="card mb-3">
+                <div class="card-header">Add Attribute</div>
                 <div class="card-body">
-                    <div class="row g-2 align-items-end">
+                    <div class="row g-3">
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Name</label>
+                            <label class="form-label">Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_attrName" />
+                            <input type="text" class="form-control" @bind="_attrName" />
                         </div>
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Data Type</label>
+                            <label class="form-label">Data Type</label>
-                            <select class="form-select form-select-sm" @bind="_attrDataType">
+                            <select class="form-select" @bind="_attrDataType">
                                 @foreach (var dt in Enum.GetValues<DataType>())
                                 {
                                     <option value="@dt">@dt</option>
                                 }
                             </select>
                         </div>
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Value</label>
+                            <label class="form-label">Value</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_attrValue" />
+                            <input type="text" class="form-control" @bind="_attrValue" />
                         </div>
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Data Source Ref</label>
+                            <label class="form-label">Data Source Ref</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_attrDataSourceRef" placeholder="Tag path" />
+                            <input type="text" class="form-control" @bind="_attrDataSourceRef" placeholder="Tag path" />
                         </div>
-                        <div class="col-md-1">
+                        <div class="col-12">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" @bind="_attrIsLocked" id="attrLocked" />
-                                <label class="form-check-label small" for="attrLocked">Locked</label>
+                                <label class="form-check-label" for="attrLocked">Locked</label>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        @if (_attrFormError != null)
-                            <button class="btn btn-success btn-sm me-1" @onclick="AddAttribute">Add</button>
+                        {
-                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAttrForm = false">Cancel</button>
+                            <div class="col-12"><div class="text-danger small">@_attrFormError</div></div>
+                        }
+                        <div class="col-12 text-end">
+                            <button class="btn btn-outline-secondary me-1" @onclick="() => _showAttrForm = false">Cancel</button>
+                            <button class="btn btn-success" @onclick="AddAttribute">Add</button>
                         </div>
                     </div>
-                    @if (_attrFormError != null) { <div class="text-danger small mt-1">@_attrFormError</div> }
                 </div>
             </div>
         }
@@ -437,7 +466,7 @@
                     <th>Value</th>
                     <th>Data Source</th>
                     <th>Lock</th>
-                    <th style="width: 80px;">Actions</th>
+                    <th style="width: 60px;">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -451,16 +480,26 @@
                         <td>
                             @if (attr.IsLocked)
                             {
-                                <span class="badge bg-danger" title="Locked">L</span>
+                                <span class="badge bg-danger" aria-label="Locked">Locked</span>
                             }
                             else
                             {
-                                <span class="badge bg-light text-dark" title="Unlocked">U</span>
+                                <span class="badge bg-light text-dark" aria-label="Unlocked">Unlocked</span>
                             }
                         </td>
                         <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                            <div class="dropdown">
-                                    @onclick="() => DeleteAttribute(attr)">Delete</button>
+                                <button class="btn btn-outline-secondary btn-sm py-0 px-1"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                        aria-label="@($"More actions for {attr.Name}")">⋮</button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <button class="dropdown-item text-danger"
+                                                @onclick="() => DeleteAttribute(attr)">Delete</button>
+                                    </li>
+                                </ul>
+                            </div>
                         </td>
                     </tr>
                 }
@@ -472,48 +511,52 @@
     private RenderFragment RenderAlarmsTab() => __builder =>
     {
         <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Alarms</h6>
+            <h5 class="mb-0">Alarms</h5>
             <button class="btn btn-primary btn-sm" @onclick="() => { _showAlarmForm = true; _alarmFormError = null; _alarmName = string.Empty; _alarmPriority = 500; _alarmTriggerConfig = null; _alarmIsLocked = false; }">Add Alarm</button>
         </div>
 
         @if (_showAlarmForm)
         {
-            <div class="card mb-2">
+            <div class="card mb-3">
+                <div class="card-header">Add Alarm</div>
                 <div class="card-body">
-                    <div class="row g-2 align-items-end">
+                    <div class="row g-3">
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Name</label>
+                            <label class="form-label">Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_alarmName" />
+                            <input type="text" class="form-control" @bind="_alarmName" />
                         </div>
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Trigger Type</label>
+                            <label class="form-label">Trigger Type</label>
-                            <select class="form-select form-select-sm" @bind="_alarmTriggerType">
+                            <select class="form-select" @bind="_alarmTriggerType">
                                 @foreach (var tt in Enum.GetValues<AlarmTriggerType>())
                                 {
                                     <option value="@tt">@tt</option>
                                 }
                             </select>
                         </div>
-                        <div class="col-md-1">
+                        <div class="col-12">
-                            <label class="form-label small">Priority</label>
+                            <label class="form-label">Priority</label>
-                            <input type="number" class="form-control form-control-sm" @bind="_alarmPriority" min="0" max="1000" />
+                            <input type="number" class="form-control" @bind="_alarmPriority" min="0" max="1000" />
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-12">
-                            <label class="form-label small">Trigger Config (JSON)</label>
+                            <label class="form-label">Trigger Config (JSON)</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_alarmTriggerConfig" />
+                            <input type="text" class="form-control" @bind="_alarmTriggerConfig" />
                         </div>
-                        <div class="col-md-1">
+                        <div class="col-12">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" @bind="_alarmIsLocked" id="alarmLocked" />
-                                <label class="form-check-label small" for="alarmLocked">Locked</label>
+                                <label class="form-check-label" for="alarmLocked">Locked</label>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        @if (_alarmFormError != null)
-                            <button class="btn btn-success btn-sm me-1" @onclick="AddAlarm">Add</button>
+                        {
-                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showAlarmForm = false">Cancel</button>
+                            <div class="col-12"><div class="text-danger small">@_alarmFormError</div></div>
+                        }
+                        <div class="col-12 text-end">
+                            <button class="btn btn-outline-secondary me-1" @onclick="() => _showAlarmForm = false">Cancel</button>
+                            <button class="btn btn-success" @onclick="AddAlarm">Add</button>
                         </div>
                     </div>
-                    @if (_alarmFormError != null) { <div class="text-danger small mt-1">@_alarmFormError</div> }
                 </div>
             </div>
         }
@@ -526,7 +569,7 @@
                     <th>Priority</th>
                     <th>Config</th>
                     <th>Lock</th>
-                    <th style="width: 80px;">Actions</th>
+                    <th style="width: 60px;">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -538,12 +581,28 @@
                         <td>@alarm.PriorityLevel</td>
                         <td class="small text-muted text-truncate" style="max-width: 200px;">@(alarm.TriggerConfiguration ?? "—")</td>
                         <td>
-                            @if (alarm.IsLocked) { <span class="badge bg-danger">L</span> }
+                            @if (alarm.IsLocked)
-                            else { <span class="badge bg-light text-dark">U</span> }
+                            {
+                                <span class="badge bg-danger" aria-label="Locked">Locked</span>
+                            }
+                            else
+                            {
+                                <span class="badge bg-light text-dark" aria-label="Unlocked">Unlocked</span>
+                            }
                         </td>
                         <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                            <div class="dropdown">
-                                    @onclick="() => DeleteAlarm(alarm)">Delete</button>
+                                <button class="btn btn-outline-secondary btn-sm py-0 px-1"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                        aria-label="@($"More actions for {alarm.Name}")">⋮</button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <button class="dropdown-item text-danger"
+                                                @onclick="() => DeleteAlarm(alarm)">Delete</button>
+                                    </li>
+                                </ul>
+                            </div>
                         </td>
                     </tr>
                 }
@@ -555,44 +614,48 @@
     private RenderFragment RenderScriptsTab() => __builder =>
     {
         <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Scripts</h6>
+            <h5 class="mb-0">Scripts</h5>
             <button class="btn btn-primary btn-sm" @onclick="() => { _showScriptForm = true; _scriptFormError = null; _scriptName = string.Empty; _scriptCode = string.Empty; _scriptTriggerType = null; _scriptTriggerConfig = null; _scriptIsLocked = false; }">Add Script</button>
         </div>
 
         @if (_showScriptForm)
         {
-            <div class="card mb-2">
+            <div class="card mb-3">
+                <div class="card-header">Add Script</div>
                 <div class="card-body">
-                    <div class="row g-2">
+                    <div class="row g-3">
-                        <div class="col-md-3">
+                        <div class="col-12">
-                            <label class="form-label small">Name</label>
+                            <label class="form-label">Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_scriptName" />
+                            <input type="text" class="form-control" @bind="_scriptName" />
                         </div>
-                        <div class="col-md-2">
+                        <div class="col-12">
-                            <label class="form-label small">Trigger Type</label>
+                            <label class="form-label">Trigger Type</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
+                            <input type="text" class="form-control" @bind="_scriptTriggerType" placeholder="e.g. ValueChange" />
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-12">
-                            <label class="form-label small">Trigger Config (JSON)</label>
+                            <label class="form-label">Trigger Config (JSON)</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_scriptTriggerConfig" />
+                            <input type="text" class="form-control" @bind="_scriptTriggerConfig" />
                         </div>
-                        <div class="col-md-1">
+                        <div class="col-12">
-                            <div class="form-check mt-4">
+                            <div class="form-check">
                                 <input class="form-check-input" type="checkbox" @bind="_scriptIsLocked" id="scriptLocked" />
-                                <label class="form-check-label small" for="scriptLocked">Locked</label>
+                                <label class="form-check-label" for="scriptLocked">Locked</label>
                             </div>
                         </div>
+                        <div class="col-12">
+                            <label class="form-label">Code</label>
+                            <textarea class="form-control font-monospace" rows="10" @bind="_scriptCode"
+                                      style="font-size: 0.85rem;"></textarea>
+                        </div>
+                        @if (_scriptFormError != null)
+                        {
+                            <div class="col-12"><div class="text-danger small">@_scriptFormError</div></div>
+                        }
+                        <div class="col-12 text-end">
+                            <button class="btn btn-outline-secondary me-1" @onclick="() => _showScriptForm = false">Cancel</button>
+                            <button class="btn btn-success" @onclick="AddScript">Add</button>
+                        </div>
                     </div>
-                    <div class="mt-2">
-                        <label class="form-label small">Code</label>
-                        <textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_scriptCode"
-                                  style="font-size: 0.8rem;"></textarea>
-                    </div>
-                    <div class="mt-2">
-                        <button class="btn btn-success btn-sm me-1" @onclick="AddScript">Add</button>
-                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showScriptForm = false">Cancel</button>
-                    </div>
-                    @if (_scriptFormError != null) { <div class="text-danger small mt-1">@_scriptFormError</div> }
                 </div>
             </div>
         }
@@ -604,7 +667,7 @@
                     <th>Trigger</th>
                     <th>Code (preview)</th>
                     <th>Lock</th>
-                    <th style="width: 80px;">Actions</th>
+                    <th style="width: 60px;">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -613,14 +676,32 @@
                     <tr>
                         <td>@script.Name</td>
                         <td class="small">@(script.TriggerType ?? "—")</td>
-                        <td class="small text-muted text-truncate font-monospace" style="max-width: 300px;">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
+                        <td class="small text-muted text-truncate font-monospace"
+                            style="max-width: 300px;"
+                            title="@script.Code">@script.Code[..Math.Min(80, script.Code.Length)]@(script.Code.Length > 80 ? "..." : "")</td>
                         <td>
-                            @if (script.IsLocked) { <span class="badge bg-danger">L</span> }
+                            @if (script.IsLocked)
-                            else { <span class="badge bg-light text-dark">U</span> }
+                            {
+                                <span class="badge bg-danger" aria-label="Locked">Locked</span>
+                            }
+                            else
+                            {
+                                <span class="badge bg-light text-dark" aria-label="Unlocked">Unlocked</span>
+                            }
                         </td>
                         <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                            <div class="dropdown">
-                                    @onclick="() => DeleteScript(script)">Delete</button>
+                                <button class="btn btn-outline-secondary btn-sm py-0 px-1"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                        aria-label="@($"More actions for {script.Name}")">⋮</button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <button class="dropdown-item text-danger"
+                                                @onclick="() => DeleteScript(script)">Delete</button>
+                                    </li>
+                                </ul>
+                            </div>
                         </td>
                     </tr>
                 }
@@ -632,22 +713,23 @@
     private RenderFragment RenderCompositionsTab() => __builder =>
     {
         <div class="d-flex justify-content-between align-items-center mb-2">
-            <h6 class="mb-0">Compositions</h6>
+            <h5 class="mb-0">Compositions</h5>
             <button class="btn btn-primary btn-sm" @onclick="() => { _showCompForm = true; _compFormError = null; _compInstanceName = string.Empty; _compComposedTemplateId = 0; }">Add Composition</button>
         </div>
 
         @if (_showCompForm)
         {
-            <div class="card mb-2">
+            <div class="card mb-3">
+                <div class="card-header">Add Composition</div>
                 <div class="card-body">
-                    <div class="row g-2 align-items-end">
+                    <div class="row g-3">
-                        <div class="col-md-3">
+                        <div class="col-12">
-                            <label class="form-label small">Instance Name</label>
+                            <label class="form-label">Instance Name</label>
-                            <input type="text" class="form-control form-control-sm" @bind="_compInstanceName" />
+                            <input type="text" class="form-control" @bind="_compInstanceName" />
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-12">
-                            <label class="form-label small">Composed Template</label>
+                            <label class="form-label">Composed Template</label>
-                            <select class="form-select form-select-sm" @bind="_compComposedTemplateId">
+                            <select class="form-select" @bind="_compComposedTemplateId">
                                 <option value="0">Select template...</option>
                                 @foreach (var t in _templates.Where(t => _selectedTemplate == null || t.Id != _selectedTemplate.Id))
                                 {
@@ -655,12 +737,15 @@
                                 }
                             </select>
                         </div>
-                        <div class="col-md-3">
+                        @if (_compFormError != null)
-                            <button class="btn btn-success btn-sm me-1" @onclick="AddComposition">Add</button>
+                        {
-                            <button class="btn btn-outline-secondary btn-sm" @onclick="() => _showCompForm = false">Cancel</button>
+                            <div class="col-12"><div class="text-danger small">@_compFormError</div></div>
+                        }
+                        <div class="col-12 text-end">
+                            <button class="btn btn-outline-secondary me-1" @onclick="() => _showCompForm = false">Cancel</button>
+                            <button class="btn btn-success" @onclick="AddComposition">Add</button>
                         </div>
                     </div>
-                    @if (_compFormError != null) { <div class="text-danger small mt-1">@_compFormError</div> }
                 </div>
             </div>
         }
@@ -670,7 +755,7 @@
                 <tr>
                     <th>Instance Name</th>
                     <th>Composed Template</th>
-                    <th style="width: 80px;">Actions</th>
+                    <th style="width: 60px;">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -680,8 +765,18 @@
                         <td><code>@comp.InstanceName</code></td>
                         <td>@(_templates.FirstOrDefault(t => t.Id == comp.ComposedTemplateId)?.Name ?? $"#{comp.ComposedTemplateId}")</td>
                         <td>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                            <div class="dropdown">
-                                    @onclick="() => DeleteComposition(comp)">Delete</button>
+                                <button class="btn btn-outline-secondary btn-sm py-0 px-1"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                        aria-label="@($"More actions for {comp.InstanceName}")">⋮</button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <button class="dropdown-item text-danger"
+                                                @onclick="() => DeleteComposition(comp)">Delete</button>
+                                    </li>
+                                </ul>
+                            </div>
                         </td>
                     </tr>
                 }

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

@@ -13,7 +13,7 @@
 
 <div class="container-fluid mt-3">
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     <RenameFolderDialog @bind-IsVisible="_showRenameFolderDialog"
                         FolderId="_renameFolderId"
@@ -50,14 +50,30 @@
     }
     else
     {
-        <h6 class="mb-2">Templates</h6>
+        <div class="d-flex justify-content-between align-items-center mb-3">
-        <div class="btn-group btn-group-sm mb-2">
+            <h4 class="mb-0">Templates</h4>
-            <button class="btn btn-outline-secondary" title="New folder at root"
+            <div class="d-flex gap-2">
-                    @onclick="() => OpenNewFolderDialog(null)">+ Folder</button>
+                <div class="dropdown">
-            <button class="btn btn-outline-secondary" title="New template at root"
+                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
-                    @onclick='() => NavigationManager.NavigateTo("/design/templates/create")'>+ Template</button>
+                            data-bs-toggle="dropdown" aria-expanded="false">
-            <button class="btn btn-outline-secondary" @onclick="() => _tree.ExpandAll()">Expand</button>
+                        Bulk actions
-            <button class="btn btn-outline-secondary" @onclick="() => _tree.CollapseAll()">Collapse</button>
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <button class="dropdown-item" @onclick="() => _tree.ExpandAll()">Expand all folders</button>
+                        </li>
+                        <li>
+                            <button class="dropdown-item" @onclick="() => _tree.CollapseAll()">Collapse all folders</button>
+                        </li>
+                    </ul>
+                </div>
+                <button class="btn btn-outline-secondary btn-sm"
+                        title="New folder at root"
+                        @onclick="() => OpenNewFolderDialog(null)">+ Folder</button>
+                <button class="btn btn-primary btn-sm"
+                        title="New template at root"
+                        @onclick='() => NavigationManager.NavigateTo("/design/templates/create")'>+ Template</button>
+            </div>
         </div>
 
         <div style="max-height: calc(100vh - 160px); overflow-y: auto; padding: 4px;">
@@ -230,21 +246,61 @@
                         <span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">@node.Children.Count</span>
                     </span>
                 }
+                @RenderNodeKebab(node)
                 break;
 
             case TmplNodeKind.Template:
                 <span class="tv-glyph"><i class="bi bi-file-earmark-text"></i></span>
                 <span class="tv-label @(node.Children.Count > 0 ? "fw-semibold" : "")"
                       title="@node.Label">@node.Label</span>
+                @RenderNodeKebab(node)
                 break;
 
             case TmplNodeKind.Composition:
                 <span class="tv-glyph"><i class="bi bi-arrow-return-right"></i></span>
                 <span class="tv-label" title="@node.Label">@node.Label</span>
+                @RenderNodeKebab(node)
                 break;
         }
     };
 
+    private RenderFragment RenderNodeKebab(TmplNode node) => __builder =>
+    {
+        <span class="tv-kebab dropdown ms-auto" @onclick:stopPropagation="true">
+            <button type="button"
+                    class="btn btn-link btn-sm p-0 px-1 text-secondary tv-kebab-toggle"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    aria-label="@($"More actions for {node.Label}")">
+                <i class="bi bi-three-dots-vertical"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+                @switch (node.Kind)
+                {
+                    case TmplNodeKind.Folder:
+                        <li><button class="dropdown-item" @onclick="() => OpenNewFolderDialog(node.EntityId)">New Folder</button></li>
+                        <li><button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/create?folderId={node.EntityId}")'>New Template</button></li>
+                        <li><button class="dropdown-item" @onclick="() => OpenRenameFolderDialog(node.EntityId, node.Label)">Rename</button></li>
+                        <li><button class="dropdown-item" @onclick="() => OpenMoveFolderDialog(node.EntityId, node.Label)">Move to Folder…</button></li>
+                        <li><hr class="dropdown-divider" /></li>
+                        <li><button class="dropdown-item text-danger" @onclick="() => DeleteFolder(node.EntityId, node.Label)">Delete</button></li>
+                        break;
+
+                    case TmplNodeKind.Template:
+                        <li><button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/create?parentId={node.EntityId}")'>New Derived Template</button></li>
+                        <li><button class="dropdown-item" @onclick="() => OpenMoveTemplateDialog(node.EntityId, node.Label)">Move to Folder…</button></li>
+                        <li><hr class="dropdown-divider" /></li>
+                        <li><button class="dropdown-item text-danger" @onclick="() => DeleteTemplate(node.Template!)">Delete</button></li>
+                        break;
+
+                    case TmplNodeKind.Composition:
+                        <li><button class="dropdown-item" @onclick='() => NavigationManager.NavigateTo($"/design/templates/{node.Composition!.ComposedTemplateId}")'>Open composed template</button></li>
+                        break;
+                }
+            </ul>
+        </span>
+    };
+
     private void OnTreeNodeSelected(object? key)
     {
         if (key is not string s) return;

src/ScadaLink.CentralUI/Components/Shared/TreeView.razor.css

@@ -133,3 +133,20 @@
 [role="treeitem"][aria-expanded="true"] > .tv-row .tv-toggle .bi-chevron-right {
     transform: rotate(90deg);
 }
+
+/* Per-row kebab (More actions): hidden by default, revealed on row hover or when
+   the dropdown is open. Consumers render `<span class="tv-kebab ...">` inside
+   NodeContent to opt in. */
+.tv-row .tv-kebab {
+    flex: 0 0 auto;
+    opacity: 0;
+    transition: opacity 0.1s linear;
+    margin-left: 0.25rem;
+}
+
+.tv-row:hover .tv-kebab,
+.tv-row:focus-within .tv-kebab,
+.tv-row .tv-kebab.show,
+.tv-row .tv-kebab .show {
+    opacity: 1;
+}