Use new sentence design as default

[trang]

This PR sets the new sentence design as the default one. Along the way, it fixes some of the remaining issues that were reported so far:

• In the new design, when the menu is expanded, the username is no longer visible #2326
• Displaying only 5 translations is not enough for some users #2210
• Closing the sentence edition form changes the ownership icon #2232
• "Add sentence to list" checkbox affects unrelated sentences on the same page #2280

The condition to display sentences with the new design is no longer based on the use_new_design setting but on a new setting, disable_new_design.

The option to use the new design is now reading from this new setting. It is enabled by default (similarly to the random sentence on the homepage) and was moved out of the "Experimental" section into the "Main options" because it's not experimental (although it is temporary).

The setting use_new_design was kept so that we can display the announcement message only to those who had not switch to the new design. People who have switched do not need to see this message.

Wall post asking for tests:
https://tatoeba.org/eng/wall/show_message/35389#message_35389

[AndiPersti]

You should validate the user input for max_visible_translations because by simply modifying the select control with the browser's dev tools it is possible to set it to any value you want:

root@envy:~# echo 'select settings from users where username = "rumpelstilzchen2";' | mysql tatoeba
settings
{"is_public":"","lang":null,"use_most_recent_list":"","collapsible_translations":"","show_transcriptions":"","sentences_per_page":10,"max_visible_translations":"200","users_collections_ratings":"","native_indicator":"","hide_random_sentence":"0","use_new_design":"0","disable_new_design":"0","default_license":"CC BY 2.0 FR","can_switch_license":false,"new_terms_of_use":"1","license_switch_list_id":null,"hide_new_design_announcement_2":false}

[trang]

Thanks @AndiPersti! I added the validation.

[githubshrek]

Hi @trang do you have plans to push this further along any time soon? I'm guessing not, since it has been in the current status for approaching one year.

[trang]

@githubshrek I'm aware this has been on standby for a while now, but I haven't given up on this :)

This merge request is however blocked by another ticket: #2364 (to order translations in a more meaningful way). We need to solve that ticket first because there has been some reluctance from veteran members of Tatoeba in regards of the new design. It is much less compact than the old design and feels, for some, less efficient to use.

I actually have already started to work on #2364 months ago, I just need to find time where I have a bit of peace of mind to continue it. Then once that is live, we'll have to see if users have any other major issue with the UX of the new design, and if not, we can proceed to switch to the new design as default, and eventually, completely getting rid of the old design and fully focus on improving the new one.

[githubshrek]

I think that your trying to overcomplicate the dependencies. The problem expressed with the new design is that it is much less compact than the old design. The solution therefore is simple: make the new design more compact.

When I compare the new design with the old, I see that the new design is a lot more spaced out. There is, for example, on my screen 14 mm between each flag in the new design and only 10 mm between each flag in the old design (i.e. 40% more spaced out).

New design:

Old design:

The solution should be to fix the new design, not to fix some completely different part of the system. Sure, I understand how solving "Translations are not ordered in a helpful way" would keep things more compact.

However, I think the "new sentence design" is an epic ticket, and "Translations are not ordered in a helpful way" is a totally different epic ticket. They should not be coupled together, because there is really no genuine dependency.

I would encourage you to make some small easy changes to the new design (e.g. make the flags 10mm spaced rather than 14mm) and in order to get it into production, rather than link it to some other large epic, which no doubt will have its own problems.

The aim should be to make the changes smaller (e.g. adding a "Translations" and "Translations of translations" title to the design) and the dependencies less, to try and get small and steady progress.

[jiru]

I actually have already started to work on #2364 months ago

@trang Whoops, I also already started working on this months ago. 🤭 I just pushed that branch and created a draft PR #2791.

[2colours]

@jiru @trang sorry to bother. What is the state of this PR? Is there any point in keeping it around?

[trang]

@2colours Indeed, it's probably best to close it at this point. We still want to transition to the new design, but better do it in a new PR with fresh code and a fresh mind :)

Just a few notes about the status:

1. The suggestion to reduce the spacing between the translations has already been deployed on prod (54a391e). I think we cannot make the new design much more compact at this point.

2. The new design is already set as default for any new registered user since May 2022 (f08e0bb). Older members only had an announcement telling them that there's a new design and that they have the option to switch to it, if they wanted to. Some have switched, some haven't.

3. The goal now is enforce the new design and there could be several ways to approach this, but I guess we can talk about it when we are ready to work again on this topic.