From f517ab4cfbbc08fe1daf4899e401c55acc6bb173 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 21 Sep 2026 12:03:27 +0200
Subject: [PATCH] Enhance grid UI and refactor boot overlay logic

- Updated `MappingProfile.cs` to add detailed mapping for `Envelope` to `EnvelopeDto`, including `EnvelopeTypeTitle`.
- Added a grid persistence hint banner in `EnvelopeSenderPage.razor` with an SVG icon and German message.
- Introduced three new columns (`EnvelopeTypeTitle`, `AddedWhen`, `ChangedWhen`) to the grid in `EnvelopeSenderPage.razor`.
- Refactored boot overlay removal logic in `App.razor` into a reusable function `sfRemoveBootOverlay`.
- Simplified event handling for overlay removal and fallback logic in `App.razor`.
- Adjusted `.sender-grid-wrapper` padding in `sender-page.css` and added styles for the new grid persistence hint banner.
---
 .../Common/MappingProfile.cs                  |  4 +++-
 .../Pages/EnvelopeSenderPage.razor            | 23 ++++++++++++++++++-
 .../Components/App.razor                      | 21 ++++++-----------
 .../wwwroot/css/sender-page.css               | 15 +++++++++++-
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/EnvelopeGenerator.Application/Common/MappingProfile.cs b/EnvelopeGenerator.Application/Common/MappingProfile.cs
index 361cd0cd..d87ce12a 100644
--- a/EnvelopeGenerator.Application/Common/MappingProfile.cs
+++ b/EnvelopeGenerator.Application/Common/MappingProfile.cs
@@ -28,7 +28,9 @@ public class MappingProfile : Profile
         CreateMap<DocReceiverElement, DocReceiverElementDto>();
         CreateMap<DocumentStatus, DocumentStatusDto>();
         CreateMap<EmailTemplate, EmailTemplateDto>();
-        CreateMap<Envelope, EnvelopeDto>();
+        CreateMap<Envelope, EnvelopeDto>()
+            .ForMember(dest => dest.EnvelopeTypeTitle,
+                       opt  => opt.MapFrom(src => src.Type != null ? src.Type.Title : null));
         CreateMap<Document, DocumentDto>();
         CreateMap<History, HistoryDto>().ForMember(dest => dest.ActionDate, opt => opt.MapFrom(src => src.ChangedWhen));
         CreateMap<History, HistoryCreateDto>().ForMember(dest => dest.ActionDate, opt => opt.MapFrom(src => src.ChangedWhen));
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
index 706705cb..3ee63ef5 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
@@ -147,6 +147,15 @@
                 </div>
 
                 <div class="sender-grid-wrapper">
+
+                    @* Grid persistence hint — informs users their layout is auto-saved *@
+                    <div class="sf-grid-persistence-hint">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+                        </svg>
+                        Die Größe und Position der Spalten wird automatisch für Sie gespeichert.
+                    </div>
                     @if (_activeTab == "active") {
                         <DxGrid Data="@_activeEnvelopes"
                                 @ref="_gridActive"
@@ -210,8 +219,14 @@
                                                 </div>
                                             }
                                         }
-                                    </CellDisplayTemplate>
+                                     </CellDisplayTemplate>
                                 </DxGridDataColumn>
+                                <DxGridDataColumn FieldName="EnvelopeTypeTitle" Caption="Typ"
+                                                  Width="120px" AllowSort="true" />
+                                <DxGridDataColumn FieldName="AddedWhen" Caption="Erstellt"
+                                                  DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
+                                <DxGridDataColumn FieldName="ChangedWhen" Caption="Geändert am"
+                                                  DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
                             </Columns>
                             <DetailRowTemplate Context="detailContext">
                                 <div style="padding: 1rem; background: #f9fafb;">
@@ -312,6 +327,12 @@
                                         }
                                     </CellDisplayTemplate>
                                 </DxGridDataColumn>
+                                <DxGridDataColumn FieldName="EnvelopeTypeTitle" Caption="Typ"
+                                                  Width="120px" AllowSort="true" />
+                                <DxGridDataColumn FieldName="AddedWhen" Caption="Erstellt"
+                                                  DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
+                                <DxGridDataColumn FieldName="ChangedWhen" Caption="Geändert am"
+                                                  DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
                             </Columns>
                             <DetailRowTemplate Context="detailContext">
                                 <div style="padding: 1rem; background: #f9fafb;">
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/App.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/App.razor
index 15f19278..4c61b9f4 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/App.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/App.razor
@@ -44,23 +44,16 @@
     <script src="js/signflow-theme.js"></script>
     <script src="_framework/blazor.web.js"></script>
     <script>
-        // Remove the boot overlay once Blazor has started and enhanced navigation is active.
-        Blazor.addEventListener('enhancedload', function onFirstLoad() {
-            var overlay = document.getElementById('sf-boot-overlay');
-            if (overlay) overlay.style.opacity = '0';
-            setTimeout(function () { if (overlay) overlay.remove(); }, 250);
-            Blazor.removeEventListener('enhancedload', onFirstLoad);
-        });
-        // Also remove when WASM circuit is ready (for non-enhanced pages like /sender)
-        document.addEventListener('blazor-circuit-connected', function () {
+        function sfRemoveBootOverlay() {
             var overlay = document.getElementById('sf-boot-overlay');
             if (overlay) { overlay.style.opacity = '0'; setTimeout(function () { if (overlay) overlay.remove(); }, 250); }
-        }, { once: true });
+        }
+        // Remove on every enhanced navigation (covers both WASM and Server render modes).
+        Blazor.addEventListener('enhancedload', sfRemoveBootOverlay);
+        // Also remove when WASM circuit is ready (for non-enhanced pages like /sender)
+        document.addEventListener('blazor-circuit-connected', sfRemoveBootOverlay, { once: true });
         // Fallback: remove after 4s regardless
-        setTimeout(function () {
-            var overlay = document.getElementById('sf-boot-overlay');
-            if (overlay) overlay.remove();
-        }, 4000);
+        setTimeout(sfRemoveBootOverlay, 4000);
     </script>
 </body>
 
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index f06c124e..b944e008 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -199,7 +199,20 @@
 }
 
 .sender-grid-wrapper {
-    padding: 1.5rem 2rem 2rem;
+    padding: 0 2rem 2rem;       /* top padding removed — hint banner provides top spacing */
+}
+
+/* ── Grid persistence hint banner ─────────────────────────────────────────── */
+.sf-grid-persistence-hint {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 2rem;
+    font-size: 0.72rem;
+    color: rgba(126, 34, 206, 0.65);
+    background: rgba(126, 34, 206, 0.04);
+    border-bottom: 1px solid rgba(126, 34, 206, 0.08);
+    user-select: none;
 }
 
 /* Hide DevExpress empty cells */