T26a Media: images

A new chapter, src/media. ImageViewer fits a picture to its stage and
zooms by the document steps, by keys, buttons and Cmd-scroll about the
pointer; a drag through gpui's drag, a scroll or the arrows pan it once it
overhangs; R turns it a quarter at a time. gpui paints pictures without a
transform, so media::turn turns the decoded frames off the main thread,
an asset keyed by the picture and the turn; `image` 0.25, which gpui
already decodes with, is now a dependency. ImageThumbnail shows a picture
in its own shape with a corner label and a ring when chosen, and is a Tab
stop only with a handler. Lightbox / Gallery Viewer points to
overlays::Lightbox, which the gallery opens from the thumbnails.

T26 splits into T26a–e. AGENTS.md: the drag rule says drags that pan,
turn or slide go through gpui's drag; pictures turn by their pixels.

src/media/thumbnail.rs

@@ -0,0 +1,106 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, ImageSource, InteractiveElement, IntoElement, MouseButton, ParentElement,
+    RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div, prelude::*,
+    transparent_black,
+};
+
+use crate::{
+    forms::Run,
+    primitives::{FocusRing, Image, checked_ratio, framed},
+    theme::{ActiveTheme, Radius, TextSize},
+    typography::tabular,
+};
+
+/// A picture in its own shape, taken from the host, as wide as its box: a shimmer while it loads, a mark if it fails, and a short label in a corner when given, such as a length or a count. Chosen, an accent ring holds it; with `on_click` it is a Tab stop.
+#[derive(IntoElement)]
+pub struct ImageThumbnail {
+    id: ElementId,
+    source: ImageSource,
+    ratio: f32,
+    label: Option<SharedString>,
+    selected: bool,
+    on_click: Option<Run>,
+}
+
+impl ImageThumbnail {
+    /// `ratio` is the picture's width over its height.
+    pub fn new(id: impl Into<ElementId>, source: impl Into<ImageSource>, ratio: f32) -> Self {
+        Self {
+            id: id.into(),
+            source: source.into(),
+            ratio: checked_ratio(ratio),
+            label: None,
+            selected: false,
+            on_click: None,
+        }
+    }
+
+    /// A few words in the corner, such as "0:42" or "+3".
+    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
+        self.label = Some(label.into());
+        self
+    }
+
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    pub fn on_click(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
+        self.on_click = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for ImageThumbnail {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let (outer, inner) = (theme.radius(Radius::Md), theme.radius(Radius::Sm));
+        let label = self.label.map(|label| {
+            tabular(div())
+                .absolute()
+                .right_1()
+                .bottom_1()
+                .px_1p5()
+                .rounded(inner)
+                .bg(colors.media_backdrop.alpha(0.7))
+                .text_size(theme.text_size(TextSize::Xs))
+                .text_color(colors.on_media)
+                .child(label)
+        });
+        let picture = framed(self.ratio, cx)
+            .rounded(inner)
+            .child(
+                Image::new((self.id.clone(), "picture"), self.source)
+                    .size_full()
+                    .rounded(inner),
+            )
+            .children(label);
+        div()
+            .id(self.id)
+            .w_full()
+            .rounded(outer)
+            .border_1()
+            .border_color(if self.selected {
+                colors.accent
+            } else {
+                transparent_black()
+            })
+            .p_0p5()
+            .when_some(self.on_click, |thumb, click| {
+                thumb
+                    .tab_index(0)
+                    .focus_ring(cx)
+                    .cursor_pointer()
+                    .on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
+                    .on_click(move |_, window, cx| {
+                        log::info!("image thumbnail: opened");
+                        click(window, cx)
+                    })
+            })
+            .child(picture)
+    }
+}