Remove PNG images, replace them with SVGs

ui/components/EventGroup.slint

@@ -0,0 +1,91 @@
+import { Backend, TaskData, Event } from "../Backend.slint";
+import { ScrollView } from "std-widgets.slint";
+import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@vynui";
+import { TaskLine } from "./TaskLine.slint";
+import { Utils } from "../Utils.slint";
+
+export component EventGroup {
+	in property<Event> event;
+
+	eventPopup := VPopupIconMenu {
+		VActionButton {
+			icon-svg: Svg.plus;
+			icon-colorize: Colors.greenyellow;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { Backend.open-new-task-form({
+				eventSourceId: event.sourceId,
+				eventId: event.id,
+			})}
+		}
+		VActionButton {
+			icon-svg: Svg.pen;
+			icon-colorize: Colors.grey;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { Backend.open-edit-event-form(event.sourceId, event.id) }
+		}
+
+		VActionButton {
+			icon-svg: Svg.trash;
+			icon-colorize: Colors.pink;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { Backend.delete-event-clicked(event.sourceId, event.id) }
+		}
+	}
+
+	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);
+				color: Palette.accent;
+			}
+			HorizontalLayout {
+				alignment: center;
+				Rectangle {
+					width: 4px;
+					background: Palette.accent;
+					border-radius: 8px;
+
+				}
+			}
+			VText {
+				text: Utils.time-to-string(event.endsAt);
+				color: Palette.accent;
+				font-size: 0.8rem;
+				horizontal-alignment: center;
+			}
+		}
+		VerticalLayout {
+			horizontal-stretch: 1;
+			padding: 16px;
+			padding-top: 32px;
+			padding-bottom: 32px;
+			padding-right: 0px;
+			VText {
+				text: event.title;
+				font-size: 1.1rem;
+			}
+			for task[taskIndex] in event.tasks: VerticalLayout {
+				padding-top: taskIndex == 0 ? 16px : 0px;
+				padding-bottom: 8px;
+				TaskLine {
+					task: task;
+					source-index: task.sourceId;
+					task-index: task.id;
+				}
+			}
+		}
+	}
+
+}