From 47f55ea08fbdefc59b0a93b441f6eb6dfe84af44 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 23 Jul 2025 23:05:05 +0200
Subject: [PATCH] Add load more button to recent emails in web app (#990)

---
 .../Main/Components/Email/RecentEmails.razor  | 44 ++++++++++++++++---
 .../Main/Email/RecentEmails.en.resx           |  4 ++
 .../wwwroot/css/tailwind.css                  |  9 ++++
 3 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor b/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
index 72919a401..f7b0ffec9 100644
--- a/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
@@ -107,7 +107,7 @@
                                     </tr>
                                 </thead>
                                 <tbody class="bg-white dark:bg-gray-800">
-                                    @foreach (var mail in MailboxEmails)
+                                    @foreach (var mail in DisplayedEmails)
                                     {
                                         <tr class="hover:bg-gray-50 dark:hover:bg-gray-600">
                                             <td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
@@ -130,6 +130,16 @@
                         </div>
                     </div>
                 </div>
+
+                @if (CanLoadMore)
+                {
+                    <button @onclick="LoadMoreEmails" type="button" class="w-full mt-3 py-1 px-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md transition-colors duration-200 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 flex items-center justify-center gap-1">
+                        <span>@Localizer["LoadMoreButton"]</span>
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </button>
+                }
             </div>
         }
     </div>
@@ -143,6 +153,7 @@
     public string? EmailAddress { get; set; } = string.Empty;
 
     private List<MailboxEmailApiModel> MailboxEmails { get; set; } = new();
+    private List<MailboxEmailApiModel> DisplayedEmails { get; set; } = new();
     private bool ShowComponent { get; set; } = false;
     private EmailApiModel Email { get; set; } = new();
     private bool EmailModalVisible { get; set; }
@@ -151,6 +162,10 @@
     private bool IsSpamOk { get; set; } = false;
     private IStringLocalizer Localizer => LocalizerFactory.Create("Components.Main.Email.RecentEmails", "AliasVault.Client");
 
+    private int DisplayedEmailsCount { get; set; } = 2;
+    private const int EmailsPerLoad = 5;
+    private bool CanLoadMore => DisplayedEmailsCount < MailboxEmails.Count;
+
     private const int ACTIVE_TAB_REFRESH_INTERVAL = 2000; // 2 seconds
     private CancellationTokenSource? _pollingCts;
     private DotNetObjectReference<RecentEmails>? _dotNetRef;
@@ -303,6 +318,7 @@
         LoadingService.StartLoading("recentemails", 300, StateHasChanged);
         StateHasChanged();
         CloseEmailModal();
+        DisplayedEmailsCount = 2; // Reset to initial count
         await LoadRecentEmailsAsync();
         LoadingService.FinishLoading("recentemails", StateHasChanged);
         StateHasChanged();
@@ -375,8 +391,8 @@
             var mailbox = await response.Content.ReadFromJsonAsync<MailboxApiModel>();
             if (mailbox != null)
             {
-                // Show maximum of 10 recent emails.
-                MailboxEmails = mailbox.Mails.Take(10).ToList();
+                MailboxEmails = mailbox.Mails.ToList();
+                UpdateDisplayedEmails();
             }
         }
     }
@@ -462,12 +478,30 @@
     {
         if (mailbox?.Mails != null)
         {
-            // Show maximum of 10 recent emails.
-            MailboxEmails = mailbox.Mails.Take(10).ToList();
+            MailboxEmails = mailbox.Mails.ToList();
         }
 
         MailboxEmails = await EmailService.DecryptEmailList(MailboxEmails);
         Error = string.Empty;
+        UpdateDisplayedEmails();
+    }
+
+    /// <summary>
+    /// Load more emails to display.
+    /// </summary>
+    private void LoadMoreEmails()
+    {
+        DisplayedEmailsCount = Math.Min(DisplayedEmailsCount + EmailsPerLoad, MailboxEmails.Count);
+        UpdateDisplayedEmails();
+    }
+
+    /// <summary>
+    /// Update the displayed emails based on the current count.
+    /// </summary>
+    private void UpdateDisplayedEmails()
+    {
+        DisplayedEmails = MailboxEmails.Take(DisplayedEmailsCount).ToList();
+        StateHasChanged();
     }
 
     /// <summary>
diff --git a/apps/server/AliasVault.Client/Resources/Components/Main/Email/RecentEmails.en.resx b/apps/server/AliasVault.Client/Resources/Components/Main/Email/RecentEmails.en.resx
index c3ca1d648..095adc696 100644
--- a/apps/server/AliasVault.Client/Resources/Components/Main/Email/RecentEmails.en.resx
+++ b/apps/server/AliasVault.Client/Resources/Components/Main/Email/RecentEmails.en.resx
@@ -86,4 +86,8 @@
     <value>An error occurred while trying to load the emails. Please try to edit and save the credential entry to synchronize the database, then try again.</value>
     <comment>Error message when email loading fails</comment>
   </data>
+  <data name="LoadMoreButton" xml:space="preserve">
+    <value>Load more</value>
+    <comment>Button text to load more emails</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index 084e917b9..6f3f6dac9 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1263,6 +1263,10 @@ video {
   gap: 1.5rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -3128,6 +3132,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:hover\:text-gray-100:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:file\:bg-primary-800\/60:is(.dark *)::file-selector-button:hover {
   background-color: rgb(154 93 38 / 0.6);
 }