Add SatelliteIndicator mini-widget

src/components/MiniWidgetInstantiator.vue

@@ -23,6 +23,9 @@
   <template v-if="widgetType === MiniWidgetType.ModeSelector">
     <ModeSelector :options="options" />
   </template>
+  <template v-if="widgetType === MiniWidgetType.SatelliteIndicator">
+    <SatelliteIndicator :options="options" />
+  </template>
   <template v-if="widgetType === MiniWidgetType.ViewSelector">
     <ViewSelector :options="options" />
   </template>
@@ -41,6 +44,7 @@ import GenericIndicator from './mini-widgets/GenericIndicator.vue'
 import JoystickCommIndicator from './mini-widgets/JoystickCommIndicator.vue'
 import MiniVideoRecorder from './mini-widgets/MiniVideoRecorder.vue'
 import ModeSelector from './mini-widgets/ModeSelector.vue'
+import SatelliteIndicator from './mini-widgets/SatelliteIndicator.vue'
 import ViewSelector from './mini-widgets/ViewSelector.vue'
 
 const props = defineProps<{

src/components/mini-widgets/SatelliteIndicator.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex items-center w-fit min-w-[8rem] max-w-[9rem] h-12 p-1 text-white justify-center">
+    <span class="relative w-[2.25rem] mdi mdi-satellite-variant text-4xl"></span>
+    <div class="flex flex-col items-start justify-center ml-1 min-w-[4rem] max-w-[6rem] select-none">
+      <span class="font-mono font-semibold leading-4 text-end w-fit">{{ store.statusGPS.visibleSatellites }} sats</span>
+      <span class="font-mono text-sm font-semibold leading-4 text-end w-fit">{{ store.statusGPS.fixType }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+
+const store = useMainVehicleStore()
+</script>

src/types/miniWidgets.ts

@@ -11,6 +11,7 @@ export enum MiniWidgetType {
   JoystickCommIndicator = 'JoystickCommIndicator',
   MiniVideoRecorder = 'MiniVideoRecorder',
   ModeSelector = 'ModeSelector',
+  SatelliteIndicator = 'SatelliteIndicator',
   ViewSelector = 'ViewSelector',
 }