From 962e1d513a4c86e7f130725330ee3f72e20481d2 Mon Sep 17 00:00:00 2001
From: bootoshi <127834715+kingbootoshi@users.noreply.github.com>
Date: Thu, 20 Aug 2026 17:21:22 -0400
Subject: [PATCH] feat(ios): detached thumbnail cards for attached images in
 user messages

Attached images previously stacked vertically inside the message bubble
at up to 200pt each, ballooning the bubble far beyond its text. Images
now render as 100pt rounded thumbnail cards in rows of three sitting on
the chat background above the bubble, and the tinted bubble wraps only
the text - attachments and speech read as separate layers, matching how
major chat clients present image turns. Drag-out of full images still
works from each thumbnail.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/ios/Sources/Litter/Extensions.swift      |  9 +++
 .../Litter/Views/MessageBubbleView.swift      | 59 ++++++++++---------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/apps/ios/Sources/Litter/Extensions.swift b/apps/ios/Sources/Litter/Extensions.swift
index aaa6e458b..0e922204e 100644
--- a/apps/ios/Sources/Litter/Extensions.swift
+++ b/apps/ios/Sources/Litter/Extensions.swift
@@ -595,3 +595,12 @@ extension View {
         }
     }
 }
+
+extension Array {
+    func chunked(into size: Int) -> [[Element]] {
+        guard size > 0 else { return [self] }
+        return stride(from: 0, to: count, by: size).map {
+            Array(self[$0..<Swift.min($0 + size, count)])
+        }
+    }
+}
diff --git a/apps/ios/Sources/Litter/Views/MessageBubbleView.swift b/apps/ios/Sources/Litter/Views/MessageBubbleView.swift
index 54d5e3a33..55ff55962 100644
--- a/apps/ios/Sources/Litter/Views/MessageBubbleView.swift
+++ b/apps/ios/Sources/Litter/Views/MessageBubbleView.swift
@@ -122,30 +122,10 @@ struct UserBubble: View, Equatable {
         HStack(alignment: .top, spacing: 0) {
             Spacer(minLength: compact ? 30 : 60)
             VStack(alignment: .trailing, spacing: compact ? 4 : 8) {
-                ForEach(images) { img in
-                    if let request = UserBubble.imageRequest(for: img) {
-                        LazyImage(request: request) { state in
-                            if let image = state.image {
-                                if let ui = state.imageContainer?.image {
-                                    image
-                                        .resizable()
-                                        .scaledToFit()
-                                        .frame(maxWidth: 200, maxHeight: 200)
-                                        .clipShape(RoundedRectangle(cornerRadius: 10))
-                                        .draggable(Image(uiImage: ui)) {
-                                            Image(uiImage: ui)
-                                                .resizable()
-                                                .scaledToFit()
-                                                .frame(width: 120)
-                                        }
-                                } else {
-                                    image
-                                        .resizable()
-                                        .scaledToFit()
-                                        .frame(maxWidth: 200, maxHeight: 200)
-                                        .clipShape(RoundedRectangle(cornerRadius: 10))
-                                }
-                            }
+                ForEach(Array(images.chunked(into: 3).enumerated()), id: \.offset) { _, row in
+                    HStack(spacing: 6) {
+                        ForEach(row) { img in
+                            bubbleImage(img)
                         }
                     }
                 }
@@ -170,11 +150,11 @@ struct UserBubble: View, Equatable {
                             .accessibilityLabel(expandedLongText ? "Show less user message" : "Show more user message")
                         }
                     }
+                    .padding(.horizontal, compact ? 12 : 18)
+                    .padding(.vertical, compact ? 8 : 14)
+                    .modifier(GlassRectModifier(cornerRadius: compact ? 14 : 18, tint: LitterTheme.accent.opacity(0.3)))
                 }
             }
-            .padding(.horizontal, compact ? 12 : 18)
-            .padding(.vertical, compact ? 8 : 14)
-            .modifier(GlassRectModifier(cornerRadius: compact ? 14 : 18, tint: LitterTheme.accent.opacity(0.3)))
         }
         .padding(.bottom, 14)
         .onChange(of: text) { _, _ in
@@ -182,6 +162,31 @@ struct UserBubble: View, Equatable {
         }
     }
 
+    @ViewBuilder
+    private func bubbleImage(_ img: ChatImage) -> some View {
+        if let request = UserBubble.imageRequest(for: img) {
+            LazyImage(request: request) { state in
+                if let image = state.image {
+                    let thumb = image
+                        .resizable()
+                        .scaledToFill()
+                        .frame(width: 100, height: 100)
+                        .clipShape(RoundedRectangle(cornerRadius: 12))
+                    if let ui = state.imageContainer?.image {
+                        thumb.draggable(Image(uiImage: ui)) {
+                            Image(uiImage: ui)
+                                .resizable()
+                                .scaledToFit()
+                                .frame(width: 120)
+                        }
+                    } else {
+                        thumb
+                    }
+                }
+            }
+        }
+    }
+
     private var visibleText: String {
         guard shouldLimitText, !expandedLongText else {
             return text