-

ui/components/status-indicator.slint

@@ -0,0 +1,57 @@
+import { Theme, Animations } from "../theme/theme.slint";
+
+export enum StatusState {
+    stopped,
+    starting,
+    running,
+}
+
+export component StatusIndicator {
+    in property <StatusState> state: StatusState.stopped;
+    
+    private property <color> dot-color: state == StatusState.running ? #22c55e :
+                                        state == StatusState.starting ? #eab308 :
+                                        #9ca3af;
+    
+    private property <bool> should-animate: state == StatusState.running || state == StatusState.starting;
+    
+    width: 10px;
+    height: 10px;
+    
+    // Breathing animation ring
+    if root.should-animate: ping := Rectangle {
+        width: parent.width;
+        height: parent.height;
+        border-radius: 5px;
+        background: root.dot-color.transparentize(0.25);
+        
+        // Animate scale and opacity for breathing effect
+        states [
+            pulse: {
+                ping.width: parent.width * 2;
+                ping.height: parent.height * 2;
+                ping.x: -parent.width / 2;
+                ping.y: -parent.height / 2;
+                ping.opacity: 0;
+                
+                in {
+                    animate width, height, x, y, opacity {
+                        duration: 1500ms;
+                        easing: cubic-bezier(0, 0, 0.2, 1);
+                        iteration-count: -1;
+                    }
+                }
+            }
+        ]
+    }
+    
+    // Main dot
+    dot := Rectangle {
+        width: parent.width;
+        height: parent.height;
+        border-radius: 5px;
+        background: root.dot-color;
+        
+        animate background { duration: Animations.durations.normal; }
+    }
+}