feat: align error pages with the design system

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

@@ -1,7 +1,10 @@
 @using AndreGoepel.AppFoundation.Components.Layout
+@using AndreGoepel.AppFoundation.Components.Pages
 @using AndreGoepel.Marten.Identity.Blazor.Components.Account.Shared
 
-<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="_additionalAssemblies">
+<Router AppAssembly="typeof(Program).Assembly"
+        AdditionalAssemblies="_additionalAssemblies"
+        NotFoundPage="typeof(NotFound)">
     <Found Context="routeData">
         <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)">
             <NotAuthorized>

src/AndreGoepel.AppFoundation.Hosting/Initialization.cs

@@ -232,6 +232,13 @@ public static WebApplication UseAppFoundation(this WebApplication app)
             app.UseExceptionHandler("/Error", createScopeForErrors: true);
             app.UseHsts();
         }
+
+        // Requests that match no endpoint at all (hard 404s) never reach the Blazor
+        // router, so re-execute them against the designed not-found page, passing the
+        // original status code so 403s render their own copy. Interactive navigations
+        // to unknown routes are handled by the Router's NotFoundPage.
+        app.UseStatusCodePagesWithReExecute("/not-found", "?code={0}");
+
         app.UseHttpsRedirection();
         app.UseStaticFiles();
         app.UseHeaderPropagation();

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

@@ -1,28 +1,40 @@
 @page "/Error"
 @using System.Diagnostics
 
-<PageTitle>Error</PageTitle>
+<AppFoundationPageTitle Title="Error" />
 
-<h1 class="text-danger">Error.</h1>
-<h2 class="text-danger">An error occurred while processing your request.</h2>
+<div class="rz-p-4 rz-p-md-6">
+    <RadzenStack Gap="1.5rem">
 
-@if (ShowRequestId)
-{
-    <p>
-        <strong>Request ID:</strong> <code>@RequestId</code>
-    </p>
-}
+        <div>
+            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H1">Error</RadzenText>
+            <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-text-secondary-color);">
+                An error occurred while processing your request.
+            </RadzenText>
+        </div>
+
+        @if (ShowRequestId)
+        {
+            <RadzenText TextStyle="TextStyle.Body2">
+                <strong>Request ID:</strong> <code>@RequestId</code>
+            </RadzenText>
+        }
+
+        <RadzenCard>
+            <RadzenStack Gap="0.75rem">
+                <RadzenText TextStyle="TextStyle.H6">Development mode</RadzenText>
+                <RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-text-secondary-color);">
+                    Swapping to the <strong>Development</strong> environment displays more detailed
+                    information about the error. It shouldn't be enabled for deployed applications, as
+                    it can leak sensitive information from exceptions to end users. For local debugging,
+                    set the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to
+                    <strong>Development</strong> and restart the app.
+                </RadzenText>
+            </RadzenStack>
+        </RadzenCard>
 
-<h3>Development Mode</h3>
-<p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
-</p>
-<p>
-    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
-    It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
-    and restarting the app.
-</p>
+    </RadzenStack>
+</div>
 
 @code{
     [CascadingParameter]

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

@@ -1,3 +1,11 @@
+@page "/not-found"
 @rendermode InteractiveServer
 
-<ErrorPage Code="404" />
+<ErrorPage Code="@(Code ?? "404")" />
+
+@code {
+    // Original status code when the status-code-pages middleware re-executes a bare
+    // 4xx response here (e.g. "?code=403"); absent for router-level not-found.
+    [SupplyParameterFromQuery(Name = "code")]
+    public string? Code { get; set; }
+}

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

@@ -1,6 +1,6 @@
 @inject NavigationManager NavigationManager
 
-<PageTitle>@_copy.Title</PageTitle>
+<AppFoundationPageTitle Title="@_copy.Title" />
 
 <div class="rz-p-4 rz-p-md-8">
     <RadzenCard>