SHIV5T3R / CO-DE

An Open Source Collaborative Code Editor
36 stars 26 forks source link

Add right sidebar #55

Closed savvy-itch closed 9 months ago

savvy-itch commented 9 months ago

This PR addresses the issue #53 I've created a right sidebar for the code editor here users can access current room info, chat with the team and view notifications.

There're 2 tabs: Room Details and Notifications.

  1. Room Details contains 2 sections: room info and a chat box for communication. Everything is basically placeholder data atm, but I tried keep it as close to the existing TS types as possible.
  2. Notifications tab display all the received notifications. I've updated Notification type by adding a isRead property and changing its name to RoomNotification because Notification is a built-in global object and it caused conflicts when I tried to import the type. Created a store for notifications.

Additional changes:

savvy-itch commented 9 months ago

Added a splitter to make the sidebar width adjustable. Now when in collapsed state the width doesn't change, and when the sidebar isn't collapsed the width is adjustable. It came with a couple of trade-off, unfortunately: