New Component Browser with Groups panel

[farmaazon]

Pull Request Description

Fixes #12309
Fixes #12327

Screencast.From.2025-02-28.15-07-45.mp4

Important Notes

The list of components was refactored out to LazyList - this list instantiates HTML elements only of visible things. I'm not sure about the name - is there any more "technical" term for such a list?

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  TypeScript,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• Unit tests have been written where possible.
• If meaningful changes were made to logic or tests affecting Enso Cloud integration in the libraries,
  or the Snowflake database integration, a run of the Extra Tests has been scheduled.
  • If applicable, it is suggested to paste a link to a successful run of the Extra Tests.

[AdRiley]

Looks good! Couple of things I spotted:

1. Can we add a > on the right side of the selected group?
2. With the delay on the group changing it needs to work if I cross another group as I reach for a component.

[AdRiley]

Nit but this horizontal gap is perhaps a little big?

[github-actions]

🧪 Storybook is successfully deployed!

📊 Dashboard:

• 👀 Review changes: https://www.chromatic.com/build?appId=673738989fc3e8430364197e&number=1640
• 👨‍🎨 Preview storybook: https://673738989fc3e8430364197e-bnxpmxicrt.chromatic.com/

[farmaazon]

With arrow:

[MrFlashAccount]

@AdRiley

Nit but this horizontal gap is perhaps a little big?

IMO looks perfect, proper paddings around

[MrFlashAccount]

On my side - text isn't aligned with icons properly, better move 3px up

On dashboard we spent a couple of time to make our font look pixel-perfect: https://github.com/enso-org/enso/blob/develop/app/gui/src/dashboard/components/AriaComponents/Text/Text.tsx#L55-L56

Please refer to figma for exact numbers:

Note, that on windows this font looks much better and we can set paddings to 2px

[farmaazon]

On my side - text isn't aligned with icons properly, better move 3px up

As this is more "global" problem (the misalignment seems to be coming from the font itself), I would make it in a separate PR, as this looks like a significant time for little effect.

[somebody1234]

CR ✅ for single line change in ide-desktop