PR: Editor Page's Design Scaffolding/Layout & State management

[KingXP-Pythoner]

(Y'all might probably hate me but major updates in this PR. )

Major updates

• File Tree Component: I have used a robust, maintained and well used package @minoru/react-dnd-treeview to create a file explorer tree component ExplorerTreeView which can manage files and folders. It incorporates another dependency react-dnd which makes dragging files around in the tree including importing files possible. (I realised we don't need to reinvent the wheel as this package really catches a lot of edge cases that i think we could have).
• Tab Tray Component: This was a tricky bit to set up so I'm glad I could build it. The TabTray component is a container for the FileTab component which are tabs that allow multi-modelling of the editor (switching between files like vscode).
• Footer Section
• ActivityBar: This is the ui component of the side navigation bar ActivityBar.
• Icons: I have downloaded some vscode-icons svgs for displaying across the app. It has been implemented with a utility function getFileType that returns the file extension and using a 'map' to get the svg file.
• Mock: Since we do not have the flow of importing files from github yet, this PR heavily relies on mock data saved in the @/mock folder.
• Zustand Store: implement zustand package to store states that is used for file management across the page (states are stored in sessionStorage in this PR).

  The logic powering the functionalities added

I have developed a model that describes the flow from clicking a folder/file in the tree explorer and displaying it's contents in the editor as well as allowing navigation with the file tabs. A single file is called a node with the CODENodeModel type. This closely resembles the naming of the @minoru/react-dnd-treeview package implementation where a file is a NodeModel type.

The node takes the properties of NodeModel such as id, it's parent, droppable and utilises the optional data prop to insert FileAttributes which holds very important props such as focus, isActive, isFolder, uri,for client state management. With this in mind, I created two zustand global states documentNodes (type CODENodeModel[]) and selectedNode (`type CODENodeModel) which allows us to monitor and manipulate states of any node in the current tree any where in our app (in this case, our mock tree data is the source of the files or nodes initialised in the store while the store is the source of truth of their states) and update the editor and the page UI in sync.

Existing Dependencies Updated

• typescript 5.0.2 -> 5.2.2

I haven't written any test and would appreciate it if someone can work on that if the PR gets merged. I did a lot of manual testing but don't have much time to write tests as of now. I'm sorry I may have went overboard with this PR with so many updates but if you have any questions please message me on DIscord. Thank you :))

[hobi9]

fantastic job as always!

[SHIV5T3R]

This is some lovely UI, would someone be able to run some tests? I'll merge this after I've tested if nobody does in the next few days.