feat: new UX for the boards/library manager widget

[kittaakos]

Motivation

Change description

TODOs:

• Make Boards/Library Manager uninstall functionality easier to find #19
  • When the installed version is selected in the version dropdown, IDE2 shows the Remove button.
  • When a library is installed, hovering over the installed version, REMOVE is visible.
  • Removing a library from the ... context menu is also possible.

19_01.mp4

19_02.mp4

• Library/Boards Manager offers already installed release when it is the only one #781
  • Open the libraries manager widget,
  • Search for Arduino Uno WiFi Dev Ed Library,
  • If the library is installed, uninstall it,
  • Verify that only 0.0.3 is available in the select,
  • Click on the Install button,
  • Library is installed, but the select still shows 0.0.3 version, and the button shows Remove instead of Install,
  • Click on ..., and the context menu shows Remove. Remove from the context menu is always visible when the library is installed. It does not depend on the button's state.

781.mp4

• "INSTALL" button clipped or missing for some Boards/Library Manager items at minimum panel width #1591
  • The version <select> and the install <button> were made to be always in Prevent layout shift on hover in libs/board manager #1568, so there was not much to fix, but remove the bogus cell height calculation and switch to the react-virtouso library from Theia.
• Board menu should show 'update' not 'install' for updatable boards #1607
  • When a library is installed, but the installed version is not the latest, and the latest version is selected in the dropdown, IDE2 shows Update instead of Install

1607.mp4

• Library dependencies installation dialog not given focus on open #1679
  • Create a new sketch,
  • Open the libraries manager widget,
  • Search for arduinoiotcloud,
  • Select version 1.10.0,
  • Click on the Install button,
  • Dialog pops,
  • You can navigate with Shift+Tab (on macOS).

1679.mp4

• Library Manager version menu selection changes if user closes dependencies installation dialog #1707
  • Create a new sketch,
  • Open the libraries manager widget,
  • Search for arduinoiotcloud,
  • Select version 1.10.0,
  • Click on the Install button,
  • Dialog pops, close the dialog with the X,
  • Verify that the version select still shows 1.10.1.

1707.mp4

• Board/Library Manager "Versions" not intutitive. #1924
  • IDE2 always selects the latest available version by default,
  • When toggling/showing the view, all version selects reset to the default:

1924_01.mp4

• When changing the version of a lib, all other versions reset to the default:

1924_02.mp4

• When installing or uninstalling a library, the version selection of all libraries reset to the default.

1924_03.mp4

1924_04.mp4

• All lib versions reset to the default when changing the query term or the search filters.

• focus the Boards/Library Manager <input> when the widget opens #1941

  • Create a new sketch (or reset the workbench layout),
  • Open the libraries/boards manager,
  • The focus is on the <input> so that you can type to filter without clicking anywhere.

1941.mp4

Other information

• The Install/Update/Remove button is disabled when installing, updating, or removing a library.

other_01.mp4

• Colors work well with all three supported themes.

other_02.mp4

• When a library is installed with at least one example, the Examples submenu is available from the ... context menu.

other_03.mp4

• Can open More info from the context menu.
• Can select another version from the context menu. The menu is not visible when there is only one version available.

Reviewer checklist

Closes #19
Closes #781
Closes #1591
Closes #1607
Closes #1707
Closes #1924
Closes #1941

• PR addresses a single concern.
• The PR has no duplicates (please search among the Pull Requests before creating one)
• PR title and description are properly filled.
• Docs have been added / updated (for bug fixes / features)

[per1234]

Thanks Akos!

[91volt]

Thanks @kittaakos, great work! I have only 2 points (not critical imho)

1. I believe it would be beneficial to keep the "More info" link within the card, as it provides users with an easy and accessible way to access additional information: with the introduction of the description truncation for a more compact layout, having this link easily discoverable would be especially valuable.
   Proposed solution:
   

2. Additionally, although it wasn't in the proposed design, I think it would be better to show the contextual menu icons when the user hovers over the card, similar to how we currently use it for sketches listed in the sketchbook sidebar panel. This would provide users with a cleaner card while them are not interacting with the content. What are your thoughts on this?

Registrazione.schermo.2023-03-13.alle.10.38.26.mov

[kittaakos]

1. I believe it would be beneficial to keep the "More info" link within the card,

It's a bug. I do not know how I missed it. Thanks!

2. I think it would be better to show the contextual menu icons when the user hovers over the card

Sure. I wanted to do it as you're requesting now, but it was different in the design.

[kittaakos]

I have only 2 points (not critical imho)

Thanks for the feedback. Both issues should be fixed.
Missing More info:

Show ... context menu on hover:

19.mp4