Misc improvements (#512)

src/adapter/mini.tsx

@@ -1,19 +1,23 @@
 import type { MantineColorScheme } from "@mantine/core";
 import { Value } from "@surrealdb/ql-wasm";
+import dedent from "dedent";
 import { DATASETS, ORIENTATIONS, SANDBOX } from "~/constants";
-import { executeQuery } from "~/screens/database/connection/connection";
-import type { Orientation, SurrealistConfig } from "~/types";
+import { executeQuery, executeUserQuery } from "~/screens/database/connection/connection";
+import type { MiniAppearance, Orientation, SurrealistConfig } from "~/types";
 import { createBaseSettings, createBaseTab, createSandboxConnection } from "~/util/defaults";
 import { showError } from "~/util/helpers";
+import { broadcastMessage } from "~/util/messaging";
 import { parseDatasetURL } from "~/util/surrealql";
 import { BrowserAdapter } from "./browser";
 
 const THEMES = new Set(["light", "dark", "auto"]);
 
 export class MiniAdapter extends BrowserAdapter {
+	public appearance: MiniAppearance = "normal";
+	public corners: string | undefined = undefined;
 	public transparent = false;
-	public hideTitlebar = false;
-	public hideBorder = false;
+	public uniqueRef = "";
+	public autorun = false;
 
 	#datasetQuery: string | undefined;
 	#setupQuery: string | undefined;
@@ -24,44 +28,65 @@ export class MiniAdapter extends BrowserAdapter {
 		const params = new URL(document.location.toString()).searchParams;
 
 		const {
+			ref,
 			query,
 			variables,
 			dataset,
 			setup,
 			theme,
+			appearance,
+			corners,
 			compact,
 			borderless,
 			transparent,
 			orientation,
+			autorun,
 		} = Object.fromEntries(params.entries());
 
-		// Hide titlebar
+		// Unique reference id
+		if (ref !== undefined) {
+			this.uniqueRef = ref;
+		}
+
+		// Appearance
+		if (appearance) {
+			this.appearance = appearance as MiniAppearance;
+		}
+
+		// Panel corners
+		if (corners !== undefined) {
+			this.corners = corners;
+		}
+
+		// Hide titlebar (deprecated)
 		if (compact !== undefined) {
-			this.hideTitlebar = true;
+			console.warn("The compact property is deprecated, please use appearance compact");
+			this.appearance = "compact";
 		}
 
-		// Borderless
+		// Borderless (deprecated)
 		if (borderless !== undefined) {
-			this.hideTitlebar = true;
-			this.hideBorder = true;
+			console.warn("The borderless property is deprecated, please use appearance plain");
+			this.appearance = "plain";
 		}
 
 		// Transparent background
 		if (transparent !== undefined) {
 			this.transparent = true;
 			document.body.style.backgroundColor = "transparent";
+			document.documentElement.style.colorScheme = "unset";
 		}
 
 		// Initial query
 		if (query) {
-			mainTab.query = decodeURIComponent(query);
+			mainTab.query = dedent(decodeURIComponent(query));
 		}
 
 		// Initial variables
 		if (variables) {
 			try {
 				const parsed = Value.from_string(variables);
-				mainTab.variables = parsed.format(true);
+				mainTab.variables = dedent(parsed.format(true));
 			} catch {
 				showError({
 					title: "Startup error",
@@ -113,6 +138,11 @@ export class MiniAdapter extends BrowserAdapter {
 			}
 		}
 
+		// Autorun query
+		if (autorun !== undefined) {
+			this.autorun = true;
+		}
+
 		return {
 			settings,
 			activeConnection: SANDBOX,
@@ -128,13 +158,27 @@ export class MiniAdapter extends BrowserAdapter {
 		// noop
 	}
 
-	public initializeDataset() {
+	public initializeContent() {
 		if (this.#datasetQuery) {
 			executeQuery(this.#datasetQuery);
 		}
 
 		if (this.#setupQuery) {
 			executeQuery(this.#setupQuery);
 		}
+
+		if (this.autorun) {
+			executeUserQuery();
+		}
+	}
+
+	public broadcastReady() {
+		const opts: any = {};
+
+		if (this.uniqueRef) {
+			opts.ref = this.uniqueRef;
+		}
+
+		broadcastMessage("ready", opts);
 	}
 }

src/components/App/modals/data-export.tsx

@@ -87,7 +87,7 @@ export function DataExportModal() {
 			opened={isOpen}
 			onClose={openedHandle.close}
 			size="sm"
-			title={<PrimaryTitle>Export data</PrimaryTitle>}
+			title={<PrimaryTitle>Export database</PrimaryTitle>}
 		>
 			<Stack gap="xl">
 				<Text>
@@ -99,7 +99,8 @@ export function DataExportModal() {
 					title="Notice"
 					color="orange"
 				>
-					Export customization is currently unavailable as it is being integrated directly into SurrealDB
+					Export customization is currently unavailable as it is being integrated directly
+					into SurrealDB
 				</Alert>
 
 				<Stack>

src/components/CodePreview/index.tsx

@@ -1,13 +1,8 @@
+import classes from "./style.module.scss";
+
 import { Compartment, EditorState, type Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import {
-	ActionIcon,
-	Box,
-	CopyButton,
-	Paper,
-	type PaperProps,
-	Text,
-} from "@mantine/core";
+import { ActionIcon, Box, CopyButton, Paper, type PaperProps, Text } from "@mantine/core";
 import { surrealql } from "@surrealdb/codemirror";
 import clsx from "clsx";
 import dedent from "dedent";
@@ -16,7 +11,6 @@ import { colorTheme } from "~/editor";
 import { useIsLight } from "~/hooks/theme";
 import { iconCheck, iconCopy } from "~/util/icons";
 import { Icon } from "../Icon";
-import classes from "./style.module.scss";
 
 interface EditorRef {
 	editor: EditorView;
@@ -138,9 +132,7 @@ export function CodePreview({
 		const { editor, wrap } = editorRef.current;
 
 		editor.dispatch({
-			effects: wrap.reconfigure(
-				withWrapping ? EditorView.lineWrapping : [],
-			),
+			effects: wrap.reconfigure(withWrapping ? EditorView.lineWrapping : []),
 		});
 	}, [withWrapping]);
 
@@ -149,7 +141,13 @@ export function CodePreview({
 	return (
 		<>
 			{title && (
-				<Text ff="mono" tt="uppercase" fw={600} mb="sm" c="bright">
+				<Text
+					ff="mono"
+					tt="uppercase"
+					fw={600}
+					mb="sm"
+					c="bright"
+				>
 					{title}
 				</Text>
 			)}

src/components/CodeSnippet/index.tsx

@@ -1,8 +1,9 @@
 import { javascript } from "@codemirror/lang-javascript";
 import { php } from "@codemirror/lang-php";
+import { python } from "@codemirror/lang-python";
 import { rust } from "@codemirror/lang-rust";
 import { StreamLanguage } from "@codemirror/language";
-import { csharp } from "@codemirror/legacy-modes/mode/clike";
+import { csharp, java } from "@codemirror/legacy-modes/mode/clike";
 import type { Extension } from "@codemirror/state";
 import dedent from "dedent";
 import { useMemo } from "react";
@@ -12,7 +13,9 @@ import { CodePreview, type CodePreviewProps } from "../CodePreview";
 const EXTENSIONS: Partial<Record<CodeLang, Extension>> = {
 	rust: rust(),
 	js: javascript(),
-	csharp: [StreamLanguage.define(csharp)],
+	py: python(),
+	java: StreamLanguage.define(java),
+	csharp: StreamLanguage.define(csharp),
 	php: php({ plain: true }),
 };
 
@@ -22,12 +25,7 @@ export interface CodeSnippetProps extends Omit<CodePreviewProps, "value"> {
 	language: CodeLang;
 }
 
-export function CodeSnippet({
-	title,
-	values,
-	language,
-	...other
-}: CodeSnippetProps) {
+export function CodeSnippet({ title, values, language, ...other }: CodeSnippetProps) {
 	const snippet = useMemo(() => {
 		const value = values[language];
 		return value ? dedent(value) : undefined;

src/components/DriverSelector/index.tsx

@@ -0,0 +1,48 @@
+import classes from "./style.module.scss";
+
+import { type BoxProps, Paper, SimpleGrid, type StyleProp, Text } from "@mantine/core";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { DRIVERS } from "~/constants";
+import { useIsLight } from "~/hooks/theme";
+import type { CodeLang } from "~/types";
+
+export interface DriverSelectorProps extends BoxProps {
+	cols: StyleProp<number>;
+	value: CodeLang;
+	exclude?: CodeLang[];
+	onChange: (value: CodeLang) => void;
+}
+
+export function DriverSelector({ cols, value, exclude, onChange, ...other }: DriverSelectorProps) {
+	const isLight = useIsLight();
+
+	const drivers = useMemo(() => {
+		return DRIVERS.filter((lib) => !exclude?.includes(lib.id));
+	}, [exclude]);
+
+	return (
+		<SimpleGrid
+			cols={cols}
+			{...other}
+		>
+			{drivers.map((lib) => {
+				const Icon = lib.icon;
+				const isActive = value === lib.id;
+
+				return (
+					<Paper
+						key={lib.name}
+						radius="xl"
+						bg={isLight ? "slate.0" : "slate.9"}
+						className={clsx(classes.library, isActive && classes.libraryActive)}
+						onClick={() => onChange(lib.id)}
+					>
+						<Icon active={isActive} />
+						<Text mt="xs">{lib.name}</Text>
+					</Paper>
+				);
+			})}
+		</SimpleGrid>
+	);
+}

src/components/DriverSelector/style.module.scss

@@ -0,0 +1,24 @@
+.library {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	transition: box-shadow 0.1s;
+	cursor: pointer;
+	aspect-ratio: 1;
+	gap: 8;
+
+	&:hover {
+		background-color: var(--mantine-color-slate-6);
+	}
+}
+
+.library-active {
+	background: var(--surrealist-gradient) !important;
+	box-shadow: var(--surrealist-glow);
+	color: white;
+
+	svg * {
+		fill: white !important;
+	}
+}