Add basic album list

ui/timeline.slint

@@ -1,10 +1,12 @@
-import { ScrollView } from "std-widgets.slint";
+import { ScrollView, Palette } from "std-widgets.slint";
 import { Global } from "global.slint";
 import { ImageBucket, Visibility, ImagePreview } from "types.slint";
 
-component ImagePreview inherits Rectangle {
+export component ImagePreview inherits Rectangle {
     in property <ImagePreview> preview;
     in property <length> size: 32px;
+    callback clicked <=> touch.clicked;
+
     width: size;
     height: size;
     clip: true;
@@ -15,12 +17,7 @@ component ImagePreview inherits Rectangle {
         source: preview.image;
     }
 
-    touch := TouchArea {
-        clicked => {
-            Global.viewed-image = root.preview;
-            Global.view-image(root.preview.asset-id);
-        }
-    }
+    touch := TouchArea {}
 }
 
 component TimelineBlock inherits VerticalLayout {
@@ -62,14 +59,15 @@ component TimelineBlock inherits VerticalLayout {
 
             if !checked : Image {
                 source: @image-url("../assets/unchecked.svg");
-                colorize: #aaa;
+                colorize: Palette.foreground;
+                opacity: 0.8;
                 height: title.height;
                 width: self.height;
             }
 
             if checked : Image {
                 source: @image-url("../assets/checked.svg");
-                colorize: #accbfa;
+                colorize: Palette.accent-background;
                 height: title.height;
                 width: self.height;
             }
@@ -91,6 +89,10 @@ component TimelineBlock inherits VerticalLayout {
             size: image-size;
             x: Global.image-margin / 2 + Math.mod(i, count-x) * (Global.image-margin + image-size);
             y: Math.floor(i / count-x) * (image-size + Global.image-margin);
+            clicked => {
+                Global.viewed-image = preview;
+                Global.view-image(preview.asset-id);
+            }
         }
     }
 }