feat: add settings ui

innocenzi · innocenzi · commit b41cd98e6f07 · 2025-12-20T17:38:03.000+01:00
diff --git a/packages/router/src/Exceptions/local/bun.lock b/packages/router/src/Exceptions/local/bun.lock
diff --git a/packages/router/src/Exceptions/local/dist/main.js b/packages/router/src/Exceptions/local/dist/main.js
diff --git a/packages/router/src/Exceptions/local/dist/style.css b/packages/router/src/Exceptions/local/dist/style.css
diff --git a/packages/router/src/Exceptions/local/package.json b/packages/router/src/Exceptions/local/package.json
@@ -7,7 +7,7 @@
 		"build": "vue-tsc -b && vite build"
 	},
 	"devDependencies": {
-		"@nuxt/ui": "^4.2.1",
+		"@nuxt/ui": "^4.3.0",
 		"@shikijs/langs-precompiled": "^3.20.0",
 		"@tailwindcss/vite": "^4.1.18",
 		"@vitejs/plugin-vue": "^6.0.3",
@@ -23,9 +23,9 @@
 		"typescript": "~5.9.3",
 		"vite": "8.0.0-beta.2",
 		"vite-plugin-singlefile": "^2.3.0",
-		"vue": "^3.5.25",
+		"vue": "^3.5.26",
 		"vue-router": "^4.6.4",
-		"vue-tsc": "^3.1.8"
+		"vue-tsc": "^3.2.0"
 	},
 	"trustedDependencies": [
 		"@tailwindcss/oxide"
diff --git a/packages/router/src/Exceptions/local/src/components/stacktrace/code-snippet.vue b/packages/router/src/Exceptions/local/src/components/stacktrace/code-snippet.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { openFileInEditor } from '../../editor'
 import { highlight } from '../../highlight'
+import { openFileInEditor } from '../../settings/settings'
 import type { CodeSnippet } from './stacktrace'
 
 const $props = defineProps<{
diff --git a/packages/router/src/Exceptions/local/src/components/stacktrace/file-label.vue b/packages/router/src/Exceptions/local/src/components/stacktrace/file-label.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { openFileInEditor } from '../../editor'
+import { openFileInEditor } from '../../settings/settings'
 
 const $props = defineProps<{
 	absoluteFile: string
diff --git a/packages/router/src/Exceptions/local/src/components/stacktrace/stacktrace.ts b/packages/router/src/Exceptions/local/src/components/stacktrace/stacktrace.ts
@@ -25,7 +25,7 @@ export interface StacktraceFrame {
 }
 
 export interface Stacktrace {
-	message: string
+	message?: string
 	exceptionClass: string
 	frames: StacktraceFrame[]
 	line: number
diff --git a/packages/router/src/Exceptions/local/src/editor.ts b/packages/router/src/Exceptions/local/src/editor.ts
diff --git a/packages/router/src/Exceptions/local/src/renderer.vue b/packages/router/src/Exceptions/local/src/renderer.vue
@@ -8,6 +8,7 @@ import Headers from './sections/headers.vue'
 import RequestBody from './sections/request-body.vue'
 import Stacktrace from './sections/stacktrace.vue'
 import Summary from './sections/summary.vue'
+import { settingsDialog } from './settings/settings'
 import { store } from './store'
 
 const background = useTemplateRef('background')
@@ -41,6 +42,14 @@ onMounted(() => background.value!.style.backgroundImage = `url("${noise}")`)
 					:exception="store.exception"
 					class="mt-12"
 				/>
+				<u-footer class="mt-12">
+					<u-button
+						icon="tabler:adjustments"
+						variant="secondary"
+						class="text-dimmed hover:text-highlighted"
+						@click="settingsDialog.open()"
+					/>
+				</u-footer>
 			</main>
 		</u-container>
 	</u-app>
diff --git a/packages/router/src/Exceptions/local/src/sections/context.vue b/packages/router/src/Exceptions/local/src/sections/context.vue
@@ -11,7 +11,11 @@ const json = computed(() => JSON.stringify($props.context ?? '', null, 2))
 
 <template>
 	<card title="Exception context" icon="tabler:info-circle">
-		<div v-if="context" class="p-2" v-html="highlight(json, 'json')" />
+		<div
+			v-if="Object.values(context ?? {}).length > 0"
+			class="p-2"
+			v-html="highlight(json, 'json')"
+		/>
 		<div v-else class="flex justify-center items-center p-8 pt-4 font-mono uppercase">
 			<span class="text-muted">No context</span>
 		</div>
diff --git a/packages/router/src/Exceptions/local/src/sections/summary.vue b/packages/router/src/Exceptions/local/src/sections/summary.vue
@@ -121,6 +121,10 @@ function toFileSize(
 			</div>
 		</div>
 		<!-- Error -->
-		<span class="font-light text-xl" v-text="exception.stacktrace.message" />
+		<span
+			v-if="exception.stacktrace.message"
+			class="font-light text-xl"
+			v-text="exception.stacktrace.message"
+		/>
 	</div>
 </template>
diff --git a/packages/router/src/Exceptions/local/src/settings/dialog.vue b/packages/router/src/Exceptions/local/src/settings/dialog.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { reactive, useTemplateRef } from 'vue'
+import { schema, type Settings, settings } from './settings'
+
+const $emit = defineEmits<{
+	close: []
+}>()
+
+const form = useTemplateRef('form')
+
+const state = reactive<Settings>({
+	editor: settings.value.editor,
+	openEditorTemplate: settings.value.openEditorTemplate,
+})
+
+async function submit(event: FormSubmitEvent<Settings>) {
+	settings.value.editor = event.data.editor
+	settings.value.openEditorTemplate = event.data.openEditorTemplate
+
+	$emit('close')
+}
+</script>
+
+<template>
+	<u-modal :close="false" :ui="{ footer: 'justify-end' }">
+		<template v-slot:body>
+			<u-form
+				:state
+				:schema
+				@submit="submit"
+				ref="form"
+				class="flex flex-col gap-6"
+				:ui="{ footer: 'justify-end' }"
+			>
+				<!-- Editor -->
+				<u-form-field
+					label="Editor"
+					description="Select your preferred code editor for opening files."
+					name="editor"
+				>
+					<u-select
+						:items="
+							[
+								{ label: 'Code', value: 'vscode', icon: 'simple-icons:visualstudiocode' },
+								{ label: 'Zed', value: 'zed', icon: 'simple-icons:zedindustries' },
+								{
+									label: 'PhpStorm',
+									value: 'phpstorm',
+									icon: 'simple-icons:phpstorm',
+								},
+								{ label: 'Custom', value: 'custom', icon: 'tabler:settings' },
+							]
+						"
+						placeholder="No editor selected"
+						icon="tabler:code"
+						v-model="state.editor"
+						class="mt-1 w-full"
+						required
+					/>
+				</u-form-field>
+				<!-- Editor template -->
+				<u-form-field
+					label="Editor command"
+					description="The command used to open files in your selected editor. Use {file} as a placeholder for the file path, and {line} for the line number."
+					name="openEditorTemplate"
+					v-if="state.editor === 'custom'"
+				>
+					<u-input
+						v-model="state.openEditorTemplate"
+						required
+						class="w-full font-mono"
+						placeholder="zed://file/{file}:{line}"
+					/>
+				</u-form-field>
+				<!-- Theme -->
+				<u-form-field label="Color mode">
+					<u-color-mode-select class="w-full" />
+				</u-form-field>
+			</u-form>
+		</template>
+		<template v-slot:footer="{ close }">
+			<u-button label="Cancel" variant="secondary" @click="close" />
+			<u-button type="submit" label="Save" @click="form?.submit()" />
+		</template>
+	</u-modal>
+</template>
diff --git a/packages/router/src/Exceptions/local/src/settings/settings.ts b/packages/router/src/Exceptions/local/src/settings/settings.ts
@@ -0,0 +1,50 @@
+import { useLocalStorage } from '@vueuse/core'
+import { type } from 'arktype'
+import Dialog from './dialog.vue'
+
+const overlay = useOverlay()
+
+export const settingsDialog = overlay.create(Dialog)
+
+export const schema = type({
+	editor: type('"vscode" | "phpstorm" | "zed" | "custom"').optional(),
+	openEditorTemplate: type('string').optional(),
+})
+
+export type Editor = typeof schema.infer['editor']
+export type Settings = typeof schema.inferIn
+
+export const settings = useLocalStorage<Settings>('tempest:exceptions:settings', {})
+
+export async function openFileInEditor(file: string, line?: number) {
+	if (!settings.value.editor) {
+		await settingsDialog.open()
+	}
+
+	if (!settings.value.editor) {
+		const toast = useToast()
+		toast.add({
+			title: 'No editor configured in settings',
+			color: 'warning',
+			progress: false,
+			icon: 'tabler:exclamation-circle',
+		})
+
+		return
+	}
+
+	const filePath = encodeURIComponent(file)
+	const lineNumber = line ?? 1
+	const template = {
+		vscode: 'vscode://file/{file}:{line}',
+		phpstorm: 'phpstorm://open?file={file}&line={line}',
+		zed: 'zed://file/{file}:{line}',
+		custom: settings.value.openEditorTemplate ?? '',
+	}
+
+	const url = template[settings.value.editor]
+		?.replace('{file}', filePath)
+		?.replace('{line}', lineNumber.toString())
+
+	window.open(url, '_self')
+}
diff --git a/packages/router/src/Exceptions/local/vite.config.ts b/packages/router/src/Exceptions/local/vite.config.ts
@@ -24,11 +24,6 @@ export default defineConfig({
 						variant: 'soft',
 					},
 				},
-				input: {
-					defaultVariants: {
-						variant: 'soft',
-					},
-				},
 				button: {
 					slots: {
 						base: 'not-disabled:cursor-pointer',

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export interface StacktraceFrame {`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`export interface Stacktrace {`
`28`		`- message: string`
	`28`	`+ message?: string`
`29`	`29`	`exceptionClass: string`
`30`	`30`	`frames: StacktraceFrame[]`
`31`	`31`	`line: number`