u

src/devtools/SseMonitor.jsx

@@ -1,4 +1,5 @@
 import { PureComponent, createRef } from 'react';
+import { keyframes } from '@emotion/react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Fab from '@mui/material/Fab';
@@ -15,6 +16,16 @@ import sseAutomat from '../automats/sseAutomat';
 
 const PANEL_WIDTH = 420;
 const PANEL_HEIGHT = 380;
+const pulseAnimationA = keyframes`
+  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+  35% { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+`;
+const pulseAnimationB = keyframes`
+  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+  35% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+`;
 
 function formatEventData(data) {
   if (!data) return '';
@@ -34,6 +45,7 @@ class SseMonitor extends PureComponent {
       events: sseAutomat.state.events,
       open: false,
       position: null,
+      eventPulse: 0,
     };
     this.panelRef = createRef();
     this.handleToggle = this.handleToggle.bind(this);
@@ -59,6 +71,14 @@ class SseMonitor extends PureComponent {
     window.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const previousEventId = prevState.events.at(-1)?.id;
+    const currentEventId = this.state.events.at(-1)?.id;
+    if (currentEventId != null && currentEventId !== previousEventId) {
+      this.setState((state) => ({ eventPulse: state.eventPulse + 1 }));
+    }
+  }
+
   handleKeyDown(event) {
     if (!event.altKey || !event.shiftKey || event.key?.toLowerCase() !== 's') return;
     event.preventDefault();
@@ -148,30 +168,29 @@ class SseMonitor extends PureComponent {
   }
 
   render() {
-    const { open, position, status, companyId, events } = this.state;
+    const { open, position, status, companyId, events, eventPulse } = this.state;
     const statusColor =
       status === 'connected' ? 'success' : status === 'error' ? 'error' : status === 'connecting' ? 'warning' : 'default';
 
     return (
       <>
         {!open ? (
-          <Tooltip title="SSE-Monitor (Alt+Shift+S)" placement="left">
-            <Fab
-              size="small"
-              color="primary"
-              aria-label="SSE-Monitor umschalten"
-              aria-pressed={open}
-              onClick={this.handleToggle}
-              sx={{
-                position: 'fixed',
-                right: 16,
-                bottom: 16,
-                zIndex: (theme) => theme.zIndex.tooltip,
-              }}
-            >
-              <SensorsIcon fontSize="small" />
-            </Fab>
-          </Tooltip>
+          <Fab
+            size="small"
+            color={statusColor}
+            aria-label={`SSE-Monitor umschalten (${status})`}
+            aria-pressed={open}
+            onClick={this.handleToggle}
+            sx={{
+              position: 'fixed',
+              left: { xs: 27, sm: 171 },
+              bottom: { xs: 132, sm: 142 },
+              zIndex: (theme) => theme.zIndex.tooltip,
+              animation: `${eventPulse % 2 === 0 ? pulseAnimationA : pulseAnimationB} 650ms ease-out`,
+            }}
+          >
+            <SensorsIcon fontSize="small" />
+          </Fab>
         ) : (
           <Paper
             ref={this.panelRef}