Download images when clicking on them

ui/app-window.slint

@@ -39,8 +39,8 @@ export component AppWindow inherits Window {
         if Global.logged-in: Timeline {}
     }
 
-    if Global.previewed-image.asset-id != "" : ImageViewer {
-        image: Global.previewed-image.image;
+    if Global.viewed-image.asset-id != "" : ImageViewer {
+        image: Global.viewed-image.image;
     }
 }
 

ui/global.slint

@@ -4,7 +4,7 @@ export global Global {
     in-out property <bool> logged-in: false;
     in-out property <length> min-image-size: 160px;
     in-out property <length> image-margin: 2px;
-    in-out property <ImagePreview> previewed-image;
+    in-out property <ImagePreview> viewed-image;
     in-out property <[ImageBucket]> image-buckets: [
         { key: "2026-02-01", title: "Feb 1, 2026", count: 12 },
         { key: "2026-02-02", title: "Feb 2, 2026", count: 12 },
@@ -16,4 +16,5 @@ export global Global {
     callback login-api-key(url: string, api_key: string);
     callback set-timeline-width(length);
     callback timeline-scrolled(length);
+    callback view-image(string);
 }

ui/image-viewer.slint

@@ -21,7 +21,7 @@ export component ImageViewer inherits Rectangle {
         interval: 0.2s;
         triggered => {
             self.running = false;
-            Global.previewed-image.asset-id = "";
+            Global.viewed-image.asset-id = "";
         }
     }
 
@@ -64,6 +64,8 @@ export component ImageViewer inherits Rectangle {
         Image {
             source: image;
             image-fit: ImageFit.contain;
+            width: root.width;
+            height: root.height;
 
             function calc-y() -> length {
                 parent.y + parent.height / 2 - self.height / 2

ui/timeline.slint

@@ -17,7 +17,8 @@ component ImagePreview inherits Rectangle {
 
     touch := TouchArea {
         clicked => {
-            Global.previewed-image = root.preview;
+            Global.viewed-image = root.preview;
+            Global.view-image(root.preview.asset-id);
         }
     }
 }
@@ -75,26 +76,26 @@ component TimelineBlock inherits VerticalLayout {
 }
 
 export component Timeline inherits ScrollView {
-            mouse-drag-pan-enabled: true;
-            viewport-height: rect.height;
+    mouse-drag-pan-enabled: true;
+    viewport-height: rect.height;
 
-            changed viewport-y => {
-                Global.timeline-scrolled(-self.viewport-y);
-            }
-            
-            rect := Rectangle {
-                y: 0;
-                x: 0;
+    changed viewport-y => {
+        Global.timeline-scrolled(-self.viewport-y);
+    }
+    
+    rect := Rectangle {
+        y: 0;
+        x: 0;
+        width: root.width;
+        height: Global.timeline-height;
+        preferred-width: self.width;
+        preferred-height: self.height;
+        for bucket[i] in Global.image-buckets : Rectangle {
+            if bucket.visibility == Visibility.InView : TimelineBlock {
                 width: root.width;
-                height: Global.timeline-height;
-                preferred-width: self.width;
-                preferred-height: self.height;
-                for bucket[i] in Global.image-buckets : Rectangle {
-                    if bucket.visibility == Visibility.InView : TimelineBlock {
-                        width: root.width;
-                        index: i;
-                        bucket: bucket;
-                    }
-                }
+                index: i;
+                bucket: bucket;
             }
+        }
+    }
 }

ui/types.slint

@@ -1,7 +1,8 @@
-export enum PreviewKind {
+export enum ImageKind {
     None,
     Thumbhash,
     Thumbnail,
+    Original,
 }
 
 export struct ImagePreview {
@@ -13,7 +14,7 @@ export struct ImagePreview {
     // Image aspect ratio. (width/height)
     ratio: float,
 
-    kind: PreviewKind,
+    kind: ImageKind,
 }
 
 export enum Visibility {