mirror of
https://github.com/OpenSquawk/OpenSquawk
synced 2026-08-01 06:06:05 +08:00
918b2e1c12
Moves the monitor screen's HUD header, body layout (main column + desktop log rail), bottom nav and their ~450 lines of scoped CSS out of the page and into CockpitShell.vue, which composes the cockpit components added in Tasks 17-20. live-atc.vue drops from 1714 to 744 lines. The shell owns only presentational state (active tab, HUD menu open/close). inputMode stays on the page as a v-model because a page watcher drives the pre-recording buffer off it. debugMode and useBugReport also stay on the page, so the sheets, dialogs and the debugMode-gated DebugPanel are passed back in through an #overlays slot — that keeps them inside .learn-theme, whose CSS variables their styles depend on, without handing the shell ownership of them. The experience-menu rules stay :global(): Vuetify teleports that menu body to <body>, out of reach of scoped styles. Verified by rendering the shell on a throwaway route with fake data — the open question from the last session was that the reworked HUD had never actually been seen, since it sits behind the auth guard. It renders: the amber "Report issue" pill is the visually heaviest button in the cluster (rgba(245,158,11,.18) fill, #fcd34d text) and collapses to an amber icon at mobile width. The moved media queries survived the move — the log rail shows and the bottom nav hides at desktop width, and they swap at 375px, where the Log tab switches the main column over. All shell emits fire and the inputMode, pilotInput and manual-frequency v-models round-trip. No Vue warnings. Typecheck clean, 167/167 tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>