feat: redesign add application ui

[ztlee042]

In this PR:

• The add application UI has been changed
• A "mostly used" section has been added.
  • Add new hook to get most used apps per user graasp-query-client#746
  • Add endpoint to get mostly used apps by user graasp-api#988
• Tooltips are added to display the description of the app
• A "+ Create your own app" button is added
• Change the width of NameForm and DisplayForm to fullwidth

CleanShot.2024-04-30.at.11.46.23.mp4

[pyphilia]

Thanks for those changes! I think it will really improve the creation of apps!

Some additional design comments:
I have those "margins", I think because of overflowing.

Also I know were not really responsive friendly, but I think it would be good to at least collapse the 2 columns into one on smaller screens.

[ztlee042]

Hi Kim @pyphilia, I have updated the styles. Could you please check if the margin problems are still there? Thanks a lot.

[ztlee042]

I just had two feedback from the testing participants:

• The search bar could stand out more. Both of them didn't notice the search bar at first look.
• The scroll bar should be visible. They didn't realize it was a scrollable area at first look.

[pyphilia]

Thanks for the work!

Some additional thoughts:

• "the scrollbar should be visible" -> I think it's always visible, do you mean make it even more visible? Wouldn't that be too much?
• Also I think the "create your own application" button is way more too visible, that's the very first thing I see in this modal. Actually it doesn't have to be that highlighted, why not just a little text next to "Need a custom solution ? " for example.

[ztlee042]

Thanks for the work!

Some additional thoughts:

• "the scrollbar should be visible" -> I think it's always visible, do you mean make it even more visible? Wouldn't that be too much?
• Also I think the "create your own application" button is way more too visible, that's the very first thing I see in this modal. Actually it doesn't have to be that highlighted, why not just a little text next to "Need a custom solution ? " for example.

For the first question, on Mac there is a setting set scrollbar invisible by default, that's why users didn't see the scrollbar by default.
I will look into the second question.

Thanks for your feedback overall!

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud