From 642c037c1a87efd8d63558cc0ca5e98fb7b51ff7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 22 Dec 2023 05:16:33 +0100
Subject: [PATCH] feat: add button for auto-formatting

---
 frontend/src/lib/components/Editor.svelte     |  7 ++-
 frontend/src/lib/components/EditorBar.svelte  | 12 +++--
 .../src/lib/components/FormatOnSave.svelte    | 32 +++++++++++++
 .../src/lib/components/ScriptEditor.svelte    |  2 +-
 .../copilot/CodeCompletionStatus.svelte       | 46 +++++++++----------
 frontend/src/lib/stores.ts                    |  1 +
 6 files changed, 70 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/lib/components/FormatOnSave.svelte

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 6c8972161d..4534b28491 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -42,7 +42,8 @@
 		type DBSchema,
 		copilotInfo,
 		codeCompletionSessionEnabled,
-		lspTokenStore
+		lspTokenStore,
+		formatOnSave
 	} from '$lib/stores'
 
 	import {
@@ -257,7 +258,9 @@
 		if (editor) {
 			code = getCode()
 			if (lang != 'shell') {
-				await editor?.getAction('editor.action.formatDocument')?.run()
+				if ($formatOnSave != false) {
+					await editor?.getAction('editor.action.formatDocument')?.run()
+				}
 				code = getCode()
 			}
 			if (formatAction) {
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 39526e479d..4d4471b380 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -23,6 +23,8 @@
 	import { sendUserToast } from '$lib/toast'
 	import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
 	import Toggle from './Toggle.svelte'
+	import FormatOnSave from './FormatOnSave.svelte'
+
 	import {
 		DollarSign,
 		History,
@@ -42,6 +44,7 @@
 	import { getResetCode } from '$lib/script_helpers'
 	import type { Script } from '$lib/gen'
 	import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
+	import Popover from './Popover.svelte'
 
 	export let lang: SupportedLanguage
 	export let editor: Editor | undefined
@@ -59,6 +62,7 @@
 	export let template: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script'
 	export let collabMode = false
 	export let collabLive = false
+	export let formatOnSave = false
 	export let collabUsers: { name: string }[] = []
 	export let scriptPath: string | undefined = undefined
 	export let diffEditor: DiffEditor | undefined = undefined
@@ -520,14 +524,15 @@
 			{#if collabMode}
 				<div class="flex items-center px-1">
 					<Toggle
-						options={{ right: iconOnly ? '' : 'Multiplayer' }}
+						options={{ right: '' }}
 						size="xs"
 						checked={collabLive}
 						on:change={() => dispatch('toggleCollabMode')}
 					/>
-					{#if iconOnly}
+					<Popover>
+						<svelte:fragment slot="text">Multiplayer</svelte:fragment>
 						<Users class="ml-1" size={12} />
-					{/if}
+					</Popover>
 					{#if collabLive}
 						<button
 							title="Show invite link"
@@ -554,6 +559,7 @@
 
 			<CodeCompletionStatus />
 
+			<FormatOnSave />
 			<!-- <Popover
 				notClickable
 				placement="bottom"
diff --git a/frontend/src/lib/components/FormatOnSave.svelte b/frontend/src/lib/components/FormatOnSave.svelte
new file mode 100644
index 0000000000..32b9575f76
--- /dev/null
+++ b/frontend/src/lib/components/FormatOnSave.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Paintbrush } from 'lucide-svelte'
+	import Button from './common/button/Button.svelte'
+	import { formatOnSave } from '$lib/stores'
+	import Popover from './Popover.svelte'
+	import { getLocalSetting, storeLocalSetting } from '$lib/utils'
+
+	const SETTING_NAME = 'formatOnSave'
+	function loadSetting() {
+		$formatOnSave = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true'
+	}
+
+	function storeSetting() {
+		$formatOnSave = !$formatOnSave
+		storeLocalSetting(SETTING_NAME, $formatOnSave.toString())
+	}
+
+	loadSetting()
+</script>
+
+<Popover>
+	<svelte:fragment slot="text"
+		>{$formatOnSave ? 'Disable' : 'Enable'} auto-formatting</svelte:fragment
+	>
+	<Button
+		color="light"
+		startIcon={{ icon: Paintbrush, classes: !$formatOnSave ? 'text-red-400' : '' }}
+		on:click={() => {
+			storeSetting()
+		}}
+	/>
+</Popover>
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 02d6428350..cbc425b283 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -48,7 +48,7 @@
 		deno: false,
 		go: false,
 		ruff: false,
-		shellcheck: false,
+		shellcheck: false
 	}
 
 	let width = 1200
diff --git a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
index be7690f235..edef2435d0 100644
--- a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
+++ b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
@@ -3,40 +3,25 @@
 	import Button from '../common/button/Button.svelte'
 	import { codeCompletionLoading, copilotInfo, codeCompletionSessionEnabled } from '$lib/stores'
 	import Popover from '../Popover.svelte'
+	import { getLocalSetting, storeLocalSetting } from '$lib/utils'
 
-	function loadCodeCompletionSessinoEnabled() {
-		let stored
-		try {
-			stored = localStorage.getItem('codeCompletionSessionEnabled')
-		} catch (e) {
-			console.error('error interacting with local storage', e)
-		}
-
-		if (stored) {
-			$codeCompletionSessionEnabled = JSON.parse(stored)
-		}
+	const SETTING_NAME = 'codeCompletionSessionEnabled'
+	function loadSetting() {
+		$codeCompletionSessionEnabled = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true'
 	}
 
-	function toggleCodeCompletionSessionEnabled() {
+	function storeSetting() {
 		$codeCompletionSessionEnabled = !$codeCompletionSessionEnabled
-		try {
-			localStorage.setItem(
-				'codeCompletionSessionEnabled',
-				JSON.stringify($codeCompletionSessionEnabled)
-			)
-		} catch (e) {
-			console.error('error interacting with local storage', e)
-		}
+		storeLocalSetting(SETTING_NAME, $codeCompletionSessionEnabled.toString())
 	}
 
-	loadCodeCompletionSessinoEnabled()
+	loadSetting()
 </script>
 
 {#if $copilotInfo.exists_openai_resource_path && $copilotInfo.code_completion_enabled}
 	<Popover>
 		<svelte:fragment slot="text"
-			>Click to {$codeCompletionSessionEnabled ? 'disable' : 'enable'} code completion (applies only
-			to you)</svelte:fragment
+			>{$codeCompletionSessionEnabled ? 'Disable' : 'Enable'} code completion (applies only to you)</svelte:fragment
 		>
 		<Button
 			color="light"
@@ -47,8 +32,21 @@
 						icon: $codeCompletionSessionEnabled ? ZapIcon : ZapOffIcon
 				  }}
 			on:click={() => {
-				toggleCodeCompletionSessionEnabled()
+				storeSetting()
 			}}
 		/>
 	</Popover>
+{:else}
+	<Popover>
+		<svelte:fragment slot="text"
+			>Code completion is disabled in the workspace settings</svelte:fragment
+		>
+		<Button
+			color="light"
+			startIcon={{
+				icon: ZapOffIcon
+			}}
+			disabled
+		/>
+	</Popover>
 {/if}
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
index d20c38d705..f47f3ea5df 100644
--- a/frontend/src/lib/stores.ts
+++ b/frontend/src/lib/stores.ts
@@ -75,6 +75,7 @@ export const copilotInfo = writable<{
 })
 export const codeCompletionLoading = writable<boolean>(false)
 export const codeCompletionSessionEnabled = writable<boolean>(true)
+export const formatOnSave = writable<boolean>(true)
 
 type SQLBaseSchema = {
 	[schemaKey: string]: {