Add initial image viewer

Due to "Recursion detected" bugs in slint, we need to calculate the
layout of the timeline in Rust. This is ugly, but works.

Cargo.toml

@@ -18,12 +18,12 @@ tracing = "0.1.44"
 tracing-subscriber = { version = "0.3.23", features = ["env-filter"] }
 
 [dependencies.slint]
-version = "1.15.1"
+version = "1.16.1"
 default-features = false
 features = ["backend-winit", "compat-1-2", "live-preview", "renderer-femtovg", "std"]
 
 [build-dependencies]
-slint-build = "1.15.1"
+slint-build = "1.16.1"
 
 [profile.release]
 codegen-units = 1

src/api.rs

@@ -162,6 +162,10 @@ impl Message<GetAssetThumbnail> for Api {
         msg: GetAssetThumbnail,
         _ctx: &mut Context<Self, Self::Reply>,
     ) -> Self::Reply {
+        if let Some(thumbnail) = self.thumbnails.get(&msg.id).cloned() {
+            return Ok(thumbnail);
+        }
+
         let response = self
             .client
             .assets()
@@ -182,9 +186,13 @@ impl Message<GetAssetThumbnail> for Api {
             thumbnail.height(),
         );
 
-        Ok(Arc::new(AssetThumbnail {
+        let thumbnail = Arc::new(AssetThumbnail {
             id: msg.id,
             thumbnail: pixel_buffer,
-        }))
+        });
+
+        self.thumbnails.insert(msg.id, Arc::clone(&thumbnail));
+
+        Ok(thumbnail)
     }
 }

src/main.rs

@@ -1,6 +1,8 @@
 // Prevent console window in addition to Slint window in Windows release builds when, e.g., starting the app via file manager. Ignored on other platforms.
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use std::{mem, ops::Deref};
+
 use clap::Parser;
 use immich_sdk::AssetId;
 use kameo::actor::{ActorRef, Spawn};
@@ -12,7 +14,7 @@ use tracing::Level;
 
 use crate::{
     api::{Api, GetAssetThumbnail, GetTimeBucket, GetTimeBuckets, TimeBucketKey},
-    ui::AppWindow,
+    ui::{AppWindow, ImageBucket},
 };
 
 mod api;
@@ -68,6 +70,8 @@ fn main() -> anyhow::Result<()> {
     let api_ = Api::spawn(api);
 
     let app = ui::AppWindow::new()?;
+    let global = app.global::<ui::Global>();
+    global.set_image_buckets(ModelRc::new(VecModel::default()));
 
     let app_weak = app.as_weak();
     let api = api_.clone();
@@ -76,17 +80,9 @@ fn main() -> anyhow::Result<()> {
             return;
         };
 
-        for bucket in buckets.iter() {
+        let api = api.clone();
-            load_bucket(bucket.key.clone(), app_weak.clone(), api.clone());
-        }
-
         let _ = app_weak.upgrade_in_event_loop(move |app| {
-            let preview_image = slint::Image::from_rgb8(SharedPixelBuffer::clone_from_slice(
+            let preview_image = placeholder_preview();
-                &[0x33, 0x33, 0x33], // a single dark gray pixel
-                1,
-                1,
-            ));
-
             let global = app.global::<ui::Global>();
             let buckets = buckets
                 .into_iter()
@@ -103,29 +99,174 @@ fn main() -> anyhow::Result<()> {
                             })
                             .collect::<VecModel<_>>(),
                     ),
+                    y: Default::default(),
+                    height: Default::default(),
+                    visibility: ui::Visibility::Hidden,
                 })
                 .collect::<VecModel<_>>();
             global.set_image_buckets(ModelRc::new(buckets));
+            calculate_timeline_layout(&app, api, global.get_timeline_width());
         });
     });
 
-    // FIXME: visibility-based callbacks are broken
+    let app_weak = app.as_weak();
-    // let app_weak = app.as_weak();
+    let api = api_.clone();
-    // let api = api_.clone();
+    global.on_set_timeline_width(move |new_width| {
-    // global.on_bucket_view_state(move |key, new_state| {
+        let api = api.clone();
-    //     eprintln!("{key} => {new_state:?}");
+        let _ = app_weak.upgrade_in_event_loop(move |app| {
+            calculate_timeline_layout(&app, api, new_width);
+        });
+    });
 
-    //     // TODO
+    let app_weak = app.as_weak();
-    //     if new_state == ui::ViewState::Hidden {
+    let api = api_.clone();
-    //         return;
+    global.on_timeline_scrolled(move |scroll| {
-    //     }
+        let api = api.clone();
-    // });
+        let _ = app_weak.upgrade_in_event_loop(move |app| {
+            calculate_timeline_visibility(&app, api, scroll);
+        });
+    });
 
     app.run()?;
 
     Ok(())
 }
 
+fn calculate_timeline_visibility(app: &AppWindow, api: ActorRef<Api>, scroll: f32) {
+    let global = app.global::<ui::Global>();
+    global.set_timeline_scroll(scroll);
+
+    let window_height = app.get_window_height();
+    let visible_range = scroll..=(scroll + window_height);
+    let buckets = get_image_buckets(&app);
+
+    for i in 0..buckets.row_count() {
+        let Some(mut bucket) = buckets.row_data(i) else {
+            break;
+        };
+        let top_y = bucket.y;
+        let bottom_y = bucket.y + bucket.height;
+
+        let is_visible = &top_y <= &visible_range.end() && visible_range.start() <= &bottom_y;
+
+        let visibility = if is_visible {
+            ui::Visibility::InView
+        } else {
+            ui::Visibility::Hidden
+        };
+
+        let prev_visibility = mem::replace(&mut bucket.visibility, visibility);
+
+        if prev_visibility != visibility {
+            tracing::debug!("{i} {prev_visibility:?} => {visibility:?}");
+        }
+
+        match (prev_visibility, visibility) {
+            (ui::Visibility::Hidden, ui::Visibility::InView) => {
+                load_bucket(bucket.key.to_string(), app.as_weak(), api.clone());
+            }
+
+            (ui::Visibility::NearView, ui::Visibility::Hidden)
+            | (ui::Visibility::InView, ui::Visibility::Hidden) => {
+                unload_bucket(&bucket.key.to_string(), app);
+            }
+
+            (..) => {}
+        }
+
+        buckets.set_row_data(i, bucket);
+    }
+}
+
+fn calculate_timeline_layout(app: &AppWindow, api: ActorRef<Api>, timeline_width: f32) {
+    let global = app.global::<ui::Global>();
+    let min_image_size = global.get_min_image_size();
+    let image_margin = global.get_image_margin();
+    let min_size_with_margin = min_image_size + image_margin;
+    let buckets = get_image_buckets(&app);
+
+    let count_x = (timeline_width / min_size_with_margin).floor() as usize;
+    let remaining_length = timeline_width.rem_euclid(min_size_with_margin);
+    let image_size = min_image_size + remaining_length / (count_x as f32);
+    let image_size_with_margin = image_size + image_margin;
+    let header_height = 48.0; // TODO
+
+    let mut y = 0.0;
+    for i in 0..buckets.row_count() {
+        let Some(mut bucket) = buckets.row_data(i) else {
+            break;
+        };
+
+        let count_y = ((bucket.count as f32) / (count_x as f32)).ceil();
+
+        if i == 0 {
+            dbg!(count_x);
+            dbg!(count_y);
+        }
+
+        bucket.y = y;
+        bucket.height = header_height + count_y * image_size_with_margin;
+        y += bucket.height;
+
+        buckets.set_row_data(i, bucket);
+    }
+
+    global.set_timeline_width(timeline_width);
+    global.set_timeline_height(y);
+    calculate_timeline_visibility(app, api, global.get_timeline_scroll());
+}
+
+struct AppImageBuckets {
+    buckets: ModelRc<ImageBucket>,
+}
+
+impl Deref for AppImageBuckets {
+    type Target = VecModel<ImageBucket>;
+
+    #[track_caller]
+    fn deref(&self) -> &Self::Target {
+        self.buckets
+            .as_any()
+            .downcast_ref::<VecModel<ui::ImageBucket>>()
+            .expect("Image buckets is a VecModel")
+    }
+}
+
+fn get_image_buckets(app: &AppWindow) -> impl Deref<Target = VecModel<ImageBucket>> {
+    let global = app.global::<ui::Global>();
+    AppImageBuckets {
+        buckets: global.get_image_buckets(),
+    }
+}
+
+fn placeholder_preview() -> slint::Image {
+    slint::Image::from_rgb8(SharedPixelBuffer::clone_from_slice(
+        &[0x33, 0x33, 0x33], // a single dark gray pixel
+        1,
+        1,
+    ))
+}
+
+fn unload_bucket(time_bucket: &TimeBucketKey, app: &AppWindow) {
+    let buckets = get_image_buckets(app);
+    let Some(i) = buckets.iter().position(|b| &b.key == &time_bucket) else {
+        return;
+    };
+    let bucket = buckets.row_data(i).expect("i is in the list");
+
+    let placeholder_preview = placeholder_preview();
+    for j in 0..bucket.previews.row_count() {
+        let Some(mut preview) = bucket.previews.row_data(j) else {
+            break;
+        };
+        preview.kind = ui::PreviewKind::None;
+        preview.image = placeholder_preview.clone();
+        bucket.previews.set_row_data(j, preview);
+    }
+
+    // TODO: write `bucket` into `buckets?`
+}
+
 fn load_bucket(time_bucket: TimeBucketKey, app_weak: Weak<AppWindow>, api: ActorRef<Api>) {
     tokio::spawn(async move {
         let Ok(api_bucket) = api
@@ -138,13 +279,7 @@ fn load_bucket(time_bucket: TimeBucketKey, app_weak: Weak<AppWindow>, api: Actor
         };
 
         let _ = app_weak.upgrade_in_event_loop(move |app| {
-            let global = app.global::<ui::Global>();
+            let buckets = get_image_buckets(&app);
-
-            let buckets = global.get_image_buckets();
-            let buckets = buckets
-                .as_any()
-                .downcast_ref::<VecModel<ui::ImageBucket>>()
-                .unwrap();
 
             let Some(i) = buckets.iter().position(|b| &b.key == &time_bucket) else {
                 return;
@@ -192,14 +327,7 @@ fn load_thumbnail(
         };
 
         let _ = app_weak.upgrade_in_event_loop(move |app| {
-            let global = app.global::<ui::Global>();
+            let buckets = get_image_buckets(&app);
-
-            let buckets = global.get_image_buckets();
-            let buckets = buckets
-                .as_any()
-                .downcast_ref::<VecModel<ui::ImageBucket>>()
-                .unwrap();
-
             let Some(i) = buckets.iter().position(|b| &b.key == &time_bucket) else {
                 return;
             };

ui/app-window.slint

@@ -1,42 +1,9 @@
 import { AboutSlint, Button, Palette, HorizontalBox, ScrollView } from "std-widgets.slint";
+import { Timeline } from "timeline.slint";
+import { ImageViewer } from "image-viewer.slint";
 
-enum PreviewKind {
+import { Global } from "global.slint";
-    None,
+export { Global }
-    Thumbhash,
-    Thumbnail,
-}
-
-struct ImagePreview {
-    asset_id: string,
-    image: image,
-    kind: PreviewKind,
-}
-
-struct ImageBucket {
-    key: string,
-    title: string,
-    count: int,
-    previews: [ImagePreview],
-}
-
-enum ViewState {
-    Hidden,
-    NearView,
-    InView,
-}
-
-export global Global {
-    in-out property <length> min-image-size: 100px;
-    in-out property <length> image-margin: 2px;
-    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 },
-        { key: "2026-02-03", title: "Feb 3, 2026", count: 12 },
-    ];
-
-    callback bucket-view-state(string, ViewState);
-}
-
 
 component Header inherits Rectangle {
     width: 100%;
@@ -51,145 +18,27 @@ component Header inherits Rectangle {
     }
 }
 
-component ImagePreview inherits Rectangle {
-    in property <image> preview;
-    in property <length> size: 32px;
-    width: size;
-    height: size;
-
-    Image {
-        width: 100%;
-        height: 100%;
-        source: preview;
-    }
-
-    touch := TouchArea {
-        clicked => {
-        }
-    }
-}
-
-component TimelineBlock inherits VerticalLayout {
-    in property <int> index: -1;
-    in property <ImageBucket> bucket;
-
-    function calc-view-state() -> ViewState {
-        // TODO: fix this function
-        return ViewState.InView;
-    }
-    
-    in property <ViewState> view-state: calc-view-state();
-
-    property <length> min-image-size: Global.min-image-size;
-    property <length> min-size-with-margin: min-image-size + Global.image-margin;
-    property <int> count-x: self.width / min-size-with-margin;
-    property <int> count-y: Math.ceil(bucket.count / count-x);
-    
-    function calc-image-size() -> length {
-        let remaining-length = Math.mod(self.width,  min-size-with-margin);
-        min-image-size + remaining-length / count-x
-    }
-
-    property <length> image-size: calc-image-size();
-    property <length> image-size-with-margin: image-size + Global.image-margin;
-
-    min-width: min-image-size;
-    alignment: start;
-    height: title-box.height + count-y * image-size-with-margin;
-
-    // FIXME: this triggers recursion errors in slint.
-    // changed view-state => {
-    //     Global.bucket-view-state(bucket.key, view-state);
-    // }
-
-    // TODO: don't render subtree when self.view-state = Hidden
-    title-box := HorizontalBox {
-        alignment: space-between;
-        height: 36px;
-
-        Text {
-            text: bucket.title;
-        }
-        
-        // TODO: checkbox thingy
-        Text {
-            text: "O";
-        }
-    }
-
-    // TODO: don't render subtree when self.view-state = Hidden
-    image-box := Rectangle {
-        width: 100%;
-        height: count-y * image-size-with-margin;
-
-        for preview[i] in bucket.previews : ImagePreview {
-            preview: preview.image;
-            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);
-        }
-    }
-}
-
-// component ImageViewer inherits Rectangle {
-//     in property <image> image;
-    
-//     width: 100%;
-//     height: 100%;
-
-//     background: black;
-// }
-
 export component AppWindow inherits Window {
+    out property <length> window-height: self.height;
+
+    // Do not base preferred-width on children
+    preferred-width: 480px;
+
+    changed width => {
+        Global.set-timeline-width(self.width);
+    }
+
     VerticalLayout {
         padding: 0px;
         width: 100%;
 
         Header {}
         
-        ScrollView {
+        Timeline {}
-            width: 100%;
+    }
-            mouse-drag-pan-enabled: true;
+
-
+    if Global.previewed-image.asset-id != "" : ImageViewer {
-            // viewport-height: 20000px;
+        image: Global.previewed-image.image;
-
+    }
-            // self.viewport-y goes into the negative. invert it to make things easier.
-            // property <length> viewport-top-y: -self.viewport-y;
-            // property <length> viewport-bottom-y: viewport-top-y + self.height;
-            // property <length> almost-visible-margin: self.height;
-
-            // function is-visible(top-y: length, bottom-y: length) -> bool {
-            //      top-y <= viewport-bottom-y && viewport-top-y <= bottom-y
-            // }
-
-            // function is-almost-visible(top-y: length, bottom-y: length) -> bool {
-            //     top-y <= (viewport-bottom-y + almost-visible-margin)
-            //     && (viewport-top-y - almost-visible-margin) <= bottom-y
-            // }
-
-            // function view-state(top-y: length, bottom-y: length) -> ViewState {
-            //     if is-visible(top-y, bottom-y) {
-            //         return ViewState.InView;
-            //     }
-            //     if is-almost-visible(top-y, bottom-y) {
-            //         return ViewState.NearView;
-            //     }
-            //     return ViewState.Hidden;
-            // }
-            
-            VerticalLayout {
-                alignment: start;
-                padding: 0px;
-                width: 100%;
-
-                for bucket[i] in Global.image-buckets : TimelineBlock {
-                    width: 100%;
-                    index: i;
-                    bucket: bucket;
-                    // view-state: view-state(self.y, self.y + self.height);
-                }
-            }
-        }
-    }
 }
 

ui/global.slint

@@ -0,0 +1,17 @@
+import { ImageBucket, ImagePreview } from "types.slint";
+
+export global Global {
+    in-out property <length> min-image-size: 100px;
+    in-out property <length> image-margin: 2px;
+    in-out property <ImagePreview> previewed-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 },
+        { key: "2026-02-03", title: "Feb 3, 2026", count: 12 },
+    ];
+    in property <length> timeline-height;
+    in property <length> timeline-width;
+    in property <length> timeline-scroll;
+    callback set-timeline-width(length);
+    callback timeline-scrolled(length);
+}

ui/image-viewer.slint

@@ -0,0 +1,88 @@
+import { Global } from "global.slint";
+
+export component ImageViewer inherits Rectangle {
+    in property <image> image;
+    
+    width: 100%;
+    height: 100%;
+
+    background: black;
+
+    enter-animation := Timer {
+        running: true;
+        interval: 1ms;
+        triggered => {
+            self.running = false;
+        }
+    }
+
+    exit-animation := Timer {
+        running: false;
+        interval: 0.2s;
+        triggered => {
+            self.running = false;
+            Global.previewed-image.asset-id = "";
+        }
+    }
+
+    states [
+        entering when enter-animation.running: {
+            root.opacity: 0.0;
+            out {
+                animate root.opacity {
+                    duration: 0.15s;
+                }
+            }
+        }
+        exiting when exit-animation.running: {
+            root.opacity: 0.0;
+            in {
+                animate root.opacity {
+                    duration: exit-animation.interval;
+                }
+            }
+        }
+        entered: {
+            root.opacity: 1.0;
+        }
+    ]
+
+    sgh := SwipeGestureHandler {
+        enabled: !enter-animation.running && !exit-animation.running;
+        handle-swipe-down: true;
+        handle-swipe-up: true;
+
+        swiped() => {
+            if self.current-position.y < self.pressed-position.y {
+                debug ("todo: handle swiped up")
+            } else {
+                exit-animation.running = true;
+            }
+        }
+
+
+        Image {
+            source: image;
+            image-fit: ImageFit.contain;
+
+            function calc-y() -> length {
+                parent.y + parent.height / 2 - self.height / 2
+            }
+            y: calc-y();
+
+            states [
+                swiping when sgh.swiping: {
+                    y: calc-y() + sgh.current-position.y - sgh.pressed-position.y;
+                }
+                exiting when exit-animation.running: {
+                    y: parent.height;
+                    in {
+                        animate y {
+                            duration: exit-animation.interval;
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}

ui/timeline.slint

@@ -0,0 +1,99 @@
+import { ScrollView } from "std-widgets.slint";
+import { Global } from "global.slint";
+import { ImageBucket, Visibility, ImagePreview } from "types.slint";
+
+component ImagePreview inherits Rectangle {
+    in property <ImagePreview> preview;
+    in property <length> size: 32px;
+    width: size;
+    height: size;
+
+    Image {
+        width: 100%;
+        height: 100%;
+        source: preview.image;
+    }
+
+    touch := TouchArea {
+        clicked => {
+            Global.previewed-image = root.preview;
+        }
+    }
+}
+
+component TimelineBlock inherits VerticalLayout {
+    in property <int> index: -1;
+    in-out property <ImageBucket> bucket;
+
+    property <length> min-image-size: Global.min-image-size;
+    property <length> min-size-with-margin: min-image-size + Global.image-margin;
+    property <int> count-x: Math.floor(self.width / min-size-with-margin); // TODO: or is it ceil?
+    property <int> count-y: Math.ceil(bucket.count / count-x);
+    
+    function calc-image-size() -> length {
+        let remaining-length = Math.mod(self.width,  min-size-with-margin);
+        min-image-size + remaining-length / count-x
+    }
+
+    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;
+
+    y: bucket.y;
+    min-width: min-image-size;
+    alignment: start;
+
+    title-box := HorizontalLayout {
+        alignment: space-between;
+        height: title-box-height;
+        padding: 8px;
+
+        Text {
+            text: bucket.title;
+        }
+        
+        // TODO: checkbox thingy
+        Text {
+            text: "O";
+        }
+    }
+
+    image-box := Rectangle {
+        width: 100%;
+        height: count-y * image-size-with-margin;
+
+        for preview[i] in bucket.previews : ImagePreview {
+            preview: preview;
+            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);
+        }
+    }
+}
+
+export component Timeline inherits ScrollView {
+            mouse-drag-pan-enabled: true;
+            viewport-height: rect.height;
+
+            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;
+                        index: i;
+                        bucket: bucket;
+                    }
+                }
+            }
+}

ui/types.slint

@@ -0,0 +1,28 @@
+export enum PreviewKind {
+    None,
+    Thumbhash,
+    Thumbnail,
+}
+
+export struct ImagePreview {
+    asset_id: string,
+    image: image,
+    kind: PreviewKind,
+}
+
+export enum Visibility {
+    Hidden,
+    NearView,
+    InView,
+}
+
+export struct ImageBucket {
+    key: string,
+    title: string,
+    count: int,
+    previews: [ImagePreview],
+    y: length,
+    height: length,
+    visibility: Visibility,
+}
+