Pack Sidebar in its own module

[Amnish04]

#437 introduced a lot of duplication for sidebar related styles and logic as we now had different sidebar views for mobile and desktop.

I have tried to minimize that duplication, by creating separate components for mobile and desktop sidebar and exposing through a common Sidebar api, taking inspiration from the way PromptForm is done.

This way, the places that use the sidebar now look the same as before since all the changes have been abstracted in its own module.

Here's a summary of changes:

1. Renamed the existing Sidebar component to SidebarContent.
2. Added a SidebarMobile component that uses SidebarContent and extends it by adding the search field and ChatCraft brand at the top.
3. Similarly, SidebarDesktop component wraps SidebarContent to apply the new open/close transition effect. This way, we don't have to repeat the keyframe definitions at evey place where sidebar is used.
4. These Sidebar components are exposed by the common Sidebar in index.tsx based on the screen width using isMobile hook.

This fixes #457.

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	840b987
Status:	✅  Deploy successful!
Preview URL:	https://2ac9a670.console-overthinker-dev.pages.dev
Branch Preview URL:	https://amnish04-sidebar-refactor.console-overthinker-dev.pages.dev

View logs

[WangGithub0]

SidebarMobile and SidebarDesktop both have isSidebarVisible, could we put it in SidebarContent?

[Amnish04]

@WangGithub0 We probably can't have it in SidebarContent as its not even using those props.

I was actually thinking of managing sidebar triggers inside the Sidebar component which is a common ancestor of both SidebarDesktop and SidebarMobile.

But that came with a problem. Currently, many of the UI elements in the ChatBase component are using isSidebarVisible managed by the useDisclosure hook at the top level of component hierarchy.

In other words, those elements are not reading directly from the Settings context. And when I tried to encapsulate isSidebarVisible management in Sidebar.tsx both of those properties got out of sync and started causing unexpected behaviours with opening and closing of sidebar.

Ideally, I think we should be managing the sidebarVisible state with useSettings hook considering that its state is meant to be single source of truth.

But since I have not used the useDisclosure hook before and am not sure if its serving a higher purpose than my understanding, I decided not to touch it and pass that state as props to components. Again, I am also confused which path I should pick here, but the current way manages to make it work without making changes to lot of places

[kliu57]

Did some regression testing on your branch and things are working well