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
-    SplitView {
+    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 {
+            top: header.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
 
         // Left pane: Folder list
         Rectangle {
@@ -64,16 +117,8 @@ Item {
             }
         }
 
-        // Right pane: Email list and preview
+        // Right pane: Email list (full height)
         Rectangle {
-            color: "#fafafa"
-            SplitView {
-                orientation: Qt.Vertical
-                anchors.fill: parent
-
-                // Email list (top)
-                Rectangle {
-                    Layout.minimumHeight: 200
             color: "#fafafa"
             ListView {
                 id: emailListView
@@ -130,30 +175,12 @@ Item {
                         anchors.fill: parent
                         onClicked: {
                             emailListView.currentIndex = index
-                                    // Show email preview in the bottom pane
+                            // Emit signal with email id
-                                    // For demo, we'll show some basic info
+                            emailSelected(model.id)
-                                    emailPreview.text = "From: " + senderName + "\n" +
-                                                       "Subject: " + subject + "\n" +
-                                                       "Date: " + time.toString()
                         }
                     }
                 }
             }
         }
-
-                // Email preview (bottom)
-                Rectangle {
-                    Layout.minimumHeight: 200
-                    color: "#ffffff"
-                    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"