feat(zbugs-gpui): show avatars (#158)

Amp-Thread-ID: https://ampcode.com/threads/T-cbacad36-05e5-4611-baca-5ce275bfe755

Co-authored-by: Amp <amp@ampcode.com>

Author: tmm

apps/zbugs-gpui/Cargo.lock

@@ -11,6 +11,7 @@ publish = false
 [workspace]
 
 [dependencies]
+anyhow = "1"
 # Relative times in the local time zone, as zbugs' `RelativeTime`.
 chrono = { version = "0.4", default-features = false, features = ["clock"] }
 futures = "0.3"
@@ -36,6 +37,8 @@ tokio-tungstenite = { version = "0.30", default-features = false, features = [
   "connect",
   "rustls-tls-webpki-roots",
 ] }
+# Avatars: GPUI loads images over HTTP with what the app gives it.
+ureq = { version = "3", default-features = false, features = ["rustls"] }
 zbugs-model = { path = "../zbugs-model" }
 # SQLite storage, so the app keeps its data across launches.
 zero-client = { path = "../../rust/zero-client", features = ["sqlite"] }

apps/zbugs-gpui/Cargo.toml

@@ -222,6 +222,31 @@ struct Seen {
     emoji: BTreeSet<String>,
 }
 
+/// `user`'s avatar, round, as zbugs' `AvatarImage`; GitHub's at 64
+/// pixels, as `avatarURLWithSize` asks for.
+fn avatar(user: &User, size: Pixels) -> impl IntoElement {
+    let url = match http_client::Url::parse(&user.avatar) {
+        Ok(mut url) if url.host_str() == Some("avatars.githubusercontent.com") => {
+            let query = url
+                .query_pairs()
+                .filter(|(key, _)| key != "size")
+                .map(|(key, value)| (key.into_owned(), value.into_owned()))
+                .collect::<Vec<_>>();
+            url.query_pairs_mut()
+                .clear()
+                .extend_pairs(query)
+                .append_pair("size", "64");
+            url.to_string()
+        }
+        _ => user.avatar.clone(),
+    };
+    img(url)
+        .flex_none()
+        .size(size)
+        .rounded_full()
+        .with_fallback(move || div().size(size).into_any_element())
+}
+
 /// What a reaction is on.
 #[derive(Clone, Copy)]
 enum Subject {
@@ -2338,7 +2363,13 @@ impl ZbugsApp {
                     .text_color(cx.theme().muted_foreground)
                     .children(issue.short_id.map(|n| format!("#{n}")))
                     .child(if issue.open { "Open" } else { "Closed" })
-                    .child(format!("by {}", who(&issue.creator)))
+                    .child(
+                        h_flex()
+                            .gap_1()
+                            .child("by")
+                            .children(issue.creator.as_deref().map(|u| avatar(u, px(18.))))
+                            .child(who(&issue.creator)),
+                    )
                     .child(format!(
                         "updated {}",
                         relative_time(issue.modified, now_ms())
@@ -2403,6 +2434,7 @@ impl ZbugsApp {
                             .gap_1()
                             .text_xs()
                             .text_color(cx.theme().muted_foreground)
+                            .children(c.creator.as_deref().map(|u| avatar(u, px(18.))))
                             .child(who(&c.creator))
                             .child(div().flex_1().child(relative_time(c.created, now_ms())))
                             .when(self.can_change(&c.creator_id), |row| {

apps/zbugs-gpui/src/app.rs

@@ -0,0 +1,52 @@
+//! The HTTP client GPUI loads images with, for avatars: blocking `ureq`
+//! requests on their own threads. GPUI has none of its own.
+
+use futures::FutureExt as _;
+use futures::channel::oneshot;
+use futures::future::BoxFuture;
+use gpui_kit::http_client::http::HeaderValue;
+use gpui_kit::http_client::{AsyncBody, HttpClient, Request, Response, Url};
+use std::time::Duration;
+
+pub struct UreqClient(ureq::Agent);
+
+impl UreqClient {
+    pub fn new() -> Self {
+        let config = ureq::Agent::config_builder()
+            .timeout_global(Some(Duration::from_secs(30)))
+            .build();
+        Self(config.into())
+    }
+}
+
+impl HttpClient for UreqClient {
+    fn user_agent(&self) -> Option<&HeaderValue> {
+        None
+    }
+
+    fn proxy(&self) -> Option<&Url> {
+        None
+    }
+
+    /// GETs `req`'s URL, which is all images need.
+    fn send(
+        &self,
+        req: Request<AsyncBody>,
+    ) -> BoxFuture<'static, anyhow::Result<Response<AsyncBody>>> {
+        let (agent, uri) = (self.0.clone(), req.uri().to_string());
+        let (done, response) = oneshot::channel();
+        std::thread::spawn(move || {
+            let get = || -> anyhow::Result<Response<AsyncBody>> {
+                let mut response = agent.get(&uri).call()?;
+                let body = response.body_mut().read_to_vec()?;
+                Ok(Response::builder()
+                    .status(response.status())
+                    .body(AsyncBody::from(body))?)
+            };
+            let _ = done.send(get());
+        });
+        response
+            .map(|result| result.unwrap_or_else(|_| Err(anyhow::anyhow!("the request ended"))))
+            .boxed()
+    }
+}

apps/zbugs-gpui/src/http.rs

@@ -1,17 +1,20 @@
 //! zbugs on the Zero Rust client, in GPUI.
 
 mod app;
+mod http;
 mod live;
 mod login;
 mod session;
 mod token;
 mod transport;
 
 use gpui_kit::*;
+use std::sync::Arc;
 
 fn main() {
     gpui_kit::application()
         .with_assets(gpui_kit::assets::Assets)
+        .with_http_client(Arc::new(http::UreqClient::new()))
         .run(|cx| {
             gpui_kit::init(cx);
             app::bind_keys(cx);