feat(client): Editor file visual indication (#59186)

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);

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}