Phase 1: Foundation and Basic Layout (Completed)
Goal: Implement the main 3-pane layout as a functional MainView component and set it as the content of the existing classic Viewport.
Sub-Tasks:
- Create
view/MainView.mjs:
- Used
defineComponent to create a new functional component.
- Implemented a flexbox-based 3-pane layout (Folders, Email List, Email Detail).
- Update
view/Viewport.mjs:
- Configured the
Viewport with layout: 'fit'.
- Replaced the old
TabContainer with the new MainView component as its single item.
- Cleanup:
- Removed the
stateProvider from the Viewport as it is not currently needed.
Learnings & Decisions:
- Interoperability: Decided to keep the classic
Viewport and embed the new functional MainView component within it. This is a pragmatic approach that leverages existing structures and showcases the interoperability between classic and functional components.
- Naming: Renamed the main functional component from
Main.mjs to MainView.mjs for better clarity and to align with the mainView config in app.mjs.
Phase 1: Foundation and Basic Layout (Completed)
Goal: Implement the main 3-pane layout as a functional
MainViewcomponent and set it as the content of the existing classicViewport.Sub-Tasks:
view/MainView.mjs:defineComponentto create a new functional component.view/Viewport.mjs:Viewportwithlayout: 'fit'.TabContainerwith the newMainViewcomponent as its single item.stateProviderfrom theViewportas it is not currently needed.Learnings & Decisions:
Viewportand embed the new functionalMainViewcomponent within it. This is a pragmatic approach that leverages existing structures and showcases the interoperability between classic and functional components.Main.mjstoMainView.mjsfor better clarity and to align with themainViewconfig inapp.mjs.