[FE-2075] feat(studio): bump graphiql to v5 and use prebuilt component (#45404)

Adds `graphiql@5.2.2` and switches from our heavily-customised rebuild
(which used `@graphiql/react` + `@graphiql/toolkit` directly) to the
prebuilt component, restyled to match the dashboard. Role impersonation
re-added as a sidebar plugin.

This is a deliberately simpler setup than what we had – we lose some
layout customisation (sidebar is forced to the left, role impersonation
moves into the sidebar) but future upgrades become much easier since
we're no longer maintaining a fork-by-rewrite.

**Removed:**
- `apps/studio/components/interfaces/GraphQL/GraphiQL.tsx` – custom
rebuild
- `apps/studio/components/interfaces/GraphQL/graphiql.module.css` –
custom styles

**Changed:**
- Added `graphiql` ^5.2.2 (we previously didn't have the top-level
package, just the subpackages)
- `@graphiql/react` ^0.19.4 → ^0.37.3 (now Monaco-based; v0.19 was still
on CodeMirror 5)
- `@graphiql/toolkit` ^0.9.1 → ^0.11.3
- `GraphiQLTab.tsx` now wires up the prebuilt `<GraphiQL />` with worker
setup, theme bridge, and plugins
- New `graphiql.module.css` scopes restyling via `:global(...)` since we
can't add hashed classes to the library's DOM
- `RoleImpersonationSelector` gained an `orientation: 'horizontal' |
'vertical'` prop (default `horizontal`) so it fits in the sidebar pane –
all existing call sites unchanged
- `MonacoThemeProvider` exports `getTheme` so the GraphQL Monaco
instance can reuse Studio's theme

**Added:**
- Theme bridge: `supabase-graphql-dark` / `supabase-graphql-light`
Monaco themes synced with `next-themes` via `forcedTheme`
- Role impersonation sidebar plugin (gated on `field.jwt_secret` read
permission, same as before)

### Notes / tradeoffs

- We don't share Studio's monaco instance – Studio loads it via AMD/CDN,
GraphiQL bundles it as ESM. Both end up on `monaco-editor@0.52.2` but in
different module systems. Sharing would require ripping out Studio's CDN
loader (Studio-wide refactor, out of scope). GraphiQL's monaco is
dynamically imported and only loads when the GraphQL tab opens.
- The dark/light response panel uses different `--graphiql-response-bg`
tokens because the editor sits at very different baseline lightness in
each theme; a single token can't lift it meaningfully in both
directions.
- Session header (tabs row) is hidden – we don't expose multi-tab
workflows.

## To test

- Open `/project/<ref>/api/graphiql` in both light and dark themes –
editor + response panel backgrounds, sidebar borders, button radii
should all match the dashboard
- Run a query and confirm syntax highlighting works (GraphQL-specific
token `argument.identifier.gql` is purple)
- Open the doc explorer and history sidebar plugins
- As a user with `field.jwt_secret` read permission: open the Role
Impersonation sidebar plugin, pick a role, confirm subsequent queries
hit the API with the impersonated JWT
- As a user without that permission: confirm the Role Impersonation
plugin doesn't appear, history still does
- Toggle theme while GraphiQL is open – Monaco theme should swap without
a reload

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Vertical layout option for the role impersonation selector; radios can
expand to full width.

* **Improvements**
* Revamped GraphiQL integration with updated upstream package, plugins,
and editor theming for improved consistency and UX.
* New GraphiQL styling and layout for clearer pane separation and
polished controls.
* Role selector radios now support a full-width mode for improved
responsiveness.

* **Chores**
  * Updated GraphiQL-related dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>

apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css

@@ -0,0 +1,104 @@
+@reference "../../../../styles/main.css";
+
+.root :global(.graphiql-sidebar) {
+  @apply border-r border-default;
+  overflow-x: hidden;
+}
+
+.root :global(.graphiql-sidebar [data-value='settings']),
+.root :global(.graphiql-sidebar [data-value='short-keys']) {
+  display: none;
+}
+
+.root :global(.graphiql-sessions) {
+  @apply m-0;
+}
+
+.root :global(#graphiql-session) {
+  @apply p-0;
+}
+
+.root :global(.graphiql-session-header) {
+  display: none;
+}
+
+.root :global(.graphiql-horizontal-drag-bar) {
+  @apply border-l border-default;
+}
+
+.root :global(.graphiql-horizontal-drag-bar:hover::after) {
+  @apply rounded-full;
+}
+
+.root :global(.graphiql-plugin) {
+  border-left: 0;
+}
+
+/* Lift the response panel above the editor surface so the two read as separate panes.
+ * The token differs per theme because the editor sits at a different baseline lightness
+ * in each (~12% L in dark, ~94% L in light), so a single surface token can't lift it
+ * meaningfully in both directions. */
+.root :global(.graphiql-response),
+.root :global(.graphiql-response .monaco-editor),
+.root :global(.graphiql-response .monaco-editor .margin),
+.root :global(.graphiql-response .monaco-editor .monaco-editor-background) {
+  background-color: var(--graphiql-response-bg) !important;
+}
+
+/* Editor-to-response drag bar: blend it into the response side so it doesn't read as
+ * a third color sandwiched between the two panes. The plugin-to-main drag bar is left
+ * alone — it sits next to the editor surface and our default border there is fine. */
+.root :global(.graphiql-editors + .graphiql-horizontal-drag-bar) {
+  background-color: var(--graphiql-response-bg);
+  border-left: 0;
+}
+
+.root :global(.graphiql-button),
+.root :global(button.graphiql-button),
+.root :global(.graphiql-un-styled),
+.root :global(button.graphiql-un-styled),
+.root :global(button.graphiql-execute-button) {
+  @apply rounded-md;
+}
+
+.root :global(.graphiql-button-group) {
+  @apply rounded-lg;
+}
+
+.root :global(.graphiql-doc-explorer-search),
+.root :global(.graphiql-doc-explorer-search-input) {
+  @apply rounded-md;
+}
+
+.root :global(.graphiql-doc-explorer-search [role='listbox']) {
+  @apply rounded-b-md;
+}
+
+/* Theme variable overrides */
+
+.root {
+  --font-family: theme(fontFamily.sans);
+  --font-family-mono: theme(fontFamily.mono);
+  --border-radius-2: 0;
+  --border-radius-4: 0;
+  --border-radius-8: 0;
+  --border-radius-12: 0;
+  --popover-box-shadow: none;
+}
+
+:global(body.graphiql-dark) .root {
+  /* HSL form of #1f1f1f, matches the editor.background returned by getTheme('dark') */
+  --color-base: 0, 0%, 12%;
+  --color-primary: 153, 50%, 50%;
+  --graphiql-response-bg: hsl(var(--background-surface-300));
+}
+
+:global(body.graphiql-light) .root {
+  /* HSL form of #fcfcfc, matches the dashboard bg-default and the editor.background
+   * we override to in GraphiQLTab.tsx so the editor reads as part of the surrounding UI. */
+  --color-base: 0, 0%, 98.8%;
+  --color-primary: 153, 50%, 50%;
+  /* Drop the response below the editor in light mode (inverse of dark) so it reads as
+   * the lower / "data" surface rather than the lifted one. */
+  --graphiql-response-bg: hsl(var(--background-surface-300));
+}