Show ALIAS matches as <name> (<alias>) (#9955)

In order to help with discovery of the functions we want to have more ALIASes (such as select_columns) on associated functions. To make it clearer what each does reversing the order helps.

![image](https://github.com/enso-org/enso/assets/4699705/55fac1fa-1307-4544-b150-dc184ddc27aa)

app/gui2/src/components/ComponentBrowser/__tests__/component.test.ts

@@ -107,29 +107,29 @@ test('Matched ranges are correct', () => {
     {
       name: 'bar',
       aliases: ['foo_bar', 'foo'],
-      highlighted: '<foo><_bar> (Project.bar)',
+      highlighted: 'Project.bar (<foo><_bar>)',
     }, // exact alias match
     {
       name: 'bar',
       aliases: ['foo', 'foo_xyz_barabc'],
-      highlighted: '<foo>_xyz<_bar>abc (Project.bar)',
+      highlighted: 'Project.bar (<foo>_xyz<_bar>abc)',
     }, // alias first word exact match
     {
       name: 'bar',
       aliases: ['foo', 'fooabc_barabc'],
-      highlighted: '<foo>abc<_bar>abc (Project.bar)',
+      highlighted: 'Project.bar (<foo>abc<_bar>abc)',
     }, // alias first word match
     { name: 'xyz_foo_abc_bar_xyz', highlighted: 'Project.xyz_<foo>_abc<_bar>_xyz' }, // exact word match
     { name: 'xyz_fooabc_abc_barabc_xyz', highlighted: 'Project.xyz_<foo>abc_abc<_bar>abc_xyz' }, // non-exact word match
     {
       name: 'bar',
       aliases: ['xyz_foo_abc_bar_xyz'],
-      highlighted: 'xyz_<foo>_abc<_bar>_xyz (Project.bar)',
+      highlighted: 'Project.bar (xyz_<foo>_abc<_bar>_xyz)',
     }, // alias word exact match
     {
       name: 'bar',
       aliases: ['xyz_fooabc_abc_barabc_xyz'],
-      highlighted: 'xyz_<foo>abc_abc<_bar>abc_xyz (Project.bar)',
+      highlighted: 'Project.bar (xyz_<foo>abc_abc<_bar>abc_xyz)',
     }, // alias word start match
   ]
   const entries = Array.from(matchedSorted, ({ name, aliases }, id) => {

app/gui2/src/components/ComponentBrowser/component.ts

@@ -70,11 +70,14 @@ export function labelOfEntry(
 }
 
 function formatLabel(labelInfo: ComponentLabelInfo): ComponentLabel {
-  return {
-    label:
-      labelInfo.matchedAlias ? `${labelInfo.matchedAlias} (${labelInfo.label})` : labelInfo.label,
-    matchedRanges: labelInfo.matchedRanges,
-  }
+  const shift = labelInfo.label.length + 2
+  const shiftRange = (range: Range) => new Range(range.start + shift, range.end + shift)
+  return !labelInfo.matchedAlias ?
+      { label: labelInfo.label, matchedRanges: labelInfo.matchedRanges }
+    : {
+        label: `${labelInfo.label} (${labelInfo.matchedAlias})`,
+        matchedRanges: labelInfo.matchedRanges?.map(shiftRange),
+      }
 }
 
 export interface MatchedSuggestion {