Read groups from LS (#7986)

- Closes #7928

# Important Notes
Instead of omitting color, a fallback color is generated using `colorFromString`.

app/gui2/shared/languageServer.ts

@@ -299,6 +299,11 @@ export class LanguageServer extends ObservableV2<Notifications> {
     return this.request('search/getSuggestionsDatabase', {})
   }
 
+  /** [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#runtimegetcomponentgroups) */
+  getComponentGroups(): Promise<response.GetComponentGroups> {
+    return this.request('runtime/getComponentGroups', {})
+  }
+
   dispose() {
     this.client.close()
   }

app/gui2/shared/languageServerTypes.ts

@@ -258,7 +258,34 @@ export type FileSystemObject =
       target: Path
     }
 
-interface VisualizationContext {}
+/** A single component of a component group.
+ * [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#librarycomponent) */
+export interface LibraryComponent {
+  /** The component name. */
+  name: string
+  /** The component shortcut. */
+  shortcut?: string
+}
+
+/** The component group provided by a library.
+ * [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#librarycomponentgroup) */
+export interface LibraryComponentGroup {
+  /**
+   * The fully qualified library name. A string consisting of a namespace and
+   * a library name separated by the dot <namespace>.<library name>,
+   * i.e. `Standard.Base`.
+   */
+  library: string
+  /** The group name without the library name prefix.
+   *  E.g. given the `Standard.Base.Group 1` group reference,
+   * the `name` field contains `Group 1`.
+   */
+  name: string
+  color?: string
+  icon?: string
+  /** The list of components provided by this component group. */
+  exports: LibraryComponent[]
+}
 
 export interface VisualizationConfiguration {
   /** An execution context of the visualization. */
@@ -384,15 +411,14 @@ export namespace response {
     receivesUpdates: CapabilityRegistration
   }
 
-  export interface VisualizationUpdate {
-    context: VisualizationContext
-    data: Uint8Array
-  }
-
   export interface GetSuggestionsDatabase {
     entries: SuggestionsDatabaseEntry[]
     currentVersion: number
   }
+
+  export interface GetComponentGroups {
+    componentGroups: LibraryComponentGroup[]
+  }
 }
 
 export interface LanguageServerError {

app/gui2/src/stores/suggestionDatabase/index.ts

@@ -69,21 +69,22 @@ class Synchronizer {
         }
       })
     })
+    lsRpc.once('executionContext/executionComplete', async () => {
+      const groups = await lsRpc.getComponentGroups()
+      this.groups.value = groups.componentGroups.map(
+        (group): Group => ({
+          name: group.name,
+          ...(group.color ? { color: group.color } : {}),
+          project: group.library as QualifiedName,
+        }),
+      )
+    })
   }
 }
 
 export const useSuggestionDbStore = defineStore('suggestionDatabase', () => {
   const entries = reactive(new SuggestionDb())
-  const standardBase = 'Standard.Base' as QualifiedName
-  const groups = ref<Group[]>([
-    { color: '#4D9A29', name: 'Input', project: standardBase },
-    { color: '#B37923', name: 'Web', project: standardBase },
-    { color: '#9735B9', name: 'Parse', project: standardBase },
-    { color: '#4D9A29', name: 'Select', project: standardBase },
-    { color: '#B37923', name: 'Join', project: standardBase },
-    { color: '#9735B9', name: 'Transform', project: standardBase },
-    { color: '#4D9A29', name: 'Output', project: standardBase },
-  ])
+  const groups = ref<Group[]>([])
 
   const synchronizer = new Synchronizer(entries, groups)
   return { entries, groups, _synchronizer: synchronizer }

app/gui2/src/util/colors.ts

@@ -6,7 +6,8 @@ useMode(modeOklch)
 useMode(modeRgb)
 
 // Check if the browser supports `oklch` colorspace. If it does not, we fallback to good-old sRGB.
-const supportsOklch: boolean = 'supports' in CSS && CSS.supports('color: oklch(0 0 0)')
+const supportsOklch: boolean =
+  typeof CSS !== 'undefined' && 'supports' in CSS && CSS.supports('color: oklch(0 0 0)')
 
 /* Generate a sRGB color value from the provided string. */
 export function colorFromString(s: string) {
@@ -16,7 +17,7 @@ export function colorFromString(s: string) {
   const part2: number = (hash >> 10) & 0x3ff
   const part3: number = hash & 0x3ff
   // Range values below can be adjusted if necessary, they were chosen arbitrarily.
-  const chroma = mapInt32(part1, 0.05, 0.14, 12)
+  const chroma = mapInt32(part1, 0.1, 0.19, 12)
   const hue = mapInt32(part2, 0, 360, 10)
   const lightness = mapInt32(part3, 0.52, 0.57, 10)
   const color: Oklch = {