# User Stories
The following user stories shall help outlining the application structure and explain how the different components contribute to the overall functionality of the application.
=== Rob logs in to the webmail to check for new messages ===
# He opens the webmail location in his browser
# He enters his username and password at the login prompt
# The main navigation shows a badge near the mail icon indicating 5 new messages
# Rob clicks the mail icon in the main navigation to open the mail view
Involved components and events:
# The `shell` renders the login form
# Upon submit, the `shell` authenticates through the JMAP adapter and activates the `/` route
# The `shell` emits the `shell.session.authenticate` event and the `mail` app fetches the number of unread messages from the server.
# The `shell.ui` activates the `/mail` route. the `mail` app renders the mail view and fetches the mailboxlist and the inbox messages from the JMAP data store.
=== Mary opens an email message for reading ===
# In the message list she clicks the new and yet unread message from Jane
# The message content is displayed in the preview pane on the right
# Next to the email sender name a green icon indicates that Jane is now online on Jabber
# After a few seconds, the clicked row in the message list looses the "unread" indicator
Involved components and events:
# The `mail` app activates the `/mail/message/md2f58fbc8` route
# The `mail` app fetches the message from the JMAP store and emits the `mail.model.message.load` event.
The `jabber` app compares the message headers (from, to, cc) with the presence information from the roster.
# The `mail` app renders the mail view and emit the `mail.view.message.render` event. The `jabber` app extends the message header view with presence indicators for sender and recipients.
# Once the message is shown for 5 seconds, the unread flag is removed from the message model which updates the list view. The changes are synchronized to the server through the JMAP data store.
To be continued ...