Skip to content

feat(app): add markdown preview/source toggle for file tabs#22079

Open
alankyshum wants to merge 3 commits intoanomalyco:devfrom
alankyshum:feat/markdown-preview
Open

feat(app): add markdown preview/source toggle for file tabs#22079
alankyshum wants to merge 3 commits intoanomalyco:devfrom
alankyshum:feat/markdown-preview

Conversation

@alankyshum
Copy link
Copy Markdown

@alankyshum alankyshum commented Apr 11, 2026 •
edited
Loading

Issue for this PR

Continues #13704

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.

Changes:

  • file-tabs.tsx — Added a MarkdownToggle component that renders Preview/Source toggle buttons when the active file is Markdown. Uses createSignal for view mode state. The preview renders markdown to HTML using the existing markdown utility. Source view shows the raw file content with syntax highlighting.
  • i18n files — Added "preview" and "source" translation keys across all 17 locale files for the toggle button labels.

This reimplements the approach from #13704 by @kimi-chen from scratch against the current dev branch after significant codebase refactoring made the original PR unmergeable.

How did you verify your code works?

  • Tested locally with various .md and .markdown files
  • Verified toggle switches correctly between rendered preview and raw source
  • Verified comment clicks switch to Source view automatically
  • Confirmed no regressions for non-markdown file tabs
  • All unit tests pass (bun test)
  • TypeScript typecheck passes (bun typecheck)
  • All CI checks pass (unit tests, e2e Linux, typecheck, nix-eval, pr-standards)
  • e2e (windows) has 1 flaky failure in settings.spec.ts (same as upstream dev branch — pre-existing, unrelated to this PR)

Screenshots / recordings

Toggle appears as a sticky toolbar with Preview and Source buttons at the top of the file content area when viewing markdown files.

image

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 11, 2026

The following comment was made by an LLM, it may be inaccurate:

Related PR Found

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

Relationship: This is the original PR that the current PR #22079 reimplements. According to the description, PR #22079 "reimplements the approach from #13704 by @kimi-chen from scratch against the current dev branch after significant codebase refactoring made the original PR unmergeable." This is intentional - the current PR supersedes the older one with an updated implementation compatible with the current codebase.

@alankyshum alankyshum force-pushed the feat/markdown-preview branch from 7cd6779 to ceab56e Compare April 11, 2026 20:05
@alankyshum alankyshum closed this Apr 12, 2026
@alankyshum alankyshum reopened this Apr 12, 2026
alankyshum
alankyshum commented Apr 12, 2026
View reviewed changes
Copy link
Copy Markdown
Author

@alankyshum alankyshum left a comment •
edited
Loading

Choose a reason for hiding this comment

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

(internal note — disregard)

@KnutZuidema
Copy link
Copy Markdown
Contributor

KnutZuidema commented Apr 12, 2026

This would also address #14187, I think.
Just commenting to link the issue and PR.

@KnutZuidema
Copy link
Copy Markdown
Contributor

KnutZuidema commented Apr 12, 2026

image There's a rendering problem, where the file contents are shown behind the top bar for switching between preview and source views.

@alankyshum
Copy link
Copy Markdown
Author

alankyshum commented Apr 13, 2026

Fix: Rendering issue resolved

@KnutZuidema Thanks for the bug report! The rendering issue was caused by invalid Tailwind CSS class names:

  • bg-surface → bg-surface-base (toolbar was rendering with transparent background)
  • bg-surface-active → bg-surface-base-active (toggle button active state)
  • text-text → text-text-base (button text color)
  • border-border → border-border-base (toolbar border)

Also added defensive guard against binary .md files on the preview Match condition.

Fixed in commit 29e8ade.

alankyshum
alankyshum commented Apr 13, 2026
View reviewed changes
Copy link
Copy Markdown
Author

@alankyshum alankyshum left a comment •
edited
Loading

Choose a reason for hiding this comment

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

(internal note — disregard)

@github-actions github-actions bot mentioned this pull request Apr 13, 2026
Open
@alankyshum alankyshum force-pushed the feat/markdown-preview branch from 66aacde to e4a4507 Compare April 13, 2026 22:16
alankyshum and others added 2 commits April 16, 2026 21:33
@alankyshum @kimi-chen @Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
e74fb95 
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.

Based on work by @kimi-chen in anomalyco#13704.

Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@alankyshum
fix(app): use correct theme CSS classes for markdown toolbar
3cf0eec 
- bg-surface → bg-surface-base (fixes transparent toolbar background)
- bg-surface-active → bg-surface-base-active (fixes toggle button state)
- text-text → text-text-base (fixes button text color)
- border-border → border-border-base (fixes toolbar border)
- Add binary content guard on preview Match condition

Fixes rendering issue reported by KnutZuidema where file contents
showed behind the toolbar due to transparent background.

Refs: BLD-1

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@alankyshum alankyshum force-pushed the feat/markdown-preview branch from e4a4507 to 3cf0eec Compare April 17, 2026 04:33
@alankyshum
Copy link
Copy Markdown
Author

alankyshum commented Apr 17, 2026

Hi @KnutZuidema Please let me know what I need to do to get this PR approved.

@KnutZuidema
Copy link
Copy Markdown
Contributor

KnutZuidema commented Apr 17, 2026

@alankyshum I'm not a maintainer, so I can't tell you.

I would like to see this feature merged as well though.

@alankyshum
Copy link
Copy Markdown
Author

alankyshum commented Apr 17, 2026

cc @adamdotdevin

@alankyshum
fix(app): use opaque background for markdown toolbar to prevent conte…
3c83bc7 
…nt bleed-through

The toolbar used bg-surface-base which resolves to rgba(0,0,0,0.031) — nearly
transparent. When scrolling, file contents were visible behind the sticky
toolbar. Switch to bg-background-base (#f8f8f8/#101010) which is fully opaque,
matching the pattern used by other sticky headers in the app.
@github-actions github-actions bot mentioned this pull request Apr 19, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@adamdotdevin adamdotdevin Awaiting requested review from adamdotdevin adamdotdevin is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alankyshum @KnutZuidema