[PR #831] [MERGED] style: improve empty state display for inbox and sent box #792

New issue

Closed

opened 2026-02-26 21:32:58 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 21:32:58 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/dreamhunter2333/cloudflare_temp_email/pull/831
Author: @dreamhunter2333
Created: 2/2/2026
Status: ✅ Merged
Merged: 2/2/2026
Merged by: @dreamhunter2333

Base: main ← Head: feature/email

📝 Commits (1)

7f4f385 style: improve empty state display for inbox and sent box

📊 Changes

4 files changed (+22 additions, -7 deletions)

View changed files

📝 CHANGELOG.md (+2 -0)
📝 CHANGELOG_EN.md (+2 -0)
📝 frontend/src/components/MailBox.vue (+9 -4)
📝 frontend/src/components/SendBox.vue (+9 -3)

📄 Description

User description

Changes

Add different messages based on mail count:
- Inbox empty: "收件箱为空" / "Your inbox is empty"
- Sent empty: "发件箱为空" / "No sent emails"
- Has mail but not selected: "请选择邮件" / "Please select mail"
Add semantic icons (InboxRound for inbox, SendRound for sent)
Unify list container height to min-height: 60vh; max-height: 100vh

Files Changed

frontend/src/components/MailBox.vue
frontend/src/components/SendBox.vue
CHANGELOG.md
CHANGELOG_EN.md

PR Type

Enhancement, Documentation

Description

Enhanced empty state display for inbox and sent box.
- Added specific messages for empty and non-selected states.
- Integrated semantic icons for inbox and sent box.
Unified list container height for consistent UI.
Updated changelogs to reflect the changes.

Diagram Walkthrough

flowchart LR
  A["MailBox.vue"] -- "Enhanced empty state display" --> B["Inbox messages and icons"]
  A -- "Unified container height" --> C["Consistent UI"]
  D["SendBox.vue"] -- "Enhanced empty state display" --> E["Sent box messages and icons"]
  D -- "Unified container height" --> C
  F["CHANGELOG.md"] -- "Documented changes" --> G["CHANGELOG_EN.md"]

File Walkthrough

Relevant files

Enhancement

MailBox.vue `Enhanced empty state display and UI consistency for inbox` frontend/src/components/MailBox.vue Added specific messages for empty inbox and non-selected mail. Integrated semantic icon (`InboxRound`) for empty inbox state. Unified list container height to `min-height: 60vh; max-height: 100vh`.	+9/-4
SendBox.vue `Enhanced empty state display and UI consistency for sent box` frontend/src/components/SendBox.vue Added specific messages for empty sent box and non-selected mail. Integrated semantic icon (`SendRound`) for empty sent box state. Unified list container height to `min-height: 60vh; max-height: 100vh`.	+9/-3

Documentation

CHANGELOG.md `Updated changelog with empty state display improvements` CHANGELOG.md Documented improvements in empty state display for inbox and sent box. Mentioned addition of semantic icons and UI consistency updates.	+2/-0
CHANGELOG_EN.md `Updated English changelog with empty state display improvements` CHANGELOG_EN.md Documented improvements in empty state display for inbox and sent box. Mentioned addition of semantic icons and UI consistency updates.	+2/-0

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/dreamhunter2333/cloudflare_temp_email/pull/831 **Author:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Created:** 2/2/2026 **Status:** ✅ Merged **Merged:** 2/2/2026 **Merged by:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Base:** `main` ← **Head:** `feature/email` --- ### 📝 Commits (1) - [`7f4f385`](https://github.com/dreamhunter2333/cloudflare_temp_email/commit/7f4f3850023653bd604b08dafdc3cd607b68f6f2) style: improve empty state display for inbox and sent box ### 📊 Changes **4 files changed** (+22 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `CHANGELOG.md` (+2 -0) 📝 `CHANGELOG_EN.md` (+2 -0) 📝 `frontend/src/components/MailBox.vue` (+9 -4) 📝 `frontend/src/components/SendBox.vue` (+9 -3) </details> ### 📄 Description ### **User description** ## Changes - Add different messages based on mail count: - Inbox empty: "收件箱为空" / "Your inbox is empty" - Sent empty: "发件箱为空" / "No sent emails" - Has mail but not selected: "请选择邮件" / "Please select mail" - Add semantic icons (InboxRound for inbox, SendRound for sent) - Unify list container height to `min-height: 60vh; max-height: 100vh` ## Files Changed - `frontend/src/components/MailBox.vue` - `frontend/src/components/SendBox.vue` - `CHANGELOG.md` - `CHANGELOG_EN.md` ___ ### **PR Type** Enhancement, Documentation ___ ### **Description** - Enhanced empty state display for inbox and sent box. - Added specific messages for empty and non-selected states. - Integrated semantic icons for inbox and sent box. - Unified list container height for consistent UI. - Updated changelogs to reflect the changes. ___ ### Diagram Walkthrough ```mermaid flowchart LR A["MailBox.vue"] -- "Enhanced empty state display" --> B["Inbox messages and icons"] A -- "Unified container height" --> C["Consistent UI"] D["SendBox.vue"] -- "Enhanced empty state display" --> E["Sent box messages and icons"] D -- "Unified container height" --> C F["CHANGELOG.md"] -- "Documented changes" --> G["CHANGELOG_EN.md"] ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>MailBox.vue</strong><dd><code>Enhanced empty state display and UI consistency for inbox</code></dd></summary> <hr> frontend/src/components/MailBox.vue <ul><li>Added specific messages for empty inbox and non-selected mail.<br> <li> Integrated semantic icon (<code>InboxRound</code>) for empty inbox state.<br> <li> Unified list container height to <code>min-height: 60vh; max-height: 100vh</code>.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/831/files#diff-ce7b47744c9011a27a8297d8e5095ccb9609a6849a9afe1a37e04ae47b2636f2">+9/-4</a>      </td> </tr> <tr> <td> <details> <summary><strong>SendBox.vue</strong><dd><code>Enhanced empty state display and UI consistency for sent box</code></dd></summary> <hr> frontend/src/components/SendBox.vue <ul><li>Added specific messages for empty sent box and non-selected mail.<br> <li> Integrated semantic icon (<code>SendRound</code>) for empty sent box state.<br> <li> Unified list container height to <code>min-height: 60vh; max-height: 100vh</code>.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/831/files#diff-5f29f390fb4b77b6c18f0e6ea8b42b5fcb5bf9fcd321224f4e95f6b7c1d71a88">+9/-3</a>      </td> </tr> </table></td></tr><tr><td><strong>Documentation</strong></td><td><table> <tr> <td> <details> <summary><strong>CHANGELOG.md</strong><dd><code>Updated changelog with empty state display improvements</code>    </dd></summary> <hr> CHANGELOG.md <ul><li>Documented improvements in empty state display for inbox and sent box.<br> <li> Mentioned addition of semantic icons and UI consistency updates.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/831/files#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4ed">+2/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>CHANGELOG_EN.md</strong><dd><code>Updated English changelog with empty state display improvements</code></dd></summary> <hr> CHANGELOG_EN.md <ul><li>Documented improvements in empty state display for inbox and sent box.<br> <li> Mentioned addition of semantic icons and UI consistency updates.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/831/files#diff-77d2276dbbf8eb648363b81ea97049986b18e2cf1e90bd20fb5133ed5ff4fcae">+2/-0</a>      </td> </tr> </table></td></tr></tr></tbody></table> </details> ___ --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>