Add new section for UI Settings

[KrabsWong]

Related GitHub Issue

Closes: #3447

Description

Test Procedure

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Current View

Change line-height to 1.75 (range from 1.25 to 2)

Setting View

Documentation Updates

Add new feature for user to setting UI configurations, currently, there is only one setting to change the line-height of content.

Additional Notes

[changeset-bot]

⚠️ No Changeset found

Latest commit: 01955bac928d5400a7dfbee96b1cd8efe5d591a3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ellipsis-dev]

Typographical: The property markdownBlockLineheight should likely be renamed to markdownBlockLineHeight to adhere to camelCase conventions for consistency with the rest of the file.

^{This comment was generated because it violated a code review rule: mrule_l9qHIfrVR9RDrBkJ.}

[KrabsWong]

Updated

[mrubens]

Sorry to be late to the discussion here, but I wonder if this really needs to be a new setting in a new section. Should we just make it a little less crammed?

[KrabsWong]

Sorry to be late to the discussion here, but I wonder if this really needs to be a new setting in a new section. Should we just make it a little less crammed?

Thanks for your response.

Based on my personal impression, there doesn't seem to be a suitable group in the existing categories for purely UI-related configuration items, as most others are functionally oriented. Therefore, I've created a new one. Which configurations do you think would fit best here? I can make some adjustments accordingly.

[mrubens]

Do you think we need a setting for this, or should we just adjust the line height? The current UI looks too tight to me too.

[KrabsWong]

Do you think we need a setting for this, or should we just adjust the line height? The current UI looks too tight to me too.

Actually, there was a quick discussion about this issue before, #3438

I think, it might be be better option, to support full consideration of different users' needs

[mrubens]

Do you think we need a setting for this, or should we just adjust the line height? The current UI looks too tight to me too.

Actually, there was a quick discussion about this issue before, #3438

I think, it might be be better option, to support full consideration of different users' needs

Slider just feels like too much for this... I guess gmail has options like compact / default / comfortable? I think I'd just want to have more of an opinion on where we're headed with the visual configuration options before adding this slider. Do any other editors have controls like this? Seems like vscode lets you control the font and the size but not the line height. I take that back, I see that they have a ton of editor settings.

[KrabsWong]

Do you think we need a setting for this, or should we just adjust the line height? The current UI looks too tight to me too.

Actually, there was a quick discussion about this issue before, #3438
I think, it might be be better option, to support full consideration of different users' needs

Slider just feels like too much for this... I guess gmail has options like compact / default / comfortable? I think I'd just want to have more of an opinion on where we're headed with the visual configuration options before adding this slider. Do any other editors have controls like this? Seems like vscode lets you control the font and the size but not the line height. I take that back, I see that they have a ton of editor settings.

This seems to boil down to two issues: one is whether it's necessary to use a new group to manage UI-related configurations, and the other is whether it's necessary to use a slider to adjust row height.

Regarding the first question, my starting point is that these configurations might only pertain to the UI rather than functionality, and it seems the new grouping is also appropriate.

As for the second issue as you mentioned, the slider is indeed a bit heavier, and most users probably don't need such fine adjustments I think. In comparison, the preset options seem like an excellent choice such as compact, default, comfortable, etc. (Then what the corresponding setting should be for different options? I think maybe compact with 1.25, default 1.5 and comfortable with 1.75)

How do you think about these two parts?

[KrabsWong]

Do you think we need a setting for this, or should we just adjust the line height? The current UI looks too tight to me too.

Actually, there was a quick discussion about this issue before, #3438
I think, it might be be better option, to support full consideration of different users' needs

Slider just feels like too much for this... I guess gmail has options like compact / default / comfortable? I think I'd just want to have more of an opinion on where we're headed with the visual configuration options before adding this slider. Do any other editors have controls like this? Seems like vscode lets you control the font and the size but not the line height. I take that back, I see that they have a ton of editor settings.

This seems to boil down to two issues: one is whether it's necessary to use a new group to manage UI-related configurations, and the other is whether it's necessary to use a slider to adjust row height.

Regarding the first question, my starting point is that these configurations might only pertain to the UI rather than functionality, and it seems the new grouping is also appropriate.

As for the second issue as you mentioned, the slider is indeed a bit heavier, and most users probably don't need such fine adjustments I think. In comparison, the preset options seem like an excellent choice such as compact, default, comfortable, etc. (Then what the corresponding setting should be for different options? I think maybe compact with 1.25, default 1.5 and comfortable with 1.75)

How do you think about these two parts?

Any idea about this, guys?
Maybe, if it's OK, just change the default lineheight from 1.25 to a bigger value, such as 1.75?

[adamhill]

@KrabsWong I think those defaults are reasonable. If lots of people want choice, keep the slider implementation in a stash :-)

I guess a numeric input with up / down arrows on the right hand side, to go up by tenths is a decent compromise (assuming shadn has the element to easily use)

UI peeps have any opinions?

[KrabsWong]

@KrabsWong I think those defaults are reasonable. If lots of people want choice, keep the slider implementation in a stash :-)

I guess a numeric input with up / down arrows on the right hand side, to go up by tenths is a decent compromise (assuming shadn has the element to easily use)

UI peeps have any opinions?

The step increment of the slider can also be adjusted, currently it is set to a smaller value.
But for now, let's keep things as they are. We can decide later whether to adjust the UI-related elements if needed.

[daniel-lxs]

Hey @KrabsWong, thanks for your contribution!

I think the best way to get this PR unstuck is to figure out if the new setting works or if we should just increase the line height for now.

Ideally, we'd have more than one UI setting so we can add a new section for them and actually use this new section properly.

Let me hear your thoughts about this.

[KrabsWong]

Hey @KrabsWong, thanks for your contribution!

I think the best way to get this PR unstuck is to figure out if the new setting works or if we should just increase the line height for now.

Ideally, we'd have more than one UI setting so we can add a new section for them and actually use this new section properly.

Let me hear your thoughts about this.

My initial thought was to simply adjust the line height, which would be a minor change. However, I also received feedback that some users prefer a smaller line height to fit more content on one screen. #3438
As discussed earlier, I think using a slider to customize the line height as needed is a great solution, as it ensures flexibility.

[mrubens]

To the question of what else might go into a UI settings section - I think this is a reasonable ask to allow people to enable/disable the code actions: #4214

[hannesrudolph]

stale