fix: polish pass for traffic, nav, icons, contact email reveal and dashcam robustness

src/composables/useDashcam.ts

@@ -6,12 +6,27 @@ const LIVE_STAGE = ".reading-stage[data-reading-stage='live']";
 const RISE_MS = 400;
 /** Phones: no shutter in the gantry bay (dashcam.css), and no `c` key either. */
 const NARROW = '(max-width: 767px)';
+/** One retry for a failed frame chunk, then the open is abandoned. */
+export const DASHCAM_RETRY_MS = 350;
+/** A frame that has not mounted in this long is abandoned (nothing changed). */
+export const DASHCAM_LOAD_TIMEOUT_MS = 4_000;
+
+type FrameModule = { default: Component };
+const importFrame = (): Promise<FrameModule> => import('@/components/DashcamFrame.vue');
 
 /**
  * DASHCAM, DOM side (initial chunk, kept minimal): availability, the `c` key,
  * html[data-dashcam] and the lazy frame. The frame itself (telemetry, focus
  * trap, capture, the shutter) loads on first open or button hover. Starts
  * after mount, so the server HTML carries none of it.
+ *
+ * Opening is two-phase so the page can never fold away without a frame on
+ * top of it: show() asks for the frame (rendered once the chunk is in), and
+ * only the frame's `ready` (its mount) folds the page, closes the lens and
+ * hands it the title. A chunk that fails twice or never mounts abandons the
+ * open with nothing changed. Anything that would leave the frame stranded
+ * (motion withdrawn, the scene dropping out of `running`, a resize to phone
+ * width) closes it.
  */
 export function useDashcam(sources: {
   /** Motion allowed in full and the scene not withheld: closes the dashcam when it drops. */
@@ -19,31 +34,70 @@ export function useDashcam(sources: {
   sceneRunning: Readonly<Ref<boolean>>;
   /** Fine pointer on high/medium: the lens drifts and the bars ease. */
   drift: () => boolean;
+  /** Test seam: the frame chunk loader. */
+  load?: () => Promise<FrameModule>;
 }) {
+  const load = sources.load ?? importFrame;
+  /** The page is folded and the frame is mounted. */
   const open = shallowRef(false);
+  /** The frame should render (requested and loaded); `open` follows on its mount. */
+  const engaged = shallowRef(false);
   const frame = shallowRef<Component | null>(null);
   const available = computed(() => sources.allowed.value && sources.sceneRunning.value);
-  let loading: Promise<void> | null = null;
+  let loading: Promise<boolean> | null = null;
+  let requested = false;
   let riseTimer = 0;
+  let loadTimer = 0;
   const root = (): HTMLElement => document.documentElement;
+  const narrow = (): boolean => window.matchMedia?.(NARROW).matches ?? false;
 
-  const prefetch = (): Promise<void> => (loading ??= import('@/components/DashcamFrame.vue').then(
-    (module) => { frame.value = markRaw(module.default); },
-    () => { loading = null; },
-  ));
+  const attempt = (): Promise<boolean> => load().then(
+    (module) => { frame.value = markRaw(module.default); return true; },
+    () => false,
+  );
+  const prefetch = (): Promise<boolean> => {
+    if (frame.value) return Promise.resolve(true);
+    return (loading ??= attempt()
+      .then((ok) => ok || new Promise<boolean>((resolve) => { window.setTimeout(() => { void attempt().then(resolve); }, DASHCAM_RETRY_MS); }))
+      .then((ok) => { if (!ok) loading = null; return ok; }));
+  };
+
+  /** Drops a pending or mounting open; nothing on the page has changed yet. */
+  const abandon = (): void => {
+    requested = false;
+    engaged.value = false;
+    window.clearTimeout(loadTimer);
+  };
 
   const show = (): void => {
-    if (open.value || !available.value || document.querySelector(LIVE_STAGE) === null) return;
-    if (window.matchMedia?.(NARROW).matches) return;
+    if (requested || open.value || !available.value || document.querySelector(LIVE_STAGE) === null) return;
+    if (narrow()) return;
+    requested = true;
+    window.clearTimeout(loadTimer);
+    loadTimer = window.setTimeout(() => { if (!open.value) abandon(); }, DASHCAM_LOAD_TIMEOUT_MS);
+    void prefetch().then((ok) => {
+      if (!requested) return;
+      if (!ok || !available.value || narrow()) abandon();
+      else engaged.value = true;
+    });
+  };
+
+  /** The frame has mounted: fold the page and close the lens. */
+  const ready = (): void => {
+    if (!requested || open.value) return;
+    window.clearTimeout(loadTimer);
     window.clearTimeout(riseTimer);
     open.value = true;
     setDashcamOpen(true, sources.drift());
     root().dataset.dashcam = 'on';
-    void prefetch();
   };
 
   const close = (): void => {
-    if (!open.value) return;
+    if (!open.value) {
+      if (requested) abandon();
+      return;
+    }
+    abandon();
     open.value = false;
     setDashcamOpen(false, false);
     root().dataset.dashcam = 'rise';
@@ -53,25 +107,31 @@ export function useDashcam(sources: {
 
   const onKeydown = (event: KeyboardEvent): void => {
     if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || isEditableTarget(event.target)) return;
-    if (open.value && event.key === 'Escape') {
+    const active = open.value || requested;
+    if (active && event.key === 'Escape') {
       event.preventDefault();
       close();
     } else if (!event.shiftKey && !event.repeat && event.key.toLowerCase() === 'c') {
-      const wasOpen = open.value;
-      if (wasOpen) close();
+      if (active) close();
       else show();
-      if (wasOpen || open.value) event.preventDefault();
+      if (active || requested) event.preventDefault();
     }
   };
+  const onResize = (): void => { if ((open.value || requested) && narrow()) close(); };
 
-  watch(sources.allowed, (allowed) => { if (!allowed) close(); });
-  onMounted(() => window.addEventListener('keydown', onKeydown));
+  watch(available, (ok) => { if (!ok) close(); });
+  onMounted(() => {
+    window.addEventListener('keydown', onKeydown);
+    window.addEventListener('resize', onResize, { passive: true });
+  });
   onUnmounted(() => {
     window.removeEventListener('keydown', onKeydown);
+    window.removeEventListener('resize', onResize);
     window.clearTimeout(riseTimer);
+    window.clearTimeout(loadTimer);
     if (open.value) setDashcamOpen(false, false);
     delete root().dataset.dashcam;
   });
 
-  return { open, frame, available, show, close, prefetch };
+  return { open, engaged, frame, available, show, ready, close, prefetch };
 }