Add mock timeline-block checkbox

assets/checked.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   class="text-primary svelte-ztbs85"
+   stroke="transparent"
+   stroke-width="2"
+   role="img"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="checked.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="13.470055"
+     inkscape:cx="12.583468"
+     inkscape:cy="5.8277418"
+     inkscape:window-width="1555"
+     inkscape:window-height="1000"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!---->
+  <!---->
+  <path
+     d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+     fill="currentColor"
+     id="path1" />
+</svg>

assets/unchecked.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   class="text-primary svelte-ztbs85"
+   stroke="transparent"
+   stroke-width="2"
+   role="img"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="unchecked.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="11.92186"
+     inkscape:cx="32.922716"
+     inkscape:cy="21.682859"
+     inkscape:window-width="1555"
+     inkscape:window-height="1000"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!---->
+  <!---->
+  <ellipse
+     style="fill:none;stroke:#000000;stroke-width:1.91177;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     id="path2"
+     cx="12"
+     cy="11.999998"
+     rx="9.0441151"
+     ry="9.0441122" />
+</svg>

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;
+    property <length> title-box-height: 44px;
-    height: title-box.height + count-y * image-size-with-margin;
+    height: title-box-height + count-y * image-size-with-margin;
 
     y: bucket.y;
     min-width: min-image-size;
     alignment: start;
 
-    title-box := HorizontalLayout {
+    title-box := Rectangle {
+        property <bool> checked: false;
+
+        HorizontalLayout {
             alignment: space-between;
             height: title-box-height;
             padding: 8px;
 
-        Text {
+            title := Text {
                 text: bucket.title;
+                font-size: 20px;
             }
 
-        // TODO: checkbox thingy
+            if !checked : Image {
-        Text {
+                source: @image-url("../assets/unchecked.svg");
-            text: "O";
+                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;
+            }
+        }
+
+        title-touch := TouchArea {
+            clicked => {
+                parent.checked = !parent.checked;
+            }
         }
     }