[Feature] More configuration for the `monaco` editor

[KraXen72]

Feature Description

Please clearly describe the feature you want:
Currently, the in-browser editor scrolls by too little to my taste, and the font-size is too large. I know i can ctrl+scroll to adjust the font size, but it's too coarse of an adjustment.

• Please implement the equivalent of vscode's editor.mouseWheelScrollSensitivity
  • description: A multiplier to be used on the deltaX and deltaY of mouse wheel scroll events.
• Please implement the equivalent of vscode's editor.fontSize
  • description: Controls the font size in pixels.
• Please implement the equivalent of vscode's editor.smoothScrolling
  • description: Controls whether the editor will scroll using an animation.

Use Case

Better in-browser editor experience

Additional Information

Thank you for your work on scriptcat! I gave it a third chance today after your comment on violentmonkey's thread and it's alright.
Most importantly, it imports all my violentmonkey scripts and it runs them as I'd expect.

[cyfung1031]

We definitely need to re-work the UI/UX design... I think the editor configuration is part of it.

At this moment, you can use the same approach as Violentmonkey - drag the local file to ScriptCat and click "Watch Local Change"

or consider to install the scriptcat-vscode in VS Code

[KraXen72]

thanks for the info. i had google-translated the chinese scriptcat-vscode page, but i don't want a whole extension just for this. the drag & drop + watch changes is a good ux, thanks.

[KraXen72]

@cyfung1031 are you guys using a particular ui framework, or plain js/ts with stuff like querySelector etc? also, are you using a styling framework like tailwind or just plain css?

If you'd be interested, I can try taking a look at a ui cleanup pass - it'd mostly include stuff like polishing the ui in terms of paddings, border radius, borders, maybe slight color tweaks. Would you be interested in that kind of PR? I'd add screenshots and we can iterate on it.

[cyfung1031]

@cyfung1031 are you guys using a particular ui framework, or plain js/ts with stuff like querySelector etc? also, are you using a styling framework like tailwind or just plain css?

If you'd be interested, I can try taking a look at a ui cleanup pass - it'd mostly include stuff like polishing the ui in terms of paddings, border radius, borders, maybe slight color tweaks. Would you be interested in that kind of PR? I'd add screenshots and we can iterate on it.

The UI framework is React 16 + Arco Design.
https://arco.design/react/en-US/docs/start

We also use tailwindcss (unocss) in this repo.

The UI framework itself is not that good... It seems like CodFrm is doing UI re-design...

Yes, feel free to submit PR for the UI things.

[CodFrm]

This is the Pencil design draft I created, but I’ve been busy with other things recently and haven’t worked on it for quite a while.I hope I’ll have time to work on it next week; once the design direction is settled, it should be completed quickly with the help of AI.

scriptcat.pen.zip

[cyfung1031]

for monaco editor config, we need the UI for the config setting.
Then next is how to do proper config upgrade... I want to let users to upgrade their setting if default setting upgraded... this involves many considerations etc. So I have not touched this area yet.

• Also see [FEATURE] Settings for word wrap? (自动换行) #941

[cyfung1031]

This is the Pencil design draft I created, but I’ve been busy with other things recently and haven’t worked on it for quite a while.I hope I’ll have time to work on it next week; once the design direction is settled, it should be completed quickly with the help of AI.

Can you push the latest code into one of the branch ? like dev/ui etc.

For contributors, we are welcome the use of AI helping. You just need to ensure that you have tested manually.

[CodFrm]

https://github.com/scriptscat/scriptcat/commits/develop/new-ui

I think the main issue is deciding on the UI design direction. Once the direction is settled, and if there’s a design draft, it can be completed very quickly. That’s actually the part I’m struggling with: whether this design is good enough. I’m even thinking about using claude-fable-5 to redesign another version from scratch.

[KraXen72]

@CodFrm i see that you already are working on the design and the implementation of the new UI; great!
I'll leave you to it for now but if there's something I could help with, let me know.

I don't think using Claude, even Fable 5, to design the UI is a good idea; it'll look very vibecoded/sloppy imo.
I think that the new design is a big improvement! I'd say it's good enough :)
Good luck!