UI dedup: shared DeviceDashboard + TransientNotice helper + spin-keyframe cleanup (audit #33/#34/#35)

src/ControlMenu/Components/Pages/Settings/CameraSettings.razor

@@ -1,3 +1,4 @@
+@using ControlMenu.Components.Shared
 @using ControlMenu.Components.Shared.Cameras
 @using ControlMenu.Components.Shared.Scanner
 @using ControlMenu.Modules.Cameras.Entities
@@ -150,23 +151,24 @@
     </div>
 }
 
-@if (!string.IsNullOrEmpty(_message))
+@if (Notice.IsVisible)
 {
-    <div class="alert @(_messageIsError ? "alert-danger" : "alert-success")" style="margin-top:1rem;">
-        @_message
+    <div class="alert @Notice.CssClass" style="margin-top:1rem;">
+        @Notice.Message
     </div>
 }
 
 @code {
+    private TransientNotice? _noticeBacking;
+    private TransientNotice Notice => _noticeBacking ??= new(() => InvokeAsync(StateHasChanged));
+
     private List<Camera> _cameras = new();
     private bool _scanModalOpen;
     private bool _addManualOpen;
     private Camera? _editTarget;
     private bool _showDeleteConfirm;
     private Camera? _deleteTarget;
     private bool _showDeleteAllConfirm;
-    private string? _message;
-    private bool _messageIsError;
     private bool _quickScanInProgress;
     private IDisposable? _scanSubscription;
     private const int DefaultLivenessInterval = 300;
@@ -208,8 +210,7 @@
 
     private async Task QuickScan()
     {
-        _message = null;
-        _messageIsError = false;
+        Notice.Clear();
         StateHasChanged();
 
         var detected = await SubnetDetector.DetectAsync();
@@ -341,17 +342,14 @@
 
     private async Task ShowMessage(string message, bool isError = false)
     {
-        _message = message;
-        _messageIsError = isError;
-        StateHasChanged();
-        await Task.Delay(isError ? 10000 : 5000);
-        _message = null;
-        StateHasChanged();
+        Notice.Show(message, isError ? "alert-danger" : "alert-success", dismissMs: isError ? 10000 : 5000);
+        await Task.CompletedTask;
     }
 
     public void Dispose()
     {
         ChangeNotifier.CamerasChanged -= OnCamerasChanged;
         _scanSubscription?.Dispose();
+        _noticeBacking?.Dispose();
     }
 }

src/ControlMenu/Components/Pages/Settings/DependencyManagement.razor

@@ -1,5 +1,7 @@
 @using ControlMenu.Data.Entities
 @using ControlMenu.Data.Enums
+@using ControlMenu.Components.Shared
+@implements IDisposable
 @inject IDependencyManagerService DepManager
 @inject IConfigurationService Config
 @inject NavigationManager Nav
@@ -160,23 +162,24 @@
     }
 </div>
 
-@if (!string.IsNullOrEmpty(_message))
+@if (Notice.IsVisible)
 {
-    <div class="alert @(_messageIsError ? "alert-danger" : "alert-success")" style="margin-top:1rem;">
-        @_message
+    <div class="alert @Notice.CssClass" style="margin-top:1rem;">
+        @Notice.Message
     </div>
 }
 
 @code {
+    private TransientNotice? _noticeBacking;
+    private TransientNotice Notice => _noticeBacking ??= new(() => InvokeAsync(StateHasChanged));
+
     private List<Dependency> _dependencies = [];
     private List<Dependency> _sortedDependencies = [];
     private HashSet<string> _hasInstallPath = [];
     private Dictionary<string, string> _installPaths = new();
     private bool _checkingAll;
     private Guid? _checkingId;
     private Guid? _updatingId;
-    private string? _message;
-    private bool _messageIsError;
     private bool _showUpdateDialog;
     private AssetMatch? _resolvedAsset;
     private Guid _updateTargetId;
@@ -228,7 +231,7 @@
     private async Task CheckAll()
     {
         _checkingAll = true;
-        _message = null;
+        Notice.Clear();
         StateHasChanged();
 
         var results = await DepManager.CheckAllAsync();
@@ -265,8 +268,7 @@
         if (_resolvedAsset is null)
         {
             _showUpdateDialog = false;
-            _message = $"Could not resolve download for {dep.Name}";
-            _messageIsError = true;
+            Notice.Show($"Could not resolve download for {dep.Name}", "alert-danger", dismissMs: 10000);
         }
 
         StateHasChanged();
@@ -333,7 +335,7 @@
     {
         _updatingAll = true;
         _updateProgress = 0;
-        _message = null;
+        Notice.Clear();
         StateHasChanged();
 
         var toUpdate = _dependencies
@@ -397,16 +399,8 @@
         ShowSaveMessage($"{name} path reset to default.");
     }
 
-    private void ShowSaveMessage(string msg, bool isError = false)
-    {
-        _message = msg;
-        _messageIsError = isError;
-        _ = Task.Delay(isError ? 10000 : 5000).ContinueWith(_ => InvokeAsync(() =>
-        {
-            _message = null;
-            StateHasChanged();
-        }));
-    }
+    private void ShowSaveMessage(string msg, bool isError = false) =>
+        Notice.Show(msg, isError ? "alert-danger" : "alert-success", dismissMs: isError ? 10000 : 5000);
 
     private string GetExternalPathDisplay(string depName) => depName switch
     {
@@ -447,4 +441,6 @@
         if (depName == "ws-scrcpy-web") return "—";
         return string.IsNullOrEmpty(value) ? "—" : value;
     }
+
+    public void Dispose() => _noticeBacking?.Dispose();
 }

src/ControlMenu/Components/Pages/Settings/DeviceManagement.razor

@@ -1,3 +1,4 @@
+@using ControlMenu.Components.Shared
 @using ControlMenu.Components.Shared.Scanner
 @using ControlMenu.Data.Entities
 @using ControlMenu.Data.Enums
@@ -158,14 +159,17 @@
     </div>
 }
 
-@if (!string.IsNullOrEmpty(_message))
+@if (Notice.IsVisible)
 {
-    <div class="alert @(_messageIsError ? "alert-danger" : "alert-success")" style="margin-top:1rem;">
-        @_message
+    <div class="alert @Notice.CssClass" style="margin-top:1rem;">
+        @Notice.Message
     </div>
 }
 
 @code {
+    private TransientNotice? _noticeBacking;
+    private TransientNotice Notice => _noticeBacking ??= new(() => InvokeAsync(StateHasChanged));
+
     private List<ControlMenu.Data.Entities.Device> _devices = [];
     private readonly Dictionary<Guid, bool> _deviceHasPin = new();
     private bool _showForm;
@@ -180,9 +184,6 @@
     private bool _showDeleteAllConfirm;
     private bool _scanning;
     private bool _showScanModal;
-    private string? _message;
-
-    private bool _messageIsError;
     private const int DefaultDiscoveryInterval = 300;
     private int _discoveryInterval = DefaultDiscoveryInterval;
 
@@ -436,17 +437,14 @@
 
     private async Task ShowMessage(string message, bool isError = false)
     {
-        _message = message;
-        _messageIsError = isError;
-        StateHasChanged();
-        await Task.Delay(isError ? 10000 : 5000);
-        _message = null;
-        StateHasChanged();
+        Notice.Show(message, isError ? "alert-danger" : "alert-success", dismissMs: isError ? 10000 : 5000);
+        await Task.CompletedTask;
     }
 
     public void Dispose()
     {
         Handler.OnStateChanged -= HandleHandlerStateChanged;
         DeviceChangeNotifier.Changed -= OnDevicesChanged;
+        _noticeBacking?.Dispose();
     }
 }

src/ControlMenu/Components/Pages/Settings/GeneralSettings.razor

@@ -1,5 +1,7 @@
 @using ControlMenu.Services
 @using ControlMenu.Services.Update
+@using ControlMenu.Components.Shared
+@implements IDisposable
 @inject IConfigurationService Config
 @inject IJSRuntime JS
 @inject NavigationManager Nav
@@ -201,14 +203,17 @@
     </SettingsGrid>
 </SettingsSection>
 
-@if (!string.IsNullOrEmpty(_message))
+@if (Notice.IsVisible)
 {
-    <div class="alert @(_messageIsError ? "alert-danger" : "alert-success")" style="margin-top:1rem;">
-        @_message
+    <div class="alert @Notice.CssClass" style="margin-top:1rem;">
+        @Notice.Message
     </div>
 }
 
 @code {
+    private TransientNotice? _noticeBacking;
+    private TransientNotice Notice => _noticeBacking ??= new(() => InvokeAsync(StateHasChanged));
+
     private string _theme = "dark";
     private string _timezone = "UTC";
     private string _smtpServer = "";
@@ -218,8 +223,6 @@
     private string _fromEmail = "";
     private string _notificationEmail = "";
     private bool _sendingTest;
-    private string? _message;
-    private bool _messageIsError;
     private string _wsscrcpyUrl = "http://localhost:8000";
     private string _dockerPath = "";
 
@@ -318,24 +321,16 @@
     private async Task SendTestEmail()
     {
         _sendingTest = true;
-        _message = null;
+        Notice.Clear();
         StateHasChanged();
 
         var (success, error) = await EmailService.SendTestAsync();
         _sendingTest = false;
         ShowMessage(success ? "Test email sent successfully!" : $"Failed: {error}", !success);
     }
 
-    private void ShowMessage(string msg, bool isError)
-    {
-        _message = msg;
-        _messageIsError = isError;
-        _ = Task.Delay(isError ? 10000 : 5000).ContinueWith(_ => InvokeAsync(() =>
-        {
-            _message = null;
-            StateHasChanged();
-        }));
-    }
+    private void ShowMessage(string msg, bool isError) =>
+        Notice.Show(msg, isError ? "alert-danger" : "alert-success", dismissMs: isError ? 10000 : 5000);
 
     private async Task RerunWizard()
     {
@@ -405,4 +400,6 @@
             StateHasChanged();
         }
     }
+
+    public void Dispose() => _noticeBacking?.Dispose();
 }

src/ControlMenu/Components/Pages/Settings/JellyfinSettingsSection.razor

@@ -1,5 +1,7 @@
 @using ControlMenu.Services
 @using ControlMenu.Modules.Jellyfin.Services
+@using ControlMenu.Components.Shared
+@implements IDisposable
 
 <SettingsSection Title="Docker Compose">
     <div class="settings-section-intro">
@@ -121,14 +123,17 @@
     </SettingsGrid>
 </SettingsSection>
 
-@if (!string.IsNullOrEmpty(_message))
+@if (Notice.IsVisible)
 {
-    <div class="alert @(_messageIsError ? "alert-danger" : "alert-success")" style="margin-top:1rem;">
-        @_message
+    <div class="alert @Notice.CssClass" style="margin-top:1rem;">
+        @Notice.Message
     </div>
 }
 
 @code {
+    private TransientNotice? _noticeBacking;
+    private TransientNotice Notice => _noticeBacking ??= new(() => InvokeAsync(StateHasChanged));
+
     [Inject] private IConfigurationService Config { get; set; } = default!;
     [Inject] private IJellyfinService JellyfinService { get; set; } = default!;
     [Inject] private IJellyfinDirectoryResolver DirectoryResolver { get; set; } = default!;
@@ -143,8 +148,6 @@
     private string _logDirectory = "";
     private bool _parsing;
     private ComposeParseResult? _parseResult;
-    private string? _message;
-    private bool _messageIsError;
     private int _backupCount;
     private long _backupSize;
     private int _logCount;
@@ -172,16 +175,17 @@
     private async Task SaveAndParse()
     {
         _parsing = true;
-        _message = null;
+        Notice.Clear();
         StateHasChanged();
 
         await Config.SetSettingAsync("jellyfin-compose-path", _composePath);
         _parseResult = await JellyfinService.ParseComposeFileAsync();
 
-        _message = _parseResult.ErrorMessage is null
+        var isError = _parseResult.ErrorMessage is not null;
+        var msg = _parseResult.ErrorMessage is null
             ? "Compose file parsed. Container name and database path configured."
             : _parseResult.ErrorMessage;
-        _messageIsError = _parseResult.ErrorMessage is not null;
+        ShowMessage(msg, isError);
         _parsing = false;
     }
 
@@ -327,16 +331,10 @@
         await InvokeAsync(StateHasChanged);
     }
 
-    private void ShowMessage(string msg, bool isError)
-    {
-        _message = msg;
-        _messageIsError = isError;
-        _ = Task.Delay(isError ? 10000 : 5000).ContinueWith(_ => InvokeAsync(() =>
-        {
-            _message = null;
-            StateHasChanged();
-        }));
-    }
+    private void ShowMessage(string msg, bool isError) =>
+        Notice.Show(msg, isError ? "alert-danger" : "alert-success", dismissMs: isError ? 10000 : 5000);
 
     private static string FormatSize(long bytes) => Services.FormatHelper.FormatSize(bytes);
+
+    public void Dispose() => _noticeBacking?.Dispose();
 }