highlight selected file

ui/shared/monaco/CodeEditor.tsx

@@ -98,7 +98,7 @@ const CodeEditor = ({ data }: Props) => {
           onMount={ handleEditorDidMount }
         />
       </Box>
-      <CodeEditorSideBar data={ data } onFileSelect={ handleSelectFile } monaco={ instance }/>
+      <CodeEditorSideBar data={ data } onFileSelect={ handleSelectFile } monaco={ instance } selectedFile={ data[index].file_path }/>
     </Flex>
   );
 };

ui/shared/monaco/CodeEditorFileExplorer.tsx

@@ -10,9 +10,10 @@ import composeFileTree from './utils/composeFileTree';
 interface Props {
   data: Array<File>;
   onFileSelect: (index: number) => void;
+  selectedFile: string;
 }
 
-const CodeEditorFileExplorer = ({ data, onFileSelect }: Props) => {
+const CodeEditorFileExplorer = ({ data, onFileSelect, selectedFile }: Props) => {
   const [ key, setKey ] = React.useState(0);
   const tree = React.useMemo(() => {
     return composeFileTree(data);
@@ -34,7 +35,7 @@ const CodeEditorFileExplorer = ({ data, onFileSelect }: Props) => {
   return (
     <Box>
       <CoderEditorCollapseButton onClick={ handleCollapseButtonClick } label="Collapse folders"/>
-      <CodeEditorFileTree key={ key } tree={ tree } onItemClick={ handleFileClick } isCollapsed={ key > 0 }/>
+      <CodeEditorFileTree key={ key } tree={ tree } onItemClick={ handleFileClick } isCollapsed={ key > 0 } selectedFile={ selectedFile }/>
     </Box>
   );
 };

ui/shared/monaco/CodeEditorFileTree.tsx

@@ -15,9 +15,10 @@ interface Props {
   level?: number;
   isCollapsed?: boolean;
   onItemClick: (event: React.MouseEvent) => void;
+  selectedFile: string;
 }
 
-const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed }: Props) => {
+const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed, selectedFile }: Props) => {
   const itemProps: ChakraProps = {
     borderWidth: '0px',
     cursor: 'pointer',
@@ -55,7 +56,13 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed }: Props
                       { leafName }
                     </AccordionButton>
                     <AccordionPanel p="0">
-                      <CodeEditorFileTree tree={ leaf.children } level={ level + 1 } onItemClick={ onItemClick } isCollapsed={ isCollapsed }/>
+                      <CodeEditorFileTree
+                        tree={ leaf.children }
+                        level={ level + 1 }
+                        onItemClick={ onItemClick }
+                        isCollapsed={ isCollapsed }
+                        selectedFile={ selectedFile }
+                      />
                     </AccordionPanel>
                   </>
                 ) }
@@ -77,8 +84,9 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed }: Props
               alignItems="center"
               overflow="hidden"
               _hover={{
-                bgColor: rowHoverBgColor,
+                bgColor: selectedFile === leaf.file_path ? colors.selection.bgColorSelected : rowHoverBgColor,
               }}
+              bgColor={ selectedFile === leaf.file_path ? colors.selection.bgColorSelected : 'none' }
             >
               <Icon as={ icon } boxSize="16px" mr="4px"/>
               { leafName }

ui/shared/monaco/CodeEditorSideBar.tsx

@@ -13,9 +13,10 @@ interface Props {
   monaco: Monaco | undefined;
   data: Array<File>;
   onFileSelect: (index: number, lineNumber?: number) => void;
+  selectedFile: string;
 }
 
-const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
+const CodeEditorSideBar = ({ onFileSelect, data, monaco, selectedFile }: Props) => {
 
   const [ isStuck, setIsStuck ] = React.useState(false);
 
@@ -59,7 +60,7 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
 
         <TabPanels>
           <TabPanel p={ 0 }>
-            <CodeEditorFileExplorer data={ data } onFileSelect={ onFileSelect }/>
+            <CodeEditorFileExplorer data={ data } onFileSelect={ onFileSelect } selectedFile={ selectedFile }/>
           </TabPanel>
           <TabPanel p={ 0 }>
             <CodeEditorSearch data={ data } onFileSelect={ onFileSelect } monaco={ monaco } isInputStuck={ isStuck }/>

ui/shared/monaco/CodeEditorTab.tsx

@@ -50,7 +50,7 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
       borderBottomColor={ isActive ? 'transparent' : borderColorInactive }
       color={ isActive ? color : colorInactive }
       alignItems="center"
-      fontWeight={ 500 }
+      fontWeight={ 400 }
       cursor="pointer"
       onClick={ handleClick }
       _hover={{

ui/shared/monaco/utils/useColors.ts

@@ -9,5 +9,8 @@ export default function useColors() {
       bgColorHover: useColorModeValue('rgba(184, 184, 184, 0.31)', 'rgba(90, 93, 94, 0.31)'),
       color: '#616161',
     },
+    selection: {
+      bgColorSelected: useColorModeValue('#e4e6f1', '#37373d'),
+    },
   };
 }