Complete Phase 4: Basic UI with QML - MailListPage with folder/email navigation, models connected to DAOs, placeholder pages for Calendar/Contacts/Settings

resources/qml/CalendarPage.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Item {
+    id: calendarPage
+    anchors.fill: parent
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#fafafa"
+        Text {
+            text: qsTr("Calendar Page - Placeholder")
+            anchors.centerIn: parent
+            font.pointSize: 16
+            color: "#666"
+        }
+    }
+}

resources/qml/ContactsPage.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Item {
+    id: contactsPage
+    anchors.fill: parent
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#fafafa"
+        Text {
+            text: qsTr("Contacts Page - Placeholder")
+            anchors.centerIn: parent
+            font.pointSize: 16
+            color: "#666"
+        }
+    }
+}

resources/qml/MailListPage.qml

@@ -6,6 +6,14 @@ Item {
     id: mailListPage
     anchors.fill: parent
 
+    // Models
+    FolderListModel {
+        id: folderModel
+    }
+    EmailListModel {
+        id: emailModel
+    }
+
     // Layout: SplitView for resizable panes
     SplitView {
         anchors.fill: parent
@@ -18,7 +26,7 @@ Item {
                 id: folderListView
                 anchors.fill: parent
                 clip: true
-                model: FolderModel {}
+                model: folderModel
                 delegate: Item {
                     height: 40
                     Layout.fillWidth: true
@@ -38,7 +46,18 @@ Item {
                         anchors.fill: parent
                         onClicked: {
                             folderListView.currentIndex = index
-                            // TODO: Load emails for selected folder
+                            // Load emails for selected folder
+                            // For now, we'll map folder names to IDs (hardcoded for demo)
+                            var folderId = 0; // Inbox
+                            switch (folderName) {
+                                case "Inbox": folderId = 0; break;
+                                case "Sent": folderId = 1; break;
+                                case "Drafts": folderId = 2; break;
+                                case "Trash": folderId = 3; break;
+                                case "Spam": folderId = 4; break;
+                                default: folderId = 0;
+                            }
+                            emailModel.setFolderId(folderId);
                         }
                     }
                 }
@@ -60,7 +79,7 @@ Item {
                         id: emailListView
                         anchors.fill: parent
                         clip: true
-                        model: EmailModel {}
+                        model: emailModel
                         delegate: Item {
                             height: 60
                             Layout.fillWidth: true
@@ -111,7 +130,11 @@ Item {
                                 anchors.fill: parent
                                 onClicked: {
                                     emailListView.currentIndex = index
-                                    // TODO: Show email preview in the bottom pane
+                                    // Show email preview in the bottom pane
+                                    // For demo, we'll show some basic info
+                                    emailPreview.text = "From: " + senderName + "\n" +
+                                                       "Subject: " + subject + "\n" +
+                                                       "Date: " + time.toString()
                                 }
                             }
                         }

resources/qml/SettingsPage.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Item {
+    id: settingsPage
+    anchors.fill: parent
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#fafafa"
+        Text {
+            text: qsTr("Settings Page - Placeholder")
+            anchors.centerIn: parent
+            font.pointSize: 16
+            color: "#666"
+        }
+    }
+}

resources/qml/Shell.qml

@@ -85,34 +85,18 @@ ApplicationWindow {
     StackView {
         id: stackView
         anchors.fill: parent
-        initialItem: mailListPage
+        initialItem: MailListPage {}
     }
 
-    // Define pages
-    MailListPage {
-        id: mailListPage
-    }
     // Placeholder for other pages
-    Rectangle {
-        color: "#f0f0f0"
-        Text {
-            text: qsTr("Calendar Page")
-            anchors.centerIn: parent
-        }
+    CalendarPage {
+        id: calendarPage
     }
-    Rectangle {
-        color: "#f0f0f0"
-        Text {
-            text: qsTr("Contacts Page")
-            anchors.centerIn: parent
-        }
+    ContactsPage {
+        id: contactsPage
     }
-    Rectangle {
-        color: "#f0f0f0"
-        Text {
-            text: qsTr("Settings Page")
-            anchors.centerIn: parent
-        }
+    SettingsPage {
+        id: settingsPage
     }
 
     // Hamburger button to open drawer
@@ -155,20 +139,4 @@ component NavigationItem: Button {
 
 component MenuButton: IconButton {
     iconSource: icon
-}
-
-// Placeholder for MailListPage - we'll replace this with a real component later
-component MailListPage: Item {
-    id: mailListPage
-    anchors.fill: parent
-    Rectangle {
-        anchors.fill: parent
-        color: "#fafafa"
-        Text {
-            text: qsTr("Mail List Placeholder")
-            anchors.centerIn: parent
-            font.pointSize: 16
-            color: "#666"
-        }
-    }
 }