Trims top events depending on scroll status (#1860)

* Trims top events depending on scroll status

* Cleans up models and adds better OOP around logging events

* Adds log entries being skipped component

* Fixes type errors

* Fixes tets

* Styles skipping logs

assets/components/LogViewer/LogViewerWithSource.vue

@@ -0,0 +1,21 @@
+<template>
+  <log-event-source ref="source" #default="{ messages }" @loading-more="emit('loading-more', $event)">
+    <log-viewer :messages="messages"></log-viewer>
+  </log-event-source>
+</template>
+
+<script lang="ts" setup>
+import LogEventSource from "./LogEventSource.vue";
+
+const emit = defineEmits<{
+  (e: "loading-more", value: boolean): void;
+}>();
+
+const source = $ref<InstanceType<typeof LogEventSource>>();
+function clear() {
+  source?.clear();
+}
+defineExpose({
+  clear,
+});
+</script>