New design of CB: two modes (#10814)

Fixes #10603

[Screencast from 2024-08-14 12-10-51.webm](https://github.com/user-attachments/assets/fcd5bfa4-b128-4a84-a19f-c14e78dae8c9)

What is not yet implemented: the filtering. That means that spaces keep their special meaning, and we still display modules and types.

The component list itself was refactored to a separate vue component.

The logic of default visualization type in preview changed a bit: as now there is no selected component, we remember with what suggestion have we switched to code edit mode.

CHANGELOG.md

@@ -3,9 +3,14 @@
 #### Enso IDE
 
 - [Table Editor Widget][10774] displayed in `Table.new` component.
+- [New design of Component Browser][10814] - the component list is under the
+  input and shown only in the initial "component browsing" mode - after picking
+  any suggestion with Tab or new button the mode is switched to "code editing",
+  where visualization preview is displayed instead.
 - [Drilldown for XML][10824]
 
 [10774]: https://github.com/enso-org/enso/pull/10774
+[10814]: https://github.com/enso-org/enso/pull/10814
 [10824]: https://github.com/enso-org/enso/pull/10824
 
 #### Enso Standard Library

app/gui2/e2e/componentBrowser.spec.ts

@@ -106,7 +106,7 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
   // Dragging out an edge to the bottom of the viewport; when the CB pans into view, some nodes are out of view.
   await page.mouse.move(100, 1100)
   await page.mouse.down({ button: 'middle' })
-  await page.mouse.move(100, 80)
+  await page.mouse.move(100, 280)
   await page.mouse.up({ button: 'middle' })
   await expect(locate.graphNodeByBinding(page, 'five')).toBeInViewport()
   const outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'final'))
@@ -240,14 +240,10 @@ test('Visualization preview: type-based visualization selection', async ({ page
   await expect(locate.componentBrowser(page)).toExist()
   await expect(locate.componentBrowserEntry(page)).toExist()
   const input = locate.componentBrowserInput(page).locator('input')
-  await input.fill('4')
-  await expect(input).toHaveValue('4')
-  await expect(locate.jsonVisualization(page)).toExist()
   await input.fill('Table.ne')
   await expect(input).toHaveValue('Table.ne')
-  // The table visualization is not currently working with `executeExpression` (#9194), but we can test that the JSON
-  // visualization is no longer selected.
-  await expect(locate.jsonVisualization(page)).toBeHidden()
+  await locate.componentBrowser(page).getByTestId('switchToEditMode').click()
+  await expect(locate.tableVisualization(page)).toBeVisible()
   await page.keyboard.press('Escape')
   await expect(locate.componentBrowser(page)).toBeHidden()
   await expect(locate.graphNode(page)).toHaveCount(nodeCount)
@@ -258,17 +254,15 @@ test('Visualization preview: user visualization selection', async ({ page }) =>
   const nodeCount = await locate.graphNode(page).count()
   await locate.addNewNodeButton(page).click()
   await expect(locate.componentBrowser(page)).toExist()
-  await expect(locate.componentBrowserEntry(page)).toExist()
   const input = locate.componentBrowserInput(page).locator('input')
   await input.fill('4')
   await expect(input).toHaveValue('4')
-  await expect(locate.jsonVisualization(page)).toExist()
+  await locate.componentBrowser(page).getByTestId('switchToEditMode').click()
+  await expect(locate.jsonVisualization(page)).toBeVisible()
   await expect(locate.jsonVisualization(page)).toContainText('"visualizedExpr": "4"')
   await locate.toggleVisualizationSelectorButton(page).click()
   await page.getByRole('button', { name: 'Table' }).click()
-  // The table visualization is not currently working with `executeExpression` (#9194), but we can test that the JSON
-  // visualization is no longer selected.
-  await expect(locate.jsonVisualization(page)).toBeHidden()
+  await expect(locate.tableVisualization(page)).toBeVisible()
   await page.keyboard.press('Escape')
   await expect(locate.componentBrowser(page)).toBeHidden()
   await expect(locate.graphNode(page)).toHaveCount(nodeCount)

app/gui2/src/bindings.ts

@@ -19,8 +19,9 @@ export const interactionBindings = defineKeybinds('current-interaction', {
 })
 
 export const componentBrowserBindings = defineKeybinds('component-browser', {
-  applySuggestion: ['Tab'],
+  applySuggestionAndSwitchToEditMode: ['Tab'],
   acceptSuggestion: ['Enter'],
+  acceptCode: ['Enter'],
   acceptInput: ['Mod+Enter'],
   acceptAIPrompt: ['Tab', 'Enter'],
   moveUp: ['ArrowUp'],