Download images when clicking on them

Cargo.lock

@@ -2487,6 +2487,7 @@ dependencies = [
  "bytes",
  "chrono",
  "image",
+ "mime",
  "reqwest",
  "serde",
  "serde_json",

src/api.rs

@@ -24,6 +24,7 @@ pub struct Api {
     client: immich_sdk::Client,
     buckets: Mutex<HashMap<TimeBucketKey, Arc<TimeBucket>>>,
     thumbnails: Mutex<CacheMap<AssetId, Arc<AssetThumbnail>>>,
+    assets: Mutex<CacheMap<AssetId, Arc<AssetThumbnail>>>,
 }
 
 fn serialize_thumbnail(_id: &AssetId, thumbnail: &Arc<AssetThumbnail>) -> Vec<u8> {
@@ -61,12 +62,50 @@ fn deserialize_thumbnail(&id: &AssetId, bytes: &[u8]) -> anyhow::Result<Arc<Asse
 
 impl Api {
     pub fn new(client: immich_sdk::Client) -> Arc<Self> {
+        let client_ = client.clone();
+        let asset_fetcher = AsyncFnFetcher::new(move |asset_id: &AssetId| {
+            let client = client_.clone();
+            let asset_id = asset_id.clone();
+            tokio::spawn(async move {
+                let asset = client
+                    .assets()
+                    .download(asset_id)
+                    .edited()
+                    .execute()
+                    .await
+                    .context(anyhow!("Failed to get asset {asset_id}"))?;
+
+                let asset = asset
+                    .decode()
+                    .context(anyhow!("Failed to decode asset {asset_id}"))?
+                    .into_rgba8();
+
+                let pixel_buffer = SharedPixelBuffer::<Rgba8Pixel>::clone_from_slice(
+                    &asset,
+                    asset.width(),
+                    asset.height(),
+                );
+
+                Ok(Arc::new(AssetThumbnail {
+                    id: asset_id,
+                    thumbnail: pixel_buffer,
+                }))
+            })
+        });
+        let asset_map = CacheMap::new(
+            Arc::new(asset_fetcher) as Arc<dyn Fetcher<Arc<AssetThumbnail>, Key = AssetId>>,
+            "assets",
+            serialize_thumbnail,
+            deserialize_thumbnail,
+        )
+        .unwrap();
+
         let client_ = client.clone();
         let thumbnail_fetcher = AsyncFnFetcher::new(move |asset_id: &AssetId| {
             let client = client_.clone();
             let asset_id = asset_id.clone();
             tokio::spawn(async move {
-                let response = client
+                let asset = client
                     .assets()
                     .thumbnail(asset_id)
                     .size(immich_sdk::AssetMediaSize::Thumbnail)
@@ -74,7 +113,7 @@ impl Api {
                     .await
                     .context(anyhow!("Failed to get asset thumbnail for {asset_id}"))?;
 
-                let thumbnail = response
+                let thumbnail = asset
                     .decode()
                     .context(anyhow!("Failed to decode asset thumbnail for {asset_id}"))?
                     .into_rgba8();
@@ -91,7 +130,7 @@ impl Api {
                 }))
             })
         });
-        let cache_map = CacheMap::new(
+        let thumbnail_map = CacheMap::new(
             Arc::new(thumbnail_fetcher) as Arc<dyn Fetcher<Arc<AssetThumbnail>, Key = AssetId>>,
             "thumbnails",
             serialize_thumbnail,
@@ -102,7 +141,8 @@ impl Api {
         Arc::new(Self {
             client,
             buckets: Default::default(),
-            thumbnails: Mutex::new(cache_map),
+            thumbnails: Mutex::new(thumbnail_map),
+            assets: Mutex::new(asset_map),
         })
     }
 }
@@ -220,4 +260,11 @@ impl Api {
             .await
             .context(anyhow!("Failed to fetch thumbnail for {asset_id:?}"))
     }
+
+    pub async fn get_asset(&self, asset_id: AssetId) -> anyhow::Result<Arc<AssetThumbnail>> {
+        let fetch = self.assets.lock().unwrap().get(asset_id);
+        fetch
+            .await
+            .context(anyhow!("Failed to fetch asset {asset_id:?}"))
+    }
 }

src/cachemap.rs

@@ -89,7 +89,7 @@ where
         deserialize: fn(&K, &[u8]) -> anyhow::Result<V>,
     ) -> anyhow::Result<Self> {
         let data_dir = BASE_DIRECTORIES
-            .create_cache_directory("thumbnails")
+            .create_cache_directory(cache_name)
             .context(anyhow!(
                 "Failed to create XDG data folder for {cache_name:?}"
             ))?;

src/main.rs

@@ -139,7 +139,7 @@ fn start_api(app: &AppWindow, immich: &config::ImmichLogin) {
                                 asset_id: SharedString::new(),
                                 image: preview_image.clone(),
                                 ratio: 1.0,
-                                kind: ui::PreviewKind::None,
+                                kind: ui::ImageKind::None,
                             })
                             .collect::<VecModel<_>>(),
                     ),
@@ -170,6 +170,36 @@ fn start_api(app: &AppWindow, immich: &config::ImmichLogin) {
             calculate_timeline_visibility(&app, api, scroll);
         });
     });
+
+    let app_weak = app.as_weak();
+    let api = api_.clone();
+    global.on_view_image(move |asset_id_str| {
+        tracing::info!("on_view_image({asset_id_str})");
+        let api = api.clone();
+        let app_weak = app_weak.clone();
+        tokio::spawn(async move {
+            let asset_id: AssetId = asset_id_str.parse().unwrap();
+            let asset = api.get_asset(asset_id).await.unwrap();
+            let image = asset.thumbnail.clone();
+            tracing::info!("got image for {asset_id_str}");
+
+            let _ = app_weak.upgrade_in_event_loop(move |app| {
+                let global = app.global::<ui::Global>();
+                let existing = global.get_viewed_image();
+
+                if existing.asset_id != asset_id_str {
+                    return;
+                }
+
+                global.set_viewed_image(ui::ImagePreview {
+                    asset_id: asset_id_str,
+                    ratio: image.size().width as f32 / image.size().height as f32,
+                    image: slint::Image::from_rgba8(image),
+                    kind: ui::ImageKind::Original,
+                });
+            });
+        });
+    });
 }
 
 fn calculate_timeline_visibility(app: &AppWindow, api: Arc<Api>, scroll: f32) {
@@ -299,7 +329,7 @@ fn unload_bucket(time_bucket: &TimeBucketKey, app: &AppWindow) {
         let Some(mut preview) = bucket.previews.row_data(j) else {
             break;
         };
-        preview.kind = ui::PreviewKind::None;
+        preview.kind = ui::ImageKind::None;
         preview.image = placeholder_preview.clone();
         bucket.previews.set_row_data(j, preview);
     }
@@ -326,7 +356,7 @@ fn load_bucket(time_bucket: TimeBucketKey, app_weak: Weak<AppWindow>, api: Arc<A
                     .iter()
                     .map(|entry| ui::ImagePreview {
                         asset_id: entry.id.to_shared_string(), // slint doesn't have a uuid type
-                        kind: ui::PreviewKind::Thumbhash,
+                        kind: ui::ImageKind::Thumbhash,
                         ratio: entry.ratio as f32,
                         // TODO: don't unwrap
                         image: entry
@@ -375,7 +405,7 @@ fn load_thumbnail(
             };
             let mut preview = bucket.previews.row_data(i).expect("i is in the list");
             preview.image = slint::Image::from_rgba8(thumbnail.thumbnail.clone());
-            preview.kind = ui::PreviewKind::Thumbnail;
+            preview.kind = ui::ImageKind::Thumbnail;
             preview.ratio =
                 thumbnail.thumbnail.width() as f32 / thumbnail.thumbnail.height() as f32;
             bucket.previews.set_row_data(i, preview);

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 {
+    if Global.viewed-image.asset-id != "" : ImageViewer {
-        image: Global.previewed-image.image;
+        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;
+    mouse-drag-pan-enabled: true;
-            viewport-height: rect.height;
+    viewport-height: rect.height;
 
-            changed viewport-y => {
+    changed viewport-y => {
-                Global.timeline-scrolled(-self.viewport-y);
+        Global.timeline-scrolled(-self.viewport-y);
-            }
+    }
-            
+    
-            rect := Rectangle {
+    rect := Rectangle {
-                y: 0;
+        y: 0;
-                x: 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;
+                index: i;
-                preferred-width: self.width;
+                bucket: bucket;
-                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

@@ -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 {