feat: introduce the compact vehicle HUD

src/components/JourneyHud.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { JourneySnapshot } from '@/journey/types';
-import type { QualityTier } from '@/journey/motion-policy';
 
 const props = defineProps<{
   journey: JourneySnapshot;
   sectionLabel: string;
-  quality: QualityTier;
 }>();
 
 const routePercent = computed(() => `${Math.round(Math.min(1, Math.max(0, props.journey.routeProgress)) * 100)}%`);
-const qualityLabel = computed(() => props.quality.charAt(0).toUpperCase() + props.quality.slice(1));
 </script>
 
 <template>
   <aside class="journey-hud" aria-hidden="true">
-    <span class="journey-hud__route">ROUTE {{ routePercent }}</span>
+    <span class="journey-hud__route"><span>ROUTE</span> <strong>{{ routePercent }}</strong></span>
     <span class="journey-hud__section">{{ sectionLabel }}</span>
-    <span class="journey-hud__quality">{{ qualityLabel }}</span>
     <strong v-if="journey.arrived" class="journey-hud__arrival">ARRIVED</strong>
   </aside>
 </template>