adds telemetry list

frontend/src/views/EmptyPanelView.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+    filterHeirarchy,
+    getFirstLeaf,
+    getPanelHeirarchy,
+} from '@/panels/panel';
+import PanelHeirarchy from '@/components/PanelHeirarchy.vue';
+import router from '@/router';
+import TextInput from '@/components/TextInput.vue';
+
+const searchValue = ref('');
+
+const heirarchy = getPanelHeirarchy();
+
+const filtered_heirarchy = computed(() =>
+    filterHeirarchy(heirarchy, (leaf) => {
+        return leaf.name
+            .toLowerCase()
+            .includes(searchValue.value.toLowerCase());
+    }),
+);
+
+function onEnter() {
+    const leaf = getFirstLeaf(filtered_heirarchy.value);
+    if (leaf != null) {
+        router.push(leaf.to);
+    }
+}
+</script>
+
+<template>
+    <div class="column stretch screen content center no-min-height">
+        <div class="row">
+            <TextInput
+                autofocus
+                class="grow"
+                v-model="searchValue"
+                placeholder="Search"
+                @enter="onEnter"
+            ></TextInput>
+        </div>
+
+        <div class="row grow stretch">
+            <div class="column grow scroll no-min-height">
+                <PanelHeirarchy
+                    :heirarchy="filtered_heirarchy"
+                    v-if="filtered_heirarchy.length > 0"
+                ></PanelHeirarchy>
+                <div v-else>
+                    <span>No Matches Found</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+</style>