forked from sagnik/Velocity-OS
100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useSentinelStore } from '../store/sentinelStore';
|
|
import styles from './SentinelAlertBanner.module.css';
|
|
|
|
/**
|
|
* SentinelAlertBanner
|
|
* Non-blocking notification ribbon that slides from the top edge
|
|
* when a CCTV event fires (showroom visitor detected).
|
|
*
|
|
* Choreography from UX Master Plan §4.2:
|
|
* T+0ms — WebSocket event fires
|
|
* T+200ms — Ribbon slides in: translateY(-100%) → translateY(0)
|
|
* spring(stiffness:300, damping:28)
|
|
* Never blocks the current view.
|
|
* "Open Sentinel" → navigate to /showroom
|
|
* Auto-dismiss after 30s if broker does not interact.
|
|
*/
|
|
export function SentinelAlertBanner() {
|
|
const navigate = useNavigate();
|
|
const {
|
|
pendingAlert,
|
|
clearPendingAlert,
|
|
} = useSentinelStore();
|
|
|
|
// Auto-dismiss after 30 seconds
|
|
useEffect(() => {
|
|
if (!pendingAlert) return;
|
|
const timer = setTimeout(clearPendingAlert, 30_000);
|
|
return () => clearTimeout(timer);
|
|
}, [pendingAlert, clearPendingAlert]);
|
|
|
|
const handleOpenShowroom = () => {
|
|
clearPendingAlert();
|
|
navigate('/showroom');
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{pendingAlert && (
|
|
<motion.div
|
|
className={`${styles.banner} glass-amber`}
|
|
role="alert"
|
|
aria-live="assertive"
|
|
initial={{ y: '-100%', opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: '-100%', opacity: 0 }}
|
|
transition={{
|
|
type: 'spring',
|
|
stiffness: 300,
|
|
damping: 28,
|
|
}}
|
|
>
|
|
<div className={styles.content}>
|
|
{/* Live indicator */}
|
|
<span className="live-dot" style={{ background: 'var(--color-amber)' }} />
|
|
|
|
{/* Alert text */}
|
|
<div className={styles.text}>
|
|
<span className={styles.title}>
|
|
{pendingAlert.matchedName
|
|
? `${pendingAlert.matchedName} detected in showroom`
|
|
: 'Visitor detected in Showroom Zone A'
|
|
}
|
|
</span>
|
|
<span className={styles.sub}>
|
|
{pendingAlert.confidence
|
|
? `${pendingAlert.matchedName
|
|
? 'Match'
|
|
: 'Face'} · ${pendingAlert.confidence}% confidence`
|
|
: 'Unknown contact'
|
|
}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className={styles.actions}>
|
|
<button
|
|
className="btn-primary"
|
|
onClick={handleOpenShowroom}
|
|
aria-label="Open Showroom Mode"
|
|
>
|
|
Open Sentinel
|
|
</button>
|
|
<button
|
|
className="btn-ghost"
|
|
onClick={clearPendingAlert}
|
|
aria-label="Dismiss alert"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|