What This Screen Does
This is your email inbox inside the dashboard. Think of it like a built-in email client — you can browse folders (Inbox, Sent, Drafts, etc.), read messages, reply to them, and compose new emails. Everything is organized with labels so you can quickly find what you need without leaving the platform.
How to Get There
Open the dashboard.
In the left-hand menu, click Mail.
You are now on the Mail screen with your Inbox loaded by default.
Step-by-Step Guide
1. Navigate Between Folders (Labels)
On the left side of the screen you will see a navigation panel listing all your mail labels (for example, Inbox, Sent, Drafts, Spam, Trash).
Click any label to view the emails in that folder.
The currently selected label is highlighted.
On mobile devices, the navigation panel is hidden. Tap the mail icon button in the header to open it as a slide-out drawer.
2. Search for Emails
At the top of the mail list (on desktop) or in the header bar (on mobile), you will find a Search field.
Type a keyword to filter the emails in the current folder.
The search field has a magnifying glass icon to help you spot it.
3. Browse the Mail List
The center column shows all emails in the selected folder.
Each email item displays a preview with key information such as sender, subject, and date.
Click on any email to open it in the detail panel on the right.
On mobile devices, the mail list opens as a slide-out drawer. Tap the chat bubble icon in the header to open it.
If the folder is empty, you will see a message: “Nothing in [folder name] — This folder is empty.”
4. Read an Email
When you click on an email, the detail panel on the right shows the full message. Here is what you will see:
Section | What It Shows |
Labels | Colored tags at the top indicating which labels are applied to this email. |
Star | A star checkbox to mark the email as starred (important to you). |
Important | A label-important checkbox to flag the email as important. |
Subject | The email subject line, prefixed with “Re:” for replies. |
Date & Time | When the email was sent or received. |
Sender | The sender’s name, avatar, and email address. |
Recipients | The “To” field showing who the email was sent to. |
Attachments | If the email has files attached, they appear in a collapsible section. Click to expand or collapse the list. |
Message Body | The full content of the email, rendered as formatted text. |
5. Use Email Actions
At the top of the detail panel, you have several action buttons:
Action | Icon | What It Does |
Star | Star icon | Toggles the email as starred for quick access later. |
Important | Label icon | Toggles the email as important. |
Archive | Archive icon | Moves the email to your archive. |
Mark Unread | Mail icon | Marks the email as unread so it appears bold in the list again. |
Trash | Trash icon | Moves the email to the Trash folder. |
More Options | Three dots icon | Opens additional actions. |
Next to the subject line, you also have:
Action | Icon | What It Does |
Reply | Reply arrow | Reply to the sender. |
Reply All | Double arrow | Reply to everyone on the email. |
Forward | Forward arrow | Forward the email to someone else. |
6. View and Download Attachments
If an email has attachments, an attachments bar appears below the sender information.
It shows the number of attachments (e.g., “3 attachments”).
Click the bar to expand or collapse the attachment list.
Each attachment is shown as a file thumbnail.
Click the Download button to download all attachments at once.
7. Reply to an Email
At the bottom of the email detail panel, there is a rich-text editor.
Type your reply in the editor.
You can attach images by clicking the gallery icon (image button).
You can attach files by clicking the paperclip icon (attach button).
Click the Send button to send your reply.
8. Compose a New Email
In the navigation panel, click the Compose button at the top.
A compose window appears in the bottom-right corner of the screen.
You can toggle it to full screen by clicking the expand icon in the top-right of the compose window.
Fill in the following fields:
Field | Required | What to Enter |
To | Yes | The recipient(s) of the email. This field is pre-filled when composing from a specific context and cannot be edited manually in that case. |
Subject | Yes | A short summary of what your email is about. |
Body | Yes | The main content of your email. Use the rich-text editor to format your text (bold, lists, links, etc.). |
9. Send the Email
Click the Send button at the bottom-right of the compose window.
The system will:
Validate that all required fields are filled in.
Send the email to all recipients.
Close the compose window.
You will see a green “Email sent!” notification at the bottom of the screen.
What Happens Behind the Scenes
Loading the Mail Screen
You navigate to /mail
|
v
System loads labels via useGetLabels()
|
v
System loads mails for "inbox" via useGetMails("inbox")
|
v
Labels appear in the navigation panel
|
v
Mail list populates with emails
|
v
First email is auto-selected via useGetMail(firstMailId)
|
v
Email detail panel shows the selected email
Switching Folders
You click a label (e.g. "Sent")
|
v
URL updates to /mail?label=sent
|
v
System loads mails for "sent" via useGetMails("sent")
|
v
Mail list refreshes with emails from that folder
|
v
First email in the new folder is auto-selected
Sending a New Email
You click "Send"
|
v
Form validates all fields (subject, body, recipients)
|
v
API call: MailsService.sendEmail({ body: { html, subject, sendTo } })
|
v
Email is sent to all recipients
|
v
Form resets and compose window closes
|
v
Success notification: "Email sent!"
Troubleshooting
“The mail screen is just showing a loading spinner”
The system is fetching your emails from the server. If it takes more than a few seconds, check your internet connection.
Try refreshing the page. If the problem persists, the mail server may be temporarily unavailable — try again later or contact support.
“I do not see any folders or labels in the side panel”
Labels are loaded when the page opens. If the list is empty, try refreshing the page.
If you are on a mobile device, tap the mail icon in the header bar to open the navigation drawer — labels may be hidden behind it.
If the problem persists, contact your administrator — the labels API may be down.
“I clicked on an email but nothing shows up on the right”
The email content is loading. Wait a moment for it to appear.
If it stays blank, the email may have been deleted or moved. Try selecting a different email.
If the error keeps happening, the system will automatically redirect you back to the main mail view.
“The compose window is blocking my view and I cannot see my emails”
Click the collapse icon (top-right of the compose window) to shrink it back to a small overlay in the corner.
Click the X icon to close the compose window entirely. Note: closing it will discard your draft.
On small screens, the compose window opens with a backdrop. Click the collapse icon to make it smaller.
“I filled in the email but the Send button does not work”
Make sure all three required fields are filled in: To, Subject, and Body.
The “To” field must have at least one recipient.
The body cannot be empty — type at least one character in the message editor.
Check for red error messages near the fields for specific validation issues.
“I sent an email but did not see a confirmation”
Look for the green “Email sent!” notification at the bottom of the screen. It disappears after a few seconds.
If you did not see it, check your Sent folder to verify the email was delivered.
If the email is not in Sent, there may have been a network error. Try composing and sending it again.
“My attachments are not showing on an email I received”
Click the attachments bar below the sender information to expand the attachment list — it may be collapsed.
If the bar says “0 attachments,” the sender did not include any files.
If thumbnails appear broken, the file format may not be previewable. Try clicking Download to save them to your computer and open them locally.
“I cannot edit the recipients in the compose window”
If the compose window was opened from a specific context (such as emailing a member), the To field is pre-filled and locked.
To send an email to different recipients, close the compose window and open a fresh one from the Compose button in the navigation panel.
“The page redirected me back to the inbox unexpectedly”
This happens when there is an error loading a specific email or folder. The system redirects you to the inbox as a safety measure.
Try navigating to the folder again. If a specific email keeps causing a redirect, it may have been deleted or corrupted.
If the problem continues, contact support with details about which email or folder caused the issue.
“On mobile, I cannot find the mail list or navigation”
On smaller screens, the navigation panel and mail list are hidden to save space.
Tap the mail icon in the header to open the navigation drawer with your folders.
Tap the chat bubble icon in the header to open the mail list drawer (this button is hidden when the folder is empty).
Select an email from the list, and it will display in the main area.