Add mock timeline-block checkbox

ui/timeline.slint

@@ -40,25 +40,45 @@ component TimelineBlock inherits VerticalLayout {
     property <length> image-size: calc-image-size();
     property <length> image-size-with-margin: image-size + Global.image-margin;
 
-    property <length> title-box-height: 36px;
-    height: title-box.height + count-y * image-size-with-margin;
+    property <length> title-box-height: 44px;
+    height: title-box-height + count-y * image-size-with-margin;
 
     y: bucket.y;
     min-width: min-image-size;
     alignment: start;
 
-    title-box := HorizontalLayout {
-        alignment: space-between;
-        height: title-box-height;
-        padding: 8px;
+    title-box := Rectangle {
+        property <bool> checked: false;
 
-        Text {
-            text: bucket.title;
+        HorizontalLayout {
+            alignment: space-between;
+            height: title-box-height;
+            padding: 8px;
+
+            title := Text {
+                text: bucket.title;
+                font-size: 20px;
+            }
+
+            if !checked : Image {
+                source: @image-url("../assets/unchecked.svg");
+                colorize: #aaa;
+                height: title.height;
+                width: self.height;
+            }
+
+            if checked : Image {
+                source: @image-url("../assets/checked.svg");
+                colorize: #accbfa;
+                height: title.height;
+                width: self.height;
+            }
         }
-        
-        // TODO: checkbox thingy
-        Text {
-            text: "O";
+
+        title-touch := TouchArea {
+            clicked => {
+                parent.checked = !parent.checked;
+            }
         }
     }