feat(app): add preview and source view options for markdown files in file tabs

[kimi-chen]

Description

This PR closes#13705 by adding a preview/source toggle for Markdown files in the file viewer, allowing users to switch between rendered markdown preview and raw source code.

What's Changed

UI Enhancement:

• Added a toggle button group (Preview/Source) that appears at the top of Markdown files
• Preview mode is enabled by default when opening .md or .markdown files
• Users can switch between:
  • Preview mode (eye icon): Renders the markdown content
  • Source mode (code icon): Shows the raw markdown code

Implementation Details:

• Added isMarkdown() memo to detect Markdown files by extension
• Introduced previewMode signal to track the current view state
• Integrated IconButton and Markdown components from the UI library
• Preview uses the existing Markdown component with proper caching

Internationalization:
Added translations for the new UI elements in all supported language

Files Modified

• packages/app/src/pages/session/file-tabs.tsx - Main implementation
• packages/app/src/i18n/*.ts - Translation strings for all languages

[github-actions]

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

1. Open an issue describing the bug/feature (if one doesn't exist)
2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

[Copilot]

Pull request overview

Adds a Preview/Source toggle specifically for Markdown files in the session file tabs, enabling users to switch between rendered Markdown and the raw file contents.

Changes:

• Detect Markdown files by extension and track a per-tab previewMode state (defaulting to Preview for Markdown).
• Render a sticky toggle header (Preview/Source) for Markdown files and display the Markdown component in Preview mode.
• Add new i18n strings for the toggle labels in several locales.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/app/src/pages/session/file-tabs.tsx	Adds Markdown detection, preview state, toggle UI, and Markdown rendering path.
packages/app/src/i18n/en.ts	Adds English strings for “Preview” / “Source”.
packages/app/src/i18n/de.ts	Adds German strings for “Preview” / “Source”.
packages/app/src/i18n/fr.ts	Adds French strings for “Preview” / “Source”.
packages/app/src/i18n/es.ts	Adds Spanish strings for “Preview” / “Source”.
packages/app/src/i18n/ja.ts	Adds Japanese strings for “Preview” / “Source”.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

When previewMode() is true, the code viewer (renderCode) is not mounted, which also removes line selection + inline comment rendering. As a result, if props.comments.focus() targets a markdown file (e.g. navigating to an existing comment), the focused comment won’t be visible until the user manually switches to Source. Consider auto-switching to Source when a focused comment is for the current file (or when there are existing comments for the file) to preserve the existing focus/navigation behavior.

[kimi-chen]

@copilot open a new pull request to apply changes based on this feedback

[maxthman36]

Hi, Also, would like to see this feature merged. I looked into this and put together a fix. In the createEffect that handles props.comments.focus() (around line 244), adding these 5 lines before the requestAnimationFrame call resolves it:

// Auto-switch to Source view if in Preview mode for markdown files
// so that the focused comment is visible (comments are only rendered in source view)
if (isMarkdown() && previewMode()) {
setPreviewMode(false)
}

So the full effect becomes:

createEffect(() => {
const focus = props.comments.focus()
const p = path()
if (!focus || !p) return
if (focus.file !== p) return
if (props.activeTab() !== props.tab) return
const target = fileComments().find((comment) => comment.id === focus.id)
if (!target) return
setNote("openedComment", target.id)
setNote("commenting", null)
props.file.setSelectedLines(p, target.selection)
// Auto-switch to Source view if in Preview mode for markdown files
// so that the focused comment is visible (comments are only rendered in source view)
if (isMarkdown() && previewMode()) {
setPreviewMode(false)
}
requestAnimationFrame(() => props.comments.clearFocus())
})

[alankyshum]

Hey @kimi-chen — are you still working on this? I'd love to see this feature land. The PR currently has merge conflicts with dev and the unit/test CI checks are failing.

Happy to help rebase and fix the tests if you'd like, or I can open a fresh PR based on your work (with credit, of course). Just let me know!