Use SwitchToggle to enable/disable comment preview

[willemarcel]

I believe that style fits better with the app design system.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[emi420]

I think this solution is good as it puts the preview option closer to the "Post" button and it saves space, removing the "Write" tab which looks redundant.

I'll change the label to "Preview" and work in with the avatar to integrate it more into the comment box, for example:

[willemarcel]

@emi420 what you propose is a very good idea!

[Ichchhie]

I like how @emi420 has moved the user image out from the markdown editor box. But regarding the placement of the preview button, I feel the current markdown we have i.e. in the screenshot below is okay. Now, the write and preview buttons are together which is also similar to the GitHub markdown editor, and keeping them together is more appropriate in terms of accessibility too

[HelNershingThapa]

I adored how @willemarcel swapped out the tabs for a switch, maintaining usefulness while saving so much room. I appreciate the attention to detail and desire to align the design system within the Tasking Manager.

With the switch on the bottom of the markdown editor, the switch will move with the preview content if a user has a lengthy markdown text, which could make it challenging for the user to switch between the Write and Preview modes. This is one concern I have with putting the switch toggle at the bottom of the text field. As a user, I'd like it if the switch remained in the same location on the screen as my comment grew.

We would stop any visual changes as the user types if we placed the tabs option at the top of the container. Additionally, because the text is lengthy in the preview mode, having the tabs at the top makes it simple for users to transition between the modes without having to scroll all the way to the bottom of the container.

Users tend to rely on tabs to navigate between different sections or modes in an application. The use of switch toggles, on the other hand, is commonly associated with binary on/off decisions, and they may not be as quickly recognizable as tabs.

I believe that using switch toggles would add a cognitive load that tabs can avoid, making tabs a more expressive choice. With switch toggles, we are limited to a single label and may not be able to provide users with as much context or information as we can with tabs.

[willemarcel]

If you prefer a tab, it's ok, I would just recommend to improve the design. Right now, it seems like a dirty text floating above the text input.

Tabs need to connect with what is above or below it, like in

or in the tasks page

or in the github example

[emi420]

Good analysis @HelNershingThapa ! I didn't realized that switching between write and preview also changes the position of the bottom section, that's definitely something that breaks usability.

I agree with @willemarcel that tabs design must be improved, because it doesn't look good right now.

For making good design changes we must take into account the whole comment box and its context, as all UI elements are related, maybe we should create an issue for "comment box redesign" , what do you think? CC @ramyaragupathy

[ramyaragupathy]

sounds good @emi420 - @royallsilwallz, medium priority, definitely on our to do list

[ramyaragupathy]

cc @manjitapandey