chore: update ui

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -1,56 +1,28 @@
 <script setup lang="ts">
-import type { DevToolsLogEntry, DevToolsLogLevel } from '@vitejs/devtools-kit'
-import DockIcon from './DockIcon.vue'
+import type { DevToolsLogEntry } from '@vitejs/devtools-kit'
+import { useTimeAgo } from '@vueuse/core'
+import { levels } from './LogItemConstants'
 
-// @unocss-include
-
-defineProps<{
+const props = defineProps<{
   entry: DevToolsLogEntry
   compact?: boolean
 }>()
 
-const levelIcons: Record<DevToolsLogLevel, string> = {
-  info: 'ph:info-duotone',
-  warn: 'ph:warning-duotone',
-  error: 'ph:x-circle-duotone',
-  success: 'ph:check-circle-duotone',
-  debug: 'ph:bug-duotone',
-}
-
-const levelIndicatorColors: Record<DevToolsLogLevel, string> = {
-  info: 'bg-blue',
-  warn: 'bg-amber',
-  error: 'bg-red',
-  success: 'bg-green',
-  debug: 'bg-gray',
-}
-
-const levelColors: Record<DevToolsLogLevel, string> = {
-  info: 'text-blue',
-  warn: 'text-amber',
-  error: 'text-red',
-  success: 'text-green',
-  debug: 'text-gray',
-}
-
-function formatTime(ts: number): string {
-  return new Date(ts).toLocaleTimeString()
-}
+const timeAgo = useTimeAgo(() => props.entry.timestamp)
 </script>
 
 <template>
   <div class="flex items-start gap-2 relative">
-    <div class="w-2px flex-none absolute left-0 top-4px bottom-4px rounded-r" :class="[levelIndicatorColors[entry.level] || 'bg-gray']" />
+    <div class="w-2px flex-none absolute left-0 top-4px bottom-4px rounded-r" :class="[levels[entry.level]?.bg || 'bg-gray']" />
 
     <div
       v-if="entry.status === 'loading'"
       class="flex-none mt-0.5 border-2 border-current border-t-transparent rounded-full animate-spin op50 w-4 h-4"
     />
-    <DockIcon
+    <div
       v-else
-      :icon="levelIcons[entry.level]"
       class="flex-none mt-0.5 w-4 h-4"
-      :class="[levelColors[entry.level]]"
+      :class="[levels[entry.level]?.icon, levels[entry.level]?.color]"
     />
 
     <div class="flex-1 min-w-0">
@@ -69,7 +41,7 @@ function formatTime(ts: number): string {
         >{{ label }}</span>
       </div>
     </div>
-    <span v-if="!compact" class="text-xs op40 flex-none">{{ formatTime(entry.timestamp) }}</span>
+    <span v-if="!compact" class="text-xs op40 flex-none" :title="new Date(entry.timestamp).toLocaleString()">{{ timeAgo }}</span>
     <slot name="actions" />
   </div>
 </template>

packages/core/src/client/webcomponents/components/LogItem.vue

@@ -0,0 +1,30 @@
+import type { DevToolsLogLevel } from '@vitejs/devtools-kit'
+
+// @unocss-include
+
+export type LogSource = 'server' | 'client'
+
+export interface LevelStyle {
+  icon: string
+  color: string
+  bg: string
+}
+
+export interface SourceStyle {
+  icon: string
+  color: string
+  label: string
+}
+
+export const levels: Record<DevToolsLogLevel, LevelStyle> = {
+  info: { icon: 'i-ph:info-duotone', color: 'text-blue', bg: 'bg-blue' },
+  warn: { icon: 'i-ph:warning-duotone', color: 'text-amber', bg: 'bg-amber' },
+  error: { icon: 'i-ph:x-circle-duotone', color: 'text-red', bg: 'bg-red' },
+  success: { icon: 'i-ph:check-circle-duotone', color: 'text-green', bg: 'bg-green' },
+  debug: { icon: 'i-ph:bug-duotone', color: 'text-gray', bg: 'bg-gray' },
+}
+
+export const sources: Record<LogSource, SourceStyle> = {
+  server: { icon: 'i-ph:hexagon-duotone', color: 'text-green', label: 'Server' },
+  client: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber', label: 'Client' },
+}

packages/core/src/client/webcomponents/components/LogItemConstants.ts

@@ -2,7 +2,6 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useLogs } from '../state/logs'
 import { dismissToast, useToasts } from '../state/toasts'
-import DockIcon from './DockIcon.vue'
 import LogItem from './LogItem.vue'
 
 // @unocss-include
@@ -47,7 +46,7 @@ function openLogs(toastId: string) {
               class="flex-none op30 hover:op100 p-0.5 rounded hover:bg-active transition"
               @click.stop="dismissToast(toast.id)"
             >
-              <DockIcon icon="ph:x" class="w-3 h-3" />
+              <div class="i-ph-x w-3 h-3" />
             </button>
           </template>
         </LogItem>