Rework Button and add Modal to have a better experience on Phone

src/qml/forms/FilesForm.qml

@@ -28,6 +28,15 @@ ColumnLayout {
 		property var paths
 	}
 
+	AppText {
+		text: "Files"
+		font.pixelSize: 32
+	}
+
+	Item {
+		Layout.preferredHeight: 32
+	}
+
 	Repeater {
 		model: internal.paths
 		ColumnLayout {
@@ -40,6 +49,15 @@ ColumnLayout {
 		}
 	}
 
+	AppButton {
+		text: "Add"
+		icon.source: "qrc:/qt/qml/Mirai/src/images/add.png"
+		icon.color: colorPalette.selected.palette.green
+		onClicked: {
+			fileDialog.open()
+		}
+	}
+
 	FileDialog {
         id: fileDialog
 		onAccepted: {
@@ -48,11 +66,8 @@ ColumnLayout {
 		}
     }
 
-	AppButton {
-		text: "+ Add"
-		onClicked: {
-			fileDialog.open()
-		}
+	Item {
+		Layout.preferredHeight: 32
 	}
 
 	AppButton {

src/qml/forms/TaskForm.qml

@@ -16,12 +16,27 @@ ColumnLayout {
 	property int taskToEditIndex
 	spacing: 6
 	signal confirmed
+	signal canceled
 
 	onTaskToEditChanged: {
 		newTodoContent.text = taskToEdit?.rawFormat ?? "- [ ] "
 		newTodoDate.text = taskToEdit?.date ?? ""
 	}
 
+	function createTask() {
+		
+		if (taskToEdit && taskToEditIndex !== undefined) {
+			backend.updateTodoFromRawFormat(taskToEditIndex, newTodoContent.text, newTodoDate.text)
+		} else {
+			backend.addTodoFromRawFormat(
+				file.currentValue,
+				newTodoContent.text,
+				newTodoDate.text != "" ? newTodoDate.text : "No date"
+			)
+		}
+		form.confirmed()
+	}
+
 	AppText {
 		text: "New/Edit task"
 	}
@@ -57,16 +72,24 @@ ColumnLayout {
 			if (newTodoContent.text == "") {
 				return 
 			}
-			if (taskToEdit && taskToEditIndex !== undefined) {
-				backend.updateTodoFromRawFormat(taskToEditIndex, newTodoContent.text, newTodoDate.text)
-			} else {
-				backend.addTodoFromRawFormat(
-					file.currentValue,
-					newTodoContent.text,
-					newTodoDate.text != "" ? newTodoDate.text : "No date"
-				)
+			createTask()
+		}
+	}
+
+	RowLayout {
+		spacing: 8
+		AppButton {
+			text: "Create"
+			onClicked: {
+				createTask()
+			}
+		}
+
+		AppButton {
+			text: "Cancel"
+			onClicked: {
+				form.canceled()
 			}
-			form.confirmed()
 		}
 	}
 }