Add two columns Settings layout

[menghif]

Fixes #578

This PR changes the Settings layout by adding a sidebar to the left.

As previously suggested, I split the Settings into one category for Providers, GPT Models and Temperature, then I moved everything else into a "Customization" category.

I moved Web Handlers into Settings and, for consistency, I moved the Default System Prompts as well.

Desktop preview:

Mobile preview:

[humphd]

This is exciting to see happening!

[kliu57]

I tested this and it works very well!

[tarasglek]

This looks amazing, is this ready for review or are you still working on it?

[menghif]

It's ready for review!

[Amnish04]

@menghif This is a huge improvement, and kinda impressive how fast you have been with this!

I haven't read the code yet, but had some UX suggestions:

1. I would prefer to have the selected setting type list item to be highlighted in a bluish shade that is similar to accent color of this application. I think blue.500 should look good.
   

2. I noticed that the modal height changes based on what settings type is selected. It would be better if the height of our modal is fixed and we allow the inner body of the modal to scroll. (https://v2.chakra-ui.com/docs/components/modal#modal-overflow-behavior)

3. In the mobile preview, the modal takes full viewport width and touches the edges. It would be better to leave some gap. Maybe try 95vw?
   

4. In mobile preview, it would be better if the settings selection control was a dropdown list, so we don't occupy unnecessary real estate on screen.
   

[humphd]

@menghif can you rebase this to pick up the changes on main?

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	8e6513a
Status:	✅  Deploy successful!
Preview URL:	https://dd7a8e3d.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-578.console-overthinker-dev.pages.dev

View logs

[menghif]

@menghif can you rebase this to pick up the changes on main?

Rebased. I made some changes last night based on @Amnish04 feedback but that's still a work in progress.

[humphd]

I'm loving this. There are some things I think we need to do after this (e.g., split providers from models, show your list of providers on the left under "Providers"), but none of it needs to block this.

I'll let you iterate with @Amnish04, but this is really coming along nicely. Thank you!

[Amnish04]

Rebased. I made some changes last night based on @Amnish04 feedback but that's still a work in progress.

@menghif I saw that you are now embedding the settings type selection list into an Accordion on smaller screens.

I was wondering if we could hide the already selected item from the drop list, as it feels redundant.

Or if possible, we could convert this to a Select dropdown list.

[tarasglek]

We can land this as is and iterate on mobile tweaks incrementally.

[humphd]

Agree, @menghif file a follow-up for whatever is left and get this in. It's awesome.

[Amnish04]

I also agree. We can improve in follow-ups.

Thanks for the improvements!

[menghif]

I was working on this yesterday and made the change to set the Modal's height as fixed and only allow the inner body to scroll.

I still have an overflow bug with the Web Handlers body but I can include that in a follow up issue.

It's ready for a final review now!

[humphd]

@menghif land this when you're ready and anything else can happen in follow ups.

Amazing work getting this done so fast.

[tarasglek]

@menghif this is a huge improvement in my life :)