Move all UI code into new 'ui' directory

src/ui/Actions.slint

@@ -0,0 +1,45 @@
+import { Date, Time } from "std-widgets.slint";
+
+export struct NewTaskData {
+	sourceId: int,
+	eventId: int,
+	title: string,
+	scheduled: bool,
+	date: Date
+}
+
+export struct SaveTaskData {
+	sourceId: int,
+	id: int,
+	title: string,
+	scheduled: bool,
+	date: Date,
+}
+
+struct OpenNewTaskFormParams {
+	eventSourceId: int,
+	eventId: int,
+}
+
+export struct CreateEventParams {
+	source-id: int,
+	title: string,
+	date: Date,
+	starts-at: Time,
+	ends-at: Time
+}
+
+export global AppActions  {
+	callback task-clicked(int, int);
+	callback source-clicked(int);
+	callback add-source(name: string, path: string);
+	callback edit-source(sourceId: int, name: string, color: string, path: string);
+	
+	callback toggle-show-completed-tasks();
+	callback delete-task-clicked(int, int);
+
+	callback create-task(NewTaskData);
+	callback save-task(SaveTaskData);
+	callback create-event(CreateEventParams);
+	callback delete-event(sourceId: int, eventId: int);
+}

src/ui/Models.slint

@@ -0,0 +1,88 @@
+import { Date, Time } from "std-widgets.slint";
+
+export struct TasksViewTask {
+	id: int,
+	source-id: int,
+	title: string,
+	checked: bool
+}
+
+export struct TasksViewSource {
+	id: int,
+	name: string,
+	color: color,
+	tasks: [TasksViewTask]
+}
+
+export struct TasksViewDate {
+	due-date: Date,
+	no-date: bool,
+	is-late: bool,
+	sources: [TasksViewSource]
+}
+
+export struct TasksView {
+	dates: [TasksViewDate],
+	sources: [string]
+}
+
+export struct CalendarViewEvent {
+	source-id: int,
+	id: int,
+	title: string,
+	starts-at: Time,
+	ends-at: Time
+}
+
+export struct CalendarViewDate {
+	events: [CalendarViewEvent],
+	date: Date,
+	header: string,
+}
+
+export struct CalendarView {
+	dates: [CalendarViewDate]
+}
+
+export struct SidebarViewSources {
+	id: int,
+	name: string,
+	color: color,
+	active: bool
+}
+
+export enum SidebarViewActiveTab {
+	tasks,
+	calendar
+}
+
+export struct SidebarView {
+	sources: [SidebarViewSources],
+	active-view: SidebarViewActiveTab,
+	all-active: bool
+}
+
+export struct AvailableSource {
+	id: int,
+	name: string,
+	color: color
+}
+
+export enum CalendarDateDisplayFormat {
+	Relative,
+	Normal
+}
+
+export global AppModels  {
+    in-out property<SidebarView> sidebar-view;
+	in-out property<TasksView> tasks-view;
+	in-out property<CalendarView> calendar-view;
+	in-out property<[AvailableSource]> available-sources;
+	in-out property<[string]> available-sources-strings;
+
+	callback get-source-id-from-name(string) -> int;
+	pure callback get-source-name-from-id(int) -> string;
+	pure callback get-source-color-from-id-as-color(int) -> color;
+	pure callback get-source-color-from-id-as-hex(int) -> string;
+	pure callback get-source-path-from-id(int) -> string;
+}

src/ui/Utils.slint

@@ -0,0 +1,22 @@
+import { Date, Time } from "std-widgets.slint";
+
+export global Utils  {
+	pure function format-zero-padding(number: int) -> string {
+		if (number < 10) {
+			return "0\{number}";
+		}
+		return number;
+	}
+
+	 public pure function time-to-string(time: Time) -> string {
+		if (time.minute == 0) {
+			return "\{time.hour}";
+		}
+		return "\{time.hour}:\{format-zero-padding(time.minute)}";
+	}
+
+	pure callback format-date(Date) -> string;
+
+	in property <Date> current-date;
+	in property <Time> current-time;
+}

src/ui/components/Calendar.slint

@@ -0,0 +1,156 @@
+import { ScrollView, Date, Time } from "std-widgets.slint";
+import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
+import { Utils } from "../Utils.slint";
+import { AppModels, CalendarViewDate, CalendarDateDisplayFormat  } from "../Models.slint";
+
+export component Calendar inherits Rectangle {
+	in property<[CalendarViewDate]> days;
+	in property <CalendarDateDisplayFormat> format;
+	in property <Date> current-date;
+	in property <Time> current-time;
+	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;
+
+	private property <int> contextMenuEventSourceId: -1;
+
+	callback delete-event-request(source-id: int, event-id: int);
+
+	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 {
+			Rectangle { // Last bar delimiting days
+				x: parent.width - 1px;
+				y: header-height - 32px;
+				width: 1px;
+				height: parent.height - self.y;
+				background: Palette.card-background.brighter(0.3);
+			}
+			min-width: 400px;
+			//background: green;
+			HorizontalLayout {
+				for day[day-index] in root.days: Rectangle {
+					Rectangle { // Bar delimiting days
+						x: 0;
+						y: header-height - 32px;
+						width: 1px;
+						height: parent.height - self.y;
+						background: Palette.card-background.brighter(0.3);
+					}
+					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.brighter(0.3);
+						x: 0px;
+						width: parent.width;
+						y: day-start-y + hour-spacing * hour-index;
+						height: 1px;
+					}
+					if day.date == root.current-date : Rectangle {
+						background: Palette.red;
+						x: 0px;
+						y: day-start-y + hour-spacing * root.current-time.hour + (root.current-time.minute / 60 * hour-spacing);
+						width: parent.width;
+						height: 1px;
+						z: 100;
+					}
+					for event[event-index] in day.events : Rectangle {
+						Rectangle {
+							width: 100%;
+							height: 100%;
+							background: AppModels.get-source-color-from-id-as-color(event.source-id);
+							opacity: 0.05;
+						}
+						background: Palette.card-background;
+						border-radius: 4px;
+						x: 8px;
+						width: parent.width - 16px;
+						y: day-start-y + hour-spacing * event.starts_at.hour;
+						height: hour-spacing * (event.ends_at.hour - event.starts_at.hour) - 2px;
+						clip: true;
+						HorizontalLayout {
+							Rectangle {
+								width: 4px;
+								background: AppModels.get-source-color-from-id-as-color(event.source-id);
+							}
+							VerticalLayout {
+								padding: 16px;
+								VText {
+									text: event.title;
+									wrap: TextWrap.word-wrap;
+								}
+							}
+						}
+
+						eventActionsPopup := 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 => {
+									delete-event-request(event.source-id, event.id);
+								}
+							}
+						}
+
+						ta := TouchArea {
+							pointer-event(e) => {
+								if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
+									eventActionsPopup.show(ta.mouse-x, ta.mouse-y);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

src/ui/components/CreateTaskOrEvent.slint

@@ -0,0 +1,82 @@
+import { AppModels } from "../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 component CreateTaskOrEvent inherits Rectangle {
+
+	in property <[string]> sources;
+
+	callback create-task(CreateTaskData);
+
+	function accepted() {
+		root.create-task({
+			sourceId: AppModels.get-source-id-from-name(sourceInput.current-value),
+			title: newTaskTitleInput.text,
+			date: taskDateInput.date
+		});
+		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: "Enter new task";
+			 	started-writting() => {
+					sourceInput.current-index = 0;
+			 	}
+				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;
+					VText { text: "for"; vertical-alignment: bottom;}
+					VerticalLayout {
+						alignment: end;
+						// This ComboBox cause UI lag when loaded first time.
+						// Same thing without the `model` set.
+						sourceInput := ComboBox { 
+							model: root.sources; 
+							
+						}
+					}
+					VText { text: "on"; vertical-alignment: bottom;}
+					taskDateInput := VDatePicker {
+						enabled: true;
+					}
+					VButton {
+						text: "Create";
+						icon-svg: Svg.correct;
+						icon-colorize: greenyellow;
+						clicked => { accepted() }
+					}
+				}
+			}
+		}
+	}
+}

src/ui/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/ui/components/TaskLine.slint

@@ -0,0 +1,96 @@
+import { ToggleButton } from "@selenite";
+import { VPopupIconMenu, VTag, VText, VButton, VActionButton, VCheckBox, Svg, Palette } from "@selenite";
+import { TaskEdit } from "./TaskEdit.slint";
+import { Date } from "std-widgets.slint";
+import { AppModels } from "../Models.slint";
+
+export struct TaskLineEditData {
+	title: string,
+	scheduled: bool,
+	date: Date,
+	checked: bool
+}
+
+export component TaskLine inherits VerticalLayout {
+	in property<string> title;
+	in property<bool> hide-source-name;
+	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()
+					}
+				}
+			}
+		}
+	}
+}

src/ui/modals/AddEventModal.slint

@@ -0,0 +1,49 @@
+import { Palette } from "@selenite";
+import { VTextInput } from "@selenite";
+import { VButton, VText, VDatePicker } from "@selenite";
+import { AppActions } from "../Actions.slint"; 
+import { Modal } from "@selenite";
+import { VTimePicker } from "@selenite";
+import { ComboBox } from "std-widgets.slint";
+import { AppModels } from "../Models.slint";
+
+export component AddEventModal inherits Modal {
+	public function open() {
+		root.show();
+	}
+
+	VerticalLayout {
+		padding: 16px;
+		spacing: 8px;
+		sourceInput := ComboBox {
+			model: AppModels.available-sources-strings;
+		}
+		titleInput := VTextInput {
+			label: "title";
+		}
+		VText { text: "on"; vertical-alignment: bottom;}
+		dateInput := VDatePicker {
+			enabled: true;
+		}
+		HorizontalLayout {
+			spacing: 4px;
+			VText { text: "between"; vertical-alignment: bottom; }
+			startTimeInput := VTimePicker {  }
+			VText { text: "and"; vertical-alignment: bottom; }
+			endTimeInput := VTimePicker {  }
+		}
+		VButton {
+			text: "Create";
+			clicked => { 
+				AppActions.create-event({
+					source-id: AppModels.get-source-id-from-name(sourceInput.current-value),
+					title: titleInput.text,
+					date: dateInput.date, 
+					starts-at: startTimeInput.time,
+					ends-at: endTimeInput.time
+				});
+				root.close();
+			}
+		}
+	 }
+}

src/ui/modals/AddSourceModal.slint

@@ -0,0 +1,36 @@
+import { Palette } from "@selenite";
+import { VTextInput } from "@selenite";
+import { VButton } from "@selenite";
+import { Modal } from "@selenite";
+import { AppModels } from "../Models.slint";
+import { AppActions } from "../Actions.slint";
+
+export component AddSourceModal inherits Modal {
+	private property <int> source-id-to-edit: -1;
+	private property <string> name: "";
+	private property <string> path: "";
+
+	public function open() {
+		root.show();
+	}
+
+	VerticalLayout {
+		padding: 16px;
+		spacing: 8px;
+		nameInput := VTextInput {
+			label: "Name";
+			text <=> root.name;
+		}
+		pathInput := VTextInput {
+			label: "Path";
+			text <=> root.path;
+		}
+		VButton {
+			text: "Add";
+			clicked => { 
+				AppActions.add-source(name, path);
+				root.close();
+			}
+		}
+	 }
+}

src/ui/modals/EditSourceModal.slint

@@ -0,0 +1,52 @@
+import { Palette } from "@selenite";
+import { VTextInput } from "@selenite";
+import { VButton } from "@selenite";
+import { AppModels } from "../Models.slint";
+import { AppActions } from "../Actions.slint";
+import { Modal } from "@selenite";
+
+export component EditSourceModal inherits Modal {
+	private property <int> source-id-to-edit: -1;
+	private property <string> name: "";
+	private property <string> color_: ""; // Well, cannot override 'color'
+	private property <string> path: "";
+
+	public function edit(source-id: int) {
+		source-id-to-edit = source-id;
+		root.name = AppModels.get-source-name-from-id(source-id);
+		root.color_ = AppModels.get-source-color-from-id-as-hex(source-id); 
+		root.path = AppModels.get-source-path-from-id(source-id);
+		root.show();
+	}
+
+	VerticalLayout {
+		padding: 16px;
+		spacing: 8px;
+		nameInput := VTextInput {
+			label: "Name";
+			text <=> root.name;
+		}
+		colorInput := VTextInput {
+			label: "Color";
+			text <=> root.color_;
+		}
+		pathInput := VTextInput {
+			label: "Path";
+			text <=> root.path;
+		}
+		VButton {
+			text: "Save";
+			clicked => { 
+				AppActions.edit-source(source-id-to-edit, name, color_, path);
+				root.close();
+			}
+		}
+		VButton {
+			text: "Delete";
+			background-color: Palette.red;
+			double-clicked => { 
+				//root.delete-source(root.id)
+			}
+		}
+	 }
+}

src/ui/ui.slint

@@ -0,0 +1,7 @@
+import { AppModels } from "Models.slint";
+import { AppActions } from "Actions.slint"; 
+import { AppWindow } from "windows/AppWindow/AppWindow.slint";
+import { Utils } from "Utils.slint";
+import { Palette } from "@selenite";
+
+export { Utils, Palette, AppWindow, AppModels, AppActions }

src/ui/utils.cpp

@@ -0,0 +1,93 @@
+/*
+ * 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
+ */
+
+#include "utils.h"
+#include <cctype>
+#include <chrono>
+#include <format>
+#include <string>
+
+void bind_slint_utils(const ui::Utils &utils)
+{
+	utils.on_format_date([&](const ui::Date &date) {
+		std::chrono::year_month_day chronoDate{
+			std::chrono::year(date.year),
+			std::chrono::month(date.month),
+			std::chrono::day(date.day),
+		};
+		return std::format("{:%B %d}", chronoDate);
+	});
+
+	auto currentDate = mirai_date_to_slint_date(mirai::date(std::chrono::system_clock::now()));
+	utils.set_current_date(currentDate);
+
+	auto currentTime = mirai_time_to_slint_time(mirai::time(std::chrono::system_clock::now()));
+	utils.set_current_time(currentTime);
+}
+
+std::string format_zero_padding(const int number)
+{
+	if (number < 10) {
+		return "0" + std::to_string(number);
+	}
+	return std::to_string(number);
+}
+
+std::string format_date_relative(const ui::Date &date)
+{
+	auto todayDate = mirai::date(std::chrono::system_clock::now());
+	auto relativeDaysDiff =
+		std::chrono::duration_cast<std::chrono::days>(
+			std::chrono::sys_days(slint_date_to_mirai_date(date).to_std_chrono())
+			- std::chrono::sys_days(todayDate.to_std_chrono())
+		)
+			.count();
+
+	if (relativeDaysDiff == 0) {
+		return std::string("today");
+	} else if (relativeDaysDiff == 1) {
+		return std::string("tomorrow");
+	}
+	return std::format("in {} days", relativeDaysDiff);
+};
+
+std::string capitalize(std::string str)
+{
+	str[0] = static_cast<char>(toupper(str[0]));
+	return str;
+};
+
+std::string slint_date_to_std_string(const ui::Date &date)
+{
+	return std::to_string(date.year) + "-" + format_zero_padding(date.month) + "-"
+		 + format_zero_padding(date.day);
+}
+
+mirai::date slint_date_to_mirai_date(const ui::Date &date)
+{
+	return mirai::date(
+		date.year, static_cast<unsigned>(date.month), static_cast<unsigned>(date.day)
+	);
+}
+
+ui::Date mirai_date_to_slint_date(const mirai::date &date)
+{
+	return {
+		.year = date.year,
+		.month = static_cast<int>(date.month),
+		.day = static_cast<int>(date.day),
+	};
+}
+
+ui::Time mirai_time_to_slint_time(const mirai::time &time)
+{
+	return {.hour = time.hour, .minute = time.minute, .second = 0};
+}
+
+mirai::time slint_time_to_mirai_time(const ui::Time &time)
+{
+	return mirai::time{time.hour, time.minute};
+}

src/ui/utils.h

@@ -0,0 +1,22 @@
+/*
+ * 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
+ */
+
+#pragma once
+
+#include "mirai-core/date.h"
+#include "ui.h"
+#include <string>
+
+void bind_slint_utils(const ui::Utils &utils);
+
+std::string format_zero_padding(const int number);
+std::string format_date_relative(const ui::Date &date);
+std::string capitalize(std::string str);
+std::string slint_date_to_std_string(const ui::Date &date);
+mirai::date slint_date_to_mirai_date(const ui::Date &date);
+ui::Date mirai_date_to_slint_date(const mirai::date &date);
+ui::Time mirai_time_to_slint_time(const mirai::time &time);
+mirai::time slint_time_to_mirai_time(const ui::Time &time);

src/ui/windows/AppWindow/AppWindow.slint

@@ -0,0 +1,74 @@
+import { AppModels } from "../../Models.slint";
+import { Button, VerticalBox, CheckBox } from "std-widgets.slint";
+import { MainView } from "views/TasksView.slint";
+import { Palette } from "@selenite";
+import { CalendarView } from "views/CalendarView.slint";
+import { VButton } from "@selenite";
+import { ToggleButton, Svg } from "@selenite";
+import { VTextInput } from "@selenite";
+import { AppActions } from "../../Actions.slint";
+import { SideBar } from "views/SideBar.slint";
+ 
+export component AppWindow inherits Window {
+
+	title: "Mirai";
+	//min-height: 100px;
+	//max-height: 4000px; // needed, otherwise the window wants to fit the content (on Swaywm)
+	background: Palette.background;
+
+	private property<bool> show-tasks: false;
+
+    HorizontalLayout {
+   //     padding: 16px;
+		//spacing: 16px;
+		VerticalLayout {
+			Rectangle {
+				background: Palette.pane;
+   //             border-radius: 8px;
+				//clip: true;
+				VerticalLayout {
+					VerticalLayout {
+						padding: 16px;
+						alignment: LayoutAlignment.stretch;
+						spacing: 8px;
+						ToggleButton {
+							text: "Calendar";
+							icon-svg: Svg.calendar;
+							active: !show-tasks;
+							clicked => { show-tasks = false }
+						}
+
+						ToggleButton {
+							text: "Tasks";
+							icon-svg: Svg.tasks;
+							active: show-tasks;
+							clicked => { show-tasks = true }
+						}
+					} 
+					SideBar {
+						min-width: 256px;
+					}
+				}	
+			}
+		}	
+		Rectangle {
+			width: 1px;
+			background: Palette.card-background;
+		}
+		Rectangle {
+			background: Palette.background;
+			//border-radius: 8px;
+			//clip: true;
+			VerticalLayout {
+				if show-tasks : MainView {
+					horizontal-stretch: 1;
+				}
+				if !show-tasks : CalendarView {
+					horizontal-stretch: 1;
+				}
+			}
+		}		
+     }
+}
+
+export { AppModels, Palette } // Export to make it visible to the C++ backend

src/ui/windows/AppWindow/views/CalendarView.slint

@@ -0,0 +1,48 @@
+import { AppModels } from "../../../Models.slint";
+import { AppActions, NewTaskData, SaveTaskData } from "../../../Actions.slint";
+import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
+import { TaskLine } from "../../../components/TaskLine.slint";
+import { Calendar } from "../../../components/Calendar.slint";
+import { VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
+import { CreateTaskOrEvent } from "../../../components/CreateTaskOrEvent.slint";
+import { Utils } from "../../../Utils.slint";
+import { VActionButton } from "@selenite";
+import { AddEventModal } from "../../../modals/AddEventModal.slint";
+
+export component CalendarView inherits Rectangle {
+
+	private property<string> icon-visible: Svg.visible;
+	private property<string> icon-not-visible: Svg.not-visible;
+	private property<bool> completed-tasks-visible: false;
+
+	createEventPopup := AddEventModal {}
+
+	VerticalLayout {
+		padding: 16px;
+		spacing: 16px;
+		HorizontalLayout {
+			alignment: start;
+			VButton {
+				text: "New event";
+				icon-svg: Svg.plus;
+				icon-colorize: Palette.green;
+				clicked => { 
+					createEventPopup.show();
+				}
+			}
+		}	
+		Rectangle {
+			horizontal-stretch: 1;
+			background: Palette.background.brighter(0.2);
+			height: 1px;
+		}
+		Calendar {
+			delete-event-request(source-id, event-id) => { 
+				AppActions.delete-event(source-id, event-id)
+			}
+			days: AppModels.calendar-view.dates;
+			current-date: Utils.current-date;
+			current-time: Utils.current-time;
+		}
+	}
+}

src/ui/windows/AppWindow/views/SideBar.slint

@@ -0,0 +1,85 @@
+import { AppModels } from "../../../Models.slint";
+import { AppActions } from "../../../Actions.slint";
+import { VButton, ToggleButton, VActionButton, VText, Svg, Palette } from "@selenite";
+import { EditSourceModal } from "../../../modals/EditSourceModal.slint";
+import { AddSourceModal } from "../../../modals/AddSourceModal.slint";
+
+export component SideBar inherits Rectangle {
+
+	function open-edit-source-window(source-id: int) {
+		editSourcePopup.edit(source-id)
+	}
+
+	addSourcePopup := AddSourceModal{}
+	editSourcePopup := EditSourceModal {}
+
+	VerticalLayout {
+		height: parent.height;
+		padding: 16px;
+		spacing: 16px;
+		HorizontalLayout {
+			alignment: stretch;
+			VText {
+				text: "Sources";
+				font-size: 1.5rem;
+				horizontal-stretch: 0;
+			}
+
+			Rectangle {
+				horizontal-stretch: 1;
+			}	
+
+			VActionButton {
+				horizontal-stretch: 0;
+				icon-svg: Svg.plus;
+				icon-colorize: Palette.green;
+				background: transparent;
+				clicked => { addSourcePopup.open() }
+			}
+		}
+		VerticalLayout {
+			alignment: space-between;
+			vertical-stretch: 1;
+			VerticalLayout {
+				vertical-stretch: 1;
+				spacing: 4px;
+				for source[index] in AppModels.sidebar-view.sources: HorizontalLayout {
+					alignment: space-between;
+					VText {
+						text: source.name;
+					}
+					Rectangle {
+						height: 16px;
+						width: 16px;
+						border-color: source.color;
+						border-width: 1px;
+						border-radius: 4px;
+
+						Rectangle {
+							x: 2px;
+							y: 2px;
+							background: source.active ? source.color : Colors.transparent;
+							border-radius: 2px;
+							width: parent.width - (self.x * 2);
+							height: parent.height - (self.y * 2);
+						}
+
+						TouchArea {
+							clicked => { AppActions.source-clicked(source.id) }
+							//right-clicked => { editSourcePopup.edit(source.id) }
+						}
+					}
+				}
+			}
+			VerticalLayout {
+				spacing: 4px;
+				/*VButton {
+					icon-svg: Svg.cog;
+					text: "Settings";
+					background: transparent;
+					clicked => { AppModels.open-settings-window() }
+				}*/
+			}
+		}
+	}
+}

src/ui/windows/AppWindow/views/TasksView.slint

@@ -0,0 +1,143 @@
+import { AppModels } from "../../../Models.slint";
+import { AppActions, NewTaskData, SaveTaskData } from "../../../Actions.slint";
+import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
+import { TaskLine } from "../../../components/TaskLine.slint";
+import { Calendar } from "../../../components/Calendar.slint";
+import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
+import { CreateTaskOrEvent } from "../../../components/CreateTaskOrEvent.slint";
+import { Utils } from "../../../Utils.slint";
+
+export component MainView inherits Rectangle {
+
+	private property<string> icon-visible: Svg.visible;
+	private property<string> icon-not-visible: Svg.not-visible;
+	private property<bool> completed-tasks-visible: false;
+
+	VerticalLayout {
+		padding: 16px;
+		spacing: 16px;
+		HorizontalLayout {
+			alignment: start;
+			spacing: 8px;
+			VButton {
+				text: "Show/Hide completed tasks";
+				clicked => {
+					AppActions.toggle-show-completed-tasks();
+					completed-tasks-visible = !completed-tasks-visible;
+				}
+				icon-svg: completed-tasks-visible ? icon-visible : icon-not-visible;
+				icon-colorize: Palette.control-foreground;
+			}
+		}
+		Rectangle {
+			horizontal-stretch: 1;
+			background: Palette.background.brighter(0.2);
+			height: 1px;
+		}
+
+		CreateTaskOrEvent {
+			sources: AppModels.available-sources-strings;
+			create-task(data) => {
+				AppActions.create-task({
+					sourceId: data.sourceId,
+					eventId: -1,
+					title: data.title,
+					scheduled: data.date.year != 0,
+					date: data.date
+				})
+			}
+		}
+		
+		Flickable {
+			max-width: 9999px; // The window keeps resizing down if we don't set the max width
+			horizontal-stretch: 1;
+			VerticalLayout {
+				alignment: start;
+				if AppModels.tasks-view.dates.length == 0 : VText {
+					text: "There is no task to show";
+					horizontal-alignment: center;
+					vertical-alignment: center;
+				}
+				for day[dayIndex] in AppModels.tasks-view.dates: VerticalLayout {
+					spacing: day.sources.length > 0 ? 16px : 0px;
+					padding-bottom: 32px;
+
+					HorizontalLayout {
+						alignment: start;
+						VText {
+							text: day.no-date ? "Unscheduled" : Utils.format-date(day.due-date);
+							color: day.is-late ? Palette.orange : Palette.foreground;
+							font-weight: 800;
+							font-size: 1.2rem;
+						}
+						//VerticalLayout {
+							//alignment: center;
+							//VText {
+								//text: day.relativeDaysDiff == 0 ? "  -  today" :
+									//day.relativeDaysDiff == 1 ? "  -  tomorrow" :
+									//day.relativeDaysDiff == -1 ? "  -  yesterday" :
+									//day.relativeDaysDiff > 0 ? "  -  in \{day.relativeDaysDiff} days" :
+									//"  -  \{-day.relativeDaysDiff} days ago";
+								//color: Palette.foreground-hint;
+								//font-size: 1rem;
+							//}
+						//}
+					}
+
+					for source[source-index] in day.sources: Rectangle {
+						Rectangle {
+							x: 0;
+							y: 0;
+							width: 1px;
+							height: 100%;
+							background: source.color;
+							border-radius: 4px;
+						}
+						Rectangle {
+							width: 100%;
+							height: 100%;
+							background: source.color;
+							opacity: 0.05;
+						}
+						VerticalLayout {
+							padding: 16px;
+							VText {
+								text: source.name;
+								color: source.color;
+								font-weight: 800;
+							}
+							if source.tasks.length > 0 : Rectangle {
+								VerticalLayout {
+									for task[taskIndex] in source.tasks: VerticalLayout {
+										padding-top: taskIndex == 0 ? 16px : 0px;
+										padding-bottom: 8px;
+										TaskLine {
+											title: task.title;
+											checked: task.checked;
+											allow-edit-date: true;
+											delete => { 
+												AppActions.delete-task-clicked(task.source-id, task.id)
+											}
+											toggle-check => {
+												AppActions.task-clicked(task.source-id, task.id);
+											}
+											edited(data) => {
+												AppActions.save-task({
+													id: task.id,
+													sourceId: task.source-id,
+													title: data.title,
+													scheduled: data.scheduled,
+													date: data.date
+												})
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}