fullscreen popup

2026-09-16 01:21:20 -04:00 · 2026-05-17 21:42:39 -04:00
parent 27f31531ac
commit f6f985d740
3 changed files with 63 additions and 18 deletions
@@ -11,7 +11,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
    <title>Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-D-6ytlM1.js"></script>
+    <script type="module" crossorigin src="/assets/index-DBkeJzWB.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CkqCBh_q.css">
  </head>
  <body>
@@ -1,8 +1,41 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useManualDockAssist } from '../../../features/manualDockAssist/useManualDockAssist.js';

 function ManualDockAssistOverlay({ mobileHud = false }) {
-  const { visible, statusLabel, statusTone } = useManualDockAssist({ manageLifecycle: true });
+  const { visible, statusLabel, statusTone, active, charging } = useManualDockAssist({ manageLifecycle: true });
+  const [popupMessage, setPopupMessage] = useState('');
+  const timerRef = useRef(null);
+  const prevActiveRef = useRef(active);
+
+  useEffect(() => {
+    const prevActive = prevActiveRef.current;
+    const enabledNow = active && !prevActive;
+    const autoDisabledOnCharge = !active && prevActive && charging;
+    if (enabledNow) {
+      setPopupMessage('Dock assist mode enabled');
+    } else if (autoDisabledOnCharge) {
+      setPopupMessage('Docking successful! Thank you!');
+    }
+    prevActiveRef.current = active;
+  }, [active, charging]);
+
+  useEffect(() => {
+    if (!popupMessage) return undefined;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setPopupMessage('');
+      timerRef.current = null;
+    }, 2500);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [popupMessage]);
+
  if (!visible) return null;
  const toneClass =
    statusTone === 'good'
@@ -13,6 +46,17 @@ function ManualDockAssistOverlay({ mobileHud = false }) {

  return (
    <div className="pointer-events-none absolute inset-0">
+      {popupMessage ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div
+            className={`rounded-xl border border-indigo-200/70 bg-indigo-900/88 px-4 py-2 text-center font-semibold text-indigo-50 shadow-2xl ${
+              mobileHud ? 'text-lg' : 'text-2xl'
+            }`}
+          >
+            {popupMessage}
+          </div>
+        </div>
+      ) : (
        <div
          className={`absolute right-2 top-1/2 -translate-y-1/2 rounded-lg border px-2 py-1 font-semibold shadow-lg ${toneClass} ${
            mobileHud ? 'text-[0.65rem]' : 'text-xs'
@@ -20,6 +64,7 @@ function ManualDockAssistOverlay({ mobileHud = false }) {
        >
          {statusLabel}
        </div>
+      )}
    </div>
  );
 }