Minor dark theme improvements (#647)

src/assets/styles/override.scss

@@ -1,5 +1,5 @@
 :root {
-	--surrealist-divider-size: 6px;
+	--surrealist-divider-size: 1rem;
 	--surrealist-gradient: linear-gradient(135deg, var(--mantine-color-surreal-filled) 0%, #9600FF 100%);
 }
 

src/components/CodePreview/index.tsx

@@ -98,7 +98,7 @@ export function CodePreview({
 								top={9}
 								right={9}
 								onClick={copy}
-								style={{ zIndex: 1 }}
+								className={classes.copy}
 								aria-label="Copy code to clipboard"
 							>
 								<Icon path={copied ? iconCheck : iconCopy} />

src/components/CodePreview/style.module.scss

@@ -6,4 +6,13 @@
 		user-select: text;
 		-webkit-user-select: text;
 	}
+}
+
+.copy {
+	z-index: 1;
+	display: none;
+}
+
+.root:hover .copy {
+	display: block;
 }

src/components/Introduction/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { Box, Center, Divider, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useIsLight } from "~/hooks/theme";
 import { CodePreview } from "../CodePreview";
@@ -12,6 +12,7 @@ export interface IntroductionProps {
 		title?: string;
 		code: string;
 		language: string;
+		dedent?: boolean;
 	};
 }
 
@@ -22,8 +23,6 @@ export function Introduction({
 	snippet,
 	children,
 }: PropsWithChildren<IntroductionProps>) {
-	const isLight = useIsLight();
-
 	return (
 		<Center
 			h="100%"
@@ -49,27 +48,25 @@ export function Introduction({
 					{children}
 				</Stack>
 				{snippet?.code && (
-					<Box
-						p="xl"
-						bg={isLight ? "white" : "slate.7"}
-					>
-						<Text
-							c="bright"
-							fz={18}
-							fw={600}
-							mb="md"
-						>
-							{snippet.title ?? "Example"}
-						</Text>
-						<CodePreview
-							bg="transparent"
-							withBorder={false}
-							padding={0}
-							value={snippet.code}
-							language={snippet.language}
-							withDedent
-						/>
-					</Box>
+					<>
+						<Divider />
+						<Box p="xl">
+							<Text
+								c="bright"
+								fz={18}
+								fw={600}
+								mb="md"
+							>
+								{snippet.title ?? "Example"}
+							</Text>
+							<CodePreview
+								withCopy
+								value={snippet.code}
+								language={snippet.language}
+								withDedent={snippet.dedent !== false}
+							/>
+						</Box>
+					</>
 				)}
 			</Paper>
 		</Center>

src/components/Pane/style.module.scss

@@ -20,5 +20,5 @@
 }
 
 .dragger {
-	flex: 0 0 0.5rem;
+	flex: 0 0 var(--surrealist-divider-size);
 }

src/screens/surrealist/cloud-panel/style.module.scss

@@ -18,6 +18,10 @@
 		padding: var(--mantine-spacing-md);
 		border-radius: var(--mantine-radius-sm);
 		border: 1px solid var(--mantine-color-slate-6);
+
+		@include light {
+			border-color: var(--mantine-color-slate-1);
+		}
 	}
 }
 

src/screens/surrealist/views/designer/DesignerView/index.tsx

@@ -1,8 +1,11 @@
-import { Box } from "@mantine/core";
+import { Box, Button, Group } from "@mantine/core";
+import { Text } from "@mantine/core";
 import { ReactFlowProvider } from "@xyflow/react";
 import { memo, useEffect } from "react";
 import { Panel, PanelGroup } from "react-resizable-panels";
+import { adapter } from "~/adapter";
 import { Icon } from "~/components/Icon";
+import { Introduction } from "~/components/Introduction";
 import { PanelDragger } from "~/components/Pane/dragger";
 import { useConnection, useIsConnected } from "~/hooks/connection";
 import { usePanelMinSize } from "~/hooks/panels";
@@ -12,19 +15,21 @@ import { useStable } from "~/hooks/stable";
 import { useDesigner } from "~/providers/Designer";
 import { TablesPane } from "~/screens/surrealist/components/TablesPane";
 import { useConfigStore } from "~/stores/config";
-import { iconDesigner, iconEye } from "~/util/icons";
+import { useInterfaceStore } from "~/stores/interface";
+import { iconDesigner, iconEye, iconOpen, iconPlus } from "~/util/icons";
 import { dispatchIntent } from "~/util/intents";
 import { syncConnectionSchema } from "~/util/schema";
 import { TableGraphPane } from "../TableGraphPane";
 
 const TableGraphPaneLazy = memo(TableGraphPane);
 
 export function DesignerView() {
+	const { openTableCreator } = useInterfaceStore.getState();
 	const { updateCurrentConnection } = useConfigStore.getState();
 	const { design, stopDesign, active, isDesigning } = useDesigner();
 	const designerTableList = useConnection((c) => c?.designerTableList);
 
-	const isOnline = useIsConnected();
+	const isConnected = useIsConnected();
 	const tables = useTables();
 
 	const buildContextMenu = useStable((table: string) => [
@@ -49,10 +54,10 @@ export function DesignerView() {
 	});
 
 	useEffect(() => {
-		if (!isOnline) {
+		if (!isConnected) {
 			stopDesign();
 		}
-	}, [isOnline, stopDesign]);
+	}, [isConnected, stopDesign]);
 
 	useIntent("design-table", ({ table }) => {
 		design(table);
@@ -62,6 +67,7 @@ export function DesignerView() {
 		syncConnectionSchema();
 	});
 
+	const emptySchema = tables.length === 0;
 	const [minSize, ref] = usePanelMinSize(275);
 
 	return (
@@ -74,7 +80,7 @@ export function DesignerView() {
 					direction="horizontal"
 					style={{ opacity: minSize === 0 ? 0 : 1 }}
 				>
-					{designerTableList && (
+					{(designerTableList || emptySchema) && (
 						<>
 							<Panel
 								defaultSize={minSize}
@@ -85,6 +91,7 @@ export function DesignerView() {
 							>
 								<TablesPane
 									icon={iconDesigner}
+									closeDisabled={emptySchema}
 									onTableSelect={design}
 									onTableContextMenu={buildContextMenu}
 									onClose={closeTableList}
@@ -98,18 +105,68 @@ export function DesignerView() {
 						id="graph"
 						order={2}
 					>
-						<ReactFlowProvider>
-							<TableGraphPaneLazy
-								tables={tables}
-								active={isDesigning ? active : null}
-								setActiveTable={design}
-							/>
-						</ReactFlowProvider>
+						{tables.length > 0 ? (
+							<ReactFlowProvider>
+								<TableGraphPaneLazy
+									tables={tables}
+									active={isDesigning ? active : null}
+									setActiveTable={design}
+								/>
+							</ReactFlowProvider>
+						) : (
+							<Introduction
+								title="Designer"
+								icon={iconDesigner}
+								snippet={{
+									language: "surrealql",
+									title: "SurrealQL",
+									code: `
+										-- Declare a new table
+										DEFINE TABLE person;
+										
+										-- Define a table field
+										DEFINE FIELD name ON person TYPE string;
+
+										-- Define an index on the field
+										DEFINE INDEX unique_name ON person
+											FIELDS name UNIQUE;
+									`,
+								}}
+							>
+								<Text>
+									The designer view allows you to visually design your database
+									schema without writing queries.
+								</Text>
+								<Group>
+									<Button
+										flex={1}
+										variant="gradient"
+										leftSection={<Icon path={iconPlus} />}
+										disabled={!isConnected}
+										onClick={openTableCreator}
+									>
+										Create table
+									</Button>
+									<Button
+										flex={1}
+										color="slate"
+										variant="light"
+										rightSection={<Icon path={iconOpen} />}
+										onClick={() =>
+											adapter.openUrl(
+												"https://surrealdb.com/docs/surrealdb/surrealql/statements/define/table",
+											)
+										}
+									>
+										Learn more
+									</Button>
+								</Group>
+							</Introduction>
+						)}
 					</Panel>
 				</PanelGroup>
 			</Box>
 		</>
-		// </Splitter>
 	);
 }
 

src/screens/surrealist/views/explorer/ExplorerView/index.tsx

@@ -40,14 +40,14 @@ export function ExplorerView() {
 	const { updateCurrentConnection } = useConfigStore.getState();
 	const { openTableCreator } = useInterfaceStore.getState();
 	const { design } = useDesigner();
+
+	const isConnected = useIsConnected();
 	const explorerTableList = useConnection((c) => c?.explorerTableList);
 
 	const [activeTable, setActiveTable] = useState<string>();
 	const [isCreating, isCreatingHandle] = useDisclosure();
 	const [creatorTable, setCreatorTable] = useState<string>();
 
-	const isConnected = useIsConnected();
-
 	const openCreator = useStable((table?: string) => {
 		setCreatorTable(table || activeTable);
 		isCreatingHandle.open();
@@ -164,6 +164,7 @@ export function ExplorerView() {
 								icon={iconExplorer}
 								snippet={{
 									language: "surrealql",
+									title: "SurrealQL",
 									code: `
 										-- Declare a new table
 										DEFINE TABLE person;

src/screens/surrealist/views/functions/FunctionsView/index.tsx

@@ -204,6 +204,7 @@ export function FunctionsView() {
 								icon={iconFunction}
 								snippet={{
 									language: "surrealql",
+									title: "SurrealQL",
 									code: `
 										-- Define your functions with ease
 										DEFINE FUNCTION fn::greet($name: string) {

src/screens/surrealist/views/graphql/GraphqlView/index.tsx

@@ -1,8 +1,8 @@
 import type { EditorView } from "@codemirror/view";
-import { ActionIcon, Button, Center, Group, Paper, Stack } from "@mantine/core";
+import { ActionIcon, Alert, Button, Center, Group, Paper, Stack } from "@mantine/core";
 import { Text } from "@mantine/core";
 import clsx from "clsx";
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { Panel, PanelGroup } from "react-resizable-panels";
 import { adapter } from "~/adapter";
 import { Icon } from "~/components/Icon";
@@ -18,6 +18,8 @@ import { useIsLight } from "~/hooks/theme";
 import { checkGraphqlSupport } from "~/screens/surrealist/connection/connection";
 import { useConfigStore } from "~/stores/config";
 import { useDatabaseStore } from "~/stores/database";
+import { createBaseAuthentication } from "~/util/defaults";
+import { connectionUri } from "~/util/helpers";
 import { iconCursor, iconGraphql, iconOpen, iconWarning } from "~/util/icons";
 import { QueryPane } from "../QueryPane";
 import { ResultPane } from "../ResultPane";
@@ -42,13 +44,15 @@ export function GraphqlView() {
 	const isConnected = useIsConnected();
 	const [schema, introspectSchema] = useGraphqlIntrospection();
 
-	const [id, showVariables, protocol] = useConnection((c) => [
+	const [id, showVariables, namespace, database, authentication] = useConnection((c) => [
 		c?.id ?? "",
 		c?.graphqlShowVariables ?? false,
-		c?.authentication.protocol ?? "http",
+		c?.lastNamespace ?? "",
+		c?.lastDatabase ?? "",
+		c?.authentication ?? createBaseAuthentication(),
 	]);
 
-	const isAvailable = GQL_SUPPORTED.has(protocol);
+	const isAvailable = GQL_SUPPORTED.has(authentication.protocol);
 	const isSandbox = id === "sandbox";
 
 	const runQuery = useStable(() => {
@@ -69,6 +73,23 @@ export function GraphqlView() {
 
 	const isValid = queryValid && variablesValid && isEnabled;
 
+	const snippet = useMemo(
+		() => ({
+			language: "bash",
+			title: "Using cURL",
+			code: `
+			# Execute a curl request
+			curl -X POST -u "root:root" \\
+				-H "Surreal-NS: ${namespace}" \\
+				-H "Surreal-DB: ${database}" \\
+				-H "Accept: application/json" \\
+				-d '{"query": "{ person(filter: {age: {age_gt: 18}}) { id name age } }"}' \\
+				http://surrealdb.example.com/graphql
+		`,
+		}),
+		[namespace, database],
+	);
+
 	useViewFocus(
 		"graphql",
 		() => {
@@ -169,6 +190,7 @@ export function GraphqlView() {
 		<Introduction
 			title="GraphQL"
 			icon={iconGraphql}
+			snippet={snippet}
 		>
 			<Text>
 				The GraphQL view provides a fully interactive environment for executing GraphQL
@@ -188,7 +210,9 @@ export function GraphqlView() {
 				color="slate"
 				variant="light"
 				rightSection={<Icon path={iconOpen} />}
-				onClick={() => adapter.openUrl("https://surrealdb.com/docs/surrealist")}
+				onClick={() =>
+					adapter.openUrl("https://surrealdb.com/docs/surrealdb/querying/graphql")
+				}
 			>
 				Learn more
 			</Button>