Attachment

use gpui_kit::{Axis, ParentElement as _, Styled as _};
use gpui_kit::component::{
    ActiveTheme as _, Colorize as _, Icon, IconName, Sizable as _, Size,
    attachment::{
        Attachment, AttachmentActions, AttachmentContent, AttachmentDescription,
        AttachmentGroup, AttachmentMedia, AttachmentStatus, AttachmentTitle,
    },
    button::{Button, ButtonVariants as _},
    badge::Badge,
    progress::Progress,
    shimmer::ShimmerStyle,
    spinner::Spinner,
};

// Installed in ui/components. That directory is on the Slint include path, so import by file name:
import { AttachmentStatus, AttachmentAxis, AttachmentGroup, Attachment } from "attachment.slint";

use iced::widget::{column, container, mouse_area, row, scrollable, svg, text};
use iced::{Alignment, Background, Color, Element, Length, Task, Theme};

// File metadata: one chip at the default density with a remove control, and
// one small chip without — iced draws the remove control only when the card
// carries a `Remove` message, which is how Slint's `closable: false` reads.
let metadata = column![
    Attachment::new("quarterly-report.pdf")
        .description("PDF · 2.4 MB")
        .icon(glyph("PDF"))
        .on_remove(Message::Remove)
        .width(232.0),
    Attachment::new("research-data.csv")
        .description("CSV · 840 KB")
        .density(ControlSize::Small)
        .icon(glyph("CSV"))
        .width(200.0),
]
.spacing(theme::SPACING_MD);

Attachment::new()
    .media(AttachmentMedia::new().child(Icon::new(IconName::FileText)))
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("quarterly-report.pdf"))
            .description(AttachmentDescription::new("PDF · 2.4 MB")),
    )
    .actions(
        AttachmentActions::new().child(
            Button::new("remove-report")
                .ghost()
                .xsmall()
                .icon(IconName::Close)
                .label("Remove"),
        ),
    )

Attachment {
    name: "quarterly-report.pdf";
    size: "PDF · 2.4 MB";
}
Attachment {
    name: "research-data.csv";
    size: "CSV · 840 KB";
    density: ControlSize.small;
    closable: false;
}

Attachment::new()
    .media(AttachmentMedia::new().child(Icon::new(IconName::FileText)));

Attachment::new().content(
    AttachmentContent::new()
        .title(AttachmentTitle::new("notes.txt"))
        .description(AttachmentDescription::new("TXT · 12 KB")),
)

// The optional slots: media only, metadata only, and metadata with an
// action. A control without a message is drawn disabled, which is how the
// action here reads until the caller supplies one.
let optional = column![
    Attachment::new("")
        .icon(glyph("IMG"))
        .show_meta(false)
        .width(120.0),
    Attachment::new("metadata-only.txt")
        .description("Text · 1 KB")
        .show_media(false)
        .width(232.0),
    Attachment::new("ready-for-review.pdf")
        .description("Awaiting review")
        .show_media(false)
        .action("Open")
        .on_action(Message::Open)
        .width(232.0),
]
.spacing(theme::SPACING_MD);

// A vertical card: the preview is the square above the metadata. An
// application passes an image element; this demo passes a tinted panel.
let thumbnail = Attachment::new("sdk-preview.svg")
    .description("SVG · 1280 × 720")
    .axis(Axis::Vertical)
    .preview(preview(Color::from_rgb(0.30, 0.42, 0.85), "preview"))
    .on_remove(Message::Remove);

Attachment::new()
    .media(
        AttachmentMedia::new()
            .src("https://example.com/previews/sdk.svg")
            .overlay(Icon::new(IconName::Download)),
    )
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("sdk-preview.svg"))
            .description(AttachmentDescription::new("SVG · 1280 × 720")),
    )

Attachment {
    name: "sdk-preview.svg";
    size: "SVG · 1280 × 720";
    axis: AttachmentAxis.vertical;
    preview: root.preview;
}

Attachment::new()
    .status(AttachmentStatus::Uploading)
    .axis(Axis::Vertical)
    .media(
        AttachmentMedia::new()
            .src(preview_url)
            .overlay(Spinner::new().small()),
    )

AttachmentMedia::new()
    .with_size(Size::Large)
    .aspect_ratio(16. / 9.)
    .rounded(cx.theme().radius_lg)
    .child(Icon::new(IconName::Image))

// The loading ring over the dimmed preview while the piece is in progress.
let overlays = Attachment::new("preview.svg")
    .description("Uploading · 72%")
    .axis(Axis::Vertical)
    .status(Status::Uploading)
    .progress(72.0)
    .preview(preview(Color::from_rgb(0.85, 0.45, 0.35), "preview"))
    .overlay(true)
    .phase(app.phase())
    .on_remove(Message::Remove);

// The five states in the Slint example's order: pending, uploading with a
// progress bar, processing with the loading ring, failed with a Retry
// action, and complete.
let states = column![
    Attachment::new("meeting-notes.pdf")
        .description("Ready to upload")
        .status(Status::Pending)
        .icon(glyph("PDF"))
        .width(272.0),
    Attachment::new("design-assets.zip")
        .description("Uploading · 68%")
        .status(Status::Uploading)
        .progress(68.0)
        .icon(glyph("ZIP"))
        .on_remove(Message::Remove)
        .width(272.0),
    Attachment::new("transcript.pdf")
        .description("Processing document")
        .status(Status::Processing)
        .overlay(true)
        .phase(app.phase())
        .icon(glyph("PDF"))
        .width(272.0),
    Attachment::new("archive.zip")
        .description("Upload failed")
        .status(Status::Failed)
        .icon(glyph("ZIP"))
        .action("Retry")
        .on_action(Message::Retry)
        .on_remove(Message::Remove)
        .width(272.0),
    Attachment::new("published-report.pdf")
        .description("Uploaded · 1.8 MB")
        .status(Status::Complete)
        .icon(check_glyph())
        .width(272.0),
]
.spacing(theme::SPACING_MD);

Attachment::new()
    .status(AttachmentStatus::Uploading)
    .media(AttachmentMedia::new().child(Icon::new(IconName::FileText)))
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("design-assets.zip"))
            .description(AttachmentDescription::new("Uploading · 68%"))
            .child(Progress::new("attachment-progress").value(68.)),
    )
    .actions(
        AttachmentActions::new()
            .child(Button::new("cancel-upload").ghost().xsmall().label("Cancel")),
    )

Attachment {
    name: "meeting-notes.pdf";
    size: "Ready to upload";
    status: AttachmentStatus.pending;
    closable: false;
}
Attachment {
    name: "design-assets.zip";
    size: "Uploading · 68%";
    status: AttachmentStatus.uploading;
    progress: 68;
}
Attachment {
    name: "transcript.pdf";
    size: "Processing document";
    status: AttachmentStatus.processing;
    shimmer-styled: true;
    closable: false;
}
Attachment {
    name: "archive.zip";
    size: "Upload failed";
    status: AttachmentStatus.failed;
    action: "Retry";
    remove-icon: "trash";
    remove-variant: ButtonVariant.danger;
}
Attachment {
    name: "published-report.pdf";
    size: "Uploaded · 1.8 MB";
    status: AttachmentStatus.complete;
    icon: "circle-check";
    icon-color: Theme.success;
}

match status {
    AttachmentStatus::Pending => "Ready to upload",
    AttachmentStatus::Uploading => "Uploading…",
    AttachmentStatus::Processing => "Processing…",
    AttachmentStatus::Failed => "Upload failed",
    AttachmentStatus::Complete => "Ready",
}

// The attachment's own status decides the title, the description, the border
// and the media slot together: an `Uploading` piece draws its title in the
// loading colour. This port has no per-child status override, which is what
// Slint's separate title and description statuses are; the module names the
// gap rather than faking it.
let inheritance = column![
    Attachment::new("inherited-title.pdf")
        .description("Inherited loading appearance")
        .status(Status::Uploading)
        .icon(glyph("PDF"))
        .width(272.0),
    Attachment::new("stable-title.pdf")
        .description("An explicit status leaves the title at rest")
        .status(Status::Complete)
        .icon(glyph("PDF"))
        .width(272.0),
]
.spacing(theme::SPACING_MD);

Attachment::new()
    .status(AttachmentStatus::Failed)
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("archive.zip"))
            .description(
                AttachmentDescription::new("Previous upload completed")
                    .status(AttachmentStatus::Complete),
            ),
    )

Attachment {
    name: "inherited-title.pdf";
    size: "Inherited loading appearance";
    status: AttachmentStatus.uploading;
    closable: false;
}
Attachment {
    name: "stable-title.pdf";
    size: "Explicit title status disables its shimmer";
    status: AttachmentStatus.uploading;
    shimmer: false;
    closable: false;
}

AttachmentContent::new()
    .title(AttachmentTitle::new("status-aware-title"))
    .description(AttachmentDescription::new("status-aware-description"))
    .child(custom_metadata_element)

AttachmentTitle::new("transcript.pdf")
    .with_shimmer_style(
        ShimmerStyle::new()
            .duration(std::time::Duration::from_secs(3))
            .spread(0.45)
            .reverse(true)
            .once(false),
    )

// The four named sizes — 28, 32, 40 and 48 pixel media boxes — and a small
// chip whose media box is overridden to the large one.
let sizes = column![
    Attachment::new("large.pdf")
        .description("Large · PDF · 3.1 MB")
        .density(ControlSize::Large)
        .icon(glyph("PDF"))
        .width(320.0),
    Attachment::new("medium.pdf")
        .description("Medium · PDF · 2.4 MB")
        .icon(glyph("PDF"))
        .width(272.0),
    Attachment::new("small.csv")
        .description("Small · CSV · 840 KB")
        .density(ControlSize::Small)
        .icon(glyph("CSV"))
        .width(232.0),
    Attachment::new("xsmall.txt")
        .density(ControlSize::XSmall)
        .icon(glyph("TXT"))
        .width(176.0),
    Attachment::new("custom-media.pdf")
        .description("Large media in a small attachment")
        .density(ControlSize::Small)
        .media_box(48.0)
        .icon(glyph("PDF"))
        .width(232.0),
]
.spacing(theme::SPACING_MD);

Attachment::new().xsmall();
Attachment::new().small();
Attachment::new(); // medium (default)
Attachment::new().large();
Attachment::new().w_auto() // let the chip hug its content instead of the fixed width

Attachment {
    name: "large.pdf";
    size: "Large · PDF · 3.1 MB";
    density: ControlSize.large;
    closable: false;
}
Attachment {
    name: "medium.pdf";
    size: "Medium · PDF · 2.4 MB";
    closable: false;
}
Attachment {
    name: "small.csv";
    size: "Small · CSV · 840 KB";
    density: ControlSize.small;
    closable: false;
}
Attachment {
    name: "xsmall.txt";
    density: ControlSize.xsmall;
    closable: false;
}
Attachment {
    name: "custom-media.pdf";
    size: "Large media in a small attachment";
    density: ControlSize.small;
    media-box: 48px;
    closable: false;
}

Attachment::new()
    .axis(Axis::Vertical)
    .large()
    .media(AttachmentMedia::new().src(preview_url))
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("presentation.png"))
            .description(AttachmentDescription::new("PNG · 1920 × 1080")),
    )
    .actions(
        AttachmentActions::new()
            .child(Button::new("remove-presentation").ghost().xsmall().label("Remove")),
    )

// Horizontal keeps media, metadata and actions in one row; vertical puts the
// media above the metadata. A vertical chip with no preview draws the muted
// empty media box.
let orientation = row![
    Attachment::new("horizontal.pdf")
        .description("Horizontal layout")
        .icon(glyph("PDF"))
        .width(232.0),
    Attachment::new("vertical.pdf")
        .description("Vertical layout")
        .axis(Axis::Vertical),
]
.spacing(theme::SPACING_MD)
.align_y(Alignment::Start);

// A 288px card holding a long name: iced 0.14 text has no ellipsis, so the
// title is clipped by the card rather than elided.
let long_names =
    Attachment::new("accessibility-review-and-keyboard-navigation-findings.pdf")
        .description("Final report · reviewed by the desktop experience team")
        .icon(glyph("PDF"))
        .width(288.0);

// The trigger a composer puts before the chips. The icon is the caller's
// element, so a text glyph stands in for the file mark here.
let trigger = row![Button::new("Add files…")
    .icon(text("+").size(theme::FONT_SIZE_MD))
    .outline()
    .on_press(Message::Open)]
.align_y(Alignment::Center);

AttachmentContent::new()
    .title(AttachmentTitle::new("report.pdf"))
    .description(AttachmentDescription::new("PDF · 2.4 MB"))
    .child(Badge::new().count(3))

AttachmentActions::new()
    .child(Button::new("download").ghost().xsmall().label("Download"))
    .child(Button::new("remove").danger().xsmall().label("Remove"))

HorizontalLayout {
    alignment: start;
    Button {
        text: "Add files…";
        icon: "file-text";
        outline: true;
        horizontal-stretch: 0;
    }
}

// The card activates as one target and the remove control rides its corner
// as a second; the notice under it is the application's own state.
let whole_card = column![
    Attachment::new("design-mockups.png")
        .description("PNG · 1.8 MB")
        .icon(glyph("IMG"))
        .on_press(Message::Open)
        .on_remove(Message::RemoveMockups)
        .width(272.0),
    muted(if app.notice.is_empty() {
        "Click the card to open it; the remove control is its own target.".to_string()
    } else {
        app.notice.clone()
    }),
]
.spacing(theme::SPACING_SM);

Attachment::new()
    .id("design-attachment")
    .on_click(|_, window, cx| {
        // Open the preview.
    })
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("design-mockups.png"))
            .description(AttachmentDescription::new("PNG · 1.8 MB")),
    )
    .actions(
        AttachmentActions::new()
            .child(Button::new("remove").ghost().xsmall().icon(IconName::Close)),
    )

Attachment {
    name: "design-mockups.png";
    size: "PNG · 1.8 MB";
    clickable: true;
    clicked => {
        root.notice = "Opening design-mockups.png…";
    }
    removed => {
        root.notice = "Removed design-mockups.png";
    }
}
if root.notice != "": Text {
    text: root.notice;
    color: Theme.muted-foreground;
    font-size: Theme.font-size-sm;
    wrap: word-wrap;
}

Attachment::new()
    .id(("attachment", item.id))
    .status(item.status)
    .on_remove(cx.listener(move |this, _, _, cx| this.remove(item.id, cx)))
    .on_retry(cx.listener(move |this, _, _, cx| this.retry(item.id, cx)))
    .axis(Axis::Vertical)
    .media(AttachmentMedia::new().src(thumbnail))

Attachment::new()
    .id(("attachment", item.id))
    .status(AttachmentStatus::Uploading)
    .progress(item.percent)               // 0..=100
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("Q3 statement.pdf"))
            .description(AttachmentDescription::new("Uploading")),
    );

Attachment::new()
    .id(("attachment", item.id))
    .status(AttachmentStatus::Failed)
    .tooltip("Image exceeds 20 MB limit · Remove to send")
    .on_remove(cx.listener(move |this, _, _, cx| this.remove(item.id, cx)))
    .axis(Axis::Vertical)
    .media(AttachmentMedia::new().src(thumbnail))

// One horizontally scrolling row, twelve pixels apart.
let group = Group::new()
    .push(
        Attachment::new("default.pdf")
            .description("PDF · 2.4 MB")
            .icon(glyph("PDF"))
            .width(180.0),
    )
    .push(
        Attachment::new("small.csv")
            .description("CSV · 840 KB")
            .density(ControlSize::Small)
            .icon(glyph("CSV"))
            .width(160.0),
    )
    .push(
        Attachment::new("compact.txt")
            .density(ControlSize::XSmall)
            .icon(glyph("TXT"))
            .width(140.0),
    );

AttachmentGroup::new("message-attachments")
    .child(first_attachment)
    .child(second_attachment)
    .child(third_attachment)

AttachmentGroup {
    Attachment {
        name: "default.pdf";
        size: "PDF · 2.4 MB";
        closable: false;
    }
    Attachment {
        name: "small.csv";
        size: "CSV · 840 KB";
        density: ControlSize.small;
        closable: false;
    }
    Attachment {
        name: "compact.txt";
        density: ControlSize.xsmall;
        closable: false;
    }
}

AttachmentGroup::new("composer-attachments")
    // Fade each edge into the surface behind the row while it hides content.
    .with_edge_fade(cx.theme().background)
    // Drive the scrolling yourself, e.g. from paging buttons.
    .track_scroll(&self.attachments_scroll)
    .children(attachments)

// Slint refines this surface from `Theme.accent` and `Theme.primary`. This
// component takes concrete colours rather than a style closure, so the
// override is a palette the caller owns; a chip beside it resolves its
// colours from the active theme when the surface draws.
let custom = Attachment::new("custom-theme.json")
    .description("JSON · 16 KB")
    .icon(glyph("JSON"))
    .fill(Color::from_rgb(0.20, 0.24, 0.62))
    .border_color(Color::from_rgb(0.33, 0.40, 0.85))
    .title_color(Color::WHITE)
    .icon_color(Color::from_rgb(0.80, 0.84, 1.0))
    .media_background(Color::from_rgb(0.30, 0.36, 0.82))
    .width(272.0);

Attachment::new()
    .w_full()
    .rounded(cx.theme().radius_lg)
    .bg(cx.theme().group_box)
    .border_color(cx.theme().ring)
    .media(
        AttachmentMedia::new()
            .rounded(cx.theme().radius_lg)
            .bg(cx.theme().primary.opacity(0.12))
            .text_color(cx.theme().primary)
            .child(Icon::new(IconName::FileText)),
    )
    .content(
        AttachmentContent::new()
            .title(AttachmentTitle::new("custom-theme.json").text_color(cx.theme().primary))
            .description(AttachmentDescription::new("JSON · 16 KB")),
    )

Attachment {
    name: "custom-theme.json";
    size: "JSON · 16 KB";
    closable: false;
    fill: Theme.accent;
    border-color: Theme.accent.with-alpha(0.5);
    title-color: Theme.primary;
    icon-color: Theme.primary;
    media-background: Theme.primary.with-alpha(0.12);
}