feat(ui): image viewer with zoom, pan and gesture support

crates/ui/src/assets.rs

@@ -65,6 +65,22 @@ const EXTRA_ICONS: &[(&str, &[u8])] = &[
         "icons/rotate-ccw.svg",
         include_bytes!("../../../assets/icons/rotate-ccw.svg"),
     ),
+    (
+        "icons/zoom-in.svg",
+        include_bytes!("../../../assets/icons/zoom-in.svg"),
+    ),
+    (
+        "icons/zoom-out.svg",
+        include_bytes!("../../../assets/icons/zoom-out.svg"),
+    ),
+    (
+        "icons/maximize-2.svg",
+        include_bytes!("../../../assets/icons/maximize-2.svg"),
+    ),
+    (
+        "icons/minimize-2.svg",
+        include_bytes!("../../../assets/icons/minimize-2.svg"),
+    ),
     (
         "icons/openai.svg",
         include_bytes!("../../../assets/icons/openai.svg"),

crates/ui/src/attachments.rs

@@ -1,47 +1,7 @@
 //! Attachment presentation with core-owned validation semantics and localized errors.
 
-use crate::overlay::OverlayExt as _;
-use crate::theme::ActiveTheme as _;
-use gpui::{App, ImageSource, ParentElement as _, Styled as _, Window, div, img, px};
 use tcode_core::attachments::AttachError;
 
-/// Open an image as a window-level lightbox. The dialog lives on the Root
-/// layer, so its backdrop covers the whole window and it inherits
-/// backdrop-click / Escape / `x` dismissal. Shared by the composer's pending
-/// strip, sent-message thumbnails, Markdown images and image-link badges.
-pub(crate) fn open_image_lightbox(
-    source: ImageSource,
-    title: String,
-    window: &mut Window,
-    cx: &mut App,
-) {
-    window.open_dialog(cx, move |builder, window, cx| {
-        let viewport = window.viewport_size();
-        // Leave room for the dialog header, padding and bottom margin in short windows.
-        let max_h = (viewport.height * 0.75).min(viewport.height * 0.9 - px(96.));
-        let source = source.clone();
-        let image_radius = crate::material::radius_card(cx);
-        builder
-            .w(px(1200.))
-            .rounded(crate::material::radius_overlay(cx))
-            .bg(cx.theme().popover)
-            .border_1()
-            .border_color(cx.theme().border)
-            .shadow_xl()
-            .title(title.clone())
-            .content(move |content_el, _, _| {
-                content_el.child(
-                    div().w_full().flex().items_center().justify_center().child(
-                        img(source.clone())
-                            .max_w_full()
-                            .max_h(max_h)
-                            .rounded(image_radius),
-                    ),
-                )
-            })
-    });
-}
-
 /// How this client reaches the machine that stores the attachment.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum TransferLink {

crates/ui/src/chat/mod.rs

@@ -1770,7 +1770,7 @@ impl ChatView {
                     .map(|name| name.to_string_lossy().into_owned())
                     .unwrap_or_else(|| "image".to_string());
                 Box::new(cx.listener(move |_, _, window, cx| {
-                    crate::attachments::open_image_lightbox(
+                    crate::image_viewer::open(
                         crate::store::host_image(path.clone()),
                         title.clone(),
                         window,

crates/ui/src/composer/components/images.rs

@@ -532,7 +532,7 @@ impl Composer {
     }
 
     /// Open the clicked thumbnail as a window-level lightbox (see
-    /// [`crate::attachments::open_image_lightbox`]).
+    /// [`crate::image_viewer::open`]).
     pub(in super::super) fn open_image_preview(
         &self,
         index: usize,
@@ -542,7 +542,7 @@ impl Composer {
         let Some(image) = self.pending_images.get(index) else {
             return;
         };
-        crate::attachments::open_image_lightbox(
+        crate::image_viewer::open(
             crate::store::host_image(image.path.clone()),
             image.name.clone(),
             window,