breadcrumbs

ui/shared/monaco/CodeEditor.tsx

 import { Box, useColorMode, Flex } from '@chakra-ui/react';
+import type { EditorProps } from '@monaco-editor/react';
 import MonacoEditor from '@monaco-editor/react';
 import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import React from 'react';
 
 import type { File, Monaco } from './types';
 
+import CodeEditorBreadcrumbs from './CodeEditorBreadcrumbs';
 import CodeEditorSideBar from './CodeEditorSideBar';
 import CodeEditorTabs from './CodeEditorTabs';
 import * as themes from './utils/themes';
 
-const EDITOR_OPTIONS = {
+const EDITOR_OPTIONS: EditorProps['options'] = {
   readOnly: true,
   minimap: { enabled: false },
+  scrollbar: {
+    alwaysConsumeMouseWheel: true,
+  },
 };
 
 interface Props {
@@ -84,6 +89,7 @@ const CodeEditor = ({ data }: Props) => {
     <Flex overflow="hidden" borderRadius="md" height="540px" position="relative">
       <Box flexGrow={ 1 }>
         <CodeEditorTabs tabs={ tabs } activeTab={ data[index].file_path } onTabSelect={ handleTabSelect } onTabClose={ handleTabClose }/>
+        <CodeEditorBreadcrumbs path={ data[index].file_path }/>
         <MonacoEditor
           language="sol"
           path={ data[index].file_path }

ui/shared/monaco/CodeEditorBreadcrumbs.tsx

+import { Flex, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import stripLeadingSlash from 'lib/stripLeadingSlash';
+
+interface Props {
+  path: string;
+}
+
+const CodeEditorBreadcrumbs = ({ path }: Props) => {
+  const chunks = stripLeadingSlash(path).split('/');
+  return (
+    <Flex fontSize="sm" color="text_secondary" pl={ 2 } flexWrap="wrap">
+      { chunks.map((chunk, index) => {
+
+        return (
+          <React.Fragment key={ index }>
+            { index !== 0 && <Box mx={ 1 }>{ '>' }</Box> }
+            <Box>{ chunk }</Box>
+          </React.Fragment>
+        );
+      }) }
+    </Flex>
+  );
+};
+
+export default React.memo(CodeEditorBreadcrumbs);