From b5fe972acbbd7be4055b6eceeec5413169b41595 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 28 Jul 2026 13:02:43 +0100
Subject: [PATCH] Merge pull request #35940 from
 overleaf/dp-visual-markdown-beta-icon

Add beta badge for markdown files in the file tree

GitOrigin-RevId: 304f426de9232a6d2a5fe768ae7e8b8f48fcd4d8
---
 .../file-tree-item/file-tree-item-inner.tsx     | 17 +++++++++++++++--
 .../stylesheets/pages/editor/file-tree.scss     |  5 +++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.tsx
index 668a773323..e1735f42e5 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.tsx
@@ -40,6 +40,11 @@ function FileTreeItemInner({
     useFeatureFlag('bibtex-visual-editor') &&
     type !== 'folder' &&
     name.toLowerCase().endsWith('.bib')
+  const showMarkdownBadge =
+    useFeatureFlag('markdown-visual') &&
+    type !== 'folder' &&
+    (name.toLowerCase().endsWith('.md') ||
+      name.toLowerCase().endsWith('.markdown'))
 
   const { dragRef, setIsDraggable } = useDraggable(id)
 
@@ -93,7 +98,7 @@ function FileTreeItemInner({
     >
       <div
         className={classNames('entity-name', 'entity-name-react', {
-          'file-tree-has-bib-badge': showBibBadge,
+          'file-tree-has-beta-badge': showBibBadge || showMarkdownBadge,
         })}
         role="presentation"
         ref={itemRef}
@@ -106,13 +111,21 @@ function FileTreeItemInner({
           setIsDraggable={setIsDraggable}
         />
         {showBibBadge && (
-          <div className="file-tree-bib-badge text-white">
+          <div className="file-tree-beta-badge text-white">
             <SplitTestBadge
               splitTestName="bibtex-visual-editor"
               displayOnVariants={['enabled']}
             />
           </div>
         )}
+        {showMarkdownBadge && (
+          <div className="file-tree-beta-badge text-white">
+            <SplitTestBadge
+              splitTestName="markdown-visual"
+              displayOnVariants={['enabled']}
+            />
+          </div>
+        )}
         {hasMenu ? <FileTreeItemMenu id={id} name={name} /> : null}
       </div>
     </div>
diff --git a/services/web/frontend/stylesheets/pages/editor/file-tree.scss b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
index 66dc8a65ed..c50321931f 100644
--- a/services/web/frontend/stylesheets/pages/editor/file-tree.scss
+++ b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
@@ -406,7 +406,7 @@
         }
       }
 
-      .file-tree-bib-badge {
+      .file-tree-beta-badge {
         position: absolute;
         right: var(--spacing-09);
         top: 0;
@@ -418,6 +418,7 @@
           font-size: var(--font-size-03);
 
           &.labs-badge {
+            padding: var(--spacing-01);
             color: var(--white);
           }
 
@@ -427,7 +428,7 @@
         }
       }
 
-      .file-tree-has-bib-badge .item-name {
+      .file-tree-has-beta-badge .item-name {
         padding-right: var(--spacing-09);
       }