feat: adopt shared design-blazor components (#104)

Directory.Packages.props

@@ -26,8 +26,8 @@
     <PackageVersion Include="WolverineFx.RuntimeCompilation" Version="6.20.0" />
   </ItemGroup>
   <ItemGroup Label="AndreGoepel">
-    <PackageVersion Include="AndreGoepel.Design.Blazor" Version="1.0.3" />
-    <PackageVersion Include="AndreGoepel.Marten.Identity.Blazor" Version="1.3.4" />
+    <PackageVersion Include="AndreGoepel.Design.Blazor" Version="1.1.0" />
+    <PackageVersion Include="AndreGoepel.Marten.Identity.Blazor" Version="1.4.0" />
   </ItemGroup>
   <ItemGroup Label="OpenTelemetry">
     <PackageVersion Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.17.0" />

samples/AndreGoepel.AppFoundation.Sample/Components/Pages/Home.razor

@@ -7,7 +7,7 @@
 @inject IQuerySession QuerySession
 @inject NavigationManager NavigationManager
 
-<AppFoundationPageTitle Title="Home" Breadcrumb="Home" />
+<AppPageTitle Title="Home" Breadcrumb="Home" />
 
 <div class="rz-p-4 rz-p-md-8">
     <RadzenStack Gap="1.5rem" Style="max-width: 40rem; margin: 0 auto;">

samples/AndreGoepel.AppFoundation.Sample/Components/_Imports.razor

@@ -9,6 +9,8 @@
 @using AndreGoepel.AppFoundation
 @using AndreGoepel.AppFoundation.Components.Layout
 @using AndreGoepel.AppFoundation.Components.Shared
+@using AndreGoepel.Design.Blazor
+@using AndreGoepel.Design.Blazor.Components
 @using AndreGoepel.Marten.Identity.Blazor.Components.Account.Shared
 @using AndreGoepel.AppFoundation.Sample
 @using AndreGoepel.AppFoundation.Sample.Components

src/AndreGoepel.AppFoundation.Hosting/Initialization.cs

@@ -2,6 +2,7 @@
 using System.Security.Cryptography.X509Certificates;
 using AndreGoepel.AppFoundation.Hosting.DataProtection;
 using AndreGoepel.AppFoundation.MailService;
+using AndreGoepel.Design.Blazor;
 using AndreGoepel.Marten.Identity;
 using AndreGoepel.Marten.Identity.Blazor;
 using AndreGoepel.Marten.Identity.Blazor.Features;
@@ -142,6 +143,18 @@ public static WebApplicationBuilder AddAppFoundation(
 
         builder.Services.AddRadzenComponents();
 
+        // AddMartenIdentityBlazor (above) already seeds DesignBlazorOptions.BrandName from
+        // MartenIdentityBlazorOptions.ApplicationName. Registering our own Configure here —
+        // after that call — runs later in the options pipeline and wins, so the dashboard,
+        // login, and account pages all share one brand sourced from the host's
+        // AppFoundationLayoutOptions.BrandName instead of two independently configured names.
+        builder
+            .Services.AddDesignBlazor()
+            .AddOptions<DesignBlazorOptions>()
+            .Configure<IOptions<AppFoundationLayoutOptions>>(
+                (design, layout) => design.BrandName = layout.Value.BrandName
+            );
+
         builder.Services.AddHeaderPropagation();
 
         return builder;

src/AndreGoepel.AppFoundation.Hosting/packages.lock.json

@@ -4,12 +4,12 @@
     "net10.0": {
       "AndreGoepel.Marten.Identity.Blazor": {
         "type": "Direct",
-        "requested": "[1.3.4, )",
-        "resolved": "1.3.4",
-        "contentHash": "iau3CcGI9vACGTH0u1hsbTqofpmMN7Sx95bXgLAFCQnb8bs0GQ/oRpLexKZKlT0UCe2JZE/INaDBexgvayEoyA==",
+        "requested": "[1.4.0, )",
+        "resolved": "1.4.0",
+        "contentHash": "TfC+AzVFleA41flArHJONe7uDBbQXAw7V+9lBd4ybY7AAsX9jj2Rq55Ir65z8ch+5e2WmFhGHu+ccndLG3bYcw==",
         "dependencies": {
-          "AndreGoepel.Design.Blazor": "1.0.3",
-          "AndreGoepel.Marten.Identity": "1.3.4",
+          "AndreGoepel.Design.Blazor": "1.1.0",
+          "AndreGoepel.Marten.Identity": "1.4.0",
           "Marten": "9.16.0",
           "Marten.AspNetCore": "9.16.0",
           "Quartz.Extensions.Hosting": "3.18.2",
@@ -63,19 +63,19 @@
       },
       "AndreGoepel.Marten.Identity": {
         "type": "Transitive",
-        "resolved": "1.3.4",
-        "contentHash": "HkKzA7KWXj7z9LGlKxv3a1urVWF9IdCWuyyAIxFp8ujmdOGRC5XyFcRqcDePWd6wQj7zTtslGQdTGI7lBg9Cgw==",
+        "resolved": "1.4.0",
+        "contentHash": "jb4yYq18xxBHqkEj23BSfn1CpZa+qJJLzUE8Defg4VVIBMY37kF15JaYDowDZr1taCrsS1Np+ZWuazt6ooVEuQ==",
         "dependencies": {
-          "AndreGoepel.Marten.Identity.Abstractions": "1.3.4",
+          "AndreGoepel.Marten.Identity.Abstractions": "1.4.0",
           "Marten": "9.16.0",
           "Marten.AspNetCore": "9.16.0",
           "Quartz.Extensions.Hosting": "3.18.2"
         }
       },
       "AndreGoepel.Marten.Identity.Abstractions": {
         "type": "Transitive",
-        "resolved": "1.3.4",
-        "contentHash": "IW1/Aa8eXxqPmXyYy4LXrJIP7bNRrCYbaz1fk+qkbQh+m13Vd5wDybDUmbdQ7ipqaZWWhLSQCZZZcD+43nulpQ=="
+        "resolved": "1.4.0",
+        "contentHash": "MXFFYS2/wpxJ+G3UBAaoJV9GAdGJyRGIU7NUdTx/H7lVRYfJj7CpDAKN4wnkktkjWDhKIU1QeNgLfANiZlCMqg=="
       },
       "BouncyCastle.Cryptography": {
         "type": "Transitive",
@@ -559,8 +559,8 @@
         "type": "Project",
         "dependencies": {
           "AndreGoepel.AppFoundation.MailService": "[1.1.0, )",
-          "AndreGoepel.Design.Blazor": "[1.0.3, )",
-          "AndreGoepel.Marten.Identity.Blazor": "[1.3.4, )",
+          "AndreGoepel.Design.Blazor": "[1.1.0, )",
+          "AndreGoepel.Marten.Identity.Blazor": "[1.4.0, )",
           "Marten": "[9.16.0, )",
           "Radzen.Blazor": "[11.1.5, )",
           "WolverineFx.Marten": "[6.20.0, )"
@@ -588,11 +588,11 @@
       },
       "AndreGoepel.Design.Blazor": {
         "type": "CentralTransitive",
-        "requested": "[1.0.3, )",
-        "resolved": "1.0.3",
-        "contentHash": "WgKKyHT/i2GDIUNtj5GWR/POEMDxebtF2SeX8AVToEZ2yLrw1p2m1fqWc+L81myOo1AN6yZjTz411soEge9QSg==",
+        "requested": "[1.1.0, )",
+        "resolved": "1.1.0",
+        "contentHash": "hv/9YPUyf5pjxx2ASmN9Gdnc0l1EoBs0rmEFnHdnbqajGBLtGcoJlz0MjMvS8JCyllU52uv3heHcbdHeaipYDQ==",
         "dependencies": {
-          "Radzen.Blazor": "11.1.3"
+          "Radzen.Blazor": "11.1.5"
         }
       },
       "MailKit": {

src/AndreGoepel.AppFoundation/Components/Administration/Pages/EmailSettingsPage.razor

@@ -8,17 +8,12 @@
 @inject IEmailSender EmailSender
 @inject NotificationService NotificationService
 
-<AppFoundationPageTitle Title="Email Settings" Breadcrumb="Administration / Email Settings" />
+<AppPageTitle Title="Email Settings" Breadcrumb="Administration / Email Settings" />
 
 <div class="rz-p-4 rz-p-md-6">
     <RadzenStack Gap="1.5rem">
 
-        <div>
-            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H1">Email Settings</RadzenText>
-            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-text-secondary-color);">
-                Outgoing SMTP configuration for system emails.
-            </RadzenText>
-        </div>
+        <PageHeader Title="Email Settings" Subtitle="Outgoing SMTP configuration for system emails." />
 
         @if (loadedFromConfiguration)
         {
@@ -33,38 +28,32 @@
                 <RadzenStack Gap="1.25rem">
 
                     <div class="ag-form-grid">
-                        <RadzenStack Gap="0.4rem">
-                            <RadzenLabel Text="Sender name" Component="SenderName" />
+                        <FormField Label="Sender name" For="SenderName">
                             <RadzenTextBox @bind-Value=@Input.SenderName Name="SenderName" Style="width:100%" />
                             <RadzenRequiredValidator Component="SenderName" Text="Sender name is required" />
-                        </RadzenStack>
+                        </FormField>
 
-                        <RadzenStack Gap="0.4rem">
-                            <RadzenLabel Text="Sender email" Component="SenderEmail" />
+                        <FormField Label="Sender email" For="SenderEmail">
                             <RadzenTextBox @bind-Value=@Input.SenderEmail Name="SenderEmail" Style="width:100%" />
                             <RadzenRequiredValidator Component="SenderEmail" Text="Sender email is required" />
                             <RadzenEmailValidator Component="SenderEmail" Text="Invalid email address" />
-                        </RadzenStack>
+                        </FormField>
 
-                        <RadzenStack Gap="0.4rem">
-                            <RadzenLabel Text="SMTP server" Component="Server" />
+                        <FormField Label="SMTP server" For="Server">
                             <RadzenTextBox @bind-Value=@Input.Server Name="Server" Style="width:100%" />
                             <RadzenRequiredValidator Component="Server" Text="Server is required" />
-                        </RadzenStack>
+                        </FormField>
 
-                        <RadzenStack Gap="0.4rem">
-                            <RadzenLabel Text="Port" Component="Port" />
+                        <FormField Label="Port" For="Port">
                             <RadzenNumeric TValue="int" @bind-Value=@Input.Port Name="Port" Min="1" Max="65535" Style="width:120px" />
-                        </RadzenStack>
+                        </FormField>
 
-                        <RadzenStack Gap="0.4rem">
-                            <RadzenLabel Text="Username" Component="Username" />
+                        <FormField Label="Username" For="Username">
                             <RadzenTextBox @bind-Value=@Input.Username Name="Username" Style="width:100%" />
                             <RadzenRequiredValidator Component="Username" Text="Username is required" />
-                        </RadzenStack>
+                        </FormField>
 
-                        <RadzenStack Gap="0.4rem">
-                            <RadzenLabel Text="Password" Component="Password" />
+                        <FormField Label="Password" For="Password">
                             <RadzenPassword @bind-Value=@Input.Password
                                             Name="Password"
                                             Placeholder="@(hasPassword ? "Leave blank to keep current" : "")"
@@ -74,7 +63,7 @@
                             {
                                 <RadzenRequiredValidator Component="Password" Text="Password is required" />
                             }
-                        </RadzenStack>
+                        </FormField>
                     </div>
 
                     <RadzenStack Orientation="Orientation.Horizontal" Gap="2rem" AlignItems="AlignItems.Center">

src/AndreGoepel.AppFoundation/Components/Administration/Pages/LoginFeaturesPage.razor

@@ -7,7 +7,7 @@
 @inject IIdentityFeatureSettingsStore SettingsStore
 @inject NotificationService NotificationService
 
-<AppFoundationPageTitle Title="Login Features" Breadcrumb="Administration / Login Features" />
+<AppPageTitle Title="Login Features" Breadcrumb="Administration / Login Features" />
 
 <div class="rz-p-4 rz-p-md-6">
     <RadzenStack Gap="1.5rem">
@@ -28,41 +28,31 @@
             </RadzenAlert>
         }
 
-        <RadzenCard Style="padding: 8px 30px;">
+        <RadzenCard>
             <RadzenTemplateForm TItem="InputModel" Data=@Input Submit=@OnValidSubmit>
-
-                <div style="display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rz-border-color);">
-                    <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;">
-                        <span style="font: 600 15px 'Space Grotesk', system-ui, sans-serif; color: var(--rz-text-title-color);">Self-service registration</span>
-                        <span style="font-size: 12.5px; color: var(--rz-text-secondary-color);">Lets visitors create their own account.</span>
-                    </div>
-                    <RadzenSwitch @bind-Value=@Input.EnableUserRegistration Name="EnableUserRegistration" />
-                </div>
-
-                <div style="display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rz-border-color);">
-                    <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;">
-                        <span style="font: 600 15px 'Space Grotesk', system-ui, sans-serif; color: var(--rz-text-title-color);">Two-factor authentication</span>
-                        <span style="font-size: 12.5px; color: var(--rz-text-secondary-color);">Authenticator-app setup. Users already enrolled can still complete sign-in.</span>
+                <RadzenStack Gap="0">
+
+                    <SettingToggleRow Label="Self-service registration"
+                                       Description="Lets visitors create their own account."
+                                       @bind-Value=@Input.EnableUserRegistration />
+
+                    <SettingToggleRow Label="Two-factor authentication"
+                                       Description="Authenticator-app setup. Users already enrolled can still complete sign-in."
+                                       @bind-Value=@Input.EnableTwoFactor />
+
+                    <SettingToggleRow Label="Passkeys"
+                                       Description="WebAuthn passkey registration and sign-in."
+                                       @bind-Value=@Input.EnablePasskey />
+
+                    <div class="ag-card-actions">
+                        <RadzenButton ButtonType="ButtonType.Submit"
+                                      Text="Save changes"
+                                      ButtonStyle="ButtonStyle.Primary"
+                                      IsBusy=@isSaving
+                                      BusyText="Saving..." />
                     </div>
-                    <RadzenSwitch @bind-Value=@Input.EnableTwoFactor Name="EnableTwoFactor" />
-                </div>
-
-                <div style="display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rz-border-color);">
-                    <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;">
-                        <span style="font: 600 15px 'Space Grotesk', system-ui, sans-serif; color: var(--rz-text-title-color);">Passkeys</span>
-                        <span style="font-size: 12.5px; color: var(--rz-text-secondary-color);">WebAuthn passkey registration and sign-in.</span>
-                    </div>
-                    <RadzenSwitch @bind-Value=@Input.EnablePasskey Name="EnablePasskey" />
-                </div>
-
-                <div style="display: flex; justify-content: flex-end; padding: 18px 0 20px;">
-                    <RadzenButton ButtonType="ButtonType.Submit"
-                                  Text="Save changes"
-                                  ButtonStyle="ButtonStyle.Primary"
-                                  IsBusy=@isSaving
-                                  BusyText="Saving..." />
-                </div>
 
+                </RadzenStack>
             </RadzenTemplateForm>
         </RadzenCard>
 

src/AndreGoepel.AppFoundation/Components/Pages/Error.razor

@@ -1,7 +1,7 @@
 @page "/Error"
 @using System.Diagnostics
 
-<AppFoundationPageTitle Title="Error" />
+<AppPageTitle Title="Error" />
 
 <div class="rz-p-4 rz-p-md-6">
     <RadzenStack Gap="1.5rem">

src/AndreGoepel.AppFoundation/Components/Pages/Home.razor

@@ -1,7 +1,7 @@
 @page "/dashboard"
 @attribute [Authorize]
 
-<AppFoundationPageTitle Title="Dashboard" Breadcrumb="Dashboard" />
+<AppPageTitle Title="Dashboard" Breadcrumb="Dashboard" />
 
 <div class="rz-p-4 rz-p-md-6">
     <RadzenStack Gap="1.5rem">

src/AndreGoepel.AppFoundation/Components/Pages/Setup.razor

@@ -23,7 +23,7 @@
 @inject NotificationService NotificationService
 @inject LoginTokenProtector LoginTokens
 
-<AppFoundationPageTitle Title="Initial setup" />
+<AppPageTitle Title="Initial setup" />
 
 <SectionContent SectionName="login-tagline">Set up your administrator account.</SectionContent>
 

src/AndreGoepel.AppFoundation/Components/Shared/ErrorPage.razor

@@ -1,26 +1,15 @@
 @inject NavigationManager NavigationManager
 
-<AppFoundationPageTitle Title="@_copy.Title" />
+<AppPageTitle Title="@_copy.Title" />
 
 <div class="rz-p-4 rz-p-md-8">
-    <RadzenCard>
-        <RadzenStack Orientation="Orientation.Vertical" Gap="2rem" AlignItems="AlignItems.Center">
-
-            <RadzenText TextStyle="TextStyle.H3" TagName="TagName.H1">@_copy.Title</RadzenText>
-
-            <RadzenAlert AlertStyle="AlertStyle.Danger"
-                         Shade="Shade.Lighter"
-                         Variant="Variant.Flat"
-                         AllowClose="false">
-                @_copy.Message
-            </RadzenAlert>
-
+    <EmptyState Icon="🚫︎" Title="@_copy.Title" Text="@_copy.Message">
+        <Actions>
             <RadzenButton Text="Go to home"
                           ButtonStyle="ButtonStyle.Primary"
                           Click=@(() => NavigationManager.NavigateTo("/")) />
-
-        </RadzenStack>
-    </RadzenCard>
+        </Actions>
+    </EmptyState>
 </div>
 
 @code {