LearnNewsExamplesServices
Frontmatter
id7048
titleEpic: Refactor and Enhance the Email App
stateClosed
labels
enhancementstale
assigneestobiu
createdAtJul 14, 2025, 4:05 PM
updatedAtOct 27, 2025, 3:58 AM
githubUrlhttps://github.com/neomjs/neo/issues/7048
authortobiu
commentsCount2
parentIssuenull
subIssues
7049 Phase 1: Foundation and Basic Layout
7051 Task: Refactor MainView Styles to SCSS
7052 Phase 2: Email List View
7056 Phase 4: Compose Email Functionality
7058 Email.view.ComposeView: use a scss file and polish the internal code
subIssuesCompleted5
subIssuesTotal5
blockedBy[]
blocking[]
closedAtOct 27, 2025, 3:58 AM

Epic: Refactor and Enhance the Email App

Closed v11.0.0 enhancementstale
tobiu
tobiu commented on Jul 14, 2025, 4:05 PM

Summary

Overhaul the existing apps/email to be a showcase application for the new functional component architecture and the framework's multi-window capabilities. The goal is to create a simplified, client-side-only version of a modern email client like Gmail.

Rationale

A well-built, real-world example application is one of the most effective tools for driving framework adoption. The Email App is a perfect candidate to demonstrate:

  • Modern Component-Based UI: How to build a complex application using the new declarative functional components.
  • State Management: How to manage application state effectively in a functional context.
  • Advanced Features: How to leverage unique Neo.mjs features like multi-window support for a superior user experience.
  • Best Practices: Establish a reference architecture for building new applications with Neo.mjs.

This will serve as a powerful learning resource and a compelling demonstration of why developers should choose Neo.mjs.

Key Features to Implement

  1. Component Structure:

    • Refactor the entire UI to use functional components (defineComponent).
    • Create a clear, hierarchical component structure (e.g., MainContainer, EmailList, EmailDetails, ComposeOverlay).
  2. Basic Email Client UI:

    • Three-pane layout: Folders/Labels list, Email list, and selected Email detail view.
    • Use dummy/mock data for emails (e.g., from a JSON file).
  3. Compose and Reply:

    • "Compose" button opens a "New Email" view.
    • This view should initially be an overlay/dialog at the bottom right of the main application window.
  4. Multi-Window Experience:

    • The "Compose Email" overlay will have a "detach" button.
    • Clicking "detach" will move the compose view from the overlay into its own separate browser window or tab, allowing the user to continue writing their email there seamlessly.
    • The state of the email (recipient, subject, body) must be perfectly preserved during this transition.

Acceptance Criteria

  • The apps/email codebase is primarily based on functional components.
  • The application presents a clean, modern, three-pane email client UI.
  • The "Compose" functionality works as described, starting in an overlay.
  • The "detach" feature successfully moves the compose view to a new window without losing state.
  • The application is well-documented and serves as a high-quality example for the community.
tobiu assigned to @tobiu on Jul 14, 2025, 4:05 PM
tobiu added the enhancement label on Jul 14, 2025, 4:05 PM
tobiu added sub-issue #7049 on Jul 14, 2025, 4:21 PM
tobiu added sub-issue #7051 on Jul 14, 2025, 5:00 PM
tobiu added sub-issue #7052 on Jul 14, 2025, 5:47 PM
tobiu referenced in commit 146818c - "#7048 Updated Epic plan" on Jul 14, 2025, 8:20 PM
tobiu added sub-issue #7056 on Jul 15, 2025, 1:53 PM
tobiu added sub-issue #7058 on Jul 15, 2025, 3:29 PM