feat: columns autocomplete

src/lib/components/Datasets/Columns.svelte

@@ -25,6 +25,7 @@
 	li {
 		display: flex;
 		justify-content: space-between;
+		align-items: center;
 		white-space: nowrap;
 	}
 
@@ -41,5 +42,7 @@
 		white-space: nowrap;
 		max-width: 50%;
 		padding: 0 2px;
+		color: #777;
+		font-size: 9px;
 	}
 </style>

src/lib/components/Datasets/Tree.svelte

@@ -58,7 +58,7 @@
 <style>
 	* {
 		font-family: monospace;
-		font-size: 10px;
+		font-size: 11px;
 		color: lightgray;
 	}
 

src/lib/components/Editor/language.ts

@@ -4,9 +4,10 @@ export function setupLanguage(
 	id: string,
 	keywords: string[] = [],
 	functions: string[] = [],
-	tables: string[] = [],
 	types: string[] = [],
-	operators: string[] = []
+	operators: string[] = [],
+	tables: string[] = [],
+	columns: string[] = []
 ) {
 	monaco.languages.register({ id });
 	monaco.languages.setMonarchTokensProvider(id, {
@@ -16,6 +17,7 @@ export function setupLanguage(
 		tables: tables,
 		typeKeywords: types,
 		operators: operators,
+		columns: columns,
 
 		symbols: /[=><!~?:&|+\-*\/\^%]+/,
 
@@ -29,6 +31,7 @@ export function setupLanguage(
 							'@functions': 'function',
 							'@tables': 'identifier',
 							'@typeKeywords': 'type',
+							'@columns': 'identifier',
 							'@default': 'identifier'
 						}
 					}
@@ -72,7 +75,7 @@ export function setupLanguage(
 				endColumn: word.endColumn
 			};
 
-			const allItems = [...keywords, ...functions, ...tables];
+			const allItems = [...keywords, ...functions, ...tables, ...columns];
 			const uniqueItems = [...new Set(allItems)];
 
 			return {
@@ -82,7 +85,9 @@ export function setupLanguage(
 						? monaco.languages.CompletionItemKind.Keyword
 						: functions.includes(item)
 							? monaco.languages.CompletionItemKind.Function
-							: monaco.languages.CompletionItemKind.Class,
+							: columns.includes(item)
+								? monaco.languages.CompletionItemKind.Field
+								: monaco.languages.CompletionItemKind.Class,
 					insertText: item,
 					range: range
 				}))

src/routes/+page.svelte

@@ -70,9 +70,10 @@
 			'clickhouse',
 			keywords,
 			[...functions, ...udfs],
-			tables.map((t) => t.name),
 			types,
-			operators
+			operators,
+			tables.map((t) => t.name),
+			tables.map((t) => t.columns.map((c) => c.name)).flat()
 		);
 	}
 
@@ -236,7 +237,7 @@
 	$effect(() => void saveTabs($state.snapshot(tabs), selectedTabIndex).catch(console.error));
 
 	const bottomPanel = new PanelState('50%', false, '100%');
-	const leftPanel = new PanelState('242px', true);
+	const leftPanel = new PanelState('260px', true);
 
 	let bottomPanelTab = $state<'data' | 'chart' | 'logs'>('data');
 	let errors = $state.raw<Log[]>([]);