Primo sviluppo sincronizzazione e migliorie ui

Template.Shared/Components/Layout/HeaderLayout.razor

@@ -1,14 +1,43 @@
+@inject IJSRuntime JS
+
 <div class="header">
-    <div class="header-content">
-        <h3 class="page-title">@Title</h3>
-        @if (ShowFilter)
+    <div class="header-content @(Back ? "with-back" : "no-back")">
+        @if (Back)
         {
-            <MudIconButton Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark" />
+            <div class="left-section">
+                <MudButton StartIcon="@Icons.Material.Outlined.ArrowBackIosNew"
+                           OnClick="GoBack"
+                           Color="Color.Info"
+                           Style="text-transform: none"
+                           Variant="Variant.Text">@BackTo</MudButton>
+            </div>
         }
+
+        <h3 class="page-title">@Title</h3>
+
+        <div class="right-section">
+            @if (ShowFilter)
+            {
+                <MudIconButton Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark" />
+            }
+            @if (ShowNotifications)
+            {
+                <MudIconButton Icon="@Icons.Material.Filled.Notifications" Color="Color.Dark" />
+            }
+        </div>
     </div>
 </div>
 
 @code{
     [Parameter] public string? Title { get; set; }
     [Parameter] public bool ShowFilter { get; set; }
+    [Parameter] public bool ShowNotifications { get; set; } = true;
+    [Parameter] public bool Back { get; set; }
+    [Parameter] public string BackTo { get; set; } = "";
+
+    private async Task GoBack()
+    {
+        await JS.InvokeVoidAsync("goBack");
+    }
+
 }

Template.Shared/Components/Layout/HeaderLayout.razor.css

@@ -1,7 +1,29 @@
 .header-content {
+    line-height: normal;
     display: flex;
     justify-content: space-between;
-    color: var(--lighter-color);
     align-items: center;
-    padding-top: .5rem;
+    position: relative;
+}
+
+.header-content.with-back { margin: .6rem 0 0 0; }
+
+.header-content.with-back .page-title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 0;
+    font-size: larger;
+}
+
+.left-section ::deep button {
+    font-size: 1rem;
+}
+
+.left-section ::deep .mud-button-icon-start {
+    margin-right: 3px !important;
+}
+
+.header-content.no-back .page-title {
+    margin: 0;
 }

Template.Shared/Components/Layout/MainLayout.razor

@@ -1,4 +1,7 @@
-@inherits LayoutComponentBase
+@using Template.Shared.Core.Messages
+@inherits LayoutComponentBase
+@inject IJSRuntime JS
+@inject BackNavigationService BackService
 
 <MudThemeProvider Theme="_currentTheme" />
 <MudPopoverProvider />
@@ -23,8 +26,16 @@
         {
                 Primary = "#ABA9BF",
                 Secondary = "#BEB7DF",
-                Tertiary = "#D4F2D2"
+                Tertiary = "#B2FDAD"
         }
     };
 
+    protected override void OnInitialized()
+    {
+        BackService.OnHardwareBack += async () =>
+        {
+            await JS.InvokeVoidAsync("goBack");
+        };
+    }
+
 }

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -3,6 +3,8 @@
     position: fixed;
     bottom: 0;
     width: 100%;
+    z-index: 1001;
+    border-top: 1px solid var(--card-border-color); 
 }
 
 .navbar-expand { padding: 0 !important; }

Template.Shared/Components/Layout/Spinner/SyncSpinner.razor

@@ -0,0 +1,20 @@
+@if (Elements is not null)
+{
+    <div class="container-loader">
+        <span>Download risorse in corso</span>
+        <div>
+            @foreach (var element in Elements)
+            {
+                <div class="progress-content">
+                    <span>@element.Key</span>
+                    <MudProgressLinear Indeterminate="@(!element.Value)" Value="100" Rounded="true" Color="@(element.Value ? Color.Tertiary : Color.Secondary)" Size="Size.Large" />
+                </div>
+            }
+        </div>
+    </div>
+}
+
+@code
+{
+    [Parameter] public Dictionary<string, bool>? Elements { get; set; }
+}

Template.Shared/Components/Layout/Spinner/SyncSpinner.razor.css

@@ -0,0 +1,27 @@
+.container-loader {
+    display: flex;
+    height: 95vh;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 1rem;
+    align-items: center;
+    gap: 5vh;
+}
+
+.container-loader > div {
+    width: 100%;
+}
+
+.container-loader > span {
+    font-weight: 900;
+    font-size: large;
+    color: var(--mud-palette-primary);
+}
+
+.progress-content > span {
+    font-weight: 700;
+}
+
+.progress-content:nth-last-child(2) {
+    margin: 10px 0;
+}