feat(mobile): add markdown preview toggle to the file header

apps/mobile/src/components/AndroidScreenHeader.tsx

@@ -18,6 +18,7 @@ export function AndroidHeaderIconButton(props: {
   readonly icon: AppSymbolName;
   readonly onPress?: () => void;
   readonly disabled?: boolean;
+  readonly filled?: boolean;
 }) {
   return (
     <Pressable
@@ -27,14 +28,21 @@ export function AndroidHeaderIconButton(props: {
       hitSlop={8}
       onPress={props.onPress}
       className={cn(
-        "size-11 items-center justify-center rounded-full bg-subtle",
+        "size-11 items-center justify-center rounded-full",
+        props.filled ? "bg-primary" : "bg-subtle",
         props.disabled && "opacity-55",
       )}
     >
       <SymbolView
         name={props.icon}
         size={20}
-        tintColorClassName={props.disabled ? "accent-icon-subtle" : "accent-foreground"}
+        tintColorClassName={
+          props.disabled
+            ? "accent-icon-subtle"
+            : props.filled
+              ? "accent-primary-foreground"
+              : "accent-foreground"
+        }
         type="monochrome"
       />
     </Pressable>

apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx

@@ -49,6 +49,9 @@ import {
 } from "../layout/native-mail-search-toolbar";
 import { WorkspaceSidebarToolbar } from "../layout/workspace-sidebar-toolbar";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
+import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
+import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { AsyncResult } from "effect/unstable/reactivity";
 import { ThreadRouteScreen } from "../threads/ThreadRouteScreen";
 import { FileMarkdownPreview } from "./FileMarkdownPreview";
 import { FileTreeBrowser } from "./FileTreeBrowser";
@@ -547,21 +550,42 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
     readonly mode: FileViewMode;
   } | null>(null);
   const [previewRevision, setPreviewRevision] = useState(0);
+  const preferencesResult = useAtomValue(mobilePreferencesAtom);
+  const savePreferences = useAtomSet(updateMobilePreferencesAtom);
+  const markdownPreviewEnabled =
+    AsyncResult.isSuccess(preferencesResult) &&
+    preferencesResult.value.markdownPreviewEnabled === true;
+  const primaryColor = useUniwindTheme()["--color-primary"];
   const previewKey = JSON.stringify([environmentId, cwd, relativePath, previewRevision]);
   const [fullScreenPreview, setFullScreenPreview] = useState<FilePreviewSource | null>(null);
   const isVideoFile = relativePath !== null && isVideoPreviewFile(relativePath);
   const isBrowserFile =
     relativePath !== null && !isVideoFile && isWorkspaceBrowserPreviewPath(relativePath);
   const isImageFile =
     relativePath !== null && !isVideoFile && isWorkspaceImagePreviewPath(relativePath);
+  const isMarkdownFile = relativePath !== null && isMarkdownPreviewFile(relativePath);
   const canPreview =
     relativePath !== null &&
     (isMarkdownPreviewFile(relativePath) || isBrowserFile || isImageFile || isVideoFile);
   const activeMode =
-    relativePath !== null && modeOverride?.path === relativePath
-      ? modeOverride.mode
-      : defaultViewMode(relativePath);
+    relativePath !== null && targetLine !== null
+      ? "source"
+      : relativePath !== null && modeOverride?.path === relativePath
+        ? modeOverride.mode
+        : isMarkdownFile && markdownPreviewEnabled
+          ? "preview"
+          : defaultViewMode(relativePath);
   const resolvedActiveMode = isVideoFile ? "preview" : canPreview ? activeMode : "source";
+  const handleToggleMarkdownMode = useCallback(() => {
+    if (relativePath === null || targetLine !== null) return;
+    const next: FileViewMode = resolvedActiveMode === "preview" ? "source" : "preview";
+    setModeOverride({ path: relativePath, mode: next });
+    void savePreferences({ markdownPreviewEnabled: next === "preview" });
+  }, [relativePath, resolvedActiveMode, savePreferences, targetLine]);
+  const markdownToggleLabel =
+    isMarkdownFile && resolvedActiveMode === "preview"
+      ? "Show markdown source"
+      : "Show rendered markdown";
   const assetPreviewPath = isBrowserFile || isImageFile || isVideoFile ? relativePath : null;
   const assetPreview = useWorkspaceFileAssetUrlState({
     cwd,
@@ -843,6 +867,14 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
           onBack={handleBack}
           trailing={
             <>
+              {isMarkdownFile && targetLine === null ? (
+                <AndroidHeaderIconButton
+                  accessibilityLabel={markdownToggleLabel}
+                  icon={resolvedActiveMode === "preview" ? "doc.text" : "eye"}
+                  onPress={handleToggleMarkdownMode}
+                  filled={resolvedActiveMode === "preview"}
+                />
+              ) : null}
               {fileInspector.supported ? (
                 <AndroidHeaderIconButton
                   accessibilityLabel={
@@ -884,6 +916,15 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
             separateBackground
           />
         ) : null}
+        {isMarkdownFile && targetLine === null ? (
+          <NativeHeaderToolbar.Button
+            accessibilityLabel={markdownToggleLabel}
+            icon={resolvedActiveMode === "preview" ? "doc.text" : "eye"}
+            onPress={handleToggleMarkdownMode}
+            separateBackground
+            tintColor={resolvedActiveMode === "preview" ? primaryColor : undefined}
+          />
+        ) : null}
         <NativeHeaderToolbar.Menu accessibilityLabel="File actions" icon="ellipsis">
           {fileMenuActions.some(({ inline }) => inline) ? (
             <NativeHeaderToolbar.Menu inline>

apps/mobile/src/persistence/mobile-preferences.ts

@@ -26,6 +26,8 @@ export interface Preferences {
   readonly markdownFontSize?: number;
   readonly codeFontSize?: number | null;
   readonly codeWordBreak?: boolean;
+  /** Device-local mirror of web's `renderMarkdown` preference for markdown file previews. */
+  readonly markdownPreviewEnabled?: boolean;
   readonly connectOnboardingOptOutAccounts?: ReadonlyArray<string>;
   readonly collapsedProjectGroups?: readonly string[];
   /** @deprecated Kept temporarily so older OTA bundles retain the selected mode. */
@@ -95,6 +97,7 @@ function sanitizePreferences(parsed: Preferences): Preferences {
     markdownFontSize?: number;
     codeFontSize?: number | null;
     codeWordBreak?: boolean;
+    markdownPreviewEnabled?: boolean;
     connectOnboardingOptOutAccounts?: ReadonlyArray<string>;
     collapsedProjectGroups?: readonly string[];
     projectGroupingEnabled?: boolean;
@@ -144,6 +147,9 @@ function sanitizePreferences(parsed: Preferences): Preferences {
     preferences.codeFontSize = parsed.codeFontSize;
   }
   if (typeof parsed.codeWordBreak === "boolean") preferences.codeWordBreak = parsed.codeWordBreak;
+  if (typeof parsed.markdownPreviewEnabled === "boolean") {
+    preferences.markdownPreviewEnabled = parsed.markdownPreviewEnabled;
+  }
   if (Array.isArray(parsed.connectOnboardingOptOutAccounts)) {
     preferences.connectOnboardingOptOutAccounts = parsed.connectOnboardingOptOutAccounts.filter(
       (account): account is string => typeof account === "string",