feat: enable image preview at changes tab

apps/code/src/renderer/features/code-editor/components/CodeEditorPanel.tsx

@@ -2,6 +2,7 @@ import { PanelMessage } from "@components/ui/PanelMessage";
 import { Tooltip } from "@components/ui/Tooltip";
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
 import { useMarkdownViewerStore } from "@features/code-editor/stores/markdownViewerStore";
+import { getImageMimeType } from "@features/code-editor/utils/imageUtils";
 import { isMarkdownFile } from "@features/code-editor/utils/markdownUtils";
 import { getRelativePath } from "@features/code-editor/utils/pathUtils";
 import { isImageFile } from "@features/message-editor/utils/imageUtils";
@@ -19,24 +20,6 @@ import type { Components } from "react-markdown";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-const IMAGE_MIME_TYPES: Record<string, string> = {
-  png: "image/png",
-  jpg: "image/jpeg",
-  jpeg: "image/jpeg",
-  gif: "image/gif",
-  webp: "image/webp",
-  bmp: "image/bmp",
-  ico: "image/x-icon",
-  svg: "image/svg+xml",
-  tiff: "image/tiff",
-  tif: "image/tiff",
-};
-
-function getImageMimeType(filePath: string): string {
-  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
-  return IMAGE_MIME_TYPES[ext] ?? "image/png";
-}
-
 interface CodeEditorPanelProps {
   taskId: string;
   task: Task;

apps/code/src/renderer/features/code-editor/components/DiffEditorPanel.tsx

@@ -1,10 +1,12 @@
 import { PanelMessage } from "@components/ui/PanelMessage";
 import { CodeMirrorDiffEditor } from "@features/code-editor/components/CodeMirrorDiffEditor";
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
+import { getImageMimeType } from "@features/code-editor/utils/imageUtils";
 import { getRelativePath } from "@features/code-editor/utils/pathUtils";
+import { isImageFile } from "@features/message-editor/utils/imageUtils";
 import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
-import { Box } from "@radix-ui/themes";
+import { Box, Flex } from "@radix-ui/themes";
 import { trpcClient, useTRPC } from "@renderer/trpc/client";
 import type { Task } from "@shared/types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -24,6 +26,7 @@ export function DiffEditorPanel({
   const trpc = useTRPC();
   const repoPath = useCwd(taskId);
   const filePath = getRelativePath(absolutePath, repoPath);
+  const isImage = isImageFile(absolutePath);
   const queryClient = useQueryClient();
   const closeDiffTabsForFile = usePanelLayoutStore(
     (s) => s.closeDiffTabsForFile,
@@ -57,6 +60,13 @@ export function DiffEditorPanel({
     ),
   );
 
+  const imageQuery = useQuery(
+    trpc.fs.readFileAsBase64.queryOptions(
+      { filePath: absolutePath },
+      { enabled: isImage, staleTime: Infinity },
+    ),
+  );
+
   const handleRefresh = useCallback(() => {
     if (!repoPath) return;
     queryClient.invalidateQueries(
@@ -107,6 +117,33 @@ export function DiffEditorPanel({
     }
   }, [hasNoChanges, closeDiffTabsForFile, taskId, filePath]);
 
+  if (isImage) {
+    if (imageQuery.isLoading) {
+      return <PanelMessage>Loading image...</PanelMessage>;
+    }
+    if (imageQuery.error || !imageQuery.data) {
+      return (
+        <PanelMessage detail={absolutePath}>Failed to load image</PanelMessage>
+      );
+    }
+    const mimeType = getImageMimeType(absolutePath);
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        height="100%"
+        p="4"
+        style={{ overflow: "auto" }}
+      >
+        <img
+          src={`data:${mimeType};base64,${imageQuery.data}`}
+          alt={filePath}
+          style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
+        />
+      </Flex>
+    );
+  }
+
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }

apps/code/src/renderer/features/code-editor/utils/imageUtils.ts

@@ -0,0 +1,17 @@
+export const IMAGE_MIME_TYPES: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+  svg: "image/svg+xml",
+  tiff: "image/tiff",
+  tif: "image/tiff",
+};
+
+export function getImageMimeType(filePath: string): string {
+  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+  return IMAGE_MIME_TYPES[ext] ?? "image/png";
+}