From ea94771624bbffcdebfbdf36f964a73407c8d596 Mon Sep 17 00:00:00 2001
From: Tom Wells <wellsthomas@hotmail.co.uk>
Date: Mon, 11 May 2026 09:45:23 +0100
Subject: [PATCH] Add SplitTestBadge to file tree for .bib files (#33460)

GitOrigin-RevId: 7ae109844d5d0b984eeec25ea22572b304375c47
---
 .../file-tree-item/file-tree-item-inner.tsx   | 19 ++++++++++++--
 .../stylesheets/pages/editor/file-tree.scss   | 25 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 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 b8c4dd56ab..668a773323 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
@@ -8,6 +8,8 @@ import { useDraggable } from '../../contexts/file-tree-draggable'
 
 import FileTreeItemName from './file-tree-item-name'
 import FileTreeItemMenu from './file-tree-item-menu'
+import SplitTestBadge from '@/shared/components/split-test-badge'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import { useDragDropManager } from 'react-dnd'
@@ -30,11 +32,14 @@ function FileTreeItemInner({
   const { fileTreeReadOnly } = useFileTreeData()
   const { setContextMenuCoords } = useFileTreeMainContext()
   const { isRenaming } = useFileTreeActionable()
-
   const { selectedEntityIds } = useFileTreeSelectable()
 
   const hasMenu =
     !fileTreeReadOnly && isSelected && selectedEntityIds.size === 1
+  const showBibBadge =
+    useFeatureFlag('bibtex-visual-editor') &&
+    type !== 'folder' &&
+    name.toLowerCase().endsWith('.bib')
 
   const { dragRef, setIsDraggable } = useDraggable(id)
 
@@ -87,7 +92,9 @@ function FileTreeItemInner({
       data-file-type={type}
     >
       <div
-        className="entity-name entity-name-react"
+        className={classNames('entity-name', 'entity-name-react', {
+          'file-tree-has-bib-badge': showBibBadge,
+        })}
         role="presentation"
         ref={itemRef}
       >
@@ -98,6 +105,14 @@ function FileTreeItemInner({
           onClick={onClick}
           setIsDraggable={setIsDraggable}
         />
+        {showBibBadge && (
+          <div className="file-tree-bib-badge text-white">
+            <SplitTestBadge
+              splitTestName="bibtex-visual-editor"
+              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 68f4bf8047..4b26760b37 100644
--- a/services/web/frontend/stylesheets/pages/editor/file-tree.scss
+++ b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
@@ -485,6 +485,31 @@
         }
       }
 
+      .file-tree-bib-badge {
+        position: absolute;
+        right: var(--spacing-09);
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+
+        .material-symbols {
+          font-size: var(--font-size-03);
+
+          &.labs-badge {
+            color: var(--white);
+          }
+
+          &.info-badge {
+            color: var(--blue-50);
+          }
+        }
+      }
+
+      .file-tree-has-bib-badge .item-name {
+        padding-right: var(--spacing-09);
+      }
+
       .menu-button {
         position: absolute;
         right: 0;