feat(app): image preview in file tabs

[shuv1337]

Summary

• Always call list() for parent directory in file fetch (removes unnecessary conditional)
• Add image preview support in file tabs
• SVG files get a toggle to switch between rendered image and source code

Changes

• packages/app/src/context/local.tsx: Remove conditional check before list(parent)
• packages/app/src/pages/session.tsx: New FileTabContent component for rendering images and code with SVG toggle

Proof

Before:

Before.mp4

After:

After.mp4

Greptile Summary

Added image preview functionality to file tabs with special handling for SVG files. Users can now view images directly in tabs, and SVG files get a toggle to switch between rendered preview and source code view.

• Image Preview: New FileTabContent component detects base64-encoded images by mimeType and renders them with proper styling
• SVG Toggle: SVG files can be viewed as both rendered images and source code with toggle buttons
• File Loading: Simplified parent directory listing by removing conditional check - now always calls list(parent) regardless of parent path
• Code Refactor: Moved from inline file loading logic to dedicated FileTabContent component for better separation of concerns

Minor optimization opportunity: redundant local.file.init() call on line 946 since FileTabContent already handles initialization through local.file.node().

Confidence Score: 4/5

• This PR is safe to merge with minimal risk
• Clean feature addition with well-structured code following SolidJS patterns. The changes are isolated and straightforward - image detection via mimeType, proper reactive patterns with createMemo and createSignal, and appropriate component structure. Minor optimization opportunity with redundant init() call and potential edge case with empty parent path in list(), but neither should cause functional issues.
• No files require special attention

Important Files Changed

Filename	Overview
packages/app/src/context/local.tsx	Removed conditional check before calling list(parent) - now always calls even when parent is empty string
packages/app/src/pages/session.tsx	Added FileTabContent component with image preview and SVG toggle functionality, refactored tab content rendering

Sequence Diagram

sequenceDiagram
    participant User
    participant FileTabContent
    participant LocalContext
    participant SDK

    User->>FileTabContent: Opens file tab
    FileTabContent->>LocalContext: createResource(() => local.file.node(path))
    LocalContext->>LocalContext: init(path)
    LocalContext->>LocalContext: fetch(path)
    LocalContext->>LocalContext: Calculate parent directory
    LocalContext->>SDK: list(parent + "/")
    SDK-->>LocalContext: Return parent directory contents
    LocalContext->>SDK: read file content
    SDK-->>LocalContext: Return file with content & mimeType
    LocalContext-->>FileTabContent: Return file node

    alt Image file (base64 encoded)
        alt SVG file
            FileTabContent->>User: Show image with "View code" toggle
            User->>FileTabContent: Click "View code"
            FileTabContent->>FileTabContent: setShowCode(true)
            FileTabContent->>User: Show decoded SVG source with "View image" toggle
        else Non-SVG image
            FileTabContent->>User: Show image preview
        end
    else Text file
        FileTabContent->>User: Show code editor
    end

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: redundant call to init() - FileTabContent already calls local.file.node() which internally calls init()

Suggested change

	if (path) local.file.init(path)
	// File will be loaded by FileTabContent's createResource

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/app/src/pages/session.tsx
Line: 946:946

Comment:
**style:** redundant call to `init()` - `FileTabContent` already calls `local.file.node()` which internally calls `init()`

```suggestion
                    // File will be loaded by FileTabContent's createResource
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

style: verify list("") handles empty path correctly for root-level files

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/app/src/context/local.tsx
Line: 367:367

Comment:
**style:** verify `list("")` handles empty path correctly for root-level files

How can I resolve this? If you propose a fix, please make it concise.