feat(timeline): display error/warning icons

Author: Akryum

packages/app-frontend/src/features/timeline/TimelineEventInspector.vue

@@ -54,6 +54,18 @@ export default {
           {{ inspectedEvent.title || 'Event' }}
         </span>
 
+        <VueIcon
+          v-if="inspectedEvent.logType === 'error'"
+          icon="error"
+          class="w-4 h-4 text-red-500"
+        />
+
+        <VueIcon
+          v-if="inspectedEvent.logType === 'warning'"
+          icon="warning"
+          class="w-4 h-4 text-yellow-500"
+        />
+
         <span
           v-if="inspectedEvent.subtitle"
           class="opacity-75"

packages/app-frontend/src/features/timeline/TimelineEventListItem.vue

@@ -49,7 +49,27 @@ export default {
           'text-purple-600 dark:text-purple-400': !isInspected,
         }"
       >
-        {{ event.title || 'Event' }}
+        <span>{{ event.title || 'Event' }}</span>
+
+        <VueIcon
+          v-if="event.logType === 'error'"
+          icon="error"
+          class="w-4 h-4 ml-1"
+          :class="{
+            'text-red-500': !isInspected,
+            'text-white': isInspected
+          }"
+        />
+
+        <VueIcon
+          v-if="event.logType === 'warning'"
+          icon="warning"
+          class="w-4 h-4 ml-1"
+          :class="{
+            'text-yellow-500': !isInspected,
+            'text-white': isInspected
+          }"
+        />
       </span>
 
       <span

packages/shell-dev-vue3/src/devtools-plugin/index.js

@@ -203,7 +203,8 @@ export default {
             info: 'window.mouseup',
             x: event.clientX,
             y: event.clientY
-          }
+          },
+          logType: event.clientX < 100 ? 'error' : event.clientY < 100 ? 'warning' : 'default'
         }
       })
     })