From 4ee8a2f6fa5f9cff3b39cec520f02d1229b48223 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 19 Aug 2026 13:36:01 -0400
Subject: [PATCH] refactor(desktop): extract ImageMosaic from markdown.tsx

Keeps the oversized markdown.tsx inside the file-size ratchet after the
blockCode option added a few lines.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 desktop/src/shared/ui/markdown.tsx            | 25 +----------------
 .../src/shared/ui/markdown/ImageMosaic.tsx    | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 desktop/src/shared/ui/markdown/ImageMosaic.tsx

diff --git a/desktop/src/shared/ui/markdown.tsx b/desktop/src/shared/ui/markdown.tsx
index d6c906de71..505c3fea69 100644
--- a/desktop/src/shared/ui/markdown.tsx
+++ b/desktop/src/shared/ui/markdown.tsx
@@ -48,6 +48,7 @@ import {
   isImageOnlyParagraph,
   markdownPropsAreEqual,
 } from "./markdownUtils";
+import { ImageMosaic } from "./markdown/ImageMosaic";
 import {
   CODE_BLOCK_CLASS,
   extractLanguage,
@@ -1232,30 +1233,6 @@ function ImageBlock({ alt, dim, resolvedSrc, src, thumbSrc }: ImageBlockProps) {
   );
 }
 
-function ImageMosaic({ children }: { children: React.ReactNode[] }) {
-  const mosaicRef = React.useRef<HTMLDivElement | null>(null);
-  const isTriptych = children.length === 3;
-  const hasOddTail = children.length > 3 && children.length % 2 === 1;
-  useSmoothCorners(mosaicRef);
-
-  return (
-    <div
-      className={cn(
-        "mt-1 grid w-full min-w-0 max-w-lg grid-cols-2 gap-1.5 overflow-hidden rounded-2xl [&_br]:hidden [&_[data-block-media]]:min-h-0 [&_[data-block-media]]:max-w-none [&_[data-block-media]]:overflow-hidden [&_[data-block-media]>button]:m-0 [&_[data-block-media]>button]:h-full [&_[data-block-media]>button]:w-full [&_[data-block-media]>button]:max-w-none [&_[data-block-media]>button]:rounded-none [&_[data-block-media]_[data-progressive-image-frame]]:!h-full [&_[data-block-media]_[data-progressive-image-frame]]:!w-full [&_[data-block-media]_img]:!h-full [&_[data-block-media]_img]:!max-h-none [&_[data-block-media]_img]:!w-full [&_[data-block-media]_img]:!max-w-none [&_[data-block-media]_img]:rounded-none [&_[data-block-media]_img]:object-cover",
-        isTriptych
-          ? "h-80 grid-rows-2 [&_[data-block-media]]:h-auto [&_[data-block-media]:first-child]:row-span-2"
-          : "[&_[data-block-media]]:h-48",
-        hasOddTail && "[&_[data-block-media]:last-child]:col-span-2",
-      )}
-      data-image-mosaic=""
-      data-image-mosaic-count={children.length}
-      ref={mosaicRef}
-    >
-      {children}
-    </div>
-  );
-}
-
 export function createMarkdownComponents(
   interactive = true,
   mediaInset = false,
diff --git a/desktop/src/shared/ui/markdown/ImageMosaic.tsx b/desktop/src/shared/ui/markdown/ImageMosaic.tsx
new file mode 100644
index 0000000000..d45fdf9744
--- /dev/null
+++ b/desktop/src/shared/ui/markdown/ImageMosaic.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { cn } from "@/shared/lib/cn";
+import { useSmoothCorners } from "@/shared/ui/smoothCorners";
+
+/** Grid layout for messages that contain multiple standalone images. */
+export function ImageMosaic({ children }: { children: React.ReactNode[] }) {
+  const mosaicRef = React.useRef<HTMLDivElement | null>(null);
+  const isTriptych = children.length === 3;
+  const hasOddTail = children.length > 3 && children.length % 2 === 1;
+  useSmoothCorners(mosaicRef);
+
+  return (
+    <div
+      className={cn(
+        "mt-1 grid w-full min-w-0 max-w-lg grid-cols-2 gap-1.5 overflow-hidden rounded-2xl [&_br]:hidden [&_[data-block-media]]:min-h-0 [&_[data-block-media]]:max-w-none [&_[data-block-media]]:overflow-hidden [&_[data-block-media]>button]:m-0 [&_[data-block-media]>button]:h-full [&_[data-block-media]>button]:w-full [&_[data-block-media]>button]:max-w-none [&_[data-block-media]>button]:rounded-none [&_[data-block-media]_[data-progressive-image-frame]]:!h-full [&_[data-block-media]_[data-progressive-image-frame]]:!w-full [&_[data-block-media]_img]:!h-full [&_[data-block-media]_img]:!max-h-none [&_[data-block-media]_img]:!w-full [&_[data-block-media]_img]:!max-w-none [&_[data-block-media]_img]:rounded-none [&_[data-block-media]_img]:object-cover",
+        isTriptych
+          ? "h-80 grid-rows-2 [&_[data-block-media]]:h-auto [&_[data-block-media]:first-child]:row-span-2"
+          : "[&_[data-block-media]]:h-48",
+        hasOddTail && "[&_[data-block-media]:last-child]:col-span-2",
+      )}
+      data-image-mosaic=""
+      data-image-mosaic-count={children.length}
+      ref={mosaicRef}
+    >
+      {children}
+    </div>
+  );
+}