refactor: switch StateIndicator to BEM

Author: atyrode

src/frontend/src/pad/controls/StateIndicator.scss

@@ -1,22 +1,22 @@
 .state-indicator {
+  // Block properties
   width: 100%;
   height: 100%;
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
   transition: background-color 0.3s ease;
   color: white;
   font-weight: bold;
-  
   position: relative;
   box-sizing: border-box;
 
+  // Element
   &__text {
     text-align: center;
   }
 
+  // Modifiers for different states
   &--running {
     background-color: #2a7d2e; // Green for running
   }
@@ -33,6 +33,14 @@
     background-color: #e74c3c; // Red for stopped
   }
 
+  &--loading {
+    background-color: #9b59b6; // Purple for loading
+  }
+  
+  &--unauthenticated {
+    background-color: #34495e; // Dark blue for unauthenticated
+  }
+  
   &--error {
     background-color: #aaaaaa; // Light gray for error
   }

src/frontend/src/pad/controls/StateIndicator.tsx

@@ -13,51 +13,40 @@ export const StateIndicator: React.FC = () => {
     refetchInterval: isAuthenticated === true ? undefined : false,
   });
 
-  const getStateClassName = () => {
-    if (isAuthLoading || isWorkspaceLoading) return 'state-indicator state-indicator--loading';
-    if (isAuthenticated === false) return 'state-indicator state-indicator--unauthenticated';
-    if (!workspaceState) return 'state-indicator state-indicator--unknown';
-
-    switch (workspaceState.status) {
-      case 'running':
-        return 'state-indicator state-indicator--running';
-      case 'starting':
-        return 'state-indicator state-indicator--starting';
-      case 'stopping':
-        return 'state-indicator state-indicator--stopping';
-      case 'stopped':
-        return 'state-indicator state-indicator--stopped';
-      case 'error':
-        return 'state-indicator state-indicator--error';
-      default:
-        return 'state-indicator state-indicator--unknown';
+  const getState = () => {
+    if (isAuthLoading || isWorkspaceLoading) {
+      return { modifier: 'loading', text: 'Loading...' };
+    }
+    
+    if (isAuthenticated === false) {
+      return { modifier: 'unauthenticated', text: 'Not Authenticated' };
+    }
+    
+    if (!workspaceState) {
+      return { modifier: 'unknown', text: 'Unknown' };
     }
-  };
-
-  const getStateText = () => {
-    if (isAuthLoading || isWorkspaceLoading) return 'Loading...';
-    if (isAuthenticated === false) return 'Not Authenticated';
-    if (!workspaceState) return 'Unknown';
 
     switch (workspaceState.status) {
       case 'running':
-        return 'Running';
+        return { modifier: 'running', text: 'Running' };
       case 'starting':
-        return 'Starting';
+        return { modifier: 'starting', text: 'Starting' };
       case 'stopping':
-        return 'Stopping';
+        return { modifier: 'stopping', text: 'Stopping' };
       case 'stopped':
-        return 'Stopped';
+        return { modifier: 'stopped', text: 'Stopped' };
       case 'error':
-        return 'Error';
+        return { modifier: 'error', text: 'Error' };
       default:
-        return 'Unknown';
+        return { modifier: 'unknown', text: 'Unknown' };
     }
   };
 
+  const { modifier, text } = getState();
+
   return (
-    <div className={getStateClassName()}>
-      <div className="state-indicator__text">{getStateText()}</div>
+    <div className={`state-indicator state-indicator--${modifier}`}>
+      <div className="state-indicator__text">{text}</div>
     </div>
   );
 };