Phase 4: Compose Email Functionality #7056

Author: tobiu

apps/email/EPIC_PLAN.md

@@ -4,10 +4,8 @@ This document outlines the plan for refactoring the `apps/email` application int
 
 ## Architectural Milestones & Key Learnings
 
-This epic has driven significant architectural improvements to the functional component system. For a full understanding of the current state, review these tickets:
+This epic has driven significant architectural improvements to the functional component system. For a full understanding of the current state, review this ticket:
 
--   **[#ticket-functional-child-component-diffing.md](/.github/ticket-functional-child-component-diffing.md):** The most critical enhancement. We implemented a VDOM config diffing mechanism in `FunctionalBase` to prevent the re-creation of stateful child components (like stores). This allows for a truly declarative VDOM while preserving child state.
--   **[#ticket-functional-base-windowid-propagation.md](/.github/ticket-functional-base-windowid-propagation.md):** Fixed a crucial bug where the `windowId` was not being propagated to child components, which is essential for multi-window support and event handling.
 -   **[#ticket-functional-recursive-config-diffing.md](/.github/ticket-functional-recursive-config-diffing.md):** A plan for a future enhancement to make the diffing logic recursive, allowing for deep, declarative control over nested component configurations.
 
 ---

apps/email/view/ComposeView.mjs

@@ -0,0 +1,59 @@
+import {defineComponent} from '../../../src/functional/_export.mjs';
+import Button              from '../../../src/button/Base.mjs';
+import TextField           from '../../../src/form/field/Text.mjs';
+import TextAreaField       from '../../../src/form/field/TextArea.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Email.view.ComposeView'
+    },
+    createVdom({onClose}) {
+        const overlayStyle = {
+            position: 'absolute',
+            top     : '50%',
+            left    : '50%',
+            transform: 'translate(-50%, -50%)',
+            width   : '600px',
+            padding : '20px',
+            border  : '1px solid #ccc',
+            backgroundColor: '#fff',
+            boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
+            zIndex  : 1000
+        };
+
+        const fieldStyle = {
+            marginBottom: '10px'
+        };
+
+        return {
+            style: overlayStyle,
+            cn: [{
+                module: TextField,
+                id    : 'compose-to',
+                label : 'To:',
+                style : fieldStyle,
+                width : '100%'
+            }, {
+                module: TextField,
+                id    : 'compose-subject',
+                label : 'Subject:',
+                style : fieldStyle,
+                width : '100%'
+            }, {
+                module: TextAreaField,
+                id    : 'compose-body',
+                label : 'Body:',
+                height: 200,
+                style : fieldStyle,
+                width : '100%'
+            }, {
+                module: Button,
+                id    : 'compose-close-button',
+                text  : 'Close',
+                listeners: {
+                    click: onClose
+                }
+            }]
+        }
+    }
+});

apps/email/view/MainView.mjs

@@ -1,3 +1,5 @@
+import Button                       from '../../../src/button/Base.mjs';
+import ComposeView                  from './ComposeView.mjs';
 import {defineComponent, useConfig} from '../../../src/functional/_export.mjs';
 import GridContainer                from '../../../src/grid/Container.mjs';
 import EmailsStore                  from '../store/Emails.mjs';
@@ -9,6 +11,7 @@ export default defineComponent({
         cls      : ['email-mainview']
     },
     createVdom() {
+        const [isComposing, setIsComposing] = useConfig(false);
         const [selectedEmail, setSelectedEmail] = useConfig(null);
 
         const paneStyle = {
@@ -17,14 +20,30 @@ export default defineComponent({
             padding: '10px'
         };
 
+        const onComposeClick = () => {
+            setIsComposing(true);
+        };
+
+        const onCloseCompose = () => {
+            setIsComposing(false);
+        };
+
         const onSelectionChange = ({records}) => {
             setSelectedEmail(records[0] || null);
         };
 
         return {
             cn: [{
                 style: {...paneStyle, flex: '0 0 200px'},
-                text : 'Folders'
+                cn: [{
+                    module : Button,
+                    handler: onComposeClick,
+                    id     : 'compose-button',
+                    text   : 'Compose',
+                    style  : {marginBottom: '10px', width: '100%'}
+                }, {
+                    text : 'Folders'
+                }]
             }, {
                 style: {...paneStyle, flex: '1 1 600px', padding: '0'},
                 cn: [{
@@ -59,7 +78,11 @@ export default defineComponent({
                 ] : [{
                     text: 'Select an email to read'
                 }]
-            }]
+            }, isComposing ? {
+                module : ComposeView,
+                id     : 'compose-view',
+                onClose: onCloseCompose
+            } : null].filter(Boolean)
         }
     }
 });