fix(mail): show empty state for unread-only folders

src/app/app.component.html

@@ -413,6 +413,10 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
 	<div [hidden]="hasChildRouterOutlet">
       <div id="canvasTableContainerArea" [ngStyle]="{'bottom.px': canvasTableBtmOffset}">
         <canvastablecontainer [canvastableselectlistener]="this" (sortToggled)="updateSearch(true)"></canvastablecontainer>
+        <div *ngIf="messageListEmptyNotice" class="messageListEmptyNotice">
+          <mat-icon svgIcon="email-open"></mat-icon>
+          <span>{{ messageListEmptyNotice }}</span>
+        </div>
       </div>
 
       <single-mail-viewer #singlemailviewer *ngIf="!mailViewerOnRightSide"

src/app/app.component.scss

@@ -63,6 +63,22 @@
     text-align: center;
 }
 
+.messageListEmptyNotice {
+    position: absolute;
+    top: 55px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #777;
+    font-size: 15px;
+    pointer-events: none;
+    text-align: center;
+}
+
 // Override default tooltip CSS
 ::ng-deep .multiline-tooltip {
     width: 150px;

src/app/app.component.ts

@@ -66,6 +66,7 @@ import { UsageReportsService } from './common/usage-reports.service';
 import { objectEqualWithKeys } from './common/util';
 import { UpdateAlertService } from './updatealert/updatealert.service';
 import { UpdateAlertComponent } from './updatealert/updatealert.component';
+import { getEmptyMessageListNotice } from './message-list-empty-notice';
 
 const LOCAL_STORAGE_SETTING_MAILVIEWER_ON_RIGHT_SIDE_IF_MOBILE = 'mailViewerOnRightSideIfMobile';
 const LOCAL_STORAGE_SETTING_MAILVIEWER_ON_RIGHT_SIDE = 'mailViewerOnRightSide';
@@ -164,6 +165,7 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   xapianLoaded = xapianLoadedSubject;
 
   morelistbuttonindex = 7;
+  messageListEmptyNotice: string;
 
   constructor(
     public searchService: SearchService,
@@ -901,15 +903,28 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   }
 
   public filterMessageDisplay() {
-    if (this.canvastable.rows && this.canvastable.rows.rowCount() > 0) {
+    if (this.canvastable.rows) {
       const options = new Map();
       options.set('unreadOnly', this.unreadMessagesOnlyCheckbox);
       options.set('searchText', this.searchText);
       this.canvastable.rows.filterBy(options);
+      this.updateMessageListEmptyNotice();
       this.canvastable.hasChanges = true;
     }
   }
 
+  private updateMessageListEmptyNotice() {
+    this.messageListEmptyNotice = getEmptyMessageListNotice({
+      hasVisibleRows: this.canvastable.rows.rowCount() > 0,
+      ignoredUnreadFolders: this.messagelistservice.ignoreUnreadInFolders,
+      searchText: this.searchText,
+      selectedFolder: this.selectedFolder,
+      showingSearchResults: this.showingSearchResults,
+      showingWebSocketSearchResults: this.showingWebSocketSearchResults,
+      unreadOnly: this.unreadMessagesOnlyCheckbox,
+    });
+  }
+
   public clearSelection() {
     if (this.canvastable.rows) {
       this.canvastable.rows.clearSelection();

src/app/message-list-empty-notice.spec.ts

@@ -0,0 +1,43 @@
+// --------- BEGIN RUNBOX LICENSE ---------
+// Copyright (C) 2016-2026 Runbox Solutions AS (runbox.com).
+//
+// This file is part of Runbox 7.
+//
+// Runbox 7 is free software: You can redistribute it and/or modify it
+// under the terms of the GNU General Public License as published by the
+// Free Software Foundation, either version 3 of the License, or (at your
+// option) any later version.
+//
+// Runbox 7 is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
+// ---------- END RUNBOX LICENSE ----------
+
+import { getEmptyMessageListNotice } from './message-list-empty-notice';
+
+describe('getEmptyMessageListNotice', () => {
+  it('shows a clear notice when Unread only hides all messages in a folder', () => {
+    const notice = getEmptyMessageListNotice({
+      hasVisibleRows: false,
+      ignoredUnreadFolders: ['Sent'],
+      selectedFolder: 'Inbox',
+      unreadOnly: true,
+    });
+
+    expect(notice).toBe('No unread messages in Inbox.');
+  });
+
+  it('does not show an empty-state notice while rows are visible', () => {
+    const notice = getEmptyMessageListNotice({
+      hasVisibleRows: true,
+      selectedFolder: 'Inbox',
+      unreadOnly: true,
+    });
+
+    expect(notice).toBeNull();
+  });
+});

src/app/message-list-empty-notice.ts

@@ -0,0 +1,48 @@
+// --------- BEGIN RUNBOX LICENSE ---------
+// Copyright (C) 2016-2026 Runbox Solutions AS (runbox.com).
+//
+// This file is part of Runbox 7.
+//
+// Runbox 7 is free software: You can redistribute it and/or modify it
+// under the terms of the GNU General Public License as published by the
+// Free Software Foundation, either version 3 of the License, or (at your
+// option) any later version.
+//
+// Runbox 7 is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
+// ---------- END RUNBOX LICENSE ----------
+
+export interface EmptyMessageListNoticeContext {
+  hasVisibleRows: boolean;
+  ignoredUnreadFolders?: string[];
+  searchText?: string;
+  selectedFolder?: string;
+  showingSearchResults?: boolean;
+  showingWebSocketSearchResults?: boolean;
+  unreadOnly?: boolean;
+}
+
+export function getEmptyMessageListNotice(context: EmptyMessageListNoticeContext): string {
+  if (context.hasVisibleRows) {
+    return null;
+  }
+
+  const selectedFolder = context.selectedFolder || 'this folder';
+  const ignoresUnreadOnly = (context.ignoredUnreadFolders || []).includes(selectedFolder);
+  if (context.unreadOnly && !ignoresUnreadOnly) {
+    return `No unread messages in ${selectedFolder}.`;
+  }
+
+  const searchIsActive = (context.searchText || '').length >= 3
+    || context.showingWebSocketSearchResults;
+  if (searchIsActive) {
+    return 'No messages match this search.';
+  }
+
+  return `No messages in ${selectedFolder}.`;
+}