Settings Dialog ->Settings Panel

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor

@@ -2,8 +2,12 @@
 @inject IJSRuntime JS
 @implements IDialogContentComponent
 
-<FluentRadioGroup TValue="string" Label="Theme" Value="@_currentSetting" ValueChanged="SettingChangedAsync" Orientation="Orientation.Vertical">
-    <FluentRadio Value="@ThemeSettingSystem">System</FluentRadio>
-    <FluentRadio Value="@ThemeSettingLight">Light</FluentRadio>
-    <FluentRadio Value="@ThemeSettingDark">Dark</FluentRadio>
-</FluentRadioGroup>
+<FluentStack Orientation="Orientation.Vertical" Style="display: contents">
+    <FluentRadioGroup TValue="string" Label="Theme" Value="@_currentSetting" ValueChanged="SettingChangedAsync" Orientation="Orientation.Vertical">
+        <FluentRadio Value="@ThemeSettingSystem">System</FluentRadio>
+        <FluentRadio Value="@ThemeSettingLight">Light</FluentRadio>
+        <FluentRadio Value="@ThemeSettingDark">Dark</FluentRadio>
+    </FluentRadioGroup>
+    <div style="height: 100%;"></div>
+    <div class="version">Version: @s_version</div>
+</FluentStack>

src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs

@@ -1,6 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using System.Reflection;
 using Microsoft.FluentUI.AspNetCore.Components;
 using Microsoft.JSInterop;
 
@@ -15,6 +16,7 @@ public partial class SettingsDialog : IDialogContentComponent, IAsyncDisposable
     private const string ThemeSettingLight = "Light";
 
     private string _currentSetting = ThemeSettingSystem;
+    private static readonly string? s_version = Assembly.GetExecutingAssembly().GetCustomAttribute<AssemblyFileVersionAttribute>()?.Version;
 
     private IJSObjectReference? _jsModule;
 

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

@@ -18,10 +18,11 @@ public async Task LaunchSettings()
             SecondaryAction = null,
             TrapFocus = true,
             Modal = true,
+            Alignment = HorizontalAlignment.Right,
             Width = "300px",
             Height = "auto"
         };
 
-        _ = await dialogService.ShowDialogAsync<SettingsDialog>(parameters).ConfigureAwait(true);
+        _ = await dialogService.ShowPanelAsync<SettingsDialog>(parameters).ConfigureAwait(true);
     }
 }

src/Aspire.Dashboard/wwwroot/css/app.css

@@ -147,3 +147,8 @@ fluent-data-grid-cell .long-inner-content {
     grid-template-rows: 1fr;
     gap: calc(var(--design-unit) * 2px);
 }
+
+.version {
+    text-align: end;
+    font-size: small;
+}