Add basic responsive layout for Phone

src/qml/MainPanel.qml

@@ -0,0 +1,112 @@
+/* 
+ * Mirai. Copyright (C) 2024 Vyn
+ * This file is licensed under version 3 of the GNU General Public License (GPL-3.0-only)
+ * The license can be found in the LICENSE file or at https://www.gnu.org/licenses/gpl-3.0.txt
+ */
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import Mirai
+
+Rectangle {
+	color: colorPalette.selected.background
+	
+	ColumnLayout {
+		anchors.fill: parent
+		anchors.margins: 10
+		spacing: 16
+
+		TabSelector {
+			Layout.fillWidth: true
+			Layout.preferredHeight: childrenRect.height
+			
+			tabs: [
+				{
+					label: "Todo",
+					onClick: () => {
+						backend.hideCompletedTasks(true) // Little workaround for now.
+						root.selectedView = "list"
+					},
+					selected: root.selectedView === "list"
+				},
+				{
+					label: "Calendar",
+					onClick: () => {
+						backend.hideCompletedTasks(false) // Little workaround for now.
+						root.selectedView = "calendar"
+					},
+					selected: root.selectedView === "calendar"
+				}
+			]
+
+		}
+
+		AppButton {
+			icon.source: "qrc:/qt/qml/Mirai/src/images/add.png"
+			icon.color: colorPalette.selected.palette.green
+			text: "Add task"
+			onClicked: {
+				root.newTask()
+			}
+		}
+
+		Component {
+			id: listViewComponent
+			ListView {
+				
+			}
+		}
+
+		Component {
+			id: calendarViewComponent
+			CalendarView {
+				
+			}
+		}
+
+		Component {
+			id: gettingStartedComponent
+				AppText {
+					text: "You currently have no files loaded, you can add them by clicking on the cog icon on the left pane"
+					anchors.centerIn: parent
+					horizontalAlignment: Text.AlignHCenter
+					verticalAlignment: Text.AlignVCenter
+				}
+		}
+
+		Loader {
+			sourceComponent: backend.tasks.length === 0 ? gettingStartedComponent
+			: selectedView === "list" ? listViewComponent
+			: selectedView === "calendar" ? calendarViewComponent 
+			: undefined
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+		}
+
+		
+
+		Popup {
+			id: taskFormPopup
+			width: parent.width * 0.75
+			implicitHeight: taskForm.height + padding * 2
+			x: Math.round((parent.width - width) / 2)
+			y: Math.round((parent.height * 0.4) / 2)
+			padding: 8
+			background: Rectangle {
+				border.color: colorPalette.selected.modalBorder
+				border.width: 2
+				color: colorPalette.selected.pane
+				radius: 4
+			}
+			TaskForm {
+				id: taskForm
+				width: parent.width
+				onConfirmed: {
+					taskFormPopup.close()
+				}
+			}
+		}
+	}
+}