From 0f4391d388b270b14fd4ddab0817d3f01cbc2d5e Mon Sep 17 00:00:00 2001
From: Joakim Hulthe <joakim@hulthe.net>
Date: Wed, 3 Jun 2026 23:42:11 +0200
Subject: [PATCH] Add mock timeline-block checkbox

---
 assets/checked.svg   | 44 +++++++++++++++++++++++++++++++++++++++++
 assets/unchecked.svg | 47 ++++++++++++++++++++++++++++++++++++++++++++
 ui/timeline.slint    | 44 ++++++++++++++++++++++++++++++-----------
 3 files changed, 123 insertions(+), 12 deletions(-)
 create mode 100644 assets/checked.svg
 create mode 100644 assets/unchecked.svg

diff --git a/assets/checked.svg b/assets/checked.svg
new file mode 100644
index 0000000..ae61331
--- /dev/null
+++ b/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>
diff --git a/assets/unchecked.svg b/assets/unchecked.svg
new file mode 100644
index 0000000..1e103f8
--- /dev/null
+++ b/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>
diff --git a/ui/timeline.slint b/ui/timeline.slint
index 281fd99..86f831a 100644
--- a/ui/timeline.slint
+++ b/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;
+            }
         }
     }