From 309302a7937a85df0506a6047185687aa0a9423a Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 5 Dec 2025 10:40:03 +0000
Subject: [PATCH] fix: StatusDot not updating reactively when VM status changes

The StatusDot component was computing variant, size, and className once
at mount time, not reactively. When a VM transitioned from stopped to
running, the tooltip updated (it accessed props.title directly) but the
dot color stayed red because className was stale.

Fix: Convert plain variable assignments to getter functions that access
props reactively, and call them in the JSX template.
---
 .../src/components/shared/StatusDot.tsx         | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend-modern/src/components/shared/StatusDot.tsx b/frontend-modern/src/components/shared/StatusDot.tsx
index 8b1b4b7..03b6905 100644
--- a/frontend-modern/src/components/shared/StatusDot.tsx
+++ b/frontend-modern/src/components/shared/StatusDot.tsx
@@ -27,14 +27,15 @@ const SIZE_CLASSES: Record<StatusDotSize, string> = {
 };
 
 export function StatusDot(props: StatusDotProps): JSX.Element {
-  const variant = props.variant ?? 'muted';
-  const size = props.size ?? 'sm';
-  const ariaHidden = props.ariaHidden ?? !props.ariaLabel;
+  // Use getters to maintain reactivity - props can change over time
+  const variant = () => props.variant ?? 'muted';
+  const size = () => props.size ?? 'sm';
+  const ariaHidden = () => props.ariaHidden ?? !props.ariaLabel;
 
-  const className = [
+  const className = () => [
     'inline-block rounded-full flex-shrink-0',
-    SIZE_CLASSES[size],
-    VARIANT_CLASSES[variant],
+    SIZE_CLASSES[size()],
+    VARIANT_CLASSES[variant()],
     props.pulse ? 'animate-pulse' : '',
     props.class ?? '',
   ]
@@ -43,10 +44,10 @@ export function StatusDot(props: StatusDotProps): JSX.Element {
 
   return (
     <span
-      class={className}
+      class={className()}
       title={props.title}
       aria-label={props.ariaLabel}
-      aria-hidden={ariaHidden}
+      aria-hidden={ariaHidden()}
       role={props.ariaLabel ? 'img' : undefined}
     />
   );