feat: introduce the compact vehicle HUD

src/components/AppShell.vue

@@ -18,7 +18,7 @@ import { useKeyboardNavigation } from '@/composables/useKeyboardNavigation';
 import { useMotionPreferences } from '@/composables/useMotionPreferences';
 import type { PortfolioContent, SectionId } from '@/content/types';
 import type { SceneHostState } from '@/composables/useSceneController';
-import type { MotionPolicy, QualityTier } from '@/journey/motion-policy';
+import type { MotionPolicy } from '@/journey/motion-policy';
 
 declare const __PORTFOLIO_TEST_BUILD__: boolean;
 const TEST_BUILD = typeof __PORTFOLIO_TEST_BUILD__ !== 'undefined' && __PORTFOLIO_TEST_BUILD__;
@@ -75,7 +75,6 @@ const serverDefaultPolicy: MotionPolicy = {
   reason: 'full',
 };
 const displayedPolicy = computed(() => controlsReady.value ? motion.policy.value : serverDefaultPolicy);
-const displayedQuality = computed<QualityTier>(() => controlsReady.value ? actualQuality.value : 'high');
 const displayedSceneState = computed(() => controlsReady.value ? sceneState.value : 'running');
 let removePageListeners = (): void => {};
 
@@ -173,7 +172,6 @@ onUnmounted(() => removePageListeners());
   <JourneyHud
     :journey="journey"
     :section-label="activeSectionLabel"
-    :quality="displayedQuality"
   />
   <header class="site-header">
     <h1>{{ content.identity.name }}</h1>

src/components/DriveControls.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import IconGlyph, { type IconGlyphName } from './IconGlyph.vue';
 import type { AudioUiState } from '@/audio/types';
 import type { MotionPolicy, QualityTier } from '@/journey/motion-policy';
 
@@ -27,13 +28,31 @@ const emit = defineEmits<{
   audioVolumeChange: [volume: number];
 }>();
 
+const controlRoot = ref<HTMLElement | null>(null);
+const settingsButton = ref<HTMLButtonElement | null>(null);
+const volumeButton = ref<HTMLButtonElement | null>(null);
+const settingsOpen = ref(false);
+const volumeOpen = ref(false);
+
 const action = computed(() => {
-  if (props.policy.reason === 'visitor-pause') return { label: 'Resume motion', event: 'resume' as const };
-  if (props.policy.reason === 'saved-static') return { label: 'Enable motion', event: 'enable' as const };
-  if (props.policy.reason === 'full') return { label: 'Pause motion', event: 'pause' as const };
+  if (props.policy.reason === 'visitor-pause') {
+    return { label: 'Resume motion', event: 'resume' as const, icon: 'play' as IconGlyphName };
+  }
+  if (props.policy.reason === 'saved-static') {
+    return { label: 'Enable motion', event: 'enable' as const, icon: 'play' as IconGlyphName };
+  }
+  if (props.policy.reason === 'full') {
+    return { label: 'Pause motion', event: 'pause' as const, icon: 'pause' as IconGlyphName };
+  }
   return null;
 });
 
+const isAudioActive = computed(() => (
+  props.audioState.kind === 'running' || props.audioState.kind === 'suspended'
+));
+const muteLabel = computed(() => props.audioMuted ? 'Unmute sound' : 'Mute sound');
+const muteIcon = computed<IconGlyphName>(() => props.audioMuted ? 'sound-muted' : 'sound');
+
 const statusText = computed(() => {
   if (props.policy.reason === 'system-reduce') return 'Motion: static — reduced motion requested';
   if (props.policy.reason === 'data-saver') return 'Motion: static — data saver is active';
@@ -41,7 +60,7 @@ const statusText = computed(() => {
   if (props.policy.reason === 'saved-static') return 'Motion: static';
   if (props.sceneStatus === 'failed' || props.sceneStatus === 'static') return 'Visuals unavailable';
   if (props.sceneStatus === 'loading' || props.sceneStatus === 'idle') return 'Motion: preparing';
-  return 'Motion: active';
+  return null;
 });
 
 const runAction = (): void => {
@@ -61,56 +80,186 @@ const changeQuality = (event: Event): void => {
 const changeVolume = (event: Event): void => {
   emit('audioVolumeChange', Number((event.currentTarget as HTMLInputElement).value));
 };
+
+const toggleSettings = (): void => {
+  settingsOpen.value = !settingsOpen.value;
+  volumeOpen.value = false;
+};
+
+const toggleVolume = (): void => {
+  volumeOpen.value = !volumeOpen.value;
+  settingsOpen.value = false;
+};
+
+const closePanels = (restoreFocus = false): void => {
+  const focusTarget = settingsOpen.value ? settingsButton.value : volumeButton.value;
+  settingsOpen.value = false;
+  volumeOpen.value = false;
+  if (restoreFocus) void nextTick(() => focusTarget?.focus());
+};
+
+const onDocumentPointerDown = (event: Event): void => {
+  if (controlRoot.value?.contains(event.target as Node)) return;
+  closePanels();
+};
+
+const onDocumentKeyDown = (event: KeyboardEvent): void => {
+  if (event.key !== 'Escape' || (!settingsOpen.value && !volumeOpen.value)) return;
+  event.preventDefault();
+  closePanels(true);
+};
+
+watch(
+  () => props.audioState.kind,
+  () => closePanels(),
+);
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocumentPointerDown);
+  document.addEventListener('keydown', onDocumentKeyDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocumentPointerDown);
+  document.removeEventListener('keydown', onDocumentKeyDown);
+});
 </script>
 
 <template>
-  <div class="drive-controls">
-    <button v-if="action" type="button" @click="runAction">{{ action.label }}</button>
-    <div v-if="audioState.kind === 'idle'" class="drive-controls__audio-start">
-      <button type="button" @click="emit('audioStart')">START THE DRIVE</button>
-      <span>Enables the interactive soundtrack.</span>
-    </div>
-    <div v-else-if="audioState.kind === 'starting'" class="drive-controls__audio-start" aria-live="polite">
-      <button type="button" disabled>Starting drive…</button>
-      <span>Preparing the interactive soundtrack.</span>
-    </div>
+  <div
+    ref="controlRoot"
+    class="drive-controls"
+    :data-drive-state="audioState.kind"
+  >
+    <button
+      v-if="audioState.kind === 'idle'"
+      class="drive-start"
+      type="button"
+      aria-label="Start the drive"
+      @click="emit('audioStart')"
+    >
+      <IconGlyph name="play" />
+      <span>START THE DRIVE</span>
+    </button>
+
+    <button
+      v-else-if="audioState.kind === 'starting'"
+      class="drive-start"
+      type="button"
+      disabled
+      aria-label="Starting drive"
+      aria-live="polite"
+    >
+      <IconGlyph name="play" />
+      <span>STARTING…</span>
+    </button>
+
     <p v-else-if="audioState.kind === 'failed'" class="drive-controls__audio-status" role="status">
       Audio unavailable. Continue without sound.
     </p>
-    <div
-      v-else-if="audioState.kind === 'running' || audioState.kind === 'suspended'"
-      class="drive-controls__audio"
-    >
+
+    <div v-else-if="isAudioActive" class="drive-controls__dock" role="group" aria-label="Drive controls">
       <button
         v-if="audioState.kind === 'suspended' && audioState.resumeRequiresGesture"
+        class="drive-control-button"
         type="button"
+        aria-label="Resume sound"
+        title="Resume sound"
+        data-tooltip="Resume sound"
         @click="emit('audioResume')"
-      >Resume sound</button>
-      <label>
-        <span>Sound volume</span>
-        <input
-          aria-label="Sound volume"
-          type="range"
-          min="0"
-          max="1"
-          step="0.05"
-          :value="audioVolume"
-          @input="changeVolume"
-        >
-      </label>
-      <button type="button" @click="emit('audioMuteToggle')">
-        {{ audioMuted ? 'Unmute sound' : 'Mute sound' }}
+      >
+        <IconGlyph name="play" />
+      </button>
+      <button
+        class="drive-control-button"
+        type="button"
+        :aria-label="muteLabel"
+        :title="muteLabel"
+        :data-tooltip="muteLabel"
+        @click="emit('audioMuteToggle')"
+      >
+        <IconGlyph :name="muteIcon" />
+      </button>
+
+      <button
+        ref="volumeButton"
+        class="drive-control-button"
+        type="button"
+        aria-label="Sound volume"
+        title="Sound volume"
+        data-tooltip="Sound volume"
+        aria-controls="drive-volume-panel"
+        :aria-expanded="volumeOpen"
+        @click="toggleVolume"
+      >
+        <IconGlyph name="volume" />
+      </button>
+
+      <button
+        v-if="action"
+        class="drive-control-button"
+        type="button"
+        :aria-label="action.label"
+        :title="action.label"
+        :data-tooltip="action.label"
+        @click="runAction"
+      >
+        <IconGlyph :name="action.icon" />
       </button>
     </div>
-    <label>
-      <span>Quality</span>
-      <select :value="maximumQuality" aria-label="Quality control" @change="changeQuality">
+
+    <button
+      v-if="audioState.kind !== 'starting'"
+      ref="settingsButton"
+      class="drive-control-button drive-controls__settings-trigger"
+      type="button"
+      aria-label="Drive settings"
+      title="Drive settings"
+      data-tooltip="Drive settings"
+      aria-controls="drive-settings-panel"
+      :aria-expanded="settingsOpen"
+      @click="toggleSettings"
+    >
+      <IconGlyph name="settings" />
+    </button>
+
+    <div
+      v-if="volumeOpen && isAudioActive"
+      id="drive-volume-panel"
+      class="drive-popover drive-popover--volume"
+      role="dialog"
+      aria-label="Sound volume"
+    >
+      <label for="drive-volume">SOUND</label>
+      <input
+        id="drive-volume"
+        aria-label="Sound volume level"
+        type="range"
+        min="0"
+        max="1"
+        step="0.05"
+        :value="audioVolume"
+        @input="changeVolume"
+      >
+      <output for="drive-volume">{{ Math.round(audioVolume * 100) }}%</output>
+    </div>
+
+    <div
+      v-if="settingsOpen"
+      id="drive-settings-panel"
+      class="drive-popover drive-popover--settings"
+      role="dialog"
+      aria-label="Drive settings"
+    >
+      <strong>DRIVE SETTINGS</strong>
+      <label for="drive-quality">QUALITY</label>
+      <select id="drive-quality" :value="maximumQuality" aria-label="Quality control" @change="changeQuality">
         <option value="high">High</option>
         <option value="medium">Medium</option>
         <option value="low">Low</option>
         <option value="static">Static</option>
       </select>
-    </label>
-    <p class="drive-controls__status" role="status">{{ statusText }}</p>
+      <p v-if="statusText" class="drive-controls__status" role="status">{{ statusText }}</p>
+    </div>
   </div>
 </template>

src/components/IconGlyph.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  PhPause,
+  PhPlay,
+  PhSlidersHorizontal,
+  PhSpeakerHigh,
+  PhSpeakerX,
+  PhWaveform,
+} from '@phosphor-icons/vue';
+
+export type IconGlyphName = 'pause' | 'play' | 'settings' | 'sound' | 'sound-muted' | 'volume';
+
+const props = withDefaults(defineProps<{
+  name: IconGlyphName;
+  size?: number;
+}>(), {
+  size: 20,
+});
+
+const icons = {
+  pause: PhPause,
+  play: PhPlay,
+  settings: PhSlidersHorizontal,
+  sound: PhSpeakerHigh,
+  'sound-muted': PhSpeakerX,
+  volume: PhWaveform,
+} as const;
+
+const icon = computed(() => icons[props.name]);
+</script>
+
+<template>
+  <component
+    :is="icon"
+    class="icon-glyph"
+    :size="size"
+    weight="regular"
+    aria-hidden="true"
+    focusable="false"
+  />
+</template>

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>