fix(ui): open in IDE and error styles

packages/ui/client/components/views/ViewEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type CodeMirror from 'codemirror'
-import { useCodeError } from '../../composables/error'
+import { createTooltip, destroyTooltip } from 'floating-vue'
+import { openInEditor } from '../../composables/error'
 import { client } from '~/composables/client'
 import type { File } from '#types'
 
@@ -25,7 +26,64 @@ const editor = ref<any>()
 const cm = computed<CodeMirror.EditorFromTextArea | undefined>(() => editor.value?.cm)
 const failed = computed(() => props.file?.tasks.filter(i => i.result?.state === 'fail') || [])
 
-const { hasBeenEdited } = useCodeError(props, cm, failed)
+const widgets: CodeMirror.LineWidget[] = []
+const handles: CodeMirror.LineHandle[] = []
+const listeners: [el: HTMLSpanElement, l: EventListener, t: () => void][] = []
+
+const hasBeenEdited = ref(false)
+
+const clearListeners = () => {
+  listeners.forEach(([el, l, t]) => {
+    el.removeEventListener('click', l)
+    t()
+  })
+  listeners.length = 0
+}
+
+watch([cm, failed], () => {
+  if (!cm.value) {
+    clearListeners()
+    return
+  }
+
+  setTimeout(() => {
+    clearListeners()
+    widgets.forEach(widget => widget.clear())
+    handles.forEach(h => cm.value?.removeLineClass(h, 'wrap'))
+    widgets.length = 0
+    handles.length = 0
+
+    failed.value.forEach((i) => {
+      const e = i.result?.error
+      const stacks = (e?.stacks || []).filter(i => i.file && i.file === props.file?.filepath)
+      if (stacks.length) {
+        const pos = stacks[0].sourcePos || stacks[0]
+        const div = document.createElement('div')
+        div.className = 'op80 flex gap-x-2 items-center'
+        const pre = document.createElement('pre')
+        pre.className = 'c-red-600 dark:c-red-400'
+        pre.textContent = `${' '.repeat(pos.column)}^ ${e?.nameStr}: ${e?.message}`
+        div.appendChild(pre)
+        const span = document.createElement('span')
+        span.className = 'i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer'
+        span.tabIndex = 0
+        span.ariaLabel = 'Open in Editor'
+        const tooltip = createTooltip(span, {
+          content: 'Open in Editor',
+          placement: 'bottom',
+        }, false)
+        const el: EventListener = async() => {
+          await openInEditor(stacks[0].file, pos.line, pos.column)
+        }
+        div.appendChild(span)
+        listeners.push([span, el, () => destroyTooltip(span)])
+        handles.push(cm.value!.addLineClass(pos.line - 1, 'wrap', 'bg-red-500/10'))
+        widgets.push(cm.value!.addLineWidget(pos.line - 1, div))
+      }
+    })
+    if (!hasBeenEdited.value) cm.value?.clearHistory() // Prevent getting access to initial state
+  }, 100)
+}, { flush: 'post' })
 
 async function onSave(content: string) {
   hasBeenEdited.value = true

packages/ui/client/components/views/ViewReport.vue

@@ -41,9 +41,10 @@ function relative(p: string) {
               <pre> - {{ relative(efile) }}:{{ line }}:{{ column }}</pre>
               <div
                 v-if="shouldOpenInEditor(efile, props.file?.name)"
-                class="i-carbon-launch text-red-900 hover:cursor-pointer"
+                v-tooltip.bottom="'Open in Editor'"
+                class="i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer"
                 tabindex="0"
-                title="Open in IDE"
+                aria-label="Open in Editor"
                 @click.passive="openInEditor(efile, line, column)"
               />
             </div>

packages/ui/client/composables/error.ts

@@ -1,7 +1,3 @@
-import type { Ref } from 'vue'
-import type CodeMirror from 'codemirror'
-import type { File, Task } from '#types'
-
 export function shouldOpenInEditor(name: string, fileName?: string) {
   return fileName && name.endsWith(fileName)
 }
@@ -10,66 +6,3 @@ export async function openInEditor(name: string, line: number, column: number) {
   const url = encodeURI(`${name}:${line}:${column}`)
   await fetch(`/__open-in-editor?file=${url}`)
 }
-
-export function useCodeError(
-  props: Readonly<{ file?: File | undefined }>,
-  cm: Ref<CodeMirror.EditorFromTextArea | undefined>,
-  failed: Ref<Task[]>,
-) {
-  const widgets: CodeMirror.LineWidget[] = []
-  const handles: CodeMirror.LineHandle[] = []
-  const listeners: [el: HTMLSpanElement, l: EventListenerOrEventListenerObject][] = []
-
-  const hasBeenEdited = ref(false)
-
-  const clearListeners = () => {
-    listeners.forEach(([el, l]) => {
-      el.removeEventListener('click', l)
-    })
-    listeners.length = 0
-  }
-
-  watch([cm, failed], () => {
-    if (!cm.value) {
-      clearListeners()
-      return
-    }
-
-    setTimeout(() => {
-      clearListeners()
-      widgets.forEach(widget => widget.clear())
-      handles.forEach(h => cm.value?.removeLineClass(h, 'wrap'))
-      widgets.length = 0
-      handles.length = 0
-
-      failed.value.forEach((i) => {
-        const e = i.result?.error
-        const stacks = (e?.stacks || []).filter(i => i.file && i.file === props.file?.filepath)
-        if (stacks.length) {
-          const pos = stacks[0].sourcePos || stacks[0]
-          const div = document.createElement('div')
-          div.className = 'op80 flex gap-x-2 items-center'
-          const pre = document.createElement('pre')
-          pre.className = 'c-red-600 dark:c-red-400'
-          pre.textContent = `${' '.repeat(pos.column)}^ ${e?.nameStr}: ${e?.message}`
-          div.appendChild(pre)
-          const span = document.createElement('span')
-          span.className = 'i-carbon-launch text-red-900 hover:cursor-pointer'
-          span.tabIndex = 0
-          span.title = 'Open in IDE'
-          const el: EventListenerOrEventListenerObject = async() => {
-            await openInEditor(stacks[0].file, pos.line, pos.column)
-          }
-          listeners.push([span, el])
-          span.addEventListener('click', el)
-          div.appendChild(span)
-          handles.push(cm.value!.addLineClass(pos.line - 1, 'wrap', 'bg-red-500/10'))
-          widgets.push(cm.value!.addLineWidget(pos.line - 1, div))
-        }
-      })
-      if (!hasBeenEdited.value) cm.value?.clearHistory() // Prevent getting access to initial state
-    }, 100)
-  }, { flush: 'post' })
-
-  return { hasBeenEdited }
-}