GraphQL query editor transformer works!

src-web/components/core/Editor/extensions.ts

@@ -33,7 +33,6 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { graphqlLanguageSupport } from 'cm6-graphql';
-import { debouncedAutocompletionDisplay } from './autocomplete';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
 
@@ -78,7 +77,7 @@ export const myHighlightStyle = HighlightStyle.define([
 // ]);
 
 const syntaxExtensions: Record<string, LanguageSupport> = {
-  'application/graphql+json': graphqlLanguageSupport(),
+  'application/graphql': graphqlLanguageSupport(),
   'application/json': json(),
   'application/javascript': javascript(),
   'text/html': html(),

src-web/components/core/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import * as T from '@radix-ui/react-tabs';
 import classnames from 'classnames';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { Button } from '../Button';
 import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
@@ -81,7 +81,7 @@ export function Tabs({ defaultValue, label, children, tabs, className, tabListCl
                     )}
                   >
                     {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                    <Icon icon="triangleDown" className="-mr-1.5" />
+                    <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
                   </Button>
                 </T.Trigger>
               );