Skip to content

handle images in file viewer and diff viewer#1166

Merged
Kitenite merged 3 commits intomainfrom
kitenite/boar
Feb 3, 2026
Merged

handle images in file viewer and diff viewer#1166
Kitenite merged 3 commits intomainfrom
kitenite/boar

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Feb 3, 2026

Description

Related Issues

Type of Change

  • Bug fix
  • New feature
  • Documentation
  • Refactor
  • Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

  • New Features

    • Added support for viewing image files with automatic preview rendering
    • Image files now display in rendered mode by default
    • Added copy-to-clipboard feature for file paths (click filename)
  • UI Updates

    • Renamed "Diff" tab to "Changes"

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Feb 3, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This pull request introduces image file viewing support to the desktop application. It adds a new TRPC procedure readWorkingFileImage to read images as base64 data URLs, creates a shared file-type detection module, and updates multiple FileViewerPane components to handle image rendering alongside markdown display. The view mode resolution logic is adjusted to prioritize image and rendered content.

Changes

Cohort / File(s) Summary
TRPC and Shared Utilities
apps/desktop/src/lib/trpc/routers/changes/file-contents.ts, apps/desktop/src/shared/file-types.ts
Introduces readWorkingFileImage procedure with size validation (10 MiB limit) and MIME type detection; creates shared file-type detection utilities (isImageFile, getImageMimeType, isMarkdownFile, hasRenderedPreview) to centralize extension-based file classification.
FileViewerPane Components
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/FileViewerPane.tsx, FileViewerContent.tsx, FileViewerToolbar.tsx
FileViewerPane extends hook return to include imageData and isLoadingImage, computes hasRenderedMode for images/markdown; FileViewerToolbar adds filePath prop and copy-to-clipboard functionality for file path display; FileViewerContent adds image rendering with error handling for too-large, outside-worktree, and symlink-escape scenarios.
Hooks and Utilities
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/hooks/useFileContent/useFileContent.ts, apps/desktop/src/renderer/stores/tabs/utils.ts
useFileContent adds conditional readWorkingFileImage query guarded by rendered view mode and image detection; resolveFileViewerMode prioritizes image/rendered preview over diff/raw views.
Minor Updates
apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/FilesView.tsx
Removes explicit viewMode: "raw" argument, allowing default view mode resolution.

Sequence Diagram

sequenceDiagram
    participant UI as FileViewerPane (UI)
    participant Hook as useFileContent (Hook)
    participant TRPC as TRPC Client
    participant Server as readWorkingFileImage (Server)
    participant FS as File System

    UI->>Hook: Request file content with viewMode="rendered"
    Hook->>Hook: Check if file is image
    alt File is Image
        Hook->>TRPC: Call readWorkingFileImage(filePath, worktreePath)
        TRPC->>Server: readWorkingFileImage procedure
        Server->>FS: Read image file
        FS-->>Server: File bytes
        Server->>Server: Validate size ≤ 10 MiB
        Server->>Server: Detect MIME type
        Server->>Server: Encode to base64 data URL
        Server-->>TRPC: Return {dataUrl, byteLength} or error
        TRPC-->>Hook: Image data with result status
        Hook-->>UI: {imageData, isLoadingImage}
    else File is not Image
        Hook->>Hook: Skip image query
        Hook-->>UI: {imageData: undefined, isLoadingImage: false}
    end
    UI->>UI: Render image or error message based on imageData
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • AviPeltz

Poem

🐰 Hoppy times! A cottontail cheer,
Images now leap through the viewer so clear,
With size checks and MIME types just right,
The renderer shows images in brilliant light! 🖼️

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch kitenite/boar

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Kitenite Kitenite merged commit 44815ab into main Feb 3, 2026
4 of 5 checks passed
@Kitenite Kitenite deleted the kitenite/boar branch February 3, 2026 08:21
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 3, 2026

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

  • ✅ Neon database branch
  • ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant