Hide map panels when entering the cockpit

src/ui/cockpitController.js

@@ -210,6 +210,9 @@ export class CockpitViewController {
     this._listen(this.entry, 'click', () => this.enter());
     this._listen(this.tr3bToggle, 'click', () => this.toggleTrackedTr3b());
     this._listen(this.mapViewButton, 'click', () => this.exit());
+    this._listen(document.getElementById('view-switcher'), 'click', (event) => {
+      if (event.target.closest?.('#cockpit-panels-toggle')) this.scheduleContextLayout();
+    });
     this._listen(this.visionPrevious, 'click', () => this.cycleVisionMode(-1));
     this._listen(this.visionCurrent, 'click', () => this.cycleVisionMode(1));
     this._listen(this.visionNext, 'click', () => this.cycleVisionMode(1));

src/ui/styles/cockpit.css

@@ -1984,6 +1984,13 @@ body.cockpit-mode
   ) {
   display: none !important;
 }
+/* The visor starts with flight instruments. Panels restores the optional
+   displays for this flight without changing the map's panel preferences. */
+body.cockpit-mode:has(#cockpit-panels-toggle[aria-pressed='false'])
+  :is(#left-panel-stack, #intel-hud, #corner-actions, #global-loading-status,
+      #cockpit-utility-controls, #cockpit-context, #cockpit-signal-stream) {
+  display: none !important;
+}
 body.cockpit-mode #left-panel-stack {
   z-index: 147;
   display: flex;

src/ui/views/CockpitView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { t } from '../../i18n/index.js';
 import {
   createInstrumentState,
@@ -9,6 +9,7 @@ import {
 } from '../cockpitInstrumentState.js';
 import { vClassToggle } from '../rail/classToggle.js';
 import { useCockpitStore } from '../stores/cockpit.js';
+import { useRadioStore } from '../stores/radio.js';
 import { useGlobeActionsStore } from '../stores/globeActions.js';
 import CockpitBriefing from './panels/CockpitBriefing.vue';
 import CockpitContext from './panels/CockpitContext.vue';
@@ -23,6 +24,12 @@ import CockpitUtilityControls from './panels/CockpitUtilityControls.vue';
 const { presence, instruments, route, vision, utilityLayout } =
   storeToRefs(useCockpitStore());
 const active = computed(() => Boolean(presence.value?.active));
+const panelsOpen = ref(false);
+const radio = useRadioStore();
+watch(active, () => { panelsOpen.value = false; });
+watch(() => radio.utility?.display || radio.utility?.radio, (open) => {
+  if (active.value && open) panelsOpen.value = true;
+});
 const globe = useGlobeActionsStore();
 const { resetBusy } = storeToRefs(globe);
 const initialInstruments = createInstrumentState();
@@ -200,6 +207,9 @@ const tickStyle = (tick) =>
   </section>
 
   <nav id="view-switcher" :aria-label="t('View switcher')">
+    <button v-if="active" id="cockpit-panels-toggle" type="button" :aria-pressed="panelsOpen" @click="panelsOpen = !panelsOpen">
+      <span>{{ t('Panels') }}</span>
+    </button>
     <button id="cockpit-reset-globe" type="button" :aria-label="resetBusy ? t('Resetting cockpit to full globe view') : t('Reset cockpit to full globe view')" :title="t('Exit cockpit and return to full globe view')" :hidden="!active" @click="globe.act('reset')">
       <span class="material-symbols-outlined" aria-hidden="true">public</span>
       <span>{{ t('RESET') }}</span>