UI Fixes Checklist for File Explorer

[SwapnilChand]

Description

This issue outlines a series of UI fixes needed for the file explorer component. The goal is to enhance user experience by addressing various visual and functional inconsistencies. The following items need to be implemented to improve the overall usability and aesthetic of the interface.

• Combine Editor and Explorer: Combine Project Explorer and Editor into a Single Interface #198
• Simpler Project Explorer UI: Remove shadow effects and padding (p-0) from the project explorer component.
• Add a context menu: Replace the buttons for adding and deleting files / folders, with a context menu. Show Add File/Folder/Delete Options in a Context Menu in Project Explorer #200
• Remove folder guide borders: Remove guiding lines seen within an expanded folder, for a clean UI.
• Hide .json file extensions: Use the following code snippet to hide ".json" from being displayed in the UI:

  {node.type === "file" ? node.name.split('.').slice(0, -1).join('.') : node.name}

• Language Drop down menu
• Insertion Point
• Hide _meta files: Ensure that any _meta files are not visible to the users in the editor interface.
• Remove folder and file icons: Eliminate folder and file icons from the UI for a cleaner look. Consider only having an icon for files.
• Remove back and EditMode: Remove back button and EditMode in the new combined editor #220
• Add ellipsis for folder names: Implement functionality to truncate folder names that exceed the width of the explorer, adding ellipsis (e.g., "VeryLongFolderName..." similar to VS Code).
• Renaming files/folders: Allow renaming of files/folders Enhance File Opening Experience in the Editor #219 / Allow renaming of files/folders in the Explorer/Editor #227
• Enhance new file opening exp: Enhance File Opening Experience in the Editor #219
• Autofocus on input element: Ensure that the cursor focusses within the block / file-folder name input, seamlessly without needing a user mouse click. Add Autofocus for Input Elements #212 / Show Border of New Block When First Created in Editor #180
• Rendering of empty folders: Allow folders without any files to get rendered in the UI.

[SwapnilChand]

The above changes are being added to a personal fork of this repo https://github.com/SwapnilChand/akiradocs-template/tree/ui-fixes.