Refactor the whole structure, no more separation for C++ and Slint files

src/components/Calendar.slint

@@ -0,0 +1,112 @@
+import { ScrollView, Date, Time } from "std-widgets.slint";
+import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
+import { Utils } from "../shared/Utils.slint";
+
+export struct CalendarDayEvent {
+	title: string,
+	startsAt: Time,
+	endsAt: Time
+}
+
+export struct CalendarDay {
+	events: [CalendarDayEvent],
+	date: Date,
+	header: string,
+}
+
+export enum CalendarDateDisplayFormat {
+	Relative,
+	Normal
+}
+
+export component Calendar inherits Rectangle {
+	in property<[CalendarDay]> days;
+	in property <CalendarDateDisplayFormat> format;
+	private property <length> header-height: 64px;
+	private property <length> available-day-space: self.height - header-height;
+	private property <length> day-start-y: header-height;
+	private property <length> hour-spacing: available-day-space / 24;
+	background: Palette.pane;
+
+	HorizontalLayout {
+		Rectangle {
+			//background: red;
+			width: 48px;
+			VerticalLayout {
+				y: 0;
+				height: header-height;
+				padding-right: 8px;
+				VText {
+					vertical-alignment: center;
+					horizontal-alignment: right;
+					text: "";
+				}
+			}
+
+			for index in 24: VerticalLayout {
+				y: day-start-y + index * hour-spacing - (hour-spacing / 2);
+				height: hour-spacing;
+				padding-right: 8px;
+				VText {
+					vertical-alignment: center;
+					horizontal-alignment: right;
+					text: "\{index}";
+				}
+			}
+			
+		}
+		Rectangle {
+			//background: green;
+			HorizontalLayout {
+				for day[day-index] in root.days: Rectangle {
+					if day-index > 0 : Rectangle {
+						x: 0;
+						y: header-height - 32px;
+						width: 1px;
+						height: parent.height;
+						background: Palette.card-background.transparentize(0.5);
+					}
+					VerticalLayout {
+						y: 0;
+						height: header-height;
+						padding-right: 8px;
+						VText {
+							vertical-alignment: center;
+							horizontal-alignment: center;
+							text: day.header;
+						}
+					}
+					for hour[hour-index] in 24 : Rectangle {
+						background: Palette.card-background.transparentize(0.5);
+						x: 0px;
+						width: parent.width;
+						y: day-start-y + hour-spacing * hour-index;
+						height: 1px;
+					}
+					for event[event-index] in day.events : Rectangle {
+						background: Palette.card-background;
+						border-radius: 4px;
+						x: 8px;
+						width: parent.width - 16px;
+						y: day-start-y + hour-spacing * event.startsAt.hour;
+						height: hour-spacing * (event.endsAt.hour - event.startsAt.hour) - 2px;
+						clip: true;
+						HorizontalLayout {
+							Rectangle {
+								width: 4px;
+								background: Palette.accent;
+							}
+							VerticalLayout {
+								padding: 16px;
+								VText {
+									text: event.title;
+									wrap: TextWrap.word-wrap;
+								}
+							}
+						}	
+					}
+				}
+			}
+		}
+	}
+}

src/components/CreateTaskOrEvent.slint

@@ -0,0 +1,123 @@
+import { AppWindowModels } from "../windows/AppWindow/Models.slint";
+import { Date, Time, Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
+import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VActionButton, VTag, VText, Svg, VTextInput, Palette } from "@selenite";
+
+export struct CreateTaskData {
+	sourceId: int,
+	title: string,
+	date: Date
+}
+
+export struct CreateEventData {
+	sourceId: int,
+	title: string,
+	date: Date,
+	startsAt: Time,
+	endsAt: Time
+}
+
+export component CreateTaskOrEvent inherits Rectangle {
+
+	in property <[string]> sources;
+	private property <int> task-or-event: 1;
+
+	callback create-task(CreateTaskData);
+	callback create-event(CreateEventData);
+
+	function accepted() {
+		if (task-or-event == 1) {
+			root.create-task({
+				sourceId: AppWindowModels.get-source-id-from-name(sourceInput.current-value),
+				title: newTaskTitleInput.text,
+				date: taskDateInput.date
+			})
+		} else {
+			root.create-event({
+				sourceId: AppWindowModels.get-source-id-from-name(sourceInput.current-value),
+				title: newTaskTitleInput.text,
+				date: taskDateInput.date,
+				startsAt: eventStartTimeInput.time,
+				endsAt: eventEndTimeInput.time
+			})
+		}
+		newTaskTitleInput.edit-text("");
+	}
+
+	Rectangle {
+		border-color: newTaskTitleInput.text != "" ? Palette.card-background : transparent;
+		border-width: newTaskTitleInput.text != "" ? 4px : 0px;
+		border-radius: newTaskTitleInput.text != "" ? 8px : 0px;
+		animate border-color, border-width {
+			duration: 250ms;
+		}
+		VerticalLayout {
+			spacing: 8px;
+			padding: newTaskTitleInput.text != "" ? 16px : 0px;
+			animate padding {
+				duration: 250ms;
+			}
+			newTaskTitleInput := VTextInput {
+				placeholder: "Add new Task / Event";
+			 	started-writting() => {
+					sourceInput.current-index = AppWindowModels.default-source-index;
+			 	}
+				accepted => { accepted() }
+			}
+			Rectangle {
+				min-height: 0px;
+				max-height: newTaskTitleInput.text != "" ? 512px : 0px;
+				opacity: newTaskTitleInput.text != "" ? 1 : 0;
+				clip: true;
+				animate max-height, opacity {
+					 duration: 250ms;
+				}
+				
+				HorizontalLayout {
+					alignment: start;
+					spacing: 8px;
+					VerticalLayout {
+						alignment: end;
+						VButton {
+							text: task-or-event == 1 ? "Task" : "Event";
+							clicked => { task-or-event = task-or-event == 1 ? 0 : 1 }
+						}
+					}
+					VText { text: "for"; vertical-alignment: bottom;}
+					VerticalLayout {
+						alignment: end;
+						sourceInput := ComboBox {
+							model: root.sources; 
+							
+						}
+					}
+					VText { text: "on"; vertical-alignment: bottom;}
+					taskDateInput := VDatePicker {
+						enabled: true;
+					}
+					Rectangle {
+						min-width: 0;
+						max-width: task-or-event == 0 ? 9999px : 0px;
+						opacity: task-or-event == 0 ? 1 : 0;
+						clip: true;
+						animate max-width, opacity {
+						     duration: 250ms;
+						}
+						HorizontalLayout {
+							spacing: 4px;
+							VText { text: "between"; vertical-alignment: bottom; }
+							eventStartTimeInput := VTimePicker {  }
+							VText { text: "and"; vertical-alignment: bottom; }
+							eventEndTimeInput := VTimePicker {  }
+						}
+					}
+					VButton {
+						text: "Create";
+						icon-svg: Svg.correct;
+						icon-colorize: greenyellow;
+						clicked => { accepted() }
+					}
+				}
+			}
+		}
+	}
+}

src/components/EventGroup.slint

@@ -0,0 +1,127 @@
+import { Event } from "../windows/AppWindow/Models.slint";
+import { ScrollView } from "std-widgets.slint";
+import { VCheckBox, VTextInput, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
+import { TaskLine } from "./TaskLine.slint";
+import { Utils } from "../shared/Utils.slint";
+
+export struct EventGroupAddTask {
+	title: string
+}
+
+export component EventGroup {
+	in property<Event> event;
+	private property <bool> show-add-task: false;
+	private property <bool> edit-name: false;
+
+	callback add-task(EventGroupAddTask);
+	callback edit-task(int, EventGroupAddTask);
+	callback delete-task(int);
+	callback delete();
+	callback edit(EventGroupAddTask);
+	callback toggle-check-task(int);
+
+	eventPopup := VPopupIconMenu {
+		VActionButton {
+			icon-svg: Svg.plus;
+			icon-colorize: Colors.greenyellow;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { 
+				root.show-add-task = true;
+			}
+		}
+		VActionButton {
+			icon-svg: Svg.pen;
+			icon-colorize: Colors.grey;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { edit-name = true; }
+		}
+
+		VActionButton {
+			icon-svg: Svg.trash;
+			icon-colorize: Colors.pink;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { root.delete() }
+		}
+	}
+
+	ta := TouchArea {
+		pointer-event(e) => { 
+			if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
+				eventPopup.show(ta.mouse-x, ta.mouse-y); 
+			}
+		}
+	}
+
+	HorizontalLayout {
+		VerticalLayout {
+			spacing: 4px;
+			VText {
+				text: Utils.time-to-string(event.startsAt);
+				horizontal-alignment: center;
+				color: Palette.accent;
+			}
+			HorizontalLayout {
+				alignment: center;
+				Rectangle {
+					width: 2px;
+					background: Palette.accent;
+				}
+			}
+			VText {
+				text: Utils.time-to-string(event.endsAt);
+				color: Palette.accent;
+				font-size: 0.9rem;
+				horizontal-alignment: center;
+			}
+		}
+		VerticalLayout {
+			horizontal-stretch: 1;
+			padding: 16px;
+			padding-top: 32px;
+			padding-bottom: 32px;
+			padding-right: 0px;
+			if !edit-name : VText {
+				text: event.title;
+				font-size: 1.1rem;
+			}
+			if edit-name : title := VTextInput {
+				text: event.title;
+				accepted => { 
+					root.edit({
+						title: title.text
+					});
+					root.edit-name = false;
+				}
+			}
+			for task[taskIndex] in event.tasks: VerticalLayout {
+				padding-top: taskIndex == 0 ? 16px : 0px;
+				padding-bottom: 8px;
+				TaskLine {
+					title: task.title;
+					delete => { 
+						root.delete-task(task.id)
+					}
+					toggle-check => {
+						root.toggle-check-task(task.id)
+					}
+					edited(data) => {
+						root.edit-task(task.id, {
+							title: data.title
+						});
+					}
+				}
+			}
+			if show-add-task : taskInput := VTextInput {
+				accepted => { 
+					root.add-task({
+						title: taskInput.text
+					});
+					root.show-add-task = false;
+				}
+			}
+		}
+	}
+}

src/components/TaskEdit.slint

@@ -0,0 +1,64 @@
+import { Button, VerticalBox, CheckBox, Date, ScrollView, ComboBox } from "std-widgets.slint";
+import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
+
+export struct TaskEditData {
+	title: string,
+	date: Date,
+}
+
+export component TaskEdit inherits VerticalLayout {
+	out property <bool> should-show;
+	in property <bool> allow-edit-date;
+	in-out property <TaskEditData> task;
+
+	callback accepted(TaskEditData);
+
+	private property <Date> newDate: task.date;
+
+	public function show(task: TaskEditData) {
+		root.task = task;
+		should-show = true;
+	}
+	public function close() {
+	    should-show = false;
+	}
+
+	// Render
+
+	if !should-show : Rectangle {}
+
+	if should-show : Rectangle {
+		function modify() {
+			root.accepted({
+				title: newTaskTitleInput.text,
+				date: newDate
+			});
+		}
+		background: Palette.background;
+		border-radius: 8px;
+		VerticalLayout {
+			padding: 16px;
+			spacing: 8px;
+		
+			newTaskTitleInput := VTextInput {
+				text: root.task.title;
+				accepted => { modify() }
+			}
+			HorizontalLayout {
+				alignment: start;
+				spacing: 8px;
+				if root.allow-edit-date : taskDateInput := VDatePicker {
+					date: task.date;
+					enabled: true;
+					edited(date) => { newDate = date; }
+				}
+				VButton {
+					text: "Modify";
+					icon-svg: Svg.correct;
+					icon-colorize: greenyellow;
+					clicked => { modify() }
+				}
+			}
+		}
+	}
+}

src/components/TaskLine.slint

@@ -0,0 +1,94 @@
+import { ToggleButton } from "@selenite";
+import { VPopupIconMenu, VTag, VButton, VActionButton, VCheckBox, Svg, Palette } from "@selenite";
+import { TaskEdit } from "./TaskEdit.slint";
+import { Date } from "std-widgets.slint";
+
+export struct TaskLineEditData {
+	title: string,
+	scheduled: bool,
+	date: Date,
+	checked: bool
+}
+
+export component TaskLine inherits VerticalLayout {
+	in property<string> title;
+	in property<bool> scheduled;
+	in property<Date> date;
+	in property<bool> checked;
+	in property<bool> allow-edit-date;
+
+	callback delete();
+	callback edit();
+	callback toggle-check();
+	callback edited(TaskLineEditData);
+
+	private property<length> popup-x: 200px;
+	private property<length> popup-y: 200px;
+
+	taskEdit := TaskEdit {
+		allow-edit-date: root.allow-edit-date;
+		accepted(task) => {
+			root.edited({
+				title: task.title,
+				scheduled: task.date.year != 0,
+				date: task.date
+			});
+			taskEdit.close();
+		}
+	}
+
+	if !taskEdit.should-show : Rectangle {
+		popup := VPopupIconMenu {
+			VActionButton {
+				icon-svg: Svg.pen;
+				icon-colorize: Colors.grey;
+				icon-size: 1.5rem;
+				border-radius: 0;
+				clicked => { 
+					taskEdit.show({
+						title: title,
+						date: date
+					});
+				}
+			}
+
+			VActionButton {
+				icon-svg: Svg.trash;
+				icon-colorize: Colors.pink;
+				icon-size: 1.5rem;
+				border-radius: 0;
+				clicked => {
+					root.delete();
+				}
+			}
+		}
+
+		ta := TouchArea {
+			clicked => {
+				checkbox.checked = !checkbox.checked;
+				root.toggle-check();
+			}
+			pointer-event(e) => {
+				if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
+					popup.show(ta.mouse-x, ta.mouse-y);
+				}
+			}
+			z: 10;
+		}
+
+		HorizontalLayout {
+			alignment: space-between;
+			HorizontalLayout {
+				alignment: start;
+				spacing: 8px;
+				checkbox := VCheckBox {
+					text: root.title;
+					checked: root.checked;
+					toggled => {
+						root.toggle-check()
+					}
+				}
+			}
+		}
+	}
+}