feat: scroll to and select log entry when opened from toast (#284)

Author: JianJroh

packages/core/src/client/webcomponents/components/display/ToastOverlay.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import { useLogs } from '../../state/logs'
+import { selectLog, useLogs } from '../../state/logs'
 import { dismissToast, useToasts } from '../../state/toasts'
 import LogItem from '../log/LogItem.vue'
 
@@ -17,6 +17,7 @@ const toasts = useToasts()
 
 function openLogs(toastId: string) {
   dismissToast(toastId)
+  selectLog(toastId)
   props.context?.docks.switchEntry('~logs')
 }
 </script>

packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinLogs.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { DevToolsLogEntry, DevToolsLogEntryFrom, DevToolsLogLevel } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import { useClipboard, useTimeAgo } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { useClipboard, useTimeAgo, whenever } from '@vueuse/core'
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { markLogsAsRead, useLogs } from '../../state/logs'
 import FilterToggles from '../display/FilterToggles.vue'
 import HashBadge from '../display/HashBadge.vue'
@@ -168,6 +168,20 @@ watch(selectedEntry, async (entry) => {
   await props.context.rpc.call('devtoolskit:internal:logs:update', entry.id, { autoDelete: 0 })
 })
 
+const logListEl = useTemplateRef('logListEl')
+
+whenever(() => logsState.pendingSelectId, async (id) => {
+  if (!id)
+    return
+
+  logsState.pendingSelectId = null
+  selectedId.value = id
+
+  await nextTick()
+  logListEl.value?.querySelector<HTMLElement>('[data-selected]')
+    ?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+}, { immediate: true })
+
 const selectedTimeAgo = useTimeAgo(computed(() => selectedEntry.value?.timestamp ?? Date.now()))
 const { copy: copyStacktrace, copied: stacktraceCopied } = useClipboard()
 
@@ -306,13 +320,14 @@ onMounted(() => {
     <!-- Content -->
     <div class="h-full of-hidden" :class="selectedEntry ? 'grid grid-cols-[1fr_1fr]' : ''">
       <!-- Log list -->
-      <div class="h-full of-y-auto">
+      <div ref="logListEl" class="h-full of-y-auto">
         <div v-if="filteredEntries.length === 0" class="flex items-center justify-center h-full op50 text-sm">
           No logs
         </div>
         <div
           v-for="entry of filteredEntries"
           :key="entry.id"
+          :data-selected="selectedId === entry.id || undefined"
           class="w-full text-left border-b border-base hover:bg-active transition border-l-2 text-sm group cursor-pointer"
           :class="[
             selectedId === entry.id ? 'bg-active' : '',

packages/core/src/client/webcomponents/state/logs.ts

@@ -7,6 +7,7 @@ import { addToast } from './toasts'
 export interface LogsState {
   entries: DevToolsLogEntry[]
   unreadCount: number
+  pendingSelectId: string | null
 }
 
 let _logsState: Reactive<LogsState> | undefined
@@ -18,6 +19,7 @@ export function useLogs(context: DocksContext): Reactive<LogsState> {
   const state: Reactive<LogsState> = _logsState = reactive({
     entries: [],
     unreadCount: 0,
+    pendingSelectId: null,
   })
 
   const entryMap = new Map<string, DevToolsLogEntry>()
@@ -76,3 +78,8 @@ export function markLogsAsRead(): void {
   if (_logsState)
     _logsState.unreadCount = 0
 }
+
+export function selectLog(id: string): void {
+  if (_logsState)
+    _logsState.pendingSelectId = id
+}