wip custom browser resize logic

Directory.Packages.props

@@ -89,7 +89,6 @@
     <PackageVersion Include="Microsoft.Extensions.Http.Resilience" Version="$(MicrosoftExtensionsHttpResiliencePackageVersion)" />
     <PackageVersion Include="Microsoft.Extensions.TimeProvider.Testing" Version="$(MicrosoftExtensionsTimeProviderTestingVersion)" />
     <!-- external dependencies -->
-    <PackageVersion Include="BlazorPro.BlazorSize" Version="8.0.0" />
     <PackageVersion Include="Confluent.Kafka" Version="2.4.0" />
     <PackageVersion Include="Dapper" Version="2.1.37" />
     <PackageVersion Include="DnsClient" Version="1.7.0" />

src/Aspire.Dashboard/Aspire.Dashboard.csproj

@@ -31,7 +31,6 @@
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" />
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" />
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" />
-    <PackageReference Include="BlazorPro.BlazorSize" />
   </ItemGroup>
 
   <ItemGroup>

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.cs

@@ -5,7 +5,6 @@
 using Aspire.Dashboard.Configuration;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Utils;
-using BlazorPro.BlazorSize;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
 using Microsoft.Extensions.Options;

src/Aspire.Dashboard/Components/Resize/BrowserDimensionWatcher.razor

@@ -0,0 +1,5 @@
+<h3>BrowserDimensionWatcher</h3>
+
+@code {
+
+}

src/Aspire.Dashboard/Components/Resize/BrowserDimensionWatcher.razor.cs

@@ -0,0 +1,46 @@
+using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Utils;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Aspire.Dashboard.Components.Resize;
+
+public partial class BrowserDimensionWatcher : ComponentBase, IAsyncDisposable
+{
+    private IJSObjectReference? _jsModule;
+    public event BrowserResizedEventHandler? OnBrowserResize;
+
+    [Inject]
+    public required IJSRuntime JS { get; init; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/Components/Resize/BrowserDimensionWatcher.razor.js");
+            var viewport = await _jsModule.InvokeAsync<ViewportSize>("getWindowDimensions");
+            OnBrowserResize?.Invoke(this, new BrowserResizeEventArgs(GetViewportInformation(viewport)));
+        }
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_jsModule != null)
+        {
+            await JSInteropHelpers.SafeDisposeAsync(_jsModule);
+        }
+    }
+
+    private static ViewportInformation GetViewportInformation(ViewportSize viewportSize)
+    {
+        var isSmall = viewportSize.Width < 768;
+        return new ViewportInformation(!isSmall, viewportSize.Height, viewportSize.Width);
+    }
+
+    public delegate void BrowserResizedEventHandler(object sender, BrowserResizeEventArgs e);
+
+    private record ViewportSize(int Width, int Height);
+}
+

src/Aspire.Dashboard/Components/Resize/BrowserDimensionWatcher.razor.js

@@ -0,0 +1,6 @@
+export function getWindowDimensions() {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight
+    }
+}

src/Aspire.Dashboard/Components/Resize/BrowserResizeEventArgs.cs

@@ -0,0 +1,11 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using Aspire.Dashboard.Model;
+
+namespace Aspire.Dashboard.Components.Resize;
+
+public class BrowserResizeEventArgs(ViewportInformation viewportInformation) : EventArgs
+{
+    public ViewportInformation ViewportInformation { get; } = viewportInformation;
+}

src/Aspire.Dashboard/Components/_Imports.razor

@@ -15,7 +15,6 @@
 @using Aspire.Dashboard.Components.Controls
 @using Aspire.Dashboard.Components.Layout
 @using Microsoft.Extensions.Localization
-@using BlazorPro.BlazorSize
 
 @* Require authorization for all pages of the web app *@
 @attribute [Authorize(Policy = FrontendAuthorizationDefaults.PolicyName)]

src/Aspire.Dashboard/DashboardWebApplication.cs

@@ -17,7 +17,6 @@
 using Aspire.Dashboard.Otlp.Grpc;
 using Aspire.Dashboard.Otlp.Storage;
 using Aspire.Hosting;
-using BlazorPro.BlazorSize;
 using Microsoft.AspNetCore.Authentication.Certificate;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.AspNetCore.Authentication.OpenIdConnect;
@@ -153,9 +152,6 @@ public DashboardWebApplication(Action<WebApplicationBuilder>? configureBuilder =
 
         builder.Services.AddLocalization();
 
-        builder.Services.AddMediaQueryService();
-        builder.Services.AddResizeListener();
-
         _app = builder.Build();
 
         _dashboardOptionsMonitor = _app.Services.GetRequiredService<IOptionsMonitor<DashboardOptions>>();