Add configuration of line number visibility (#519)

biome.json

@@ -26,6 +26,7 @@
 							{ "name": "useBoolean", "stableResult": [1] },
 							{ "name": "useOnboarding", "stableResult": [1] },
 							{ "name": "useImmer", "stableResult": [1] },
+							{ "name": "useSetting", "stableResult": [1] },
 							{ "name": "useNodesState", "stableResult": [1, 2] },
 							{ "name": "useEdgesState", "stableResult": [1, 2] },
 							{ "name": "useStable", "stableResult": true },
@@ -42,18 +43,9 @@
 		"indentStyle": "tab",
 		"lineWidth": 100,
 		"attributePosition": "multiline",
-		"ignore": [
-			"src/util/icons.tsx"
-		]
+		"ignore": ["src/util/icons.tsx"]
 	},
 	"files": {
-		"ignore": [
-			".vscode",
-			".github",
-			"node_modules",
-			"src-tauri",
-			"dist",
-			"*.js"
-		]
+		"ignore": [".vscode", ".github", "node_modules", "src-tauri", "dist", "*.js"]
 	}
 }

src/adapter/mini.tsx

@@ -16,6 +16,7 @@ export class MiniAdapter extends BrowserAdapter {
 	public appearance: MiniAppearance = "normal";
 	public corners: string | undefined = undefined;
 	public transparent = false;
+	public nonumbers = false;
 	public uniqueRef = "";
 	public autorun = false;
 
@@ -36,11 +37,13 @@ export class MiniAdapter extends BrowserAdapter {
 			theme,
 			appearance,
 			corners,
-			compact,
-			borderless,
 			transparent,
 			orientation,
+			nonumbers,
 			autorun,
+			// deprecated
+			compact,
+			borderless,
 		} = Object.fromEntries(params.entries());
 
 		// Unique reference id
@@ -49,7 +52,7 @@ export class MiniAdapter extends BrowserAdapter {
 		}
 
 		// Appearance
-		if (appearance) {
+		if (appearance !== undefined) {
 			this.appearance = appearance as MiniAppearance;
 		}
 
@@ -72,7 +75,7 @@ export class MiniAdapter extends BrowserAdapter {
 
 		// Transparent background
 		if (transparent !== undefined) {
-			this.transparent = true;
+			this.transparent = bool(transparent);
 			document.body.style.backgroundColor = "transparent";
 			document.documentElement.style.colorScheme = "unset";
 		}
@@ -140,7 +143,12 @@ export class MiniAdapter extends BrowserAdapter {
 
 		// Autorun query
 		if (autorun !== undefined) {
-			this.autorun = true;
+			this.autorun = bool(autorun);
+		}
+
+		// Hide line numbers
+		if (nonumbers !== undefined) {
+			this.nonumbers = bool(nonumbers);
 		}
 
 		return {
@@ -182,3 +190,7 @@ export class MiniAdapter extends BrowserAdapter {
 		broadcastMessage("ready", opts);
 	}
 }
+
+function bool(value: string | undefined) {
+	return value !== undefined && value !== "false";
+}

src/components/App/settings/tabs/Appearance.tsx

@@ -1,6 +1,3 @@
-import { Box, Checkbox, Select, Slider } from "@mantine/core";
-import { isDesktop } from "~/adapter";
-import { Label } from "~/components/Label";
 import {
 	DESIGNER_DIRECTIONS,
 	DESIGNER_NODE_MODES,
@@ -11,31 +8,30 @@ import {
 	THEMES,
 	VALUE_MODES,
 } from "~/constants";
-import { useSetting } from "~/hooks/config";
+
+import { Box, Checkbox, Select, Slider } from "@mantine/core";
+import { isDesktop } from "~/adapter";
+import { Label } from "~/components/Label";
+import { useLineNumberSetting, useSetting } from "~/hooks/config";
 import { useCheckbox } from "~/hooks/events";
 import { useFeatureFlags } from "~/util/feature-flags";
 import { SettingsSection } from "../utilities";
 
 const CAT = "appearance";
 
 export function AppearanceTab() {
+	const [flags] = useFeatureFlags();
+
 	const [colorScheme, setColorScheme] = useSetting(CAT, "colorScheme");
 	const [editorScale, setEditorScale] = useSetting(CAT, "editorScale");
 	const [windowScale, setWindowScale] = useSetting(CAT, "windowScale");
 	// const [resultWordWrap, setResultWordWrap] = useSetting(CAT, "resultWordWrap");
-	const [defaultResultMode, setDefaultResultMode] = useSetting(
-		CAT,
-		"defaultResultMode",
-	);
-	const [queryOrientation, setQueryOrientation] = useSetting(
-		CAT,
-		"queryOrientation",
-	);
+	const [defaultResultMode, setDefaultResultMode] = useSetting(CAT, "defaultResultMode");
+	const [queryOrientation, setQueryOrientation] = useSetting(CAT, "queryOrientation");
 	const [valueMode, setValueMode] = useSetting(CAT, "valueMode");
-	const [defaultDiagramMode, setDefaultDiagramMode] = useSetting(
-		CAT,
-		"defaultDiagramMode",
-	);
+	const [defaultDiagramMode, setDefaultDiagramMode] = useSetting(CAT, "defaultDiagramMode");
+	const [sidebarMode, setSidebarMode] = useSetting(CAT, "sidebarMode");
+	const [lineStyle, setLineStyle] = useSetting(CAT, "lineStyle");
 	const [defaultDiagramDirection, setDefaultDiagramDirection] = useSetting(
 		CAT,
 		"defaultDiagramDirection",
@@ -44,15 +40,10 @@ export function AppearanceTab() {
 		CAT,
 		"defaultDiagramShowLinks",
 	);
-	const [sidebarMode, setSidebarMode] = useSetting(CAT, "sidebarMode");
-	const [lineStyle, setLineStyle] = useSetting(CAT, "lineStyle");
 
-	// const updateResultWordWrap = useCheckbox(setResultWordWrap);
-	const updateDefaultDiagramShowLinks = useCheckbox(
-		setDefaultDiagramShowLinks,
-	);
+	const updateDefaultDiagramShowLinks = useCheckbox(setDefaultDiagramShowLinks);
 
-	const [flags] = useFeatureFlags();
+	const [hasLineNumbers, toggleLineNumbers] = useLineNumberSetting();
 
 	return (
 		<>
@@ -121,6 +112,26 @@ export function AppearanceTab() {
 				)}
 			</SettingsSection>
 
+			<SettingsSection label="Line numbers">
+				<Checkbox
+					label="Show in query editor"
+					checked={hasLineNumbers("query")}
+					onChange={() => toggleLineNumbers("query")}
+				/>
+
+				<Checkbox
+					label="Show in record inspector"
+					checked={hasLineNumbers("inspector")}
+					onChange={() => toggleLineNumbers("inspector")}
+				/>
+
+				<Checkbox
+					label="Show in function editor"
+					checked={hasLineNumbers("functions")}
+					onChange={() => toggleLineNumbers("functions")}
+				/>
+			</SettingsSection>
+
 			<SettingsSection label="Query view">
 				{/* <Checkbox
 					label="Query results text wrapping"

src/components/CodeEditor/index.tsx

@@ -1,7 +1,7 @@
 import { history } from "@codemirror/commands";
 import { forceLinting } from "@codemirror/lint";
 import { Compartment, EditorState, type Extension } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import { EditorView, lineNumbers as renderLineNumbers } from "@codemirror/view";
 import { Box, type BoxProps } from "@mantine/core";
 import clsx from "clsx";
 import { useEffect, useRef } from "react";
@@ -12,9 +12,10 @@ import classes from "./style.module.scss";
 
 interface EditorRef {
 	editor: EditorView;
-	editable: Compartment;
-	history: Compartment;
-	theme: Compartment;
+	readOnlyComp: Compartment;
+	historyComp: Compartment;
+	themeComp: Compartment;
+	numbersComp: Compartment;
 }
 
 export interface CodeEditorProps extends BoxProps {
@@ -23,6 +24,7 @@ export interface CodeEditorProps extends BoxProps {
 	readOnly?: boolean;
 	autoFocus?: boolean;
 	historyKey?: string;
+	lineNumbers?: boolean;
 	onMount?: (editor: EditorView) => void;
 	onChange?: (value: string) => void;
 }
@@ -36,6 +38,7 @@ export function CodeEditor(props: CodeEditorProps) {
 		readOnly,
 		autoFocus,
 		historyKey,
+		lineNumbers,
 		onMount,
 		...rest
 	} = props;
@@ -51,11 +54,10 @@ export function CodeEditor(props: CodeEditorProps) {
 	useEffect(() => {
 		if (!ref.current) return;
 
-		const editable = new Compartment();
-		const history = new Compartment();
-		const theme = new Compartment();
-		const editableExt = editable.of(EditorState.readOnly.of(!!readOnly));
-		const historyExt = history.of(newHistory());
+		const readOnlyComp = new Compartment();
+		const historyComp = new Compartment();
+		const themeComp = new Compartment();
+		const numbersComp = new Compartment();
 
 		const changeHandler = EditorView.updateListener.of((update) => {
 			if (update.docChanged) {
@@ -67,10 +69,11 @@ export function CodeEditor(props: CodeEditorProps) {
 			doc: value,
 			extensions: [
 				editorBase(),
-				theme.of(colorTheme(isLight)),
-				historyExt,
+				readOnlyComp.of(EditorState.readOnly.of(!!readOnly)),
+				historyComp.of(newHistory()),
+				themeComp.of(colorTheme(isLight)),
+				numbersComp.of(lineNumbers ? renderLineNumbers() : []),
 				changeHandler,
-				editableExt,
 				extensions || [],
 			],
 		});
@@ -83,9 +86,10 @@ export function CodeEditor(props: CodeEditorProps) {
 
 		editorRef.current = {
 			editor,
-			editable,
-			history,
-			theme,
+			readOnlyComp,
+			historyComp,
+			themeComp,
+			numbersComp,
 		};
 
 		if (autoFocus) {
@@ -127,39 +131,48 @@ export function CodeEditor(props: CodeEditorProps) {
 	useEffect(() => {
 		if (!editorRef.current) return;
 
-		const { editor, editable } = editorRef.current;
-		const editableExt = EditorState.readOnly.of(!!readOnly);
+		const { editor, readOnlyComp } = editorRef.current;
 
 		editor.dispatch({
-			effects: editable.reconfigure(editableExt),
+			effects: readOnlyComp.reconfigure(EditorState.readOnly.of(!!readOnly)),
 		});
 	}, [readOnly]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: History key used for reconfiguration
 	useEffect(() => {
 		if (!editorRef.current) return;
 
-		const { editor, history } = editorRef.current;
+		const { editor, historyComp } = editorRef.current;
 
 		editor.dispatch({
-			effects: [history.reconfigure([])],
+			effects: [historyComp.reconfigure([])],
 		});
 
 		editor.dispatch({
-			effects: [history.reconfigure([newHistory()])],
+			effects: [historyComp.reconfigure([newHistory()])],
 		});
 	}, [historyKey]);
 
 	useEffect(() => {
 		if (!editorRef.current) return;
 
-		const { editor, theme } = editorRef.current;
+		const { editor, themeComp } = editorRef.current;
 
 		editor.dispatch({
-			effects: theme.reconfigure(colorTheme(isLight)),
+			effects: themeComp.reconfigure(colorTheme(isLight)),
 		});
 	}, [isLight]);
 
+	useEffect(() => {
+		if (!editorRef.current) return;
+
+		const { editor, numbersComp } = editorRef.current;
+
+		editor.dispatch({
+			effects: numbersComp.reconfigure(lineNumbers ? renderLineNumbers() : []),
+		});
+	}, [lineNumbers]);
+
 	return (
 		<Box
 			ref={ref}