From 8eee5ca8bfd79f47f1283c5756ff677c537fe3da Mon Sep 17 00:00:00 2001
From: Arif Khalid <88131400+Arif-Khalid@users.noreply.github.com>
Date: Thu, 17 Jul 2025 00:24:46 +0800
Subject: [PATCH] feat(client): Editor file visual indication (#59186)

---
 client/src/templates/Challenges/classic/editor.css |  8 ++++++++
 client/src/templates/Challenges/classic/editor.tsx |  7 +++++++
 e2e/multifile-editor.spec.ts                       | 11 ++---------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css
index 50d7e944fab..bbea71a0d3c 100644
--- a/client/src/templates/Challenges/classic/editor.css
+++ b/client/src/templates/Challenges/classic/editor.css
@@ -60,6 +60,14 @@ textarea.inputarea {
   white-space: pre-wrap;
 }
 
+.editor-file-name {
+  font-size: 18px;
+  font-weight: bold;
+  border-bottom: 1px solid var(--quaternary-background);
+  padding-left: 11px;
+  overflow: hidden;
+}
+
 .action-row-container,
 .description-container {
   background-color: var(--secondary-background);
diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index fa43fa0a6b4..1f3bd52bc83 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -1317,8 +1317,15 @@ const Editor = (props: EditorProps): JSX.Element => {
     return challengeIsComplete();
   };
 
+  const challengeFile = props.challengeFiles?.find(
+    challengeFile => challengeFile.fileKey === props.fileKey
+  );
+  const showFileName = challengeFile && props.challengeFiles!.length > 1;
   return (
     <Suspense fallback={<Loader loaderDelay={600} />}>
+      {showFileName && (
+        <div className='editor-file-name'>{`${challengeFile.name}.${challengeFile.ext}`}</div>
+      )}
       <span className='notranslate'>
         <MonacoEditor
           editorDidMount={editorDidMount}
diff --git a/e2e/multifile-editor.spec.ts b/e2e/multifile-editor.spec.ts
index 15588a81064..5eef51ebc75 100644
--- a/e2e/multifile-editor.spec.ts
+++ b/e2e/multifile-editor.spec.ts
@@ -12,8 +12,7 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('MultifileEditor Component', () => {
   test('Multiple editors should be selected and able to insert text into', async ({
-    page,
-    isMobile
+    page
   }) => {
     // Spawn second editor to test MultifileEditor component
     const stylesEditor = page.getByRole('button', {
@@ -31,13 +30,7 @@ test.describe('MultifileEditor Component', () => {
     const test_string = 'TestString';
     let index = 0;
     for (const editor of await editors.all()) {
-      // For some reason the click event doesn't work on mobile
-      if (isMobile) {
-        await editor.focus();
-      } else {
-        await editor.click();
-      }
-
+      await editor.focus();
       await page.keyboard.insertText(test_string + index.toString());
       const text = page.getByText(test_string + index.toString());
       await expect(text).toBeVisible();