feat(app): Render markdown files in file pane (#427)

Detect .md and .markdown files in the shared file pane and render them as markdown instead of syntax highlighted code. This makes README-style files easier to read without changing the existing preview flow for other text files or .mdx.

Keep the change focused to the app renderer by reusing the existing markdown stack and adding a narrow extension check with targeted coverage.

packages/app/src/components/file-pane-render-mode.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { isRenderedMarkdownFile } from "@/components/file-pane-render-mode";
+
+describe("isRenderedMarkdownFile", () => {
+  it("detects .md files", () => {
+    expect(isRenderedMarkdownFile("README.md")).toBe(true);
+    expect(isRenderedMarkdownFile("docs/guide.MD")).toBe(true);
+  });
+
+  it("detects .markdown files", () => {
+    expect(isRenderedMarkdownFile("notes.markdown")).toBe(true);
+    expect(isRenderedMarkdownFile("docs/CHANGELOG.MARKDOWN")).toBe(true);
+  });
+
+  it("does not treat .mdx files as rendered markdown", () => {
+    expect(isRenderedMarkdownFile("page.mdx")).toBe(false);
+  });
+
+  it("does not treat other text files as rendered markdown", () => {
+    expect(isRenderedMarkdownFile("src/index.ts")).toBe(false);
+    expect(isRenderedMarkdownFile("README.md.txt")).toBe(false);
+  });
+});

packages/app/src/components/file-pane-render-mode.ts

@@ -0,0 +1,4 @@
+export function isRenderedMarkdownFile(filePath: string): boolean {
+  const normalizedPath = filePath.trim().toLowerCase();
+  return normalizedPath.endsWith(".md") || normalizedPath.endsWith(".markdown");
+}

packages/app/src/components/file-pane.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
+import Markdown, { MarkdownIt } from "react-native-markdown-display";
 import {
   ActivityIndicator,
   Image as RNImage,
@@ -20,7 +21,9 @@ import {
   type HighlightStyle,
 } from "@getpaseo/highlight";
 import { lineNumberGutterWidth } from "@/components/code-insets";
+import { isRenderedMarkdownFile } from "@/components/file-pane-render-mode";
 import { isWeb } from "@/constants/platform";
+import { createMarkdownStyles } from "@/styles/markdown-styles";
 
 interface CodeLineProps {
   tokens: HighlightToken[];
@@ -117,6 +120,9 @@ function FilePreviewBody({
   const isDark = theme.colorScheme === "dark";
   const colorMap = isDark ? darkHighlightColors : lightHighlightColors;
   const baseColor = isDark ? "#c9d1d9" : "#24292f";
+  const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
+  const markdownParser = useMemo(() => MarkdownIt({ typographer: true, linkify: true }), []);
+  const isMarkdownFile = preview?.kind === "text" && isRenderedMarkdownFile(filePath);
 
   const previewScrollRef = useRef<RNScrollView>(null);
   const scrollbar = useWebScrollViewScrollbar(previewScrollRef, {
@@ -124,12 +130,12 @@ function FilePreviewBody({
   });
 
   const highlightedLines = useMemo(() => {
-    if (!preview || preview.kind !== "text") {
+    if (!preview || preview.kind !== "text" || isMarkdownFile) {
       return null;
     }
 
     return highlightCode(preview.content ?? "", filePath);
-  }, [preview?.kind, preview?.content, filePath]);
+  }, [isMarkdownFile, preview?.kind, preview?.content, filePath]);
 
   const gutterWidth = useMemo(() => {
     if (!highlightedLines) return 0;
@@ -154,6 +160,28 @@ function FilePreviewBody({
   }
 
   if (preview.kind === "text") {
+    if (isMarkdownFile) {
+      return (
+        <View style={styles.previewScrollContainer}>
+          <RNScrollView
+            ref={previewScrollRef}
+            style={styles.previewContent}
+            contentContainerStyle={styles.previewMarkdownScrollContent}
+            onLayout={scrollbar.onLayout}
+            onScroll={scrollbar.onScroll}
+            onContentSizeChange={scrollbar.onContentSizeChange}
+            scrollEventThrottle={16}
+            showsVerticalScrollIndicator={!showDesktopWebScrollbar}
+          >
+            <Markdown style={markdownStyles} markdownit={markdownParser}>
+              {preview.content ?? ""}
+            </Markdown>
+          </RNScrollView>
+          {scrollbar.overlay}
+        </View>
+      );
+    }
+
     const lines = highlightedLines ?? [[{ text: preview.content ?? "", style: null }]];
     const codeLines = (
       <View>
@@ -329,6 +357,9 @@ const styles = StyleSheet.create((theme) => ({
   previewCodeScrollContent: {
     padding: theme.spacing[4],
   },
+  previewMarkdownScrollContent: {
+    padding: theme.spacing[4],
+  },
   previewImageScrollContent: {
     flexGrow: 1,
     padding: theme.spacing[4],