refactor: Settings/Presets UI Restructure, convert many files to TS

[danny-avila]

Addresses #739 as this is necessary for modularity of settings and makes it easier to integrate additional UI features and adding new endpoints. This will improve the DX greatly for adding new buttons to match the latest styling of chat.openai.com

This is a rough outline of the new structure, but basically follows a standard format now

EndpointSettings # (for Presets/MessageHeader)
    |___Settings # ( within Dialog, same components as below )
TextChat
    |___GenerationButtons # (where stop/continue/regenerate will live)
    |___OptionsBar # (previously, this component didn't exist and a version of it was repeated for each Endpoint)
               |___ModelSelect # ( endpoint specific buttons )
               |___Settings # ( within Popover, same components as above )
                      |___PopoverButtons

Converted almost all files touched to typescript and fixed several UI bugs as a result.

Took the opportunity to improve mobile/desktop UI for settings.

Dependency cycle imports were fixed and now correctly linted.

Fixed a bug with update script, as new fs.rm method is async and was causing issues. using old method now

Added update current branch feature to update script, and added npm command for rebuilding the package-lock file.

Styles Nav to match mobile styling with official site

Fixed node_module resolution with path mapping in ./client/tsconfig.json

Adds useLocalize hook to reduce boilerplate for using translations

import { useLocalize } from '~/hooks';

function SomeComponent() {
  const localize = useLocalize();
  const translation = localize(text) // params: phraseKey: string, values?: string[]

Gradient is now less pronounced on desktop and non-existent in mobile views
before:

after:

[techwithanirudh]

Awesome P.R, but I have some more feedback

1. The clear button has a border, which kind of looks off. The border below the description of the modal should be even more below, and the clear button is a little bit smaller in width compared to cancel.

2. On smaller screens, Use Functions and Skip Completion overlap.

3. When the theme is set to system, the input gradient turns light, instead of the system mode being dark.

4. The top-bar in ChatGPT is kind-of sticky, but Libre's isn't.

5. The heading and the close button are not centered properly.

6. For edit preset, the scrollbar shouldn't be on the whole modal, it should be on the modal body. Also, it should be like the Save Convo As A Preset and not overflow till the buttons area, instead stop at the buttons div.

7. This would be better if it were spaced between.

8. The endpoint options are not taking full width
   

---

Suggested Changes:

1. Adjust the clear button's style to remove the border and ensure it has the same width as the cancel button.
2. Fix the overlapping issue of Use Functions and Skip Completion on smaller screens.
3. Ensure the input gradient remains dark when the theme is set to the system mode.
4. Make the top-bar in Libre sticky like the one in ChatGPT.
5. Center the heading and close button properly for a balanced appearance.
6. Modify the edit preset modal to have a scrollbar only in the modal body and stop it at the buttons div, following the style of the Save Convo As A Preset modal.
7. Add proper spacing to improve the visual appeal.
8. Make the endpoint options take full width.

Thank you for considering these changes. Your attention to detail will greatly improve the user experience!

[danny-avila]

Awesome P.R, but I have some more feedback

1. The clear button has a border, which kind of looks off. The border below the description of the modal should be even more below, and the clear button is a little bit smaller in width compared to cancel.

done

2. On smaller screens, Use Functions and Skip Completion overlap.

fixed

3. When the theme is set to system, the input gradient turns light, instead of the system mode being dark.

fixed

4. The top-bar in ChatGPT is kind-of sticky, but Libre's isn't.

not planned/not done (PR welcome)

5. The heading and the close button are not centered properly.

not true, and if true on your screen, not planned/not done (PR welcome)

6. For edit preset, the scrollbar shouldn't be on the whole modal, it should be on the modal body. Also, it should be like the Save Convo As A Preset and not overflow till the buttons area, instead stop at the buttons div.

fixed

7. This would be better if it were spaced between.

fixed

8, Make the endpoint options take full width.

fixed

[danny-avila]

Before PR:

After: