Merge blurhash support

kernelkind (22):
      add `trust_media_from_pk2` method
      add hashbrown
      introduce & use `JobPool`
      introduce JobsCache
      add blurhash dependency
      introduce blur
      note: remove unnecessary derive macros from `NoteAction`
      propagate `JobsCache`
      `ImagePulseTint` -> `PulseAlpha`
      images: move fetch to fn
      add `TexturesCache`
      images: make `MediaCache` hold `MediaCacheType`
      images: make promise payload optional to take easily
      post: unnest
      notedeck_ui: move carousel to `note/media.rs`
      note media: only show full screen when loaded
      note media: unnest full screen media
      pass `NoteAction` by value instead of reference
      propagate `Images` to actionbar
      add one shot error message
      make `Widget` impl `ProfilePic` mutably
      implement blurring

Cargo.lock

@@ -770,6 +770,12 @@ dependencies = [
  "piper",
 ]
 
+[[package]]
+name = "blurhash"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e79769241dcd44edf79a732545e8b5cec84c247ac060f5252cd51885d093a8fc"
+
 [[package]]
 name = "built"
 version = "0.7.7"
@@ -3291,10 +3297,12 @@ name = "notedeck_ui"
 version = "0.4.0"
 dependencies = [
  "bitflags 2.9.0",
+ "blurhash",
  "egui",
  "egui_extras",
  "ehttp",
  "enostr",
+ "hashbrown",
  "image",
  "nostrdb",
  "notedeck",

crates/notedeck/src/app.rs

@@ -1,6 +1,7 @@
 use crate::persist::{AppSizeHandler, ZoomHandler};
 use crate::wallet::GlobalWallet;
 use crate::zaps::Zaps;
+use crate::JobPool;
 use crate::{
     frame_history::FrameHistory, AccountStorage, Accounts, AppContext, Args, DataPath,
     DataPathType, Directory, Images, NoteAction, NoteCache, RelayDebugView, ThemeHandler,
@@ -43,6 +44,7 @@ pub struct Notedeck {
     clipboard: Clipboard,
     zaps: Zaps,
     frame_history: FrameHistory,
+    job_pool: JobPool,
 }
 
 /// Our chrome, which is basically nothing
@@ -219,6 +221,7 @@ impl Notedeck {
 
         let global_wallet = GlobalWallet::new(&path);
         let zaps = Zaps::default();
+        let job_pool = JobPool::default();
 
         Self {
             ndb,
@@ -238,6 +241,7 @@ impl Notedeck {
             frame_history: FrameHistory::default(),
             clipboard: Clipboard::new(None),
             zaps,
+            job_pool,
         }
     }
 
@@ -261,6 +265,7 @@ impl Notedeck {
             clipboard: &mut self.clipboard,
             zaps: &mut self.zaps,
             frame_history: &mut self.frame_history,
+            job_pool: &mut self.job_pool,
         }
     }
 

crates/notedeck/src/context.rs

@@ -1,6 +1,6 @@
 use crate::{
     frame_history::FrameHistory, wallet::GlobalWallet, zaps::Zaps, Accounts, Args, DataPath,
-    Images, NoteCache, ThemeHandler, UnknownIds,
+    Images, JobPool, NoteCache, ThemeHandler, UnknownIds,
 };
 use egui_winit::clipboard::Clipboard;
 
@@ -23,4 +23,5 @@ pub struct AppContext<'a> {
     pub clipboard: &'a mut Clipboard,
     pub zaps: &'a mut Zaps,
     pub frame_history: &'a mut FrameHistory,
+    pub job_pool: &'a mut JobPool,
 }

crates/notedeck/src/error.rs

@@ -82,3 +82,13 @@ impl Error {
         Error::Filter(FilterError::EmptyContactList)
     }
 }
+
+pub fn show_one_error_message(ui: &mut egui::Ui, message: &str) {
+    let id = ui.id().with(("error", message));
+    let res: Option<()> = ui.ctx().data(|d| d.get_temp(id));
+
+    if res.is_none() {
+        ui.ctx().data_mut(|d| d.insert_temp(id, ()));
+        tracing::error!(message);
+    }
+}

crates/notedeck/src/imgcache.rs

@@ -13,18 +13,179 @@ use std::time::{Duration, Instant, SystemTime};
 
 use hex::ToHex;
 use sha2::Digest;
-use std::path;
 use std::path::PathBuf;
+use std::path::{self, Path};
 use tracing::warn;
 
-pub type MediaCacheValue = Promise<Result<TexturedImage>>;
+#[derive(Default)]
-pub type MediaCacheMap = HashMap<String, MediaCacheValue>;
+pub struct TexturesCache {
+    cache: hashbrown::HashMap<String, TextureStateInternal>,
+}
+
+impl TexturesCache {
+    pub fn handle_and_get_or_insert_loadable(
+        &mut self,
+        url: &str,
+        closure: impl FnOnce() -> Promise<Option<Result<TexturedImage>>>,
+    ) -> LoadableTextureState {
+        let internal = self.handle_and_get_state_internal(url, true, closure);
+
+        internal.into()
+    }
+
+    pub fn handle_and_get_or_insert(
+        &mut self,
+        url: &str,
+        closure: impl FnOnce() -> Promise<Option<Result<TexturedImage>>>,
+    ) -> TextureState {
+        let internal = self.handle_and_get_state_internal(url, false, closure);
+
+        internal.into()
+    }
+
+    fn handle_and_get_state_internal(
+        &mut self,
+        url: &str,
+        use_loading: bool,
+        closure: impl FnOnce() -> Promise<Option<Result<TexturedImage>>>,
+    ) -> &mut TextureStateInternal {
+        let state = match self.cache.raw_entry_mut().from_key(url) {
+            hashbrown::hash_map::RawEntryMut::Occupied(entry) => {
+                let state = entry.into_mut();
+                handle_occupied(state, use_loading);
+
+                state
+            }
+            hashbrown::hash_map::RawEntryMut::Vacant(entry) => {
+                let res = closure();
+                let (_, state) = entry.insert(url.to_owned(), TextureStateInternal::Pending(res));
+
+                state
+            }
+        };
+
+        state
+    }
+
+    pub fn insert_pending(&mut self, url: &str, promise: Promise<Option<Result<TexturedImage>>>) {
+        self.cache
+            .insert(url.to_owned(), TextureStateInternal::Pending(promise));
+    }
+
+    pub fn move_to_loaded(&mut self, url: &str) {
+        let hashbrown::hash_map::RawEntryMut::Occupied(entry) =
+            self.cache.raw_entry_mut().from_key(url)
+        else {
+            return;
+        };
+
+        entry.replace_entry_with(|_, v| {
+            let TextureStateInternal::Loading(textured) = v else {
+                return None;
+            };
+
+            Some(TextureStateInternal::Loaded(textured))
+        });
+    }
+
+    pub fn get_and_handle(&mut self, url: &str) -> Option<LoadableTextureState> {
+        self.cache.get_mut(url).map(|state| {
+            handle_occupied(state, true);
+            state.into()
+        })
+    }
+}
+
+fn handle_occupied(state: &mut TextureStateInternal, use_loading: bool) {
+    let TextureStateInternal::Pending(promise) = state else {
+        return;
+    };
+
+    let Some(res) = promise.ready_mut() else {
+        return;
+    };
+
+    let Some(res) = res.take() else {
+        tracing::error!("Failed to take the promise");
+        *state =
+            TextureStateInternal::Error(crate::Error::Generic("Promise already taken".to_owned()));
+        return;
+    };
+
+    match res {
+        Ok(textured) => {
+            *state = if use_loading {
+                TextureStateInternal::Loading(textured)
+            } else {
+                TextureStateInternal::Loaded(textured)
+            }
+        }
+        Err(e) => *state = TextureStateInternal::Error(e),
+    }
+}
+
+pub enum LoadableTextureState<'a> {
+    Pending,
+    Error(&'a crate::Error),
+    Loading {
+        actual_image_tex: &'a mut TexturedImage,
+    }, // the texture is in the loading state, for transitioning between the pending and loaded states
+    Loaded(&'a mut TexturedImage),
+}
+
+pub enum TextureState<'a> {
+    Pending,
+    Error(&'a crate::Error),
+    Loaded(&'a mut TexturedImage),
+}
+
+impl<'a> From<&'a mut TextureStateInternal> for TextureState<'a> {
+    fn from(value: &'a mut TextureStateInternal) -> Self {
+        match value {
+            TextureStateInternal::Pending(_) => TextureState::Pending,
+            TextureStateInternal::Error(error) => TextureState::Error(error),
+            TextureStateInternal::Loading(textured_image) => TextureState::Loaded(textured_image),
+            TextureStateInternal::Loaded(textured_image) => TextureState::Loaded(textured_image),
+        }
+    }
+}
+
+pub enum TextureStateInternal {
+    Pending(Promise<Option<Result<TexturedImage>>>),
+    Error(crate::Error),
+    Loading(TexturedImage), // the image is in the loading state, for transitioning between blur and image
+    Loaded(TexturedImage),
+}
+
+impl<'a> From<&'a mut TextureStateInternal> for LoadableTextureState<'a> {
+    fn from(value: &'a mut TextureStateInternal) -> Self {
+        match value {
+            TextureStateInternal::Pending(_) => LoadableTextureState::Pending,
+            TextureStateInternal::Error(error) => LoadableTextureState::Error(error),
+            TextureStateInternal::Loading(textured_image) => LoadableTextureState::Loading {
+                actual_image_tex: textured_image,
+            },
+            TextureStateInternal::Loaded(textured_image) => {
+                LoadableTextureState::Loaded(textured_image)
+            }
+        }
+    }
+}
 
 pub enum TexturedImage {
     Static(TextureHandle),
     Animated(Animation),
 }
 
+impl TexturedImage {
+    pub fn get_first_texture(&self) -> &TextureHandle {
+        match self {
+            TexturedImage::Static(texture_handle) => texture_handle,
+            TexturedImage::Animated(animation) => &animation.first_frame.texture,
+        }
+    }
+}
+
 pub struct Animation {
     pub first_frame: TextureFrame,
     pub other_frames: Vec<TextureFrame>,
@@ -57,20 +218,23 @@ pub struct ImageFrame {
 
 pub struct MediaCache {
     pub cache_dir: path::PathBuf,
-    url_imgs: MediaCacheMap,
+    pub textures_cache: TexturesCache,
+    pub cache_type: MediaCacheType,
 }
 
-#[derive(Clone)]
+#[derive(Debug, Eq, PartialEq, Clone, Copy)]
 pub enum MediaCacheType {
     Image,
     Gif,
 }
 
 impl MediaCache {
-    pub fn new(cache_dir: path::PathBuf) -> Self {
+    pub fn new(parent_dir: &Path, cache_type: MediaCacheType) -> Self {
+        let cache_dir = parent_dir.join(Self::rel_dir(cache_type));
         Self {
             cache_dir,
-            url_imgs: HashMap::new(),
+            textures_cache: TexturesCache::default(),
+            cache_type,
         }
     }
 
@@ -169,14 +333,6 @@ impl MediaCache {
         }
         Ok(())
     }
-
-    pub fn map(&self) -> &MediaCacheMap {
-        &self.url_imgs
-    }
-
-    pub fn map_mut(&mut self) -> &mut MediaCacheMap {
-        &mut self.url_imgs
-    }
 }
 
 fn color_image_to_rgba(color_image: ColorImage) -> image::RgbaImage {
@@ -204,8 +360,8 @@ impl Images {
     /// path to directory to place [`MediaCache`]s
     pub fn new(path: path::PathBuf) -> Self {
         Self {
-            static_imgs: MediaCache::new(path.join(MediaCache::rel_dir(MediaCacheType::Image))),
+            static_imgs: MediaCache::new(&path, MediaCacheType::Image),
-            gifs: MediaCache::new(path.join(MediaCache::rel_dir(MediaCacheType::Gif))),
+            gifs: MediaCache::new(&path, MediaCacheType::Gif),
             urls: UrlMimes::new(UrlCache::new(path.join(UrlCache::rel_dir()))),
             gif_states: Default::default(),
         }
@@ -215,6 +371,20 @@ impl Images {
         self.static_imgs.migrate_v0()?;
         self.gifs.migrate_v0()
     }
+
+    pub fn get_cache(&self, cache_type: MediaCacheType) -> &MediaCache {
+        match cache_type {
+            MediaCacheType::Image => &self.static_imgs,
+            MediaCacheType::Gif => &self.gifs,
+        }
+    }
+
+    pub fn get_cache_mut(&mut self, cache_type: MediaCacheType) -> &mut MediaCache {
+        match cache_type {
+            MediaCacheType::Image => &mut self.static_imgs,
+            MediaCacheType::Gif => &mut self.gifs,
+        }
+    }
 }
 
 pub type GifStateMap = HashMap<String, GifState>;

crates/notedeck/src/job_pool.rs

@@ -0,0 +1,99 @@
+use std::{
+    future::Future,
+    sync::{
+        mpsc::{self, Sender},
+        Arc, Mutex,
+    },
+};
+use tokio::sync::oneshot;
+
+type Job = Box<dyn FnOnce() + Send + 'static>;
+
+pub struct JobPool {
+    tx: Sender<Job>,
+}
+
+impl Default for JobPool {
+    fn default() -> Self {
+        JobPool::new(2)
+    }
+}
+
+impl JobPool {
+    pub fn new(num_threads: usize) -> Self {
+        let (tx, rx) = mpsc::channel::<Job>();
+
+        let arc_rx = Arc::new(Mutex::new(rx));
+        for _ in 0..num_threads {
+            let arc_rx_clone = arc_rx.clone();
+            std::thread::spawn(move || loop {
+                let job = {
+                    let Ok(unlocked) = arc_rx_clone.lock() else {
+                        continue;
+                    };
+                    let Ok(job) = unlocked.recv() else {
+                        continue;
+                    };
+
+                    job
+                };
+
+                job();
+            });
+        }
+
+        Self { tx }
+    }
+
+    pub fn schedule<F, T>(&self, job: F) -> impl Future<Output = T>
+    where
+        F: FnOnce() -> T + Send + 'static,
+        T: Send + 'static,
+    {
+        let (tx_result, rx_result) = oneshot::channel::<T>();
+
+        let job = Box::new(move || {
+            let output = job();
+            let _ = tx_result.send(output);
+        });
+
+        self.tx
+            .send(job)
+            .expect("receiver should not be deallocated");
+
+        async move {
+            rx_result.await.unwrap_or_else(|_| {
+                panic!("Worker thread or channel dropped before returning the result.")
+            })
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::job_pool::JobPool;
+
+    fn test_fn(a: u32, b: u32) -> u32 {
+        a + b
+    }
+
+    #[tokio::test]
+    async fn test() {
+        let pool = JobPool::default();
+
+        // Now each job can return different T
+        let future_str = pool.schedule(|| -> String { "hello from string job".into() });
+
+        let a = 5;
+        let b = 6;
+        let future_int = pool.schedule(move || -> u32 { test_fn(a, b) });
+
+        println!("(Meanwhile we can do more async work) ...");
+
+        let s = future_str.await;
+        let i = future_int.await;
+
+        println!("Got string: {:?}", s);
+        println!("Got integer: {}", i);
+    }
+}

crates/notedeck/src/lib.rs

@@ -9,6 +9,7 @@ pub mod filter;
 pub mod fonts;
 mod frame_history;
 mod imgcache;
+mod job_pool;
 mod muted;
 pub mod name;
 pub mod note;
@@ -36,13 +37,14 @@ pub use accounts::{AccountData, Accounts, AccountsAction, AddAccountAction, Swit
 pub use app::{App, AppAction, Notedeck};
 pub use args::Args;
 pub use context::AppContext;
-pub use error::{Error, FilterError, ZapError};
+pub use error::{show_one_error_message, Error, FilterError, ZapError};
 pub use filter::{FilterState, FilterStates, UnifiedSubscription};
 pub use fonts::NamedFontFamily;
 pub use imgcache::{
-    Animation, GifState, GifStateMap, ImageFrame, Images, MediaCache, MediaCacheType,
+    Animation, GifState, GifStateMap, ImageFrame, Images, LoadableTextureState, MediaCache,
-    MediaCacheValue, TextureFrame, TexturedImage,
+    MediaCacheType, TextureFrame, TextureState, TexturedImage, TexturesCache,
 };
+pub use job_pool::JobPool;
 pub use muted::{MuteFun, Muted};
 pub use name::NostrName;
 pub use note::{

crates/notedeck/src/note/action.rs

@@ -1,8 +1,9 @@
 use super::context::ContextSelection;
-use crate::zaps::NoteZapTargetOwned;
+use crate::{zaps::NoteZapTargetOwned, Images, MediaCacheType, TexturedImage};
 use enostr::{NoteId, Pubkey};
+use poll_promise::Promise;
 
-#[derive(Debug, Eq, PartialEq, Clone)]
+#[derive(Debug)]
 pub enum NoteAction {
     /// User has clicked the quote reply action
     Reply(NoteId),
@@ -24,6 +25,9 @@ pub enum NoteAction {
 
     /// User has clicked the zap action
     Zap(ZapAction),
+
+    /// User clicked on media
+    Media(MediaAction),
 }
 
 #[derive(Debug, Eq, PartialEq, Clone)]
@@ -37,3 +41,62 @@ pub struct ZapTargetAmount {
     pub target: NoteZapTargetOwned,
     pub specified_msats: Option<u64>, // if None use default amount
 }
+
+pub enum MediaAction {
+    FetchImage {
+        url: String,
+        cache_type: MediaCacheType,
+        no_pfp_promise: Promise<Option<Result<TexturedImage, crate::Error>>>,
+    },
+    DoneLoading {
+        url: String,
+        cache_type: MediaCacheType,
+    },
+}
+
+impl std::fmt::Debug for MediaAction {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::FetchImage {
+                url,
+                cache_type,
+                no_pfp_promise,
+            } => f
+                .debug_struct("FetchNoPfpImage")
+                .field("url", url)
+                .field("cache_type", cache_type)
+                .field("no_pfp_promise ready", &no_pfp_promise.ready().is_some())
+                .finish(),
+            Self::DoneLoading { url, cache_type } => f
+                .debug_struct("DoneLoading")
+                .field("url", url)
+                .field("cache_type", cache_type)
+                .finish(),
+        }
+    }
+}
+
+impl MediaAction {
+    pub fn process(self, images: &mut Images) {
+        match self {
+            MediaAction::FetchImage {
+                url,
+                cache_type,
+                no_pfp_promise: promise,
+            } => {
+                images
+                    .get_cache_mut(cache_type)
+                    .textures_cache
+                    .insert_pending(&url, promise);
+            }
+            MediaAction::DoneLoading { url, cache_type } => {
+                let cache = match cache_type {
+                    MediaCacheType::Image => &mut images.static_imgs,
+                    MediaCacheType::Gif => &mut images.gifs,
+                };
+
+                cache.textures_cache.move_to_loaded(&url);
+            }
+        }
+    }
+}

crates/notedeck/src/note/mod.rs

@@ -1,9 +1,10 @@
 mod action;
 mod context;
 
-pub use action::{NoteAction, ZapAction, ZapTargetAmount};
+pub use action::{MediaAction, NoteAction, ZapAction, ZapTargetAmount};
 pub use context::{BroadcastContext, ContextSelection, NoteContextSelection};
 
+use crate::JobPool;
 use crate::{notecache::NoteCache, zaps::Zaps, Images};
 use enostr::{NoteId, RelayPool};
 use nostrdb::{Ndb, Note, NoteKey, QueryResult, Transaction};
@@ -19,6 +20,7 @@ pub struct NoteContext<'d> {
     pub note_cache: &'d mut NoteCache,
     pub zaps: &'d mut Zaps,
     pub pool: &'d mut RelayPool,
+    pub job_pool: &'d mut JobPool,
 }
 
 #[derive(Debug, Eq, PartialEq, Copy, Clone, Hash)]

crates/notedeck_chrome/src/chrome.rs

@@ -275,9 +275,9 @@ impl Chrome {
         let txn = Transaction::new(ctx.ndb).expect("should be able to create txn");
         let profile_url = get_account_url(&txn, ctx.ndb, ctx.accounts.get_selected_account());
 
-        let widget = ProfilePic::new(ctx.img_cache, profile_url).size(cur_pfp_size);
+        let mut widget = ProfilePic::new(ctx.img_cache, profile_url).size(cur_pfp_size);
 
-        ui.put(helper.get_animation_rect(), widget);
+        ui.put(helper.get_animation_rect(), &mut widget);
 
         helper.take_animation_response()
     }
@@ -501,7 +501,7 @@ fn chrome_handle_app_action(
             let txn = Transaction::new(ctx.ndb).unwrap();
 
             notedeck_columns::actionbar::execute_and_process_note_action(
-                &note_action,
+                note_action,
                 ctx.ndb,
                 columns
                     .decks_cache
@@ -516,6 +516,7 @@ fn chrome_handle_app_action(
                 ctx.accounts,
                 ctx.global_wallet,
                 ctx.zaps,
+                ctx.img_cache,
                 ui,
             );
         }

crates/notedeck_columns/src/actionbar.rs

@@ -7,8 +7,8 @@ use crate::{
 use enostr::{Pubkey, RelayPool};
 use nostrdb::{Ndb, NoteKey, Transaction};
 use notedeck::{
-    get_wallet_for_mut, note::ZapTargetAmount, Accounts, GlobalWallet, NoteAction, NoteCache,
+    get_wallet_for_mut, note::ZapTargetAmount, Accounts, GlobalWallet, Images, NoteAction,
-    NoteZapTargetOwned, UnknownIds, ZapAction, ZapTarget, ZappingError, Zaps,
+    NoteCache, NoteZapTargetOwned, UnknownIds, ZapAction, ZapTarget, ZappingError, Zaps,
 };
 use tracing::error;
 
@@ -24,7 +24,7 @@ pub enum TimelineOpenResult {
 /// The note action executor for notedeck_columns
 #[allow(clippy::too_many_arguments)]
 fn execute_note_action(
-    action: &NoteAction,
+    action: NoteAction,
     ndb: &Ndb,
     router: &mut Router<Route>,
     timeline_cache: &mut TimelineCache,
@@ -34,23 +34,21 @@ fn execute_note_action(
     accounts: &mut Accounts,
     global_wallet: &mut GlobalWallet,
     zaps: &mut Zaps,
+    images: &mut Images,
     ui: &mut egui::Ui,
 ) -> Option<TimelineOpenResult> {
     match action {
         NoteAction::Reply(note_id) => {
-            router.route_to(Route::reply(*note_id));
+            router.route_to(Route::reply(note_id));
             None
         }
-
         NoteAction::Profile(pubkey) => {
-            let kind = TimelineKind::Profile(*pubkey);
+            let kind = TimelineKind::Profile(pubkey);
             router.route_to(Route::Timeline(kind.clone()));
             timeline_cache.open(ndb, note_cache, txn, pool, &kind)
         }
-
         NoteAction::Note(note_id) => 'ex: {
-            let Ok(thread_selection) =
+            let Ok(thread_selection) = ThreadSelection::from_note_id(ndb, note_cache, txn, note_id)
-                ThreadSelection::from_note_id(ndb, note_cache, txn, *note_id)
             else {
                 tracing::error!("No thread selection for {}?", hex::encode(note_id.bytes()));
                 break 'ex None;
@@ -62,18 +60,15 @@ fn execute_note_action(
 
             timeline_cache.open(ndb, note_cache, txn, pool, &kind)
         }
-
         NoteAction::Hashtag(htag) => {
             let kind = TimelineKind::Hashtag(htag.clone());
             router.route_to(Route::Timeline(kind.clone()));
             timeline_cache.open(ndb, note_cache, txn, pool, &kind)
         }
-
         NoteAction::Quote(note_id) => {
-            router.route_to(Route::quote(*note_id));
+            router.route_to(Route::quote(note_id));
             None
         }
-
         NoteAction::Zap(zap_action) => 's: {
             let Some(cur_acc) = accounts.get_selected_account_mut() else {
                 break 's None;
@@ -81,7 +76,7 @@ fn execute_note_action(
 
             let sender = cur_acc.key.pubkey;
 
-            match zap_action {
+            match &zap_action {
                 ZapAction::Send(target) => 'a: {
                     let Some(wallet) = get_wallet_for_mut(accounts, global_wallet, sender.bytes())
                     else {
@@ -106,7 +101,6 @@ fn execute_note_action(
 
             None
         }
-
         NoteAction::Context(context) => {
             match ndb.get_note_by_key(txn, context.note_key) {
                 Err(err) => tracing::error!("{err}"),
@@ -116,13 +110,17 @@ fn execute_note_action(
             }
             None
         }
+        NoteAction::Media(media_action) => {
+            media_action.process(images);
+            None
+        }
     }
 }
 
 /// Execute a NoteAction and process the result
 #[allow(clippy::too_many_arguments)]
 pub fn execute_and_process_note_action(
-    action: &NoteAction,
+    action: NoteAction,
     ndb: &Ndb,
     columns: &mut Columns,
     col: usize,
@@ -134,6 +132,7 @@ pub fn execute_and_process_note_action(
     accounts: &mut Accounts,
     global_wallet: &mut GlobalWallet,
     zaps: &mut Zaps,
+    images: &mut Images,
     ui: &mut egui::Ui,
 ) {
     let router = columns.column_mut(col).router_mut();
@@ -148,6 +147,7 @@ pub fn execute_and_process_note_action(
         accounts,
         global_wallet,
         zaps,
+        images,
         ui,
     ) {
         br.process(ndb, note_cache, txn, timeline_cache, unknown_ids);

crates/notedeck_columns/src/app.rs

@@ -13,7 +13,7 @@ use crate::{
 };
 
 use notedeck::{Accounts, AppAction, AppContext, DataPath, DataPathType, FilterState, UnknownIds};
-use notedeck_ui::NoteOptions;
+use notedeck_ui::{jobs::JobsCache, NoteOptions};
 
 use enostr::{ClientMessage, Keypair, PoolRelay, Pubkey, RelayEvent, RelayMessage, RelayPool};
 use uuid::Uuid;
@@ -42,6 +42,7 @@ pub struct Damus {
     pub timeline_cache: TimelineCache,
     pub subscriptions: Subscriptions,
     pub support: Support,
+    pub jobs: JobsCache,
 
     //frame_history: crate::frame_history::FrameHistory,
 
@@ -430,6 +431,8 @@ impl Damus {
         note_options.set_scramble_text(parsed_args.scramble);
         note_options.set_hide_media(parsed_args.no_media);
 
+        let jobs = JobsCache::default();
+
         Self {
             subscriptions: Subscriptions::default(),
             since_optimize: parsed_args.since_optimize,
@@ -444,6 +447,7 @@ impl Damus {
             decks_cache,
             debug,
             unrecognized_args,
+            jobs,
         }
     }
 
@@ -487,6 +491,7 @@ impl Damus {
             support,
             decks_cache,
             unrecognized_args: BTreeSet::default(),
+            jobs: JobsCache::default(),
         }
     }
 

crates/notedeck_columns/src/nav.rs

@@ -134,7 +134,7 @@ impl RenderNavResponse {
 
     #[must_use = "Make sure to save columns if result is true"]
     pub fn process_render_nav_response(
-        &self,
+        self,
         app: &mut Damus,
         ctx: &mut AppContext<'_>,
         ui: &mut egui::Ui,
@@ -142,12 +142,7 @@ impl RenderNavResponse {
         let mut switching_occured: bool = false;
         let col = self.column;
 
-        if let Some(action) = self
+        if let Some(action) = self.response.response.or(self.response.title_response) {
-            .response
-            .response
-            .as_ref()
-            .or(self.response.title_response.as_ref())
-        {
             // start returning when we're finished posting
             match action {
                 RenderNavAction::Back => {
@@ -197,6 +192,7 @@ impl RenderNavResponse {
                         ctx.accounts,
                         ctx.global_wallet,
                         ctx.zaps,
+                        ctx.img_cache,
                         ui,
                     );
                 }
@@ -280,6 +276,7 @@ fn render_nav_body(
         note_cache: ctx.note_cache,
         zaps: ctx.zaps,
         pool: ctx.pool,
+        job_pool: ctx.job_pool,
     };
     match top {
         Route::Timeline(kind) => render_timeline_route(
@@ -292,6 +289,7 @@ fn render_nav_body(
             depth,
             ui,
             &mut note_context,
+            &mut app.jobs,
         ),
 
         Route::Accounts(amr) => {
@@ -348,6 +346,7 @@ fn render_nav_body(
                             &note,
                             inner_rect,
                             app.note_options,
+                            &mut app.jobs,
                         )
                         .id_source(id)
                         .show(ui)
@@ -384,6 +383,7 @@ fn render_nav_body(
                         &note,
                         inner_rect,
                         app.note_options,
+                        &mut app.jobs,
                     )
                     .id_source(id)
                     .show(ui)
@@ -405,6 +405,7 @@ fn render_nav_body(
                 kp,
                 inner_rect,
                 app.note_options,
+                &mut app.jobs,
             )
             .ui(&txn, ui);
 
@@ -424,8 +425,7 @@ fn render_nav_body(
 
         Route::Search => {
             let id = ui.id().with(("search", depth, col));
-            let navigating = app
+            let navigating = get_active_columns_mut(ctx.accounts, &mut app.decks_cache)
-                .columns_mut(ctx.accounts)
                 .column(col)
                 .router()
                 .navigating;
@@ -448,6 +448,7 @@ fn render_nav_body(
                 search_buffer,
                 &mut note_context,
                 &ctx.accounts.get_selected_account().map(|a| (&a.key).into()),
+                &mut app.jobs,
             )
             .show(ui, ctx.clipboard)
             .map(RenderNavAction::NoteAction)

crates/notedeck_columns/src/timeline/kind.rs

@@ -1,14 +1,13 @@
-use crate::{
+use crate::error::Error;
-    error::Error,
+use crate::search::SearchQuery;
-    search::SearchQuery,
+use crate::timeline::{Timeline, TimelineTab};
-    timeline::{Timeline, TimelineTab},
-};
 use enostr::{Filter, NoteId, Pubkey};
 use nostrdb::{Ndb, Transaction};
 use notedeck::{
     filter::{self, default_limit},
     FilterError, FilterState, NoteCache, RootIdError, RootNoteIdBuf,
 };
+use notedeck_ui::contacts::contacts_filter;
 use serde::{Deserialize, Serialize};
 use std::hash::{Hash, Hasher};
 use std::{borrow::Cow, fmt::Display};
@@ -666,11 +665,7 @@ impl<'a> ColumnTitle<'a> {
 }
 
 fn contact_filter_state(txn: &Transaction, ndb: &Ndb, pk: &Pubkey) -> FilterState {
-    let contact_filter = Filter::new()
+    let contact_filter = contacts_filter(pk);
-        .authors([pk.bytes()])
-        .kinds([3])
-        .limit(1)
-        .build();
 
     let results = ndb
         .query(txn, &[contact_filter.clone()], 1)

crates/notedeck_columns/src/timeline/route.rs

@@ -7,7 +7,7 @@ use crate::{
 
 use enostr::Pubkey;
 use notedeck::{Accounts, MuteFun, NoteContext, UnknownIds};
-use notedeck_ui::NoteOptions;
+use notedeck_ui::{jobs::JobsCache, NoteOptions};
 
 #[allow(clippy::too_many_arguments)]
 pub fn render_timeline_route(
@@ -20,6 +20,7 @@ pub fn render_timeline_route(
     depth: usize,
     ui: &mut egui::Ui,
     note_context: &mut NoteContext,
+    jobs: &mut JobsCache,
 ) -> Option<RenderNavAction> {
     if kind == &TimelineKind::Universe {
         note_options.set_hide_media(true);
@@ -40,6 +41,7 @@ pub fn render_timeline_route(
                 note_context,
                 note_options,
                 &accounts.get_selected_account().map(|a| (&a.key).into()),
+                jobs,
             )
             .ui(ui);
 
@@ -58,6 +60,7 @@ pub fn render_timeline_route(
                     &accounts.mutefun(),
                     note_options,
                     note_context,
+                    jobs,
                 )
             } else {
                 // we render profiles like timelines if they are at the root
@@ -68,6 +71,7 @@ pub fn render_timeline_route(
                     note_context,
                     note_options,
                     &accounts.get_selected_account().map(|a| (&a.key).into()),
+                    jobs,
                 )
                 .ui(ui);
 
@@ -88,6 +92,7 @@ pub fn render_timeline_route(
                 &accounts.mutefun(),
                 note_context,
                 &accounts.get_selected_account().map(|a| (&a.key).into()),
+                jobs,
             )
             .id_source(egui::Id::new(("threadscroll", col)))
             .ui(ui)
@@ -107,6 +112,7 @@ pub fn render_profile_route(
     is_muted: &MuteFun,
     note_options: NoteOptions,
     note_context: &mut NoteContext,
+    jobs: &mut JobsCache,
 ) -> Option<RenderNavAction> {
     let action = ProfileView::new(
         pubkey,
@@ -117,6 +123,7 @@ pub fn render_profile_route(
         unknown_ids,
         is_muted,
         note_context,
+        jobs,
     )
     .ui(ui);
 

crates/notedeck_columns/src/ui/column/header.rs

@@ -400,13 +400,16 @@ impl<'a> NavTitle<'a> {
     fn timeline_pfp(&mut self, ui: &mut egui::Ui, id: &TimelineKind, pfp_size: f32) {
         let txn = Transaction::new(self.ndb).unwrap();
 
-        if let Some(pfp) = id
+        if let Some(mut pfp) = id
             .pubkey()
             .and_then(|pk| self.pubkey_pfp(&txn, pk.bytes(), pfp_size))
         {
-            ui.add(pfp);
+            ui.add(&mut pfp);
         } else {
-            ui.add(ProfilePic::new(self.img_cache, notedeck::profile::no_pfp_url()).size(pfp_size));
+            ui.add(
+                &mut ProfilePic::new(self.img_cache, notedeck::profile::no_pfp_url())
+                    .size(pfp_size),
+            );
         }
     }
 
@@ -466,10 +469,13 @@ impl<'a> NavTitle<'a> {
 
     fn show_profile(&mut self, ui: &mut egui::Ui, pubkey: &Pubkey, pfp_size: f32) {
         let txn = Transaction::new(self.ndb).unwrap();
-        if let Some(pfp) = self.pubkey_pfp(&txn, pubkey.bytes(), pfp_size) {
+        if let Some(mut pfp) = self.pubkey_pfp(&txn, pubkey.bytes(), pfp_size) {
-            ui.add(pfp);
+            ui.add(&mut pfp);
         } else {
-            ui.add(ProfilePic::new(self.img_cache, notedeck::profile::no_pfp_url()).size(pfp_size));
+            ui.add(
+                &mut ProfilePic::new(self.img_cache, notedeck::profile::no_pfp_url())
+                    .size(pfp_size),
+            );
         };
     }
 

crates/notedeck_columns/src/ui/note/post.rs

@@ -8,15 +8,16 @@ use crate::Result;
 use egui::{
     text::{CCursorRange, LayoutJob},
     text_edit::TextEditOutput,
-    vec2,
     widgets::text_edit::TextEdit,
     Frame, Layout, Margin, Pos2, ScrollArea, Sense, TextBuffer,
 };
 use enostr::{FilledKeypair, FullKeypair, NoteId, Pubkey, RelayPool};
 use nostrdb::{Ndb, Transaction};
+use notedeck_ui::blur::PixelDimensions;
+use notedeck_ui::images::{get_render_state, RenderState};
+use notedeck_ui::jobs::JobsCache;
 use notedeck_ui::{
     gif::{handle_repaint, retrieve_latest_texture},
-    images::render_images,
     note::render_note_preview,
     NoteOptions, ProfilePic,
 };
@@ -32,6 +33,7 @@ pub struct PostView<'a, 'd> {
     id_source: Option<egui::Id>,
     inner_rect: egui::Rect,
     note_options: NoteOptions,
+    jobs: &'a mut JobsCache,
 }
 
 #[derive(Clone)]
@@ -103,6 +105,7 @@ impl<'a, 'd> PostView<'a, 'd> {
         poster: FilledKeypair<'a>,
         inner_rect: egui::Rect,
         note_options: NoteOptions,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         let id_source: Option<egui::Id> = None;
         PostView {
@@ -113,6 +116,7 @@ impl<'a, 'd> PostView<'a, 'd> {
             post_type,
             inner_rect,
             note_options,
+            jobs,
         }
     }
 
@@ -137,11 +141,11 @@ impl<'a, 'd> PostView<'a, 'd> {
                 Some(ProfilePic::from_profile(self.note_context.img_cache, p)?.size(pfp_size))
             });
 
-        if let Some(pfp) = poster_pfp {
+        if let Some(mut pfp) = poster_pfp {
-            ui.add(pfp);
+            ui.add(&mut pfp);
         } else {
             ui.add(
-                ProfilePic::new(self.note_context.img_cache, notedeck::profile::no_pfp_url())
+                &mut ProfilePic::new(self.note_context.img_cache, notedeck::profile::no_pfp_url())
                     .size(pfp_size),
             );
         }
@@ -345,6 +349,7 @@ impl<'a, 'd> PostView<'a, 'd> {
                                     id.bytes(),
                                     nostrdb::NoteKey::new(0),
                                     self.note_options,
+                                    self.jobs,
                                 )
                             })
                             .inner
@@ -424,59 +429,35 @@ impl<'a, 'd> PostView<'a, 'd> {
                 (300, 300)
             };
 
-            if let Some(cache_type) =
+            let Some(cache_type) =
                 supported_mime_hosted_at_url(&mut self.note_context.img_cache.urls, &media.url)
-            {
+            else {
-                render_images(
-                    ui,
-                    self.note_context.img_cache,
-                    &media.url,
-                    notedeck_ui::images::ImageType::Content,
-                    cache_type,
-                    |ui| {
-                        ui.spinner();
-                    },
-                    |_, e| {
-                        self.draft.upload_errors.push(e.to_string());
-                        error!("{e}");
-                    },
-                    |ui, url, renderable_media, gifs| {
-                        let media_size = vec2(width as f32, height as f32);
-                        let max_size = vec2(300.0, 300.0);
-                        let size = if media_size.x > max_size.x || media_size.y > max_size.y {
-                            max_size
-                        } else {
-                            media_size
-                        };
-
-                        let texture_handle = handle_repaint(
-                            ui,
-                            retrieve_latest_texture(url, gifs, renderable_media),
-                        );
-                        let img_resp = ui.add(
-                            egui::Image::new(texture_handle)
-                                .max_size(size)
-                                .corner_radius(12.0),
-                        );
-
-                        let remove_button_rect = {
-                            let top_left = img_resp.rect.left_top();
-                            let spacing = 13.0;
-                            let center = Pos2::new(top_left.x + spacing, top_left.y + spacing);
-                            egui::Rect::from_center_size(center, egui::vec2(26.0, 26.0))
-                        };
-                        if show_remove_upload_button(ui, remove_button_rect).clicked() {
-                            to_remove.push(i);
-                        }
-                        ui.advance_cursor_after_rect(img_resp.rect);
-                    },
-                );
-            } else {
                 self.draft
                     .upload_errors
                     .push("Uploaded media is not supported.".to_owned());
                 error!("Unsupported mime type at url: {}", &media.url);
-            }
+                continue;
+            };
+
+            let url = &media.url;
+            let cur_state = get_render_state(
+                ui.ctx(),
+                self.note_context.img_cache,
+                cache_type,
+                url,
+                notedeck_ui::images::ImageType::Content,
+            );
+
+            render_post_view_media(
+                ui,
+                &mut self.draft.upload_errors,
+                &mut to_remove,
+                i,
+                width,
+                height,
+                cur_state,
+                url,
+            )
         }
         to_remove.reverse();
         for i in to_remove {
@@ -556,6 +537,62 @@ impl<'a, 'd> PostView<'a, 'd> {
     }
 }
 
+#[allow(clippy::too_many_arguments)]
+fn render_post_view_media(
+    ui: &mut egui::Ui,
+    upload_errors: &mut Vec<String>,
+    to_remove: &mut Vec<usize>,
+    cur_index: usize,
+    width: u32,
+    height: u32,
+    render_state: RenderState,
+    url: &str,
+) {
+    match render_state.texture_state {
+        notedeck::TextureState::Pending => {
+            ui.spinner();
+        }
+        notedeck::TextureState::Error(e) => {
+            upload_errors.push(e.to_string());
+            error!("{e}");
+        }
+        notedeck::TextureState::Loaded(renderable_media) => {
+            let max_size = 300;
+            let size = if width > max_size || height > max_size {
+                PixelDimensions { x: 300, y: 300 }
+            } else {
+                PixelDimensions {
+                    x: width,
+                    y: height,
+                }
+            }
+            .to_points(ui.pixels_per_point())
+            .to_vec();
+
+            let texture_handle = handle_repaint(
+                ui,
+                retrieve_latest_texture(url, render_state.gifs, renderable_media),
+            );
+            let img_resp = ui.add(
+                egui::Image::new(texture_handle)
+                    .max_size(size)
+                    .corner_radius(12.0),
+            );
+
+            let remove_button_rect = {
+                let top_left = img_resp.rect.left_top();
+                let spacing = 13.0;
+                let center = Pos2::new(top_left.x + spacing, top_left.y + spacing);
+                egui::Rect::from_center_size(center, egui::vec2(26.0, 26.0))
+            };
+            if show_remove_upload_button(ui, remove_button_rect).clicked() {
+                to_remove.push(cur_index);
+            }
+            ui.advance_cursor_after_rect(img_resp.rect);
+        }
+    }
+}
+
 fn post_button(interactive: bool) -> impl egui::Widget {
     move |ui: &mut egui::Ui| {
         let button = egui::Button::new("Post now");
@@ -696,6 +733,7 @@ mod preview {
     pub struct PostPreview {
         draft: Draft,
         poster: FullKeypair,
+        jobs: JobsCache,
     }
 
     impl PostPreview {
@@ -725,6 +763,7 @@ mod preview {
             PostPreview {
                 draft,
                 poster: FullKeypair::generate(),
+                jobs: Default::default(),
             }
         }
     }
@@ -738,6 +777,7 @@ mod preview {
                 note_cache: app.note_cache,
                 zaps: app.zaps,
                 pool: app.pool,
+                job_pool: app.job_pool,
             };
 
             PostView::new(
@@ -747,6 +787,7 @@ mod preview {
                 self.poster.to_filled(),
                 ui.available_rect_before_wrap(),
                 NoteOptions::default(),
+                &mut self.jobs,
             )
             .ui(&txn, ui);
 

crates/notedeck_columns/src/ui/note/quote_repost.rs

@@ -6,7 +6,7 @@ use crate::{
 
 use enostr::{FilledKeypair, NoteId};
 use notedeck::NoteContext;
-use notedeck_ui::NoteOptions;
+use notedeck_ui::{jobs::JobsCache, NoteOptions};
 
 pub struct QuoteRepostView<'a, 'd> {
     note_context: &'a mut NoteContext<'d>,
@@ -16,6 +16,7 @@ pub struct QuoteRepostView<'a, 'd> {
     id_source: Option<egui::Id>,
     inner_rect: egui::Rect,
     note_options: NoteOptions,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> QuoteRepostView<'a, 'd> {
@@ -27,6 +28,7 @@ impl<'a, 'd> QuoteRepostView<'a, 'd> {
         quoting_note: &'a nostrdb::Note<'a>,
         inner_rect: egui::Rect,
         note_options: NoteOptions,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         let id_source: Option<egui::Id> = None;
         QuoteRepostView {
@@ -37,6 +39,7 @@ impl<'a, 'd> QuoteRepostView<'a, 'd> {
             id_source,
             inner_rect,
             note_options,
+            jobs,
         }
     }
 
@@ -51,6 +54,7 @@ impl<'a, 'd> QuoteRepostView<'a, 'd> {
             self.poster,
             self.inner_rect,
             self.note_options,
+            self.jobs,
         )
         .id_source(id)
         .ui(self.quoting_note.txn().unwrap(), ui);

crates/notedeck_columns/src/ui/note/reply.rs

@@ -6,6 +6,7 @@ use crate::ui::{
 
 use enostr::{FilledKeypair, NoteId};
 use notedeck::NoteContext;
+use notedeck_ui::jobs::JobsCache;
 use notedeck_ui::{NoteOptions, NoteView, ProfilePic};
 
 pub struct PostReplyView<'a, 'd> {
@@ -16,6 +17,7 @@ pub struct PostReplyView<'a, 'd> {
     id_source: Option<egui::Id>,
     inner_rect: egui::Rect,
     note_options: NoteOptions,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> PostReplyView<'a, 'd> {
@@ -27,6 +29,7 @@ impl<'a, 'd> PostReplyView<'a, 'd> {
         note: &'a nostrdb::Note<'a>,
         inner_rect: egui::Rect,
         note_options: NoteOptions,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         let id_source: Option<egui::Id> = None;
         PostReplyView {
@@ -37,6 +40,7 @@ impl<'a, 'd> PostReplyView<'a, 'd> {
             id_source,
             inner_rect,
             note_options,
+            jobs,
         }
     }
 
@@ -71,6 +75,7 @@ impl<'a, 'd> PostReplyView<'a, 'd> {
                         &Some(self.poster.into()),
                         self.note,
                         self.note_options,
+                        self.jobs,
                     )
                     .truncate(false)
                     .selectable_text(true)
@@ -93,6 +98,7 @@ impl<'a, 'd> PostReplyView<'a, 'd> {
                     self.poster,
                     self.inner_rect,
                     self.note_options,
+                    self.jobs,
                 )
                 .id_source(id)
                 .ui(self.note.txn().unwrap(), ui)

crates/notedeck_columns/src/ui/profile/edit.rs

@@ -60,7 +60,7 @@ impl<'a> EditProfileView<'a> {
         });
         ui.put(
             pfp_rect,
-            ProfilePic::new(self.img_cache, pfp_url)
+            &mut ProfilePic::new(self.img_cache, pfp_url)
                 .size(size)
                 .border(ProfilePic::border_stroke(ui)),
         );

crates/notedeck_columns/src/ui/profile/mod.rs

@@ -15,6 +15,7 @@ use notedeck::{
     NotedeckTextStyle, UnknownIds,
 };
 use notedeck_ui::{
+    jobs::JobsCache,
     profile::{about_section_widget, banner, display_name_widget},
     NoteOptions, ProfilePic,
 };
@@ -28,6 +29,7 @@ pub struct ProfileView<'a, 'd> {
     unknown_ids: &'a mut UnknownIds,
     is_muted: &'a MuteFun,
     note_context: &'a mut NoteContext<'d>,
+    jobs: &'a mut JobsCache,
 }
 
 pub enum ProfileViewAction {
@@ -46,6 +48,7 @@ impl<'a, 'd> ProfileView<'a, 'd> {
         unknown_ids: &'a mut UnknownIds,
         is_muted: &'a MuteFun,
         note_context: &'a mut NoteContext<'d>,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         ProfileView {
             pubkey,
@@ -56,6 +59,7 @@ impl<'a, 'd> ProfileView<'a, 'd> {
             unknown_ids,
             is_muted,
             note_context,
+            jobs,
         }
     }
 
@@ -112,6 +116,7 @@ impl<'a, 'd> ProfileView<'a, 'd> {
                         .accounts
                         .get_selected_account()
                         .map(|a| (&a.key).into()),
+                    self.jobs,
                 )
                 .show(ui)
                 {
@@ -143,7 +148,7 @@ impl<'a, 'd> ProfileView<'a, 'd> {
                 ui.horizontal(|ui| {
                     ui.put(
                         pfp_rect,
-                        ProfilePic::new(
+                        &mut ProfilePic::new(
                             self.note_context.img_cache,
                             get_profile_url(Some(&profile)),
                         )

crates/notedeck_columns/src/ui/search/mod.rs

@@ -5,7 +5,7 @@ use crate::ui::timeline::TimelineTabView;
 use egui_winit::clipboard::Clipboard;
 use nostrdb::{Filter, Transaction};
 use notedeck::{MuteFun, NoteAction, NoteContext, NoteRef};
-use notedeck_ui::{icons::search_icon, padding, NoteOptions};
+use notedeck_ui::{icons::search_icon, jobs::JobsCache, padding, NoteOptions};
 use std::time::{Duration, Instant};
 use tracing::{error, info, warn};
 
@@ -20,6 +20,7 @@ pub struct SearchView<'a, 'd> {
     is_muted: &'a MuteFun,
     note_context: &'a mut NoteContext<'d>,
     cur_acc: &'a Option<KeypairUnowned<'a>>,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> SearchView<'a, 'd> {
@@ -30,6 +31,7 @@ impl<'a, 'd> SearchView<'a, 'd> {
         query: &'a mut SearchQueryState,
         note_context: &'a mut NoteContext<'d>,
         cur_acc: &'a Option<KeypairUnowned<'a>>,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         Self {
             txn,
@@ -38,6 +40,7 @@ impl<'a, 'd> SearchView<'a, 'd> {
             note_options,
             note_context,
             cur_acc,
+            jobs,
         }
     }
 
@@ -81,6 +84,7 @@ impl<'a, 'd> SearchView<'a, 'd> {
                             self.is_muted,
                             self.note_context,
                             self.cur_acc,
+                            self.jobs,
                         )
                         .show(ui)
                     })

crates/notedeck_columns/src/ui/search_results.rs

@@ -140,7 +140,7 @@ fn user_result<'a>(
 
         let pfp_resp = ui.put(
             icon_rect,
-            ProfilePic::new(cache, get_profile_url(Some(profile)))
+            &mut ProfilePic::new(cache, get_profile_url(Some(profile)))
                 .size(helper.scale_1d_pos(min_img_size)),
         );
 

crates/notedeck_columns/src/ui/thread.rs

@@ -1,6 +1,7 @@
 use enostr::KeypairUnowned;
 use nostrdb::Transaction;
 use notedeck::{MuteFun, NoteAction, NoteContext, RootNoteId, UnknownIds};
+use notedeck_ui::jobs::JobsCache;
 use notedeck_ui::NoteOptions;
 use tracing::error;
 
@@ -16,6 +17,7 @@ pub struct ThreadView<'a, 'd> {
     is_muted: &'a MuteFun,
     note_context: &'a mut NoteContext<'d>,
     cur_acc: &'a Option<KeypairUnowned<'a>>,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> ThreadView<'a, 'd> {
@@ -28,6 +30,7 @@ impl<'a, 'd> ThreadView<'a, 'd> {
         is_muted: &'a MuteFun,
         note_context: &'a mut NoteContext<'d>,
         cur_acc: &'a Option<KeypairUnowned<'a>>,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         let id_source = egui::Id::new("threadscroll_threadview");
         ThreadView {
@@ -39,6 +42,7 @@ impl<'a, 'd> ThreadView<'a, 'd> {
             is_muted,
             note_context,
             cur_acc,
+            jobs,
         }
     }
 
@@ -102,6 +106,7 @@ impl<'a, 'd> ThreadView<'a, 'd> {
                     self.is_muted,
                     self.note_context,
                     self.cur_acc,
+                    self.jobs,
                 )
                 .show(ui)
             })

crates/notedeck_columns/src/ui/timeline.rs

@@ -3,6 +3,7 @@ use egui::{vec2, Direction, Layout, Pos2, Stroke};
 use egui_tabs::TabColor;
 use enostr::KeypairUnowned;
 use nostrdb::Transaction;
+use notedeck_ui::jobs::JobsCache;
 use std::f32::consts::PI;
 use tracing::{error, warn};
 
@@ -21,6 +22,7 @@ pub struct TimelineView<'a, 'd> {
     is_muted: &'a MuteFun,
     note_context: &'a mut NoteContext<'d>,
     cur_acc: &'a Option<KeypairUnowned<'a>>,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> TimelineView<'a, 'd> {
@@ -32,6 +34,7 @@ impl<'a, 'd> TimelineView<'a, 'd> {
         note_context: &'a mut NoteContext<'d>,
         note_options: NoteOptions,
         cur_acc: &'a Option<KeypairUnowned<'a>>,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         let reverse = false;
         TimelineView {
@@ -42,6 +45,7 @@ impl<'a, 'd> TimelineView<'a, 'd> {
             is_muted,
             note_context,
             cur_acc,
+            jobs,
         }
     }
 
@@ -55,6 +59,7 @@ impl<'a, 'd> TimelineView<'a, 'd> {
             self.is_muted,
             self.note_context,
             self.cur_acc,
+            self.jobs,
         )
     }
 
@@ -74,6 +79,7 @@ fn timeline_ui(
     is_muted: &MuteFun,
     note_context: &mut NoteContext,
     cur_acc: &Option<KeypairUnowned>,
+    jobs: &mut JobsCache,
 ) -> Option<NoteAction> {
     //padding(4.0, ui, |ui| ui.heading("Notifications"));
     /*
@@ -152,6 +158,7 @@ fn timeline_ui(
             is_muted,
             note_context,
             cur_acc,
+            jobs,
         )
         .show(ui)
     });
@@ -323,6 +330,7 @@ pub struct TimelineTabView<'a, 'd> {
     is_muted: &'a MuteFun,
     note_context: &'a mut NoteContext<'d>,
     cur_acc: &'a Option<KeypairUnowned<'a>>,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> TimelineTabView<'a, 'd> {
@@ -335,6 +343,7 @@ impl<'a, 'd> TimelineTabView<'a, 'd> {
         is_muted: &'a MuteFun,
         note_context: &'a mut NoteContext<'d>,
         cur_acc: &'a Option<KeypairUnowned<'a>>,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         Self {
             tab,
@@ -344,6 +353,7 @@ impl<'a, 'd> TimelineTabView<'a, 'd> {
             is_muted,
             note_context,
             cur_acc,
+            jobs,
         }
     }
 
@@ -395,6 +405,7 @@ impl<'a, 'd> TimelineTabView<'a, 'd> {
                             self.cur_acc,
                             &note,
                             self.note_options,
+                            self.jobs,
                         )
                         .show(ui);
 

crates/notedeck_dave/src/lib.rs

@@ -9,6 +9,7 @@ use enostr::KeypairUnowned;
 use futures::StreamExt;
 use nostrdb::Transaction;
 use notedeck::{AppAction, AppContext};
+use notedeck_ui::jobs::JobsCache;
 use std::collections::HashMap;
 use std::string::ToString;
 use std::sync::mpsc::{self, Receiver};
@@ -42,6 +43,7 @@ pub struct Dave {
     client: async_openai::Client<OpenAIConfig>,
     incoming_tokens: Option<Receiver<DaveApiResponse>>,
     model_config: ModelConfig,
+    jobs: JobsCache,
 }
 
 /// Calculate an anonymous user_id from a keypair
@@ -106,6 +108,7 @@ You are an AI agent for the nostr protocol called Dave, created by Damus. nostr
             input,
             model_config,
             chat: vec![],
+            jobs: JobsCache::default(),
         }
     }
 
@@ -177,7 +180,11 @@ You are an AI agent for the nostr protocol called Dave, created by Damus. nostr
     }
 
     fn ui(&mut self, app_ctx: &mut AppContext, ui: &mut egui::Ui) -> DaveResponse {
-        DaveUi::new(self.model_config.trial, &self.chat, &mut self.input).ui(app_ctx, ui)
+        DaveUi::new(self.model_config.trial, &self.chat, &mut self.input).ui(
+            app_ctx,
+            &mut self.jobs,
+            ui,
+        )
     }
 
     fn handle_new_chat(&mut self) {

crates/notedeck_dave/src/ui/dave.rs

@@ -5,7 +5,7 @@ use crate::{
 use egui::{Align, Key, KeyboardShortcut, Layout, Modifiers};
 use nostrdb::{Ndb, Transaction};
 use notedeck::{AppContext, NoteAction, NoteContext};
-use notedeck_ui::{icons::search_icon, NoteOptions, ProfilePic};
+use notedeck_ui::{icons::search_icon, jobs::JobsCache, NoteOptions, ProfilePic};
 
 /// DaveUi holds all of the data it needs to render itself
 pub struct DaveUi<'a> {
@@ -16,7 +16,7 @@ pub struct DaveUi<'a> {
 
 /// The response the app generates. The response contains an optional
 /// action to take.
-#[derive(Default, Clone, Debug)]
+#[derive(Default, Debug)]
 pub struct DaveResponse {
     pub action: Option<DaveAction>,
 }
@@ -51,7 +51,7 @@ impl DaveResponse {
 /// The actions the app generates. No default action is specfied in the
 /// UI code. This is handled by the app logic, however it chooses to
 /// process this message.
-#[derive(Clone, Debug)]
+#[derive(Debug)]
 pub enum DaveAction {
     /// The action generated when the user sends a message to dave
     Send,
@@ -83,7 +83,12 @@ impl<'a> DaveUi<'a> {
     }
 
     /// The main render function. Call this to render Dave
-    pub fn ui(&mut self, app_ctx: &mut AppContext, ui: &mut egui::Ui) -> DaveResponse {
+    pub fn ui(
+        &mut self,
+        app_ctx: &mut AppContext,
+        jobs: &mut JobsCache,
+        ui: &mut egui::Ui,
+    ) -> DaveResponse {
         let mut action: Option<DaveAction> = None;
         // Scroll area for chat messages
         let new_resp = {
@@ -124,7 +129,7 @@ impl<'a> DaveUi<'a> {
                         .show(ui, |ui| {
                             Self::chat_frame(ui.ctx())
                                 .show(ui, |ui| {
-                                    ui.vertical(|ui| self.render_chat(app_ctx, ui)).inner
+                                    ui.vertical(|ui| self.render_chat(app_ctx, jobs, ui)).inner
                                 })
                                 .inner
                         })
@@ -158,7 +163,12 @@ impl<'a> DaveUi<'a> {
     }
 
     /// Render a chat message (user, assistant, tool call/response, etc)
-    fn render_chat(&self, ctx: &mut AppContext, ui: &mut egui::Ui) -> Option<NoteAction> {
+    fn render_chat(
+        &self,
+        ctx: &mut AppContext,
+        jobs: &mut JobsCache,
+        ui: &mut egui::Ui,
+    ) -> Option<NoteAction> {
         let mut action: Option<NoteAction> = None;
         for message in self.chat {
             let r = match message {
@@ -183,7 +193,7 @@ impl<'a> DaveUi<'a> {
                     // have a debug option to show this
                     None
                 }
-                Message::ToolCalls(toolcalls) => Self::tool_calls_ui(ctx, toolcalls, ui),
+                Message::ToolCalls(toolcalls) => Self::tool_calls_ui(ctx, jobs, toolcalls, ui),
             };
 
             if r.is_some() {
@@ -208,6 +218,7 @@ impl<'a> DaveUi<'a> {
     /// The ai has asked us to render some notes, so we do that here
     fn present_notes_ui(
         ctx: &mut AppContext,
+        jobs: &mut JobsCache,
         call: &PresentNotesCall,
         ui: &mut egui::Ui,
     ) -> Option<NoteAction> {
@@ -217,6 +228,7 @@ impl<'a> DaveUi<'a> {
             note_cache: ctx.note_cache,
             zaps: ctx.zaps,
             pool: ctx.pool,
+            job_pool: ctx.job_pool,
         };
 
         let txn = Transaction::new(note_context.ndb).unwrap();
@@ -244,6 +256,7 @@ impl<'a> DaveUi<'a> {
                                         &None,
                                         &note,
                                         NoteOptions::default(),
+                                        jobs,
                                     )
                                     .preview_style()
                                     .hide_media(true)
@@ -266,6 +279,7 @@ impl<'a> DaveUi<'a> {
 
     fn tool_calls_ui(
         ctx: &mut AppContext,
+        jobs: &mut JobsCache,
         toolcalls: &[ToolCall],
         ui: &mut egui::Ui,
     ) -> Option<NoteAction> {
@@ -275,7 +289,7 @@ impl<'a> DaveUi<'a> {
             for call in toolcalls {
                 match call.calls() {
                     ToolCalls::PresentNotes(call) => {
-                        let r = Self::present_notes_ui(ctx, call, ui);
+                        let r = Self::present_notes_ui(ctx, jobs, call, ui);
                         if r.is_some() {
                             note_action = r;
                         }
@@ -381,7 +395,7 @@ fn query_call_ui(cache: &mut notedeck::Images, ndb: &Ndb, query: &QueryCall, ui:
             "author",
             move |ui| {
                 ui.add(
-                    ProfilePic::from_profile_or_default(
+                    &mut ProfilePic::from_profile_or_default(
                         cache,
                         ndb.get_profile_by_pubkey(&txn, pubkey.bytes())
                             .ok()

crates/notedeck_ui/Cargo.toml

@@ -16,3 +16,6 @@ notedeck = { workspace = true }
 image = { workspace = true }
 bitflags = { workspace = true }
 enostr = { workspace = true }
+hashbrown = { workspace = true }
+
+blurhash = "0.2.3"

crates/notedeck_ui/src/anim.rs

@@ -137,33 +137,24 @@ impl AnimationHelper {
     }
 }
 
-pub struct ImagePulseTint<'a> {
+pub struct PulseAlpha<'a> {
     ctx: &'a egui::Context,
     id: egui::Id,
-    image: egui::Image<'a>,
-    color_unmultiplied: &'a [u8; 3],
     alpha_min: u8,
     alpha_max: u8,
     animation_speed: f32,
+    start_max_alpha: bool,
 }
 
-impl<'a> ImagePulseTint<'a> {
+impl<'a> PulseAlpha<'a> {
-    pub fn new(
+    pub fn new(ctx: &'a egui::Context, id: egui::Id, alpha_min: u8, alpha_max: u8) -> Self {
-        ctx: &'a egui::Context,
-        id: egui::Id,
-        image: egui::Image<'a>,
-        color_unmultiplied: &'a [u8; 3],
-        alpha_min: u8,
-        alpha_max: u8,
-    ) -> Self {
         Self {
             ctx,
             id,
-            image,
-            color_unmultiplied,
             alpha_min,
             alpha_max,
             animation_speed: ANIM_SPEED,
+            start_max_alpha: false,
         }
     }
 
@@ -172,12 +163,19 @@ impl<'a> ImagePulseTint<'a> {
         self
     }
 
-    pub fn animate(self) -> egui::Image<'a> {
+    pub fn start_max_alpha(mut self) -> Self {
+        self.start_max_alpha = true;
+        self
+    }
+
+    // returns the current alpha value for the frame
+    pub fn animate(self) -> u8 {
         let pulse_direction = if let Some(pulse_dir) = self.ctx.data(|d| d.get_temp(self.id)) {
             pulse_dir
         } else {
-            self.ctx.data_mut(|d| d.insert_temp(self.id, false));
+            self.ctx
-            false
+                .data_mut(|d| d.insert_temp(self.id, self.start_max_alpha));
+            self.start_max_alpha
         };
 
         let alpha_min_f32 = self.alpha_min as f32;
@@ -196,14 +194,6 @@ impl<'a> ImagePulseTint<'a> {
                 .data_mut(|d| d.insert_temp(self.id, !pulse_direction));
         }
 
-        let alpha =
+        (cur_val + alpha_min_f32).clamp(self.alpha_min as f32, self.alpha_max as f32) as u8
-            (cur_val + alpha_min_f32).clamp(self.alpha_min as f32, self.alpha_max as f32) as u8;
-
-        self.image.tint(egui::Color32::from_rgba_unmultiplied(
-            self.color_unmultiplied[0],
-            self.color_unmultiplied[1],
-            self.color_unmultiplied[2],
-            alpha,
-        ))
     }
 }

crates/notedeck_ui/src/blur.rs

@@ -0,0 +1,192 @@
+use std::collections::HashMap;
+
+use nostrdb::Note;
+
+use crate::jobs::{Job, JobError, JobParamsOwned};
+
+pub struct Blur<'a> {
+    pub blurhash: &'a str,
+    pub dimensions: Option<PixelDimensions>, // width and height in pixels
+}
+
+#[derive(Clone, Debug)]
+pub struct PixelDimensions {
+    pub x: u32,
+    pub y: u32,
+}
+
+impl PixelDimensions {
+    pub fn to_points(&self, ppp: f32) -> PointDimensions {
+        PointDimensions {
+            x: (self.x as f32) / ppp,
+            y: (self.y as f32) / ppp,
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct PointDimensions {
+    pub x: f32,
+    pub y: f32,
+}
+
+impl PointDimensions {
+    pub fn to_pixels(self, ui: &egui::Ui) -> PixelDimensions {
+        PixelDimensions {
+            x: (self.x * ui.pixels_per_point()).round() as u32,
+            y: (self.y * ui.pixels_per_point()).round() as u32,
+        }
+    }
+
+    pub fn to_vec(self) -> egui::Vec2 {
+        egui::Vec2::new(self.x, self.y)
+    }
+}
+
+impl Blur<'_> {
+    pub fn scaled_pixel_dimensions(
+        &self,
+        ui: &egui::Ui,
+        available_points: PointDimensions,
+    ) -> PixelDimensions {
+        let max_pixels = available_points.to_pixels(ui);
+
+        let Some(defined_dimensions) = &self.dimensions else {
+            return max_pixels;
+        };
+
+        if defined_dimensions.x == 0 || defined_dimensions.y == 0 {
+            tracing::error!("The blur dimensions should not be zero");
+            return max_pixels;
+        }
+
+        if defined_dimensions.y <= max_pixels.y {
+            return defined_dimensions.clone();
+        }
+
+        let scale_factor = (max_pixels.y as f32) / (defined_dimensions.y as f32);
+        let max_width_scaled = scale_factor * (defined_dimensions.x as f32);
+
+        PixelDimensions {
+            x: (max_width_scaled.round() as u32),
+            y: max_pixels.y,
+        }
+    }
+}
+
+pub fn imeta_blurhashes<'a>(note: &'a Note) -> HashMap<&'a str, Blur<'a>> {
+    let mut blurs = HashMap::new();
+
+    for tag in note.tags() {
+        let mut tag_iter = tag.into_iter();
+        if tag_iter
+            .next()
+            .and_then(|s| s.str())
+            .filter(|s| *s == "imeta")
+            .is_none()
+        {
+            continue;
+        }
+
+        let Some((url, blur)) = find_blur(tag_iter) else {
+            continue;
+        };
+
+        blurs.insert(url, blur);
+    }
+
+    blurs
+}
+
+fn find_blur(tag_iter: nostrdb::TagIter) -> Option<(&str, Blur)> {
+    let mut url = None;
+    let mut blurhash = None;
+    let mut dims = None;
+
+    for tag_elem in tag_iter {
+        let Some(s) = tag_elem.str() else { continue };
+        let mut split = s.split_whitespace();
+
+        let Some(first) = split.next() else { continue };
+        let Some(second) = split.next() else { continue };
+
+        match first {
+            "url" => url = Some(second),
+            "blurhash" => blurhash = Some(second),
+            "dim" => dims = Some(second),
+            _ => {}
+        }
+
+        if url.is_some() && blurhash.is_some() && dims.is_some() {
+            break;
+        }
+    }
+
+    let url = url?;
+    let blurhash = blurhash?;
+
+    let dimensions = dims.and_then(|d| {
+        let mut split = d.split('x');
+        let width = split.next()?.parse::<u32>().ok()?;
+        let height = split.next()?.parse::<u32>().ok()?;
+
+        Some(PixelDimensions {
+            x: width,
+            y: height,
+        })
+    });
+
+    Some((
+        url,
+        Blur {
+            blurhash,
+            dimensions,
+        },
+    ))
+}
+
+pub enum ObfuscationType<'a> {
+    Blurhash(&'a Blur<'a>),
+    Default,
+}
+
+pub(crate) fn compute_blurhash(
+    params: Option<JobParamsOwned>,
+    dims: PixelDimensions,
+) -> Result<Job, JobError> {
+    #[allow(irrefutable_let_patterns)]
+    let Some(JobParamsOwned::Blurhash(params)) = params
+    else {
+        return Err(JobError::InvalidParameters);
+    };
+
+    let maybe_handle = match generate_blurhash_texturehandle(
+        &params.ctx,
+        &params.blurhash,
+        &params.url,
+        dims.x,
+        dims.y,
+    ) {
+        Ok(tex) => Some(tex),
+        Err(e) => {
+            tracing::error!("failed to render blurhash: {e}");
+            None
+        }
+    };
+
+    Ok(Job::Blurhash(maybe_handle))
+}
+
+fn generate_blurhash_texturehandle(
+    ctx: &egui::Context,
+    blurhash: &str,
+    url: &str,
+    width: u32,
+    height: u32,
+) -> notedeck::Result<egui::TextureHandle> {
+    let bytes = blurhash::decode(blurhash, width, height, 1.0)
+        .map_err(|e| notedeck::Error::Generic(e.to_string()))?;
+
+    let img = egui::ColorImage::from_rgba_unmultiplied([width as usize, height as usize], &bytes);
+    Ok(ctx.load_texture(url, img, Default::default()))
+}

crates/notedeck_ui/src/contacts.rs

@@ -0,0 +1,62 @@
+use nostrdb::{Filter, Ndb, Note, Transaction};
+
+fn pk1_is_following_pk2(
+    ndb: &Ndb,
+    txn: &Transaction,
+    pk1: &[u8; 32],
+    pk2: &[u8; 32],
+) -> Option<bool> {
+    let note = get_contacts_note(ndb, txn, pk1)?;
+
+    Some(note_follows(note, pk2))
+}
+
+pub fn trust_media_from_pk2(
+    ndb: &Ndb,
+    txn: &Transaction,
+    pk1: Option<&[u8; 32]>,
+    pk2: &[u8; 32],
+) -> bool {
+    pk1.map(|pk| pk1_is_following_pk2(ndb, txn, pk, pk2).unwrap_or(false))
+        .unwrap_or(false)
+}
+
+fn get_contacts_note<'a>(ndb: &'a Ndb, txn: &'a Transaction, user: &[u8; 32]) -> Option<Note<'a>> {
+    Some(
+        ndb.query(txn, &[contacts_filter(user)], 1)
+            .ok()?
+            .first()?
+            .note
+            .clone(),
+    )
+}
+
+pub fn contacts_filter(pk: &[u8; 32]) -> Filter {
+    Filter::new().authors([pk]).kinds([3]).limit(1).build()
+}
+
+fn note_follows(contacts_note: Note<'_>, pk: &[u8; 32]) -> bool {
+    for tag in contacts_note.tags() {
+        if tag.count() < 2 {
+            continue;
+        }
+
+        let Some(t) = tag.get_str(0) else {
+            continue;
+        };
+
+        if t != "p" {
+            continue;
+        }
+
+        let Some(author) = tag.get_id(1) else {
+            continue;
+        };
+
+        if *pk == *author {
+            return true;
+        }
+    }
+
+    false
+}

crates/notedeck_ui/src/images.rs

@@ -1,16 +1,16 @@
-use egui::{pos2, Color32, ColorImage, Rect, Sense, SizeHint};
+use egui::{pos2, Color32, ColorImage, Context, Rect, Sense, SizeHint};
 use image::codecs::gif::GifDecoder;
 use image::imageops::FilterType;
 use image::{AnimationDecoder, DynamicImage, FlatSamples, Frame};
 use notedeck::{
-    Animation, GifStateMap, ImageFrame, Images, MediaCache, MediaCacheType, TextureFrame,
+    Animation, GifStateMap, ImageFrame, Images, LoadableTextureState, MediaCache, MediaCacheType,
-    TexturedImage,
+    TextureFrame, TextureState, TexturedImage,
 };
 use poll_promise::Promise;
 use std::collections::VecDeque;
 use std::io::Cursor;
-use std::path;
 use std::path::PathBuf;
+use std::path::{self, Path};
 use std::sync::mpsc;
 use std::sync::mpsc::SyncSender;
 use std::thread;
@@ -178,39 +178,47 @@ fn fetch_img_from_disk(
     url: &str,
     path: &path::Path,
     cache_type: MediaCacheType,
-) -> Promise<Result<TexturedImage, notedeck::Error>> {
+) -> Promise<Option<Result<TexturedImage, notedeck::Error>>> {
     let ctx = ctx.clone();
     let url = url.to_owned();
     let path = path.to_owned();
 
     Promise::spawn_async(async move {
-        match cache_type {
+        Some(async_fetch_img_from_disk(ctx, url, &path, cache_type).await)
-            MediaCacheType::Image => {
-                let data = fs::read(path).await?;
-                let image_buffer =
-                    image::load_from_memory(&data).map_err(notedeck::Error::Image)?;
-
-                let img = buffer_to_color_image(
-                    image_buffer.as_flat_samples_u8(),
-                    image_buffer.width(),
-                    image_buffer.height(),
-                );
-                Ok(TexturedImage::Static(ctx.load_texture(
-                    &url,
-                    img,
-                    Default::default(),
-                )))
-            }
-            MediaCacheType::Gif => {
-                let gif_bytes = fs::read(path.clone()).await?; // Read entire file into a Vec<u8>
-                generate_gif(ctx, url, &path, gif_bytes, false, |i| {
-                    buffer_to_color_image(i.as_flat_samples_u8(), i.width(), i.height())
-                })
-            }
-        }
     })
 }
 
+async fn async_fetch_img_from_disk(
+    ctx: egui::Context,
+    url: String,
+    path: &path::Path,
+    cache_type: MediaCacheType,
+) -> Result<TexturedImage, notedeck::Error> {
+    match cache_type {
+        MediaCacheType::Image => {
+            let data = fs::read(path).await?;
+            let image_buffer = image::load_from_memory(&data).map_err(notedeck::Error::Image)?;
+
+            let img = buffer_to_color_image(
+                image_buffer.as_flat_samples_u8(),
+                image_buffer.width(),
+                image_buffer.height(),
+            );
+            Ok(TexturedImage::Static(ctx.load_texture(
+                &url,
+                img,
+                Default::default(),
+            )))
+        }
+        MediaCacheType::Gif => {
+            let gif_bytes = fs::read(path).await?; // Read entire file into a Vec<u8>
+            generate_gif(ctx, url, path, gif_bytes, false, |i| {
+                buffer_to_color_image(i.as_flat_samples_u8(), i.width(), i.height())
+            })
+        }
+    }
+}
+
 fn generate_gif(
     ctx: egui::Context,
     url: String,
@@ -348,19 +356,19 @@ pub enum ImageType {
 }
 
 pub fn fetch_img(
-    img_cache: &MediaCache,
+    img_cache_path: &Path,
     ctx: &egui::Context,
     url: &str,
     imgtyp: ImageType,
     cache_type: MediaCacheType,
-) -> Promise<Result<TexturedImage, notedeck::Error>> {
+) -> Promise<Option<Result<TexturedImage, notedeck::Error>>> {
     let key = MediaCache::key(url);
-    let path = img_cache.cache_dir.join(key);
+    let path = img_cache_path.join(key);
 
     if path.exists() {
         fetch_img_from_disk(ctx, url, &path, cache_type)
     } else {
-        fetch_img_from_net(&img_cache.cache_dir, ctx, url, imgtyp, cache_type)
+        fetch_img_from_net(img_cache_path, ctx, url, imgtyp, cache_type)
     }
 
     // TODO: fetch image from local cache
@@ -372,7 +380,7 @@ fn fetch_img_from_net(
     url: &str,
     imgtyp: ImageType,
     cache_type: MediaCacheType,
-) -> Promise<Result<TexturedImage, notedeck::Error>> {
+) -> Promise<Option<Result<TexturedImage, notedeck::Error>>> {
     let (sender, promise) = Promise::new();
     let request = ehttp::Request::get(url);
     let ctx = ctx.clone();
@@ -409,79 +417,54 @@ fn fetch_img_from_net(
             }
         });
 
-        sender.send(handle); // send the results back to the UI thread.
+        sender.send(Some(handle)); // send the results back to the UI thread.
         ctx.request_repaint();
     });
 
     promise
 }
 
-#[allow(clippy::too_many_arguments)]
+pub fn get_render_state<'a>(
-pub fn render_images(
+    ctx: &Context,
-    ui: &mut egui::Ui,
+    images: &'a mut Images,
-    images: &mut Images,
+    cache_type: MediaCacheType,
     url: &str,
     img_type: ImageType,
-    cache_type: MediaCacheType,
+) -> RenderState<'a> {
-    show_waiting: impl FnOnce(&mut egui::Ui),
-    show_error: impl FnOnce(&mut egui::Ui, String),
-    show_success: impl FnOnce(&mut egui::Ui, &str, &mut TexturedImage, &mut GifStateMap),
-) -> egui::Response {
     let cache = match cache_type {
         MediaCacheType::Image => &mut images.static_imgs,
         MediaCacheType::Gif => &mut images.gifs,
     };
 
-    render_media_cache(
+    let cur_state = cache.textures_cache.handle_and_get_or_insert(url, || {
-        ui,
+        crate::images::fetch_img(&cache.cache_dir, ctx, url, img_type, cache_type)
-        cache,
+    });
-        &mut images.gif_states,
+
-        url,
+    RenderState {
-        img_type,
+        texture_state: cur_state,
-        cache_type,
+        gifs: &mut images.gif_states,
-        show_waiting,
+    }
-        show_error,
+}
-        show_success,
+
+pub struct LoadableRenderState<'a> {
+    pub texture_state: LoadableTextureState<'a>,
+    pub gifs: &'a mut GifStateMap,
+}
+
+pub struct RenderState<'a> {
+    pub texture_state: TextureState<'a>,
+    pub gifs: &'a mut GifStateMap,
+}
+
+pub fn fetch_no_pfp_promise(
+    ctx: &Context,
+    cache: &MediaCache,
+) -> Promise<Option<Result<TexturedImage, notedeck::Error>>> {
+    crate::images::fetch_img(
+        &cache.cache_dir,
+        ctx,
+        notedeck::profile::no_pfp_url(),
+        ImageType::Profile(128),
+        MediaCacheType::Image,
     )
 }
-
-#[allow(clippy::too_many_arguments)]
-fn render_media_cache(
-    ui: &mut egui::Ui,
-    cache: &mut MediaCache,
-    gif_states: &mut GifStateMap,
-    url: &str,
-    img_type: ImageType,
-    cache_type: MediaCacheType,
-    show_waiting: impl FnOnce(&mut egui::Ui),
-    show_error: impl FnOnce(&mut egui::Ui, String),
-    show_success: impl FnOnce(&mut egui::Ui, &str, &mut TexturedImage, &mut GifStateMap),
-) -> egui::Response {
-    let m_cached_promise = cache.map().get(url);
-
-    if m_cached_promise.is_none() {
-        let res = crate::images::fetch_img(cache, ui.ctx(), url, img_type, cache_type.clone());
-        cache.map_mut().insert(url.to_owned(), res);
-    }
-
-    egui::Frame::NONE
-        .show(ui, |ui| {
-            match cache.map_mut().get_mut(url).and_then(|p| p.ready_mut()) {
-                None => show_waiting(ui),
-                Some(Err(err)) => {
-                    let err = err.to_string();
-                    let no_pfp = crate::images::fetch_img(
-                        cache,
-                        ui.ctx(),
-                        notedeck::profile::no_pfp_url(),
-                        ImageType::Profile(128),
-                        cache_type,
-                    );
-                    cache.map_mut().insert(url.to_owned(), no_pfp);
-                    show_error(ui, err)
-                }
-                Some(Ok(renderable_media)) => show_success(ui, url, renderable_media, gif_states),
-            }
-        })
-        .response
-}

crates/notedeck_ui/src/jobs.rs

@@ -0,0 +1,153 @@
+use egui::TextureHandle;
+use hashbrown::{hash_map::RawEntryMut, HashMap};
+use notedeck::JobPool;
+use poll_promise::Promise;
+
+#[derive(Default)]
+pub struct JobsCache {
+    jobs: HashMap<JobIdOwned, JobState>,
+}
+
+pub enum JobState {
+    Pending(Promise<Option<Result<Job, JobError>>>),
+    Error(JobError),
+    Completed(Job),
+}
+
+pub enum JobError {
+    InvalidParameters,
+}
+
+#[derive(Debug)]
+pub enum JobParams<'a> {
+    Blurhash(BlurhashParams<'a>),
+}
+
+#[derive(Debug)]
+pub enum JobParamsOwned {
+    Blurhash(BlurhashParamsOwned),
+}
+
+impl<'a> From<BlurhashParams<'a>> for BlurhashParamsOwned {
+    fn from(params: BlurhashParams<'a>) -> Self {
+        BlurhashParamsOwned {
+            blurhash: params.blurhash.to_owned(),
+            url: params.url.to_owned(),
+            ctx: params.ctx.clone(),
+        }
+    }
+}
+
+impl<'a> From<JobParams<'a>> for JobParamsOwned {
+    fn from(params: JobParams<'a>) -> Self {
+        match params {
+            JobParams::Blurhash(bp) => JobParamsOwned::Blurhash(bp.into()),
+        }
+    }
+}
+
+#[derive(Debug)]
+pub struct BlurhashParams<'a> {
+    pub blurhash: &'a str,
+    pub url: &'a str,
+    pub ctx: &'a egui::Context,
+}
+
+#[derive(Debug)]
+pub struct BlurhashParamsOwned {
+    pub blurhash: String,
+    pub url: String,
+    pub ctx: egui::Context,
+}
+
+impl JobsCache {
+    pub fn get_or_insert_with<
+        'a,
+        F: FnOnce(Option<JobParamsOwned>) -> Result<Job, JobError> + Send + 'static,
+    >(
+        &'a mut self,
+        job_pool: &mut JobPool,
+        jobid: &JobId,
+        params: Option<JobParams>,
+        run_job: F,
+    ) -> &'a mut JobState {
+        match self.jobs.raw_entry_mut().from_key(jobid) {
+            RawEntryMut::Occupied(entry) => 's: {
+                let mut state = entry.into_mut();
+
+                let JobState::Pending(promise) = &mut state else {
+                    break 's state;
+                };
+
+                let Some(res) = promise.ready_mut() else {
+                    break 's state;
+                };
+
+                let Some(res) = res.take() else {
+                    tracing::error!("Failed to take the promise for job: {:?}", jobid);
+                    break 's state;
+                };
+
+                *state = match res {
+                    Ok(j) => JobState::Completed(j),
+                    Err(e) => JobState::Error(e),
+                };
+
+                state
+            }
+            RawEntryMut::Vacant(entry) => {
+                let owned_params = params.map(JobParams::into);
+                let wrapped: Box<dyn FnOnce() -> Option<Result<Job, JobError>> + Send + 'static> =
+                    Box::new(move || Some(run_job(owned_params)));
+
+                let promise = Promise::spawn_async(job_pool.schedule(wrapped));
+
+                let (_, state) = entry.insert(jobid.into(), JobState::Pending(promise));
+
+                state
+            }
+        }
+    }
+
+    pub fn get(&self, jobid: &JobId) -> Option<&JobState> {
+        self.jobs.get(jobid)
+    }
+}
+
+impl<'a> From<&JobId<'a>> for JobIdOwned {
+    fn from(jobid: &JobId<'a>) -> Self {
+        match jobid {
+            JobId::Blurhash(s) => JobIdOwned::Blurhash(s.to_string()),
+        }
+    }
+}
+
+impl hashbrown::Equivalent<JobIdOwned> for JobId<'_> {
+    fn equivalent(&self, key: &JobIdOwned) -> bool {
+        match (self, key) {
+            (JobId::Blurhash(a), JobIdOwned::Blurhash(b)) => *a == b.as_str(),
+        }
+    }
+}
+
+#[derive(Debug, PartialEq, Eq, Clone, Hash)]
+enum JobIdOwned {
+    Blurhash(String), // image URL
+}
+
+#[derive(Debug, Hash)]
+pub enum JobId<'a> {
+    Blurhash(&'a str), // image URL
+}
+
+pub enum Job {
+    Blurhash(Option<TextureHandle>),
+}
+
+impl std::fmt::Debug for Job {
+    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+        match self {
+            Job::Blurhash(_) => write!(f, "Blurhash"),
+        }
+    }
+}

crates/notedeck_ui/src/lib.rs

@@ -1,16 +1,19 @@
 pub mod anim;
+pub mod blur;
 pub mod colors;
 pub mod constants;
+pub mod contacts;
 pub mod gif;
 pub mod icons;
 pub mod images;
+pub mod jobs;
 pub mod mention;
 pub mod note;
 pub mod profile;
 mod username;
 pub mod widgets;
 
-pub use anim::{AnimationHelper, ImagePulseTint};
+pub use anim::{AnimationHelper, PulseAlpha};
 pub use mention::Mention;
 pub use note::{NoteContents, NoteOptions, NoteView};
 pub use profile::{ProfilePic, ProfilePreview};

crates/notedeck_ui/src/note/contents.rs

@@ -1,15 +1,20 @@
+use std::cell::OnceCell;
+
 use crate::{
-    gif::{handle_repaint, retrieve_latest_texture},
+    blur::imeta_blurhashes,
-    images::{render_images, ImageType},
+    contacts::trust_media_from_pk2,
+    jobs::JobsCache,
     note::{NoteAction, NoteOptions, NoteResponse, NoteView},
 };
 
-use egui::{Button, Color32, Hyperlink, Image, Response, RichText, Sense, Window};
+use egui::{Color32, Hyperlink, RichText};
 use enostr::KeypairUnowned;
 use nostrdb::{BlockType, Mention, Note, NoteKey, Transaction};
 use tracing::warn;
 
-use notedeck::{supported_mime_hosted_at_url, Images, MediaCacheType, NoteContext};
+use notedeck::NoteContext;
+
+use super::media::{find_renderable_media, image_carousel, RenderableMedia};
 
 pub struct NoteContents<'a, 'd> {
     note_context: &'a mut NoteContext<'d>,
@@ -17,7 +22,8 @@ pub struct NoteContents<'a, 'd> {
     txn: &'a Transaction,
     note: &'a Note<'a>,
     options: NoteOptions,
-    action: Option<NoteAction>,
+    pub action: Option<NoteAction>,
+    jobs: &'a mut JobsCache,
 }
 
 impl<'a, 'd> NoteContents<'a, 'd> {
@@ -28,6 +34,7 @@ impl<'a, 'd> NoteContents<'a, 'd> {
         txn: &'a Transaction,
         note: &'a Note,
         options: NoteOptions,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         NoteContents {
             note_context,
@@ -36,12 +43,9 @@ impl<'a, 'd> NoteContents<'a, 'd> {
             note,
             options,
             action: None,
+            jobs,
         }
     }
-
-    pub fn action(&self) -> &Option<NoteAction> {
-        &self.action
-    }
 }
 
 impl egui::Widget for &mut NoteContents<'_, '_> {
@@ -53,6 +57,7 @@ impl egui::Widget for &mut NoteContents<'_, '_> {
             self.txn,
             self.note,
             self.options,
+            self.jobs,
         );
         self.action = result.action;
         result.response
@@ -71,6 +76,7 @@ pub fn render_note_preview(
     id: &[u8; 32],
     parent: NoteKey,
     note_options: NoteOptions,
+    jobs: &mut JobsCache,
 ) -> NoteResponse {
     let note = if let Ok(note) = note_context.ndb.get_note_by_id(txn, id) {
         // TODO: support other preview kinds
@@ -95,7 +101,7 @@ pub fn render_note_preview(
             */
     };
 
-    NoteView::new(note_context, cur_acc, &note, note_options)
+    NoteView::new(note_context, cur_acc, &note, note_options, jobs)
         .preview_style()
         .parent(parent)
         .show(ui)
@@ -110,10 +116,10 @@ pub fn render_note_contents(
     txn: &Transaction,
     note: &Note,
     options: NoteOptions,
+    jobs: &mut JobsCache,
 ) -> NoteResponse {
     let note_key = note.key().expect("todo: implement non-db notes");
     let selectable = options.has_selectable_text();
-    let mut images: Vec<(String, MediaCacheType)> = vec![];
     let mut note_action: Option<NoteAction> = None;
     let mut inline_note: Option<(&[u8; 32], &str)> = None;
     let hide_media = options.has_hide_media();
@@ -128,6 +134,9 @@ pub fn render_note_contents(
         let _ = ui.allocate_at_least(egui::vec2(ui.available_width(), 0.0), egui::Sense::click());
     }
 
+    let mut supported_medias: Vec<RenderableMedia> = vec![];
+    let blurhashes = OnceCell::new();
+
     let response = ui.horizontal_wrapped(|ui| {
         let blocks = if let Ok(blocks) = note_context.ndb.get_blocks_by_key(txn, note_key) {
             blocks
@@ -196,15 +205,19 @@ pub fn render_note_contents(
                 BlockType::Url => {
                     let mut found_supported = || -> bool {
                         let url = block.as_str();
-                        if let Some(cache_type) =
+
-                            supported_mime_hosted_at_url(&mut note_context.img_cache.urls, url)
+                        let blurs = blurhashes.get_or_init(|| imeta_blurhashes(note));
-                        {
+
-                            images.push((url.to_string(), cache_type));
+                        let Some(media_type) =
-                            true
+                            find_renderable_media(&mut note_context.img_cache.urls, blurs, url)
-                        } else {
+                        else {
-                            false
+                            return false;
-                        }
+                        };
+
+                        supported_medias.push(media_type);
+                        true
                     };
+
                     if hide_media || !found_supported() {
                         ui.add(Hyperlink::from_label_and_url(
                             RichText::new(block.as_str()).color(link_color),
@@ -258,19 +271,38 @@ pub fn render_note_contents(
     });
 
     let preview_note_action = if let Some((id, _block_str)) = inline_note {
-        render_note_preview(ui, note_context, cur_acc, txn, id, note_key, options).action
+        render_note_preview(ui, note_context, cur_acc, txn, id, note_key, options, jobs).action
     } else {
         None
     };
 
-    if !images.is_empty() && !options.has_textmode() {
+    let mut media_action = None;
+    if !supported_medias.is_empty() && !options.has_textmode() {
         ui.add_space(2.0);
         let carousel_id = egui::Id::new(("carousel", note.key().expect("expected tx note")));
-        image_carousel(ui, note_context.img_cache, images, carousel_id);
+
+        let trusted_media = trust_media_from_pk2(
+            note_context.ndb,
+            txn,
+            cur_acc.as_ref().map(|k| k.pubkey.bytes()),
+            note.pubkey(),
+        );
+
+        media_action = image_carousel(
+            ui,
+            note_context.img_cache,
+            note_context.job_pool,
+            jobs,
+            supported_medias,
+            carousel_id,
+            trusted_media,
+        );
         ui.add_space(2.0);
     }
 
-    let note_action = preview_note_action.or(note_action);
+    let note_action = preview_note_action
+        .or(note_action)
+        .or(media_action.map(NoteAction::Media));
 
     NoteResponse::new(response.response).with_action(note_action)
 }
@@ -292,267 +324,3 @@ fn rot13(input: &str) -> String {
         })
         .collect()
 }
-
-fn image_carousel(
-    ui: &mut egui::Ui,
-    img_cache: &mut Images,
-    images: Vec<(String, MediaCacheType)>,
-    carousel_id: egui::Id,
-) {
-    // let's make sure everything is within our area
-
-    let height = 360.0;
-    let width = ui.available_size().x;
-    let spinsz = if height > width { width } else { height };
-
-    let show_popup = ui.ctx().memory(|mem| {
-        mem.data
-            .get_temp(carousel_id.with("show_popup"))
-            .unwrap_or(false)
-    });
-
-    let current_image = show_popup.then(|| {
-        ui.ctx().memory(|mem| {
-            mem.data
-                .get_temp::<(String, MediaCacheType)>(carousel_id.with("current_image"))
-                .unwrap_or_else(|| (images[0].0.clone(), images[0].1.clone()))
-        })
-    });
-
-    ui.add_sized([width, height], |ui: &mut egui::Ui| {
-        egui::ScrollArea::horizontal()
-            .id_salt(carousel_id)
-            .show(ui, |ui| {
-                ui.horizontal(|ui| {
-                    for (image, cache_type) in images {
-                        render_images(
-                            ui,
-                            img_cache,
-                            &image,
-                            ImageType::Content,
-                            cache_type.clone(),
-                            |ui| {
-                                ui.allocate_space(egui::vec2(spinsz, spinsz));
-                            },
-                            |ui, _| {
-                                ui.allocate_space(egui::vec2(spinsz, spinsz));
-                            },
-                            |ui, url, renderable_media, gifs| {
-                                let texture = handle_repaint(
-                                    ui,
-                                    retrieve_latest_texture(&image, gifs, renderable_media),
-                                );
-                                let img_resp = ui.add(
-                                    Button::image(
-                                        Image::new(texture)
-                                            .max_height(height)
-                                            .corner_radius(5.0)
-                                            .fit_to_original_size(1.0),
-                                    )
-                                    .frame(false),
-                                );
-
-                                if img_resp.clicked() {
-                                    ui.ctx().memory_mut(|mem| {
-                                        mem.data.insert_temp(carousel_id.with("show_popup"), true);
-                                        mem.data.insert_temp(
-                                            carousel_id.with("current_image"),
-                                            (image.clone(), cache_type.clone()),
-                                        );
-                                    });
-                                }
-
-                                copy_link(url, img_resp);
-                            },
-                        );
-                    }
-                })
-                .response
-            })
-            .inner
-    });
-
-    if show_popup {
-        let current_image = current_image
-            .as_ref()
-            .expect("the image was actually clicked");
-        let image = current_image.clone().0;
-        let cache_type = current_image.clone().1;
-
-        Window::new("image_popup")
-            .title_bar(false)
-            .fixed_size(ui.ctx().screen_rect().size())
-            .fixed_pos(ui.ctx().screen_rect().min)
-            .frame(egui::Frame::NONE)
-            .show(ui.ctx(), |ui| {
-                let screen_rect = ui.ctx().screen_rect();
-
-                // escape
-                if ui.input(|i| i.key_pressed(egui::Key::Escape)) {
-                    ui.ctx().memory_mut(|mem| {
-                        mem.data.insert_temp(carousel_id.with("show_popup"), false);
-                    });
-                }
-
-                // background
-                ui.painter()
-                    .rect_filled(screen_rect, 0.0, Color32::from_black_alpha(230));
-
-                // zoom init
-                let zoom_id = carousel_id.with("zoom_level");
-                let mut zoom = ui
-                    .ctx()
-                    .memory(|mem| mem.data.get_temp(zoom_id).unwrap_or(1.0_f32));
-
-                // pan init
-                let pan_id = carousel_id.with("pan_offset");
-                let mut pan_offset = ui
-                    .ctx()
-                    .memory(|mem| mem.data.get_temp(pan_id).unwrap_or(egui::Vec2::ZERO));
-
-                // zoom & scroll
-                if ui.input(|i| i.pointer.hover_pos()).is_some() {
-                    let scroll_delta = ui.input(|i| i.smooth_scroll_delta);
-                    if scroll_delta.y != 0.0 {
-                        let zoom_factor = if scroll_delta.y > 0.0 { 1.05 } else { 0.95 };
-                        zoom *= zoom_factor;
-                        zoom = zoom.clamp(0.1, 5.0);
-
-                        if zoom <= 1.0 {
-                            pan_offset = egui::Vec2::ZERO;
-                        }
-
-                        ui.ctx().memory_mut(|mem| {
-                            mem.data.insert_temp(zoom_id, zoom);
-                            mem.data.insert_temp(pan_id, pan_offset);
-                        });
-                    }
-                }
-
-                ui.centered_and_justified(|ui| {
-                    render_images(
-                        ui,
-                        img_cache,
-                        &image,
-                        ImageType::Content,
-                        cache_type.clone(),
-                        |ui| {
-                            ui.allocate_space(egui::vec2(spinsz, spinsz));
-                        },
-                        |ui, _| {
-                            ui.allocate_space(egui::vec2(spinsz, spinsz));
-                        },
-                        |ui, url, renderable_media, gifs| {
-                            let texture = handle_repaint(
-                                ui,
-                                retrieve_latest_texture(&image, gifs, renderable_media),
-                            );
-
-                            let texture_size = texture.size_vec2();
-                            let screen_size = screen_rect.size();
-                            let scale = (screen_size.x / texture_size.x)
-                                .min(screen_size.y / texture_size.y)
-                                .min(1.0);
-                            let scaled_size = texture_size * scale * zoom;
-
-                            let visible_width = scaled_size.x.min(screen_size.x);
-                            let visible_height = scaled_size.y.min(screen_size.y);
-
-                            let max_pan_x = ((scaled_size.x - visible_width) / 2.0).max(0.0);
-                            let max_pan_y = ((scaled_size.y - visible_height) / 2.0).max(0.0);
-
-                            if max_pan_x > 0.0 {
-                                pan_offset.x = pan_offset.x.clamp(-max_pan_x, max_pan_x);
-                            } else {
-                                pan_offset.x = 0.0;
-                            }
-
-                            if max_pan_y > 0.0 {
-                                pan_offset.y = pan_offset.y.clamp(-max_pan_y, max_pan_y);
-                            } else {
-                                pan_offset.y = 0.0;
-                            }
-
-                            let (rect, response) = ui.allocate_exact_size(
-                                egui::vec2(visible_width, visible_height),
-                                egui::Sense::click_and_drag(),
-                            );
-
-                            let uv_min = egui::pos2(
-                                0.5 - (visible_width / scaled_size.x) / 2.0
-                                    + pan_offset.x / scaled_size.x,
-                                0.5 - (visible_height / scaled_size.y) / 2.0
-                                    + pan_offset.y / scaled_size.y,
-                            );
-
-                            let uv_max = egui::pos2(
-                                uv_min.x + visible_width / scaled_size.x,
-                                uv_min.y + visible_height / scaled_size.y,
-                            );
-
-                            let uv = egui::Rect::from_min_max(uv_min, uv_max);
-
-                            ui.painter()
-                                .image(texture.id(), rect, uv, egui::Color32::WHITE);
-                            let img_rect = ui.allocate_rect(rect, Sense::click());
-
-                            if img_rect.clicked() {
-                                ui.ctx().memory_mut(|mem| {
-                                    mem.data.insert_temp(carousel_id.with("show_popup"), true);
-                                });
-                            } else if img_rect.clicked_elsewhere() {
-                                ui.ctx().memory_mut(|mem| {
-                                    mem.data.insert_temp(carousel_id.with("show_popup"), false);
-                                });
-                            }
-
-                            // Handle dragging for pan
-                            if response.dragged() {
-                                let delta = response.drag_delta();
-
-                                pan_offset.x -= delta.x;
-                                pan_offset.y -= delta.y;
-
-                                if max_pan_x > 0.0 {
-                                    pan_offset.x = pan_offset.x.clamp(-max_pan_x, max_pan_x);
-                                } else {
-                                    pan_offset.x = 0.0;
-                                }
-
-                                if max_pan_y > 0.0 {
-                                    pan_offset.y = pan_offset.y.clamp(-max_pan_y, max_pan_y);
-                                } else {
-                                    pan_offset.y = 0.0;
-                                }
-
-                                ui.ctx().memory_mut(|mem| {
-                                    mem.data.insert_temp(pan_id, pan_offset);
-                                });
-                            }
-
-                            // reset zoom on double-click
-                            if response.double_clicked() {
-                                pan_offset = egui::Vec2::ZERO;
-                                zoom = 1.0;
-                                ui.ctx().memory_mut(|mem| {
-                                    mem.data.insert_temp(pan_id, pan_offset);
-                                    mem.data.insert_temp(zoom_id, zoom);
-                                });
-                            }
-
-                            copy_link(url, response);
-                        },
-                    );
-                });
-            });
-    }
-}
-
-fn copy_link(url: &str, img_resp: Response) {
-    img_resp.context_menu(|ui| {
-        if ui.button("Copy Link").clicked() {
-            ui.ctx().copy_text(url.to_owned());
-            ui.close_menu();
-        }
-    });
-}

crates/notedeck_ui/src/note/media.rs

@@ -0,0 +1,837 @@
+use std::{collections::HashMap, path::Path};
+
+use egui::{
+    Button, Color32, Context, CornerRadius, FontId, Image, Response, Sense, TextureHandle, Window,
+};
+use notedeck::{
+    fonts::get_font_size, note::MediaAction, show_one_error_message, supported_mime_hosted_at_url,
+    GifState, GifStateMap, Images, JobPool, MediaCache, MediaCacheType, NotedeckTextStyle,
+    TexturedImage, TexturesCache, UrlMimes,
+};
+
+use crate::{
+    blur::{compute_blurhash, Blur, ObfuscationType, PointDimensions},
+    gif::{handle_repaint, retrieve_latest_texture},
+    images::{fetch_no_pfp_promise, get_render_state, ImageType},
+    jobs::{BlurhashParams, Job, JobId, JobParams, JobState, JobsCache},
+    AnimationHelper, PulseAlpha,
+};
+
+pub(crate) fn image_carousel(
+    ui: &mut egui::Ui,
+    img_cache: &mut Images,
+    job_pool: &mut JobPool,
+    jobs: &mut JobsCache,
+    medias: Vec<RenderableMedia>,
+    carousel_id: egui::Id,
+    trusted_media: bool,
+) -> Option<MediaAction> {
+    // let's make sure everything is within our area
+
+    let height = 360.0;
+    let width = ui.available_width();
+
+    let show_popup = ui.ctx().memory(|mem| {
+        mem.data
+            .get_temp(carousel_id.with("show_popup"))
+            .unwrap_or(false)
+    });
+
+    let current_image = 'scope: {
+        if !show_popup {
+            break 'scope None;
+        }
+
+        let Some(media) = medias.first() else {
+            break 'scope None;
+        };
+
+        Some(ui.ctx().memory(|mem| {
+            mem.data
+                .get_temp::<(String, MediaCacheType)>(carousel_id.with("current_image"))
+                .unwrap_or_else(|| (media.url.to_owned(), media.media_type))
+        }))
+    };
+    let mut action = None;
+
+    ui.add_sized([width, height], |ui: &mut egui::Ui| {
+        egui::ScrollArea::horizontal()
+            .id_salt(carousel_id)
+            .show(ui, |ui| {
+                ui.horizontal(|ui| {
+                    for media in medias {
+                        let RenderableMedia {
+                            url,
+                            media_type,
+                            obfuscation_type: blur_type,
+                        } = media;
+
+                        let cache = match media_type {
+                            MediaCacheType::Image => &mut img_cache.static_imgs,
+                            MediaCacheType::Gif => &mut img_cache.gifs,
+                        };
+
+                        let media_state = get_content_media_render_state(
+                            ui,
+                            job_pool,
+                            jobs,
+                            trusted_media,
+                            height,
+                            &mut cache.textures_cache,
+                            url,
+                            media_type,
+                            &cache.cache_dir,
+                            blur_type,
+                        );
+                        if let Some(cur_action) = render_media(
+                            ui,
+                            &mut img_cache.gif_states,
+                            media_state,
+                            url,
+                            media_type,
+                            height,
+                            carousel_id,
+                        ) {
+                            let cur_action = cur_action.to_media_action(
+                                ui.ctx(),
+                                url,
+                                media_type,
+                                cache,
+                                ImageType::Content,
+                            );
+                            if let Some(cur_action) = cur_action {
+                                action = Some(cur_action);
+                            }
+                        }
+                    }
+                })
+                .response
+            })
+            .inner
+    });
+
+    if show_popup {
+        if let Some((image_url, cache_type)) = current_image {
+            show_full_screen_media(ui, &image_url, cache_type, img_cache, carousel_id);
+        }
+    }
+    action
+}
+
+enum MediaUIAction {
+    Unblur,
+    Error,
+    DoneLoading,
+}
+
+impl MediaUIAction {
+    pub fn to_media_action(
+        &self,
+        ctx: &egui::Context,
+        url: &str,
+        cache_type: MediaCacheType,
+        cache: &mut MediaCache,
+        img_type: ImageType,
+    ) -> Option<MediaAction> {
+        match self {
+            MediaUIAction::Unblur => Some(MediaAction::FetchImage {
+                url: url.to_owned(),
+                cache_type,
+                no_pfp_promise: crate::images::fetch_img(
+                    &cache.cache_dir,
+                    ctx,
+                    url,
+                    img_type,
+                    cache_type,
+                ),
+            }),
+            MediaUIAction::Error => {
+                if !matches!(img_type, ImageType::Profile(_)) {
+                    return None;
+                };
+
+                Some(MediaAction::FetchImage {
+                    url: url.to_owned(),
+                    cache_type,
+                    no_pfp_promise: fetch_no_pfp_promise(ctx, cache),
+                })
+            }
+            MediaUIAction::DoneLoading => Some(MediaAction::DoneLoading {
+                url: url.to_owned(),
+                cache_type,
+            }),
+        }
+    }
+}
+
+fn show_full_screen_media(
+    ui: &mut egui::Ui,
+    image_url: &str,
+    cache_type: MediaCacheType,
+    img_cache: &mut Images,
+    carousel_id: egui::Id,
+) {
+    Window::new("image_popup")
+        .title_bar(false)
+        .fixed_size(ui.ctx().screen_rect().size())
+        .fixed_pos(ui.ctx().screen_rect().min)
+        .frame(egui::Frame::NONE)
+        .show(ui.ctx(), |ui| {
+            ui.centered_and_justified(|ui| 's: {
+                let cur_state = get_render_state(
+                    ui.ctx(),
+                    img_cache,
+                    cache_type,
+                    image_url,
+                    ImageType::Content,
+                );
+
+                let notedeck::TextureState::Loaded(textured_image) = cur_state.texture_state else {
+                    break 's;
+                };
+
+                render_full_screen_media(
+                    ui,
+                    textured_image,
+                    cur_state.gifs,
+                    image_url,
+                    carousel_id,
+                );
+            })
+        });
+}
+
+#[allow(clippy::too_many_arguments)]
+pub fn get_content_media_render_state<'a>(
+    ui: &mut egui::Ui,
+    job_pool: &'a mut JobPool,
+    jobs: &'a mut JobsCache,
+    media_trusted: bool,
+    height: f32,
+    cache: &'a mut TexturesCache,
+    url: &'a str,
+    cache_type: MediaCacheType,
+    cache_dir: &Path,
+    obfuscation_type: ObfuscationType<'a>,
+) -> MediaRenderState<'a> {
+    let render_type = if media_trusted {
+        cache.handle_and_get_or_insert_loadable(url, || {
+            crate::images::fetch_img(cache_dir, ui.ctx(), url, ImageType::Content, cache_type)
+        })
+    } else if let Some(render_type) = cache.get_and_handle(url) {
+        render_type
+    } else {
+        return MediaRenderState::Obfuscated(get_obfuscated(
+            ui,
+            url,
+            obfuscation_type,
+            job_pool,
+            jobs,
+            height,
+        ));
+    };
+
+    match render_type {
+        notedeck::LoadableTextureState::Pending => MediaRenderState::Shimmering(get_obfuscated(
+            ui,
+            url,
+            obfuscation_type,
+            job_pool,
+            jobs,
+            height,
+        )),
+        notedeck::LoadableTextureState::Error(e) => MediaRenderState::Error(e),
+        notedeck::LoadableTextureState::Loading { actual_image_tex } => {
+            let obfuscation = get_obfuscated(ui, url, obfuscation_type, job_pool, jobs, height);
+            MediaRenderState::Transitioning {
+                image: actual_image_tex,
+                obfuscation,
+            }
+        }
+        notedeck::LoadableTextureState::Loaded(textured_image) => {
+            MediaRenderState::ActualImage(textured_image)
+        }
+    }
+}
+
+fn get_obfuscated<'a>(
+    ui: &mut egui::Ui,
+    url: &str,
+    obfuscation_type: ObfuscationType<'a>,
+    job_pool: &'a mut JobPool,
+    jobs: &'a mut JobsCache,
+    height: f32,
+) -> ObfuscatedTexture<'a> {
+    let ObfuscationType::Blurhash(renderable_blur) = obfuscation_type else {
+        return ObfuscatedTexture::Default;
+    };
+
+    let params = BlurhashParams {
+        blurhash: renderable_blur.blurhash,
+        url,
+        ctx: ui.ctx(),
+    };
+
+    let available_points = PointDimensions {
+        x: ui.available_width(),
+        y: height,
+    };
+
+    let pixel_sizes = renderable_blur.scaled_pixel_dimensions(ui, available_points);
+
+    let job_state = jobs.get_or_insert_with(
+        job_pool,
+        &JobId::Blurhash(url),
+        Some(JobParams::Blurhash(params)),
+        move |params| compute_blurhash(params, pixel_sizes),
+    );
+
+    let JobState::Completed(m_blur_job) = job_state else {
+        return ObfuscatedTexture::Default;
+    };
+
+    #[allow(irrefutable_let_patterns)]
+    let Job::Blurhash(m_texture_handle) = m_blur_job
+    else {
+        tracing::error!("Did not get the correct job type: {:?}", m_blur_job);
+        return ObfuscatedTexture::Default;
+    };
+
+    let Some(texture_handle) = m_texture_handle else {
+        return ObfuscatedTexture::Default;
+    };
+
+    ObfuscatedTexture::Blur(texture_handle)
+}
+
+fn render_full_screen_media(
+    ui: &mut egui::Ui,
+    renderable_media: &mut TexturedImage,
+    gifs: &mut HashMap<String, GifState>,
+    image_url: &str,
+    carousel_id: egui::Id,
+) {
+    let screen_rect = ui.ctx().screen_rect();
+
+    // escape
+    if ui.input(|i| i.key_pressed(egui::Key::Escape)) {
+        ui.ctx().memory_mut(|mem| {
+            mem.data.insert_temp(carousel_id.with("show_popup"), false);
+        });
+    }
+
+    // background
+    ui.painter()
+        .rect_filled(screen_rect, 0.0, Color32::from_black_alpha(230));
+
+    // zoom init
+    let zoom_id = carousel_id.with("zoom_level");
+    let mut zoom = ui
+        .ctx()
+        .memory(|mem| mem.data.get_temp(zoom_id).unwrap_or(1.0_f32));
+
+    // pan init
+    let pan_id = carousel_id.with("pan_offset");
+    let mut pan_offset = ui
+        .ctx()
+        .memory(|mem| mem.data.get_temp(pan_id).unwrap_or(egui::Vec2::ZERO));
+
+    // zoom & scroll
+    if ui.input(|i| i.pointer.hover_pos()).is_some() {
+        let scroll_delta = ui.input(|i| i.smooth_scroll_delta);
+        if scroll_delta.y != 0.0 {
+            let zoom_factor = if scroll_delta.y > 0.0 { 1.05 } else { 0.95 };
+            zoom *= zoom_factor;
+            zoom = zoom.clamp(0.1, 5.0);
+
+            if zoom <= 1.0 {
+                pan_offset = egui::Vec2::ZERO;
+            }
+
+            ui.ctx().memory_mut(|mem| {
+                mem.data.insert_temp(zoom_id, zoom);
+                mem.data.insert_temp(pan_id, pan_offset);
+            });
+        }
+    }
+
+    let texture = handle_repaint(
+        ui,
+        retrieve_latest_texture(image_url, gifs, renderable_media),
+    );
+
+    let texture_size = texture.size_vec2();
+    let screen_size = ui.ctx().screen_rect().size();
+    let scale = (screen_size.x / texture_size.x)
+        .min(screen_size.y / texture_size.y)
+        .min(1.0);
+    let scaled_size = texture_size * scale * zoom;
+
+    let visible_width = scaled_size.x.min(screen_size.x);
+    let visible_height = scaled_size.y.min(screen_size.y);
+
+    let max_pan_x = ((scaled_size.x - visible_width) / 2.0).max(0.0);
+    let max_pan_y = ((scaled_size.y - visible_height) / 2.0).max(0.0);
+
+    if max_pan_x > 0.0 {
+        pan_offset.x = pan_offset.x.clamp(-max_pan_x, max_pan_x);
+    } else {
+        pan_offset.x = 0.0;
+    }
+
+    if max_pan_y > 0.0 {
+        pan_offset.y = pan_offset.y.clamp(-max_pan_y, max_pan_y);
+    } else {
+        pan_offset.y = 0.0;
+    }
+
+    let (rect, response) = ui.allocate_exact_size(
+        egui::vec2(visible_width, visible_height),
+        egui::Sense::click_and_drag(),
+    );
+
+    let uv_min = egui::pos2(
+        0.5 - (visible_width / scaled_size.x) / 2.0 + pan_offset.x / scaled_size.x,
+        0.5 - (visible_height / scaled_size.y) / 2.0 + pan_offset.y / scaled_size.y,
+    );
+
+    let uv_max = egui::pos2(
+        uv_min.x + visible_width / scaled_size.x,
+        uv_min.y + visible_height / scaled_size.y,
+    );
+
+    let uv = egui::Rect::from_min_max(uv_min, uv_max);
+
+    ui.painter()
+        .image(texture.id(), rect, uv, egui::Color32::WHITE);
+    let img_rect = ui.allocate_rect(rect, Sense::click());
+
+    if img_rect.clicked() {
+        ui.ctx().memory_mut(|mem| {
+            mem.data.insert_temp(carousel_id.with("show_popup"), true);
+        });
+    } else if img_rect.clicked_elsewhere() {
+        ui.ctx().memory_mut(|mem| {
+            mem.data.insert_temp(carousel_id.with("show_popup"), false);
+        });
+    }
+
+    // Handle dragging for pan
+    if response.dragged() {
+        let delta = response.drag_delta();
+
+        pan_offset.x -= delta.x;
+        pan_offset.y -= delta.y;
+
+        if max_pan_x > 0.0 {
+            pan_offset.x = pan_offset.x.clamp(-max_pan_x, max_pan_x);
+        } else {
+            pan_offset.x = 0.0;
+        }
+
+        if max_pan_y > 0.0 {
+            pan_offset.y = pan_offset.y.clamp(-max_pan_y, max_pan_y);
+        } else {
+            pan_offset.y = 0.0;
+        }
+
+        ui.ctx().memory_mut(|mem| {
+            mem.data.insert_temp(pan_id, pan_offset);
+        });
+    }
+
+    // reset zoom on double-click
+    if response.double_clicked() {
+        pan_offset = egui::Vec2::ZERO;
+        zoom = 1.0;
+        ui.ctx().memory_mut(|mem| {
+            mem.data.insert_temp(pan_id, pan_offset);
+            mem.data.insert_temp(zoom_id, zoom);
+        });
+    }
+
+    copy_link(image_url, response);
+}
+
+fn copy_link(url: &str, img_resp: Response) {
+    img_resp.context_menu(|ui| {
+        if ui.button("Copy Link").clicked() {
+            ui.ctx().copy_text(url.to_owned());
+            ui.close_menu();
+        }
+    });
+}
+
+#[allow(clippy::too_many_arguments)]
+fn render_media(
+    ui: &mut egui::Ui,
+    gifs: &mut GifStateMap,
+    render_state: MediaRenderState,
+    url: &str,
+    cache_type: MediaCacheType,
+    height: f32,
+    carousel_id: egui::Id,
+) -> Option<MediaUIAction> {
+    match render_state {
+        MediaRenderState::ActualImage(image) => {
+            render_success_media(ui, url, image, gifs, cache_type, height, carousel_id);
+            None
+        }
+        MediaRenderState::Transitioning { image, obfuscation } => match obfuscation {
+            ObfuscatedTexture::Blur(texture) => {
+                if render_blur_transition(ui, url, height, texture, image.get_first_texture()) {
+                    Some(MediaUIAction::DoneLoading)
+                } else {
+                    None
+                }
+            }
+            ObfuscatedTexture::Default => {
+                ui.add(texture_to_image(image.get_first_texture(), height));
+                Some(MediaUIAction::DoneLoading)
+            }
+        },
+        MediaRenderState::Error(e) => {
+            ui.allocate_space(egui::vec2(height, height));
+            show_one_error_message(ui, &format!("Could not render media {url}: {e}"));
+            Some(MediaUIAction::Error)
+        }
+        MediaRenderState::Shimmering(obfuscated_texture) => {
+            match obfuscated_texture {
+                ObfuscatedTexture::Blur(texture_handle) => {
+                    shimmer_blurhash(texture_handle, ui, url, height);
+                }
+                ObfuscatedTexture::Default => {
+                    render_default_blur_bg(ui, height, url, true);
+                }
+            }
+            None
+        }
+        MediaRenderState::Obfuscated(obfuscated_texture) => {
+            let resp = match obfuscated_texture {
+                ObfuscatedTexture::Blur(texture_handle) => {
+                    let resp = ui.add(texture_to_image(texture_handle, height));
+                    render_blur_text(ui, url, resp.rect)
+                }
+                ObfuscatedTexture::Default => render_default_blur(ui, height, url),
+            };
+
+            if resp
+                .on_hover_cursor(egui::CursorIcon::PointingHand)
+                .clicked()
+            {
+                Some(MediaUIAction::Unblur)
+            } else {
+                None
+            }
+        }
+    }
+}
+
+fn render_blur_text(ui: &mut egui::Ui, url: &str, render_rect: egui::Rect) -> egui::Response {
+    let helper = AnimationHelper::new_from_rect(ui, ("show_media", url), render_rect);
+
+    let painter = ui.painter_at(helper.get_animation_rect());
+
+    let text_style = NotedeckTextStyle::Button;
+
+    let icon_data = egui::include_image!("../../../../assets/icons/eye-slash-dark.png");
+
+    let icon_size = helper.scale_1d_pos(30.0);
+    let animation_fontid = FontId::new(
+        helper.scale_1d_pos(get_font_size(ui.ctx(), &text_style)),
+        text_style.font_family(),
+    );
+    let info_galley = painter.layout(
+        "Media from someone you don't follow".to_owned(),
+        animation_fontid.clone(),
+        ui.visuals().text_color(),
+        render_rect.width() / 2.0,
+    );
+
+    let load_galley = painter.layout_no_wrap(
+        "Tap to Load".to_owned(),
+        animation_fontid,
+        egui::Color32::BLACK,
+        // ui.visuals().widgets.inactive.bg_fill,
+    );
+
+    let items_height = info_galley.rect.height() + load_galley.rect.height() + icon_size;
+
+    let spacing = helper.scale_1d_pos(8.0);
+    let icon_rect = {
+        let mut center = helper.get_animation_rect().center();
+        center.y -= (items_height / 2.0) + (spacing * 3.0) - (icon_size / 2.0);
+
+        egui::Rect::from_center_size(center, egui::vec2(icon_size, icon_size))
+    };
+
+    egui::Image::new(icon_data)
+        .max_width(icon_size)
+        .paint_at(ui, icon_rect);
+
+    let info_galley_pos = {
+        let mut pos = icon_rect.center();
+        pos.x -= info_galley.rect.width() / 2.0;
+        pos.y = icon_rect.bottom() + spacing;
+        pos
+    };
+
+    let load_galley_pos = {
+        let mut pos = icon_rect.center();
+        pos.x -= load_galley.rect.width() / 2.0;
+        pos.y = icon_rect.bottom() + info_galley.rect.height() + (4.0 * spacing);
+        pos
+    };
+
+    let button_rect = egui::Rect::from_min_size(load_galley_pos, load_galley.size()).expand(8.0);
+
+    let button_fill = egui::Color32::from_rgba_unmultiplied(0xFF, 0xFF, 0xFF, 0x1F);
+
+    painter.rect(
+        button_rect,
+        egui::CornerRadius::same(8),
+        button_fill,
+        egui::Stroke::NONE,
+        egui::StrokeKind::Middle,
+    );
+
+    painter.galley(info_galley_pos, info_galley, egui::Color32::WHITE);
+    painter.galley(load_galley_pos, load_galley, egui::Color32::WHITE);
+
+    helper.take_animation_response()
+}
+
+fn render_default_blur(ui: &mut egui::Ui, height: f32, url: &str) -> egui::Response {
+    let rect = render_default_blur_bg(ui, height, url, false);
+    render_blur_text(ui, url, rect)
+}
+
+fn render_default_blur_bg(ui: &mut egui::Ui, height: f32, url: &str, shimmer: bool) -> egui::Rect {
+    let (rect, _) = ui.allocate_exact_size(egui::vec2(height, height), egui::Sense::click());
+
+    let painter = ui.painter_at(rect);
+
+    let mut color = crate::colors::MID_GRAY;
+    if shimmer {
+        let [r, g, b, _a] = color.to_srgba_unmultiplied();
+        let cur_alpha = get_blur_current_alpha(ui, url);
+        color = Color32::from_rgba_unmultiplied(r, g, b, cur_alpha)
+    }
+
+    painter.rect_filled(rect, CornerRadius::same(8), color);
+
+    rect
+}
+
+pub(crate) struct RenderableMedia<'a> {
+    url: &'a str,
+    media_type: MediaCacheType,
+    obfuscation_type: ObfuscationType<'a>,
+}
+
+pub enum MediaRenderState<'a> {
+    ActualImage(&'a mut TexturedImage),
+    Transitioning {
+        image: &'a mut TexturedImage,
+        obfuscation: ObfuscatedTexture<'a>,
+    },
+    Error(&'a notedeck::Error),
+    Shimmering(ObfuscatedTexture<'a>),
+    Obfuscated(ObfuscatedTexture<'a>),
+}
+
+pub enum ObfuscatedTexture<'a> {
+    Blur(&'a TextureHandle),
+    Default,
+}
+
+pub(crate) fn find_renderable_media<'a>(
+    urls: &mut UrlMimes,
+    blurhashes: &'a HashMap<&'a str, Blur<'a>>,
+    url: &'a str,
+) -> Option<RenderableMedia<'a>> {
+    let media_type = supported_mime_hosted_at_url(urls, url)?;
+
+    let obfuscation_type = match blurhashes.get(url) {
+        Some(blur) => ObfuscationType::Blurhash(blur),
+        None => ObfuscationType::Default,
+    };
+
+    Some(RenderableMedia {
+        url,
+        media_type,
+        obfuscation_type,
+    })
+}
+
+fn render_success_media(
+    ui: &mut egui::Ui,
+    url: &str,
+    tex: &mut TexturedImage,
+    gifs: &mut GifStateMap,
+    cache_type: MediaCacheType,
+    height: f32,
+    carousel_id: egui::Id,
+) {
+    let texture = handle_repaint(ui, retrieve_latest_texture(url, gifs, tex));
+    let img = texture_to_image(texture, height);
+    let img_resp = ui.add(Button::image(img).frame(false));
+
+    if img_resp.clicked() {
+        ui.ctx().memory_mut(|mem| {
+            mem.data.insert_temp(carousel_id.with("show_popup"), true);
+            mem.data.insert_temp(
+                carousel_id.with("current_image"),
+                (url.to_owned(), cache_type),
+            );
+        });
+    }
+
+    copy_link(url, img_resp);
+}
+
+fn texture_to_image(tex: &TextureHandle, max_height: f32) -> egui::Image {
+    Image::new(tex)
+        .max_height(max_height)
+        .corner_radius(5.0)
+        .maintain_aspect_ratio(true)
+}
+
+static BLUR_SHIMMER_ID: fn(&str) -> egui::Id = |url| egui::Id::new(("blur_shimmer", url));
+
+fn get_blur_current_alpha(ui: &mut egui::Ui, url: &str) -> u8 {
+    let id = BLUR_SHIMMER_ID(url);
+
+    let (alpha_min, alpha_max) = if ui.visuals().dark_mode {
+        (150, 255)
+    } else {
+        (220, 255)
+    };
+    PulseAlpha::new(ui.ctx(), id, alpha_min, alpha_max)
+        .with_speed(0.3)
+        .start_max_alpha()
+        .animate()
+}
+
+fn shimmer_blurhash(tex: &TextureHandle, ui: &mut egui::Ui, url: &str, max_height: f32) {
+    let cur_alpha = get_blur_current_alpha(ui, url);
+
+    let scaled = ScaledTexture::new(tex, max_height);
+    let img = scaled.get_image();
+    show_blurhash_with_alpha(ui, img, cur_alpha);
+}
+
+fn fade_color(alpha: u8) -> egui::Color32 {
+    Color32::from_rgba_unmultiplied(255, 255, 255, alpha)
+}
+
+fn show_blurhash_with_alpha(ui: &mut egui::Ui, img: Image, alpha: u8) {
+    let cur_color = fade_color(alpha);
+
+    let img = img.tint(cur_color);
+
+    ui.add(img);
+}
+
+type FinishedTransition = bool;
+
+// return true if transition is finished
+fn render_blur_transition(
+    ui: &mut egui::Ui,
+    url: &str,
+    max_height: f32,
+    blur_texture: &TextureHandle,
+    image_texture: &TextureHandle,
+) -> FinishedTransition {
+    let scaled_texture = ScaledTexture::new(image_texture, max_height);
+
+    let blur_img = texture_to_image(blur_texture, max_height);
+    match get_blur_transition_state(ui.ctx(), url) {
+        BlurTransitionState::StoppingShimmer { cur_alpha } => {
+            show_blurhash_with_alpha(ui, blur_img, cur_alpha);
+            false
+        }
+        BlurTransitionState::FadingBlur => render_blur_fade(ui, url, blur_img, &scaled_texture),
+    }
+}
+
+struct ScaledTexture<'a> {
+    tex: &'a TextureHandle,
+    max_height: f32,
+    pub scaled_size: egui::Vec2,
+}
+
+impl<'a> ScaledTexture<'a> {
+    pub fn new(tex: &'a TextureHandle, max_height: f32) -> Self {
+        let scaled_size = {
+            let mut size = tex.size_vec2();
+
+            if size.y > max_height {
+                let old_y = size.y;
+                size.y = max_height;
+                size.x *= max_height / old_y;
+            }
+
+            size
+        };
+
+        Self {
+            tex,
+            max_height,
+            scaled_size,
+        }
+    }
+
+    pub fn get_image(&self) -> Image {
+        texture_to_image(self.tex, self.max_height)
+            .max_size(self.scaled_size)
+            .shrink_to_fit()
+    }
+}
+
+fn render_blur_fade(
+    ui: &mut egui::Ui,
+    url: &str,
+    blur_img: Image,
+    image_texture: &ScaledTexture,
+) -> FinishedTransition {
+    let blur_fade_id = ui.id().with(("blur_fade", url));
+
+    let cur_alpha = {
+        PulseAlpha::new(ui.ctx(), blur_fade_id, 0, 255)
+            .start_max_alpha()
+            .with_speed(0.3)
+            .animate()
+    };
+
+    let img = image_texture.get_image();
+
+    let blur_img = blur_img.tint(fade_color(cur_alpha));
+
+    let alloc_size = image_texture.scaled_size;
+
+    let (rect, _) = ui.allocate_exact_size(alloc_size, egui::Sense::hover());
+
+    img.paint_at(ui, rect);
+    blur_img.paint_at(ui, rect);
+
+    cur_alpha == 0
+}
+
+fn get_blur_transition_state(ctx: &Context, url: &str) -> BlurTransitionState {
+    let shimmer_id = BLUR_SHIMMER_ID(url);
+
+    let max_alpha = 255.0;
+    let cur_shimmer_alpha = ctx.animate_value_with_time(shimmer_id, max_alpha, 0.3);
+    if cur_shimmer_alpha == max_alpha {
+        BlurTransitionState::FadingBlur
+    } else {
+        let cur_alpha = (cur_shimmer_alpha).clamp(0.0, max_alpha) as u8;
+        BlurTransitionState::StoppingShimmer { cur_alpha }
+    }
+}
+
+enum BlurTransitionState {
+    StoppingShimmer { cur_alpha: u8 },
+    FadingBlur,
+}

crates/notedeck_ui/src/note/mod.rs

@@ -1,15 +1,18 @@
 pub mod contents;
 pub mod context;
+pub mod media;
 pub mod options;
 pub mod reply_description;
 
+use crate::jobs::JobsCache;
 use crate::{
-    profile::name::one_line_display_name_widget, widgets::x_button, ImagePulseTint, ProfilePic,
+    profile::name::one_line_display_name_widget, widgets::x_button, ProfilePic, ProfilePreview,
-    ProfilePreview, Username,
+    PulseAlpha, Username,
 };
 
 pub use contents::{render_note_contents, render_note_preview, NoteContents};
 pub use context::NoteContextButton;
+use notedeck::note::MediaAction;
 use notedeck::note::ZapTargetAmount;
 pub use options::NoteOptions;
 pub use reply_description::reply_desc;
@@ -32,6 +35,7 @@ pub struct NoteView<'a, 'd> {
     note: &'a nostrdb::Note<'a>,
     framed: bool,
     flags: NoteOptions,
+    jobs: &'a mut JobsCache,
 }
 
 pub struct NoteResponse {
@@ -73,6 +77,7 @@ impl<'a, 'd> NoteView<'a, 'd> {
         cur_acc: &'a Option<KeypairUnowned<'a>>,
         note: &'a nostrdb::Note<'a>,
         mut flags: NoteOptions,
+        jobs: &'a mut JobsCache,
     ) -> Self {
         flags.set_actionbar(true);
         flags.set_note_previews(true);
@@ -87,6 +92,7 @@ impl<'a, 'd> NoteView<'a, 'd> {
             note,
             flags,
             framed,
+            jobs,
         }
     }
 
@@ -212,6 +218,7 @@ impl<'a, 'd> NoteView<'a, 'd> {
                 txn,
                 self.note,
                 self.flags,
+                self.jobs,
             ));
             //});
         })
@@ -227,7 +234,8 @@ impl<'a, 'd> NoteView<'a, 'd> {
         note_key: NoteKey,
         profile: &Result<nostrdb::ProfileRecord<'_>, nostrdb::Error>,
         ui: &mut egui::Ui,
-    ) -> egui::Response {
+    ) -> (egui::Response, Option<MediaAction>) {
+        let mut action = None;
         if !self.options().has_wide() {
             ui.spacing_mut().item_spacing.x = 16.0;
         } else {
@@ -237,7 +245,7 @@ impl<'a, 'd> NoteView<'a, 'd> {
         let pfp_size = self.options().pfp_size();
 
         let sense = Sense::click();
-        match profile
+        let resp = match profile
             .as_ref()
             .ok()
             .and_then(|p| p.record().profile()?.picture())
@@ -257,11 +265,11 @@ impl<'a, 'd> NoteView<'a, 'd> {
                     anim_speed,
                 );
 
-                ui.put(
+                let mut pfp = ProfilePic::new(self.note_context.img_cache, pic).size(size);
-                    rect,
+                let pfp_resp = ui.put(rect, &mut pfp);
-                    ProfilePic::new(self.note_context.img_cache, pic).size(size),
+
-                )
+                action = action.or(pfp.action);
-                .on_hover_ui_at_pointer(|ui| {
+                pfp_resp.on_hover_ui_at_pointer(|ui| {
                     ui.set_max_width(300.0);
                     ui.add(ProfilePreview::new(
                         profile.as_ref().unwrap(),
@@ -282,14 +290,16 @@ impl<'a, 'd> NoteView<'a, 'd> {
                 let size = (pfp_size + NoteView::expand_size()) as f32;
                 let (rect, _response) = ui.allocate_exact_size(egui::vec2(size, size), sense);
 
-                ui.put(
+                let mut pfp =
-                    rect,
                     ProfilePic::new(self.note_context.img_cache, notedeck::profile::no_pfp_url())
-                        .size(pfp_size as f32),
+                        .size(pfp_size as f32);
-                )
+                let resp = ui.put(rect, &mut pfp).interact(sense);
-                .interact(sense)
+                action = action.or(pfp.action);
+
+                resp
             }
-        }
+        };
+        (resp, action)
     }
 
     pub fn show_impl(&mut self, ui: &mut egui::Ui) -> NoteResponse {
@@ -326,7 +336,14 @@ impl<'a, 'd> NoteView<'a, 'd> {
                         .text_style(style.text_style()),
                 );
             });
-            NoteView::new(self.note_context, self.cur_acc, &note_to_repost, self.flags).show(ui)
+            NoteView::new(
+                self.note_context,
+                self.cur_acc,
+                &note_to_repost,
+                self.flags,
+                self.jobs,
+            )
+            .show(ui)
         } else {
             self.show_standard(ui)
         }
@@ -388,8 +405,11 @@ impl<'a, 'd> NoteView<'a, 'd> {
         let response = if self.options().has_wide() {
             ui.vertical(|ui| {
                 ui.horizontal(|ui| {
-                    if self.pfp(note_key, &profile, ui).clicked() {
+                    let (pfp_resp, action) = self.pfp(note_key, &profile, ui);
+                    if pfp_resp.clicked() {
                         note_action = Some(NoteAction::Profile(Pubkey::new(*self.note.pubkey())));
+                    } else if let Some(action) = action {
+                        note_action = Some(NoteAction::Media(action));
                     };
 
                     let size = ui.available_size();
@@ -426,6 +446,7 @@ impl<'a, 'd> NoteView<'a, 'd> {
                                         &note_reply,
                                         self.note_context,
                                         self.flags,
+                                        self.jobs,
                                     )
                                 })
                                 .inner;
@@ -437,13 +458,19 @@ impl<'a, 'd> NoteView<'a, 'd> {
                     });
                 });
 
-                let mut contents =
+                let mut contents = NoteContents::new(
-                    NoteContents::new(self.note_context, self.cur_acc, txn, self.note, self.flags);
+                    self.note_context,
+                    self.cur_acc,
+                    txn,
+                    self.note,
+                    self.flags,
+                    self.jobs,
+                );
 
                 ui.add(&mut contents);
 
-                if let Some(action) = contents.action() {
+                if let Some(action) = contents.action {
-                    note_action = Some(action.clone());
+                    note_action = Some(action);
                 }
 
                 if self.options().has_actionbar() {
@@ -465,8 +492,11 @@ impl<'a, 'd> NoteView<'a, 'd> {
         } else {
             // main design
             ui.with_layout(egui::Layout::left_to_right(egui::Align::TOP), |ui| {
-                if self.pfp(note_key, &profile, ui).clicked() {
+                let (pfp_resp, action) = self.pfp(note_key, &profile, ui);
+                if pfp_resp.clicked() {
                     note_action = Some(NoteAction::Profile(Pubkey::new(*self.note.pubkey())));
+                } else if let Some(action) = action {
+                    note_action = Some(NoteAction::Media(action));
                 };
 
                 ui.with_layout(egui::Layout::top_down(egui::Align::LEFT), |ui| {
@@ -489,6 +519,7 @@ impl<'a, 'd> NoteView<'a, 'd> {
                                 &note_reply,
                                 self.note_context,
                                 self.flags,
+                                self.jobs,
                             );
 
                             if action.is_some() {
@@ -503,11 +534,12 @@ impl<'a, 'd> NoteView<'a, 'd> {
                         txn,
                         self.note,
                         self.flags,
+                        self.jobs,
                     );
                     ui.add(&mut contents);
 
-                    if let Some(action) = contents.action() {
+                    if let Some(action) = contents.action {
-                        note_action = Some(action.clone());
+                        note_action = Some(action);
                     }
 
                     if self.options().has_actionbar() {
@@ -786,9 +818,12 @@ fn zap_button(state: AnyZapState, noteid: &[u8; 32]) -> impl egui::Widget + use<
             }
             AnyZapState::Pending => {
                 let alpha_min = if ui.visuals().dark_mode { 50 } else { 180 };
-                img = ImagePulseTint::new(&ctx, id, img, &[0xFF, 0xB7, 0x57], alpha_min, 255)
+                let cur_alpha = PulseAlpha::new(&ctx, id, alpha_min, 255)
                     .with_speed(0.35)
                     .animate();
+
+                let cur_color = egui::Color32::from_rgba_unmultiplied(0xFF, 0xB7, 0x57, cur_alpha);
+                img = img.tint(cur_color);
             }
             AnyZapState::LocalOnly => {
                 img = img.tint(egui::Color32::from_rgb(0xFF, 0xB7, 0x57));

crates/notedeck_ui/src/note/reply_description.rs

@@ -2,7 +2,7 @@ use egui::{Label, RichText, Sense};
 use nostrdb::{Note, NoteReply, Transaction};
 
 use super::NoteOptions;
-use crate::{note::NoteView, Mention};
+use crate::{jobs::JobsCache, note::NoteView, Mention};
 use enostr::KeypairUnowned;
 use notedeck::{NoteAction, NoteContext};
 
@@ -15,6 +15,7 @@ pub fn reply_desc(
     note_reply: &NoteReply,
     note_context: &mut NoteContext,
     note_options: NoteOptions,
+    jobs: &mut JobsCache,
 ) -> Option<NoteAction> {
     let mut note_action: Option<NoteAction> = None;
     let size = 10.0;
@@ -24,28 +25,31 @@ pub fn reply_desc(
     let link_color = visuals.hyperlink_color;
 
     // note link renderer helper
-    let note_link =
+    let note_link = |ui: &mut egui::Ui,
-        |ui: &mut egui::Ui, note_context: &mut NoteContext, text: &str, note: &Note<'_>| {
+                     note_context: &mut NoteContext,
-            let r = ui.add(
+                     text: &str,
-                Label::new(RichText::new(text).size(size).color(link_color))
+                     note: &Note<'_>,
-                    .sense(Sense::click())
+                     jobs: &mut JobsCache| {
-                    .selectable(selectable),
+        let r = ui.add(
-            );
+            Label::new(RichText::new(text).size(size).color(link_color))
+                .sense(Sense::click())
+                .selectable(selectable),
+        );
 
-            if r.clicked() {
+        if r.clicked() {
-                // TODO: jump to note
+            // TODO: jump to note
-            }
+        }
 
-            if r.hovered() {
+        if r.hovered() {
-                r.on_hover_ui_at_pointer(|ui| {
+            r.on_hover_ui_at_pointer(|ui| {
-                    ui.set_max_width(400.0);
+                ui.set_max_width(400.0);
-                    NoteView::new(note_context, cur_acc, note, note_options)
+                NoteView::new(note_context, cur_acc, note, note_options, jobs)
-                        .actionbar(false)
+                    .actionbar(false)
-                        .wide(true)
+                    .wide(true)
-                        .show(ui);
+                    .show(ui);
-                });
+            });
-            }
+        }
-        };
+    };
 
     ui.add(Label::new(RichText::new("replying to").size(size).color(color)).selectable(selectable));
 
@@ -77,7 +81,7 @@ pub fn reply_desc(
 
         ui.add(Label::new(RichText::new("'s").size(size).color(color)).selectable(selectable));
 
-        note_link(ui, note_context, "thread", &reply_note);
+        note_link(ui, note_context, "thread", &reply_note, jobs);
     } else if let Some(root) = note_reply.root() {
         // replying to another post in a thread, not the root
 
@@ -103,7 +107,7 @@ pub fn reply_desc(
                     Label::new(RichText::new("'s").size(size).color(color)).selectable(selectable),
                 );
 
-                note_link(ui, note_context, "note", &reply_note);
+                note_link(ui, note_context, "note", &reply_note, jobs);
             } else {
                 // replying to bob in alice's thread
 
@@ -126,7 +130,7 @@ pub fn reply_desc(
                     Label::new(RichText::new("'s").size(size).color(color)).selectable(selectable),
                 );
 
-                note_link(ui, note_context, "note", &reply_note);
+                note_link(ui, note_context, "note", &reply_note, jobs);
 
                 ui.add(
                     Label::new(RichText::new("in").size(size).color(color)).selectable(selectable),
@@ -151,7 +155,7 @@ pub fn reply_desc(
                     Label::new(RichText::new("'s").size(size).color(color)).selectable(selectable),
                 );
 
-                note_link(ui, note_context, "thread", &root_note);
+                note_link(ui, note_context, "thread", &root_note, jobs);
             }
         } else {
             let action = Mention::new(

crates/notedeck_ui/src/profile/picture.rs

@@ -1,7 +1,8 @@
 use crate::gif::{handle_repaint, retrieve_latest_texture};
-use crate::images::{render_images, ImageType};
+use crate::images::{fetch_no_pfp_promise, get_render_state, ImageType};
-use egui::{vec2, Sense, Stroke, TextureHandle};
+use egui::{vec2, InnerResponse, Sense, Stroke, TextureHandle};
 
+use notedeck::note::MediaAction;
 use notedeck::{supported_mime_hosted_at_url, Images};
 
 pub struct ProfilePic<'cache, 'url> {
@@ -9,11 +10,16 @@ pub struct ProfilePic<'cache, 'url> {
     url: &'url str,
     size: f32,
     border: Option<Stroke>,
+    pub action: Option<MediaAction>,
 }
 
-impl egui::Widget for ProfilePic<'_, '_> {
+impl egui::Widget for &mut ProfilePic<'_, '_> {
     fn ui(self, ui: &mut egui::Ui) -> egui::Response {
-        render_pfp(ui, self.cache, self.url, self.size, self.border)
+        let inner = render_pfp(ui, self.cache, self.url, self.size, self.border);
+
+        self.action = inner.inner;
+
+        inner.response
     }
 }
 
@@ -25,6 +31,7 @@ impl<'cache, 'url> ProfilePic<'cache, 'url> {
             url,
             size,
             border: None,
+            action: None,
         }
     }
 
@@ -91,31 +98,46 @@ fn render_pfp(
     url: &str,
     ui_size: f32,
     border: Option<Stroke>,
-) -> egui::Response {
+) -> InnerResponse<Option<MediaAction>> {
     // We will want to downsample these so it's not blurry on hi res displays
     let img_size = 128u32;
 
     let cache_type = supported_mime_hosted_at_url(&mut img_cache.urls, url)
         .unwrap_or(notedeck::MediaCacheType::Image);
 
-    render_images(
+    egui::Frame::NONE.show(ui, |ui| {
-        ui,
+        let cur_state = get_render_state(
-        img_cache,
+            ui.ctx(),
-        url,
+            img_cache,
-        ImageType::Profile(img_size),
+            cache_type,
-        cache_type,
+            url,
-        |ui| {
+            ImageType::Profile(img_size),
-            paint_circle(ui, ui_size, border);
+        );
-        },
+
-        |ui, _| {
+        match cur_state.texture_state {
-            paint_circle(ui, ui_size, border);
+            notedeck::TextureState::Pending => {
-        },
+                paint_circle(ui, ui_size, border);
-        |ui, url, renderable_media, gifs| {
+                None
-            let texture_handle =
+            }
-                handle_repaint(ui, retrieve_latest_texture(url, gifs, renderable_media));
+            notedeck::TextureState::Error(e) => {
-            pfp_image(ui, texture_handle, ui_size, border);
+                paint_circle(ui, ui_size, border);
-        },
+                tracing::error!("Failed to fetch profile at url {url}: {e}");
-    )
+                Some(MediaAction::FetchImage {
+                    url: url.to_owned(),
+                    cache_type,
+                    no_pfp_promise: fetch_no_pfp_promise(ui.ctx(), img_cache.get_cache(cache_type)),
+                })
+            }
+            notedeck::TextureState::Loaded(textured_image) => {
+                let texture_handle = handle_repaint(
+                    ui,
+                    retrieve_latest_texture(url, cur_state.gifs, textured_image),
+                );
+                pfp_image(ui, texture_handle, ui_size, border);
+                None
+            }
+        }
+    })
 }
 
 #[profiling::function]

crates/notedeck_ui/src/profile/preview.rs

@@ -38,7 +38,7 @@ impl<'a, 'cache> ProfilePreview<'a, 'cache> {
 
             ui.put(
                 pfp_rect,
-                ProfilePic::new(self.cache, get_profile_url(Some(self.profile)))
+                &mut ProfilePic::new(self.cache, get_profile_url(Some(self.profile)))
                     .size(size)
                     .border(ProfilePic::border_stroke(ui)),
             );
@@ -90,7 +90,7 @@ impl egui::Widget for SimpleProfilePreview<'_, '_> {
     fn ui(self, ui: &mut egui::Ui) -> egui::Response {
         Frame::new()
             .show(ui, |ui| {
-                ui.add(ProfilePic::new(self.cache, get_profile_url(self.profile)).size(48.0));
+                ui.add(&mut ProfilePic::new(self.cache, get_profile_url(self.profile)).size(48.0));
                 ui.vertical(|ui| {
                     ui.add(display_name_widget(&get_display_name(self.profile), true));
                     if !self.is_nsec {