Skip to content

fix(ui): add back file split view#3632

Merged
TheodoreSpeaks merged 4 commits intostagingfrom
fix/add-back-split-file
Mar 17, 2026
Merged

fix(ui): add back file split view#3632
TheodoreSpeaks merged 4 commits intostagingfrom
fix/add-back-split-file

Conversation

@TheodoreSpeaks
Copy link
Collaborator

@TheodoreSpeaks TheodoreSpeaks commented Mar 17, 2026

Summary

During a refactor we got rid of file split screens. This adds it back.

Now all files default to preview mode if one exists. They can then toggle to full screen edit -> split screen edit -> back to preview

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: ___________

Testing

Validated that html, md now have split view, icons are correct.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

@cursor
Copy link

cursor bot commented Mar 17, 2026

PR Summary

Low Risk
UI-only change to file viewing state; risk is limited to regressions in preview/editor toggling for editable/previewable files.

Overview
Replaces the binary showPreview toggle in Files with a previewMode state (editor/split/preview) and wires it through to FileViewer, restoring the split-screen experience for files that are both text-editable and previewable.

Updates header actions to cycle modes (including a new split-view button) and adjusts default mode selection when opening/creating files based on whether the file is previewable. Adds and exports a new Columns2 icon used for the split-view action.

Written by Cursor Bugbot for commit f2d1a52. This will update automatically on new commits. Configure here.

@vercel
Copy link

vercel bot commented Mar 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Mar 17, 2026 5:42pm

Request Review

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

@TheodoreSpeaks TheodoreSpeaks merged commit 70d8df5 into staging Mar 17, 2026
12 checks passed
@TheodoreSpeaks TheodoreSpeaks deleted the fix/add-back-split-file branch March 17, 2026 17:49
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Mar 17, 2026

Greptile Summary

This PR restores the file split-view feature that was lost during a previous refactor. The showPreview: boolean state in Files is replaced with a three-value PreviewMode type ('editor' | 'split' | 'preview'), and a new handleCyclePreviewMode callback drives a forward cycle (editor → split → preview → editor). A new Columns2 SVG icon is added to the EMCN icon library to represent the split-view action. Files that support both editing and preview now default to preview mode; newly created files still start in editor mode.

Key changes:

  • previewMode state replaces showPreview boolean throughout files.tsx
  • handleCyclePreviewMode cycles: editor → split → preview → editor; handleTogglePreview is kept as a two-state fallback for the (currently unreachable) case where a file is previewable but not text-editable
  • The useEffect that initialises previewMode on file selection now includes files in its dependency array — this introduces a regression where the user's manually chosen view mode is reset whenever the files query refetches in the background (window focus, mutation invalidation, etc.)
  • Columns2 icon added and exported alphabetically from the icon index

Confidence Score: 3/5

  • Safe to merge with one regression fix — the files dependency in the selection effect resets user-chosen view mode on every background refetch.
  • The feature logic itself is sound and the icon addition is clean. The single P1 issue (stale files dependency in the useEffect) is a UX regression that will be reproducible whenever the files query invalidates (after any rename, upload, or delete, or on window focus).
  • apps/sim/app/workspace/[workspaceId]/files/files.tsx — specifically the useEffect at line 478–490

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/files/files.tsx Replaces boolean showPreview state with a three-value PreviewMode (editor/split/preview) and adds handleCyclePreviewMode to drive a forward cycle. The main concern is that files was added to the useEffect dependency array, which causes previewMode to silently reset to the file's default on every background refetch, discarding the user's manually chosen view mode.
apps/sim/components/emcn/icons/columns2.tsx New SVG icon for the split-view button. Follows the existing pattern for custom icons in the emcn library; paths and viewBox look correct.
apps/sim/components/emcn/icons/index.ts Adds Columns2 export in alphabetical order between ClipboardList and Columns3. No issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[File selected] --> B{isJustCreated?}
    B -->|Yes| C[previewMode = 'editor']
    B -->|No| D{isPreviewable?}
    D -->|Yes| E[previewMode = 'preview']
    D -->|No| F[previewMode = 'editor']

    subgraph hasSplitView [hasSplitView = canEditText AND canPreview]
        G["Button: label/icon shows NEXT mode\n(editor→'Split', split→'Preview', preview→'Edit')"]
        G -->|click| H[handleCyclePreviewMode]
        H -->|editor| I[split]
        H -->|split| J[preview]
        H -->|preview| K[editor]
    end

    subgraph previewOnly [canPreview only - currently unreachable]
        L["Button: 'Edit' / 'Preview'"]
        L -->|click| M[handleTogglePreview\npreview ↔ editor]
    end

    E --> hasSplitView
    F --> FC[Save / Download / Delete actions only]
Loading

Last reviewed commit: f2d1a52

const canPreview = file ? isPreviewable(file) : false
setPreviewMode(canPreview ? 'preview' : 'editor')
}
}, [selectedFileId, files])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 previewMode resets on every background files refetch

Adding files to this effect's dependency array means that whenever the useWorkspaceFiles query refetches (e.g., on window focus, network reconnect, or after any mutation like a rename/upload/delete), the effect re-runs and resets previewMode to the file's default. A user who manually switches from preview to editor mode will silently have their preference discarded on the next background data refresh.

The original code only had [selectedFileId] as a dependency, which is the correct intent — the mode should only reset when the user navigates to a different file.

The simplest fix is to exclude files from the dependency array with a suppression comment explaining the intent:

Suggested change
}, [selectedFileId, files])
}, [selectedFileId]) // intentionally excluding `files` — previewMode should only reset when the selected file changes, not on every refetch

If the lint warning is a concern, you can capture files in a ref that does not trigger the effect:

const filesRef = useRef(files)
useEffect(() => { filesRef.current = files }, [files])

useEffect(() => {
  // ...
  const file = selectedFileId ? filesRef.current.find((f) => f.id === selectedFileId) : null
  // ...
}, [selectedFileId])

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