Set up structure for Phase 5: ReaderPage and ComposePage placeholders, updated MailListPage and Shell for navigation to reader and composer

resources/qml/ComposePage.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtWebEngine 1.15
+
+Item {
+    id: composePage
+    anchors.fill: parent
+
+    // Back button
+    Rectangle {
+        anchors {
+            top: parent.top
+            left: parent.left
+            margins: 10
+        }
+        width: 40
+        height: 40
+        color: "#e0e0e0"
+        radius: 5
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                StackView.view.pop()
+            }
+        }
+        Text {
+            text: "←"
+            anchors.centerIn: parent
+            font.pointSize: 20
+            color: "#333"
+        }
+    }
+
+    // Placeholder for Quill editor
+    Rectangle {
+        anchors {
+            top: backButton.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        color: "#fafafa"
+        Text {
+            text: qsTr("Compose Page - Placeholder for Quill Editor")
+            anchors.centerIn: parent
+            font.pointSize: 16
+            color: "#666"
+        }
+    }
+}

resources/qml/MailListPage.qml

@@ -14,9 +14,62 @@ Item {
         id: emailModel
     }
 
-    // Layout: SplitView for resizable panes
+    // Signals
+    signal emailSelected(int emailId)
+    signal composeRequested
+
+    // Header
+    Rectangle {
+        id: header
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 50
+        color: "#1976D2"
+
+        // Title
+        Text {
+            text: qsTr("Wino Mail")
+            color: "white"
+            font.pointSize: 18
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+        }
+
+        // Compose button
+        Rectangle {
+            id: composeButton
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.margins: 10
+            width: 40
+            height: 40
+            color: "#e0e0e0"
+            radius: 5
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    mailListPage.composeRequested()
+                }
+            }
+            Text {
+                text: "✎"
+                anchors.centerIn: parent
+                font.pointSize: 20
+                color: "#333"
+            }
+        }
+    }
+
+    // Main content: SplitView for folder list and email list
     SplitView {
-        anchors.fill: parent
+        anchors {
+            top: header.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
 
         // Left pane: Folder list
         Rectangle {
@@ -64,93 +117,67 @@ Item {
             }
         }
 
-        // Right pane: Email list and preview
+        // Right pane: Email list (full height)
         Rectangle {
             color: "#fafafa"
-            SplitView {
+            ListView {
-                orientation: Qt.Vertical
+                id: emailListView
                 anchors.fill: parent
-
+                clip: true
-                // Email list (top)
+                model: emailModel
-                Rectangle {
+                delegate: Item {
-                    Layout.minimumHeight: 200
+                    height: 60
-                    color: "#fafafa"
+                    Layout.fillWidth: true
-                    ListView {
+                    Rectangle {
-                        id: emailListView
                         anchors.fill: parent
-                        clip: true
+                        color: ListView.isCurrentItem ? "#e3f2fd" : "transparent"
-                        model: emailModel
+                        RowLayout {
-                        delegate: Item {
+                            anchors.fill: parent
-                            height: 60
+                            anchors.margins: 8
-                            Layout.fillWidth: true
+                            // Sender avatar/initial
                             Rectangle {
-                                anchors.fill: parent
+                                width: 40
-                                color: ListView.isCurrentItem ? "#e3f2fd" : "transparent"
+                                height: 40
-                                RowLayout {
+                                color: "#cccccc"
-                                    anchors.fill: parent
+                                Text {
-                                    anchors.margins: 8
+                                    text: senderInitial
-                                    // Sender avatar/initial
+                                    anchors.centerIn: parent
-                                    Rectangle {
+                                    font.pointSize: 16
-                                        width: 40
+                                    color: "#666"
-                                        height: 40
-                                        color: "#cccccc"
-                                        Text {
-                                            text: senderInitial
-                                            anchors.centerIn: parent
-                                            font.pointSize: 16
-                                            color: "#666"
-                                        }
-                                    }
-                                    ColumnLayout {
-                                        Layout.fillWidth: true
-                                        spacing: 4
-                                        Text {
-                                            text: senderName
-                                            font.pointSize: 14
-                                            color: "#333"
-                                            elide: Text.ElideRight
-                                            Layout.fillWidth: true
-                                        }
-                                        Text {
-                                            text: subject
-                                            font.pointSize: 13
-                                            color: "#666"
-                                            elide: Text.ElideRight
-                                            Layout.fillWidth: true
-                                        }
-                                        Text {
-                                            text: time
-                                            font.pointSize: 12
-                                            color: "#999"
-                                        }
-                                    }
                                 }
                             }
-                            MouseArea {
+                            ColumnLayout {
-                                anchors.fill: parent
+                                Layout.fillWidth: true
-                                onClicked: {
+                                spacing: 4
-                                    emailListView.currentIndex = index
+                                Text {
-                                    // Show email preview in the bottom pane
+                                    text: senderName
-                                    // For demo, we'll show some basic info
+                                    font.pointSize: 14
-                                    emailPreview.text = "From: " + senderName + "\n" +
+                                    color: "#333"
-                                                       "Subject: " + subject + "\n" +
+                                    elide: Text.ElideRight
-                                                       "Date: " + time.toString()
+                                    Layout.fillWidth: true
+                                }
+                                Text {
+                                    text: subject
+                                    font.pointSize: 13
+                                    color: "#666"
+                                    elide: Text.ElideRight
+                                    Layout.fillWidth: true
+                                }
+                                Text {
+                                    text: time
+                                    font.pointSize: 12
+                                    color: "#999"
                                 }
                             }
                         }
                     }
-                }
+                    MouseArea {
-
+                        anchors.fill: parent
-                // Email preview (bottom)
+                        onClicked: {
-                Rectangle {
+                            emailListView.currentIndex = index
-                    Layout.minimumHeight: 200
+                            // Emit signal with email id
-                    color: "#ffffff"
+                            emailSelected(model.id)
-                    Text {
+                        }
-                        id: emailPreview
-                        text: "Select an email to preview"
-                        anchors.centerIn: parent
-                        font.pointSize: 14
-                        color: "#666"
                     }
                 }
             }

resources/qml/ReaderPage.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtWebEngine 1.15
+
+Item {
+    id: readerPage
+    anchors.fill: parent
+
+    // Property to hold the email ID to display
+    property int emailId: -1
+    property var email: null // Will hold MailItem object
+
+    // Called when the page is activated
+    Component.onCompleted: {
+        if (emailId !== -1) {
+            loadEmail(emailId)
+        }
+    }
+
+    // Function to load email by ID (simplified - in reality would fetch from DB and load .eml)
+    function loadEmail(id) {
+        emailId = id
+        // For demo, we'll just show a placeholder
+        // In real implementation, we would:
+        // 1. Get MailItem from MailItemDao by id
+        // 2. Get fileId from MailItem
+        // 3. Load .eml file from storage
+        // 4. Convert MIME to HTML (using gmime or similar)
+        // 5. Load HTML into webView
+        webView.html = "<html><body><h1>Email Reader</h1><p>Loading email with ID: " + id + "</p><p>This is a placeholder. Real implementation would load the email content from .eml file and convert to HTML.</p></body></html>"
+    }
+
+    // Back button
+    Rectangle {
+        anchors {
+            top: parent.top
+            left: parent.left
+            margins: 10
+        }
+        width: 40
+        height: 40
+        color: "#e0e0e0"
+        radius: 5
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                StackView.view.pop()
+            }
+        }
+        Text {
+            text: "←"
+            anchors.centerIn: parent
+            font.pointSize: 20
+            color: "#333"
+        }
+    }
+
+    // Main content: WebEngineView to display email
+    WebEngineView {
+        id: webView
+        anchors {
+            top: backButton.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+            margins: 0
+        }
+        // Settings to enable local content loading
+        settings.javascriptEnabled: true
+        settings.localContentCanAccessRemoteUrls: true
+        settings.localContentCanAccessFileUrls: true
+    }
+}

resources/qml/Shell.qml

@@ -81,11 +81,23 @@ ApplicationWindow {
         }
     }
 
-    // Main content area with StackView for pages
+    // Define pages
-    StackView {
+    MailListPage {
-        id: stackView
+        id: mailListPage
-        anchors.fill: parent
+        onEmailSelected: {
-        initialItem: MailListPage {}
+            stackView.push(readerPage, { "emailId": emailId })
+        }
+        onComposeRequested: {
+            stackView.push(composePage)
+        }
+    }
+
+    ReaderPage {
+        id: readerPage
+    }
+
+    ComposePage {
+        id: composePage
     }
 
     // Placeholder for other pages
@@ -99,6 +111,13 @@ ApplicationWindow {
         id: settingsPage
     }
 
+    // Main content area with StackView for pages
+    StackView {
+        id: stackView
+        anchors.fill: parent
+        initialItem: mailListPage
+    }
+
     // Hamburger button to open drawer
     MenuButton {
         icon: "menu"