feat(frontend): add relative line numbers toggle (#6416)

* feat(frontend): add relative line numbers toggle

Signed-off-by: pyranota <pyra@duck.com>

* nits

Signed-off-by: pyranota <pyra@duck.com>

---------

Signed-off-by: pyranota <pyra@duck.com>

frontend/src/lib/components/Editor.svelte

@@ -100,7 +100,8 @@
 		codeCompletionSessionEnabled,
 		lspTokenStore,
 		formatOnSave,
-		vimMode
+		vimMode,
+		relativeLineNumbers
 	} from '$lib/stores'
 
 	import { editorConfig, updateOptions } from '$lib/editorUtils'
@@ -1234,7 +1235,7 @@
 
 		try {
 			editor = meditor.create(divEl as HTMLDivElement, {
-				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
+				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
 				model,
 				fontSize: !small ? 14 : 12,
 				lineNumbersMinChars,
@@ -1652,6 +1653,11 @@
 	$effect(() => {
 		files && model && untrack(() => onFileChanges())
 	})
+	$effect(() => {
+		editor?.updateOptions({ 
+			lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
+		})
+	})
 </script>
 
 <svelte:window onkeydown={onKeyDown} />

frontend/src/lib/components/EditorSettings.svelte

@@ -2,6 +2,7 @@
 	import { Settings } from 'lucide-svelte'
 	import FormatOnSave from './FormatOnSave.svelte'
 	import VimMode from './VimMode.svelte'
+	import RelativeLineNumbers from './RelativeLineNumbers.svelte'
 	import { Button } from './common'
 	import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
 	import type { EditorBarUi } from './custom_ui'
@@ -39,6 +40,11 @@
 					<VimMode />
 				</div>
 			{/if}
+			{#if customUi?.relativeLineNumbers != false}
+				<div>
+					<RelativeLineNumbers />
+				</div>
+			{/if}
 			{#if customUi?.aiCompletion != false}
 				<div>
 					<CodeCompletionStatus />

frontend/src/lib/components/RelativeLineNumbers.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { RELATIVE_LINE_NUMBERS_SETTING_NAME, relativeLineNumbers } from '$lib/stores'
+	import { storeLocalSetting } from '$lib/utils'
+	import Toggle from './Toggle.svelte'
+
+	function storeSetting() {
+		storeLocalSetting(RELATIVE_LINE_NUMBERS_SETTING_NAME, $relativeLineNumbers.toString())
+	}
+</script>
+
+<Toggle
+	size="xs"
+	bind:checked={$relativeLineNumbers}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'relative line numbers' }}
+/>

frontend/src/lib/components/SimpleEditor.svelte

@@ -78,7 +78,7 @@
 	import domContent from '$lib/dom.d.ts.txt?raw'
 	import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
-	import { vimMode } from '$lib/stores'
+	import { vimMode, relativeLineNumbers } from '$lib/stores'
 	import { initVim } from './monaco_keybindings'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 	import { editorPositionMap } from '$lib/utils'
@@ -266,6 +266,11 @@
 			untrack(() => onVimDisable())
 		}
 	})
+	$effect(() => {
+		editor?.updateOptions({ 
+			lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
+		})
+	})
 
 	function onVimDisable() {
 		vimDisposable?.dispose()
@@ -374,7 +379,7 @@
 		try {
 			console.log('fixedOverflowWidgets', fixedOverflowWidgets)
 			editor = meditor.create(divEl as HTMLDivElement, {
-				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
+				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
 				model,
 				lineDecorationsWidth: 6,
 				lineNumbersMinChars: 2,

frontend/src/lib/components/TemplateEditor.svelte

@@ -456,7 +456,7 @@
 
 		try {
 			editor = meditor.create(divEl as HTMLDivElement, {
-				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets, false),
 				model,
 				// overflowWidgetsDomNode: widgets,
 				// lineNumbers: 'on',

frontend/src/lib/components/custom_ui.ts

@@ -65,6 +65,7 @@ export type EditorBarUi = {
 	multiplayer?: boolean
 	autoformatting?: boolean
 	vimMode?: boolean
+	relativeLineNumbers?: boolean
 	aiGen?: boolean
 	aiCompletion?: boolean
 	library?: boolean

frontend/src/lib/editorUtils.ts

@@ -6,7 +6,8 @@ export function editorConfig(
 	code: string,
 	lang: string,
 	automaticLayout: boolean,
-	fixedOverflowWidgets: boolean
+	fixedOverflowWidgets: boolean,
+	relativeLineNumbers?: boolean
 ) {
 	return {
 		value: code,
@@ -16,6 +17,7 @@ export function editorConfig(
 		fixedOverflowWidgets,
 		lineDecorationsWidth: 10,
 		lineNumbersMinChars: 3,
+		lineNumbers: (relativeLineNumbers ?? false) ? 'relative' as const : 'on' as const,
 		scrollbar: { alwaysConsumeMouseWheel: false },
 		folding: false,
 		scrollBeyondLastLine: false,

frontend/src/lib/stores.ts

@@ -158,6 +158,7 @@ export const metadataCompletionEnabled = writable<boolean>(true)
 export const stepInputCompletionEnabled = writable<boolean>(true)
 export const FORMAT_ON_SAVE_SETTING_NAME = 'formatOnSave'
 export const VIM_MODE_SETTING_NAME = 'vimMode'
+export const RELATIVE_LINE_NUMBERS_SETTING_NAME = 'relativeLineNumbers'
 export const CODE_COMPLETION_SETTING_NAME = 'codeCompletionSessionEnabled'
 export const COPILOT_SESSION_MODEL_SETTING_NAME = 'copilotSessionModel'
 export const COPILOT_SESSION_PROVIDER_SETTING_NAME = 'copilotSessionProvider'
@@ -165,6 +166,7 @@ export const formatOnSave = writable<boolean>(
 	getLocalSetting(FORMAT_ON_SAVE_SETTING_NAME) != 'false'
 )
 export const vimMode = writable<boolean>(getLocalSetting(VIM_MODE_SETTING_NAME) == 'true')
+export const relativeLineNumbers = writable<boolean>(getLocalSetting(RELATIVE_LINE_NUMBERS_SETTING_NAME) == 'true')
 export const codeCompletionSessionEnabled = writable<boolean>(
 	getLocalSetting(CODE_COMPLETION_SETTING_NAME) != 'false'
 )