feat: enhance activity state component with dynamic state handling and toolbar integration

Author: caperaven

app/activity-state/activity-state.html

@@ -1,9 +1,8 @@
 <app-header><h2>Activity State</h2></app-header>
 
-<activity-state data-state="busy"></activity-state>
-
 <tool-bar>
     <button data-action="busy">Set Busy</button>
     <button data-action="success">Set Success</button>
     <button data-action="error">Set Error</button>
+    <activity-state data-state="busy"></activity-state>
 </tool-bar>

app/activity-state/activity-state.js

@@ -27,15 +27,16 @@ export default class ActivityStateView extends HTMLElement {
 	}
 
 	#click(event) {
-		if (event.target.dataset.action) {
-			this.setState("busy");
+		const target = event.composedPath()[0];
+		if (target.dataset.action) {
+			this.setState(target.dataset.action);
 		}
 	}
 
 	setState(state) {
 		requestAnimationFrame(() => {
 			const activityState = this.shadowRoot.querySelector("activity-state");
-			activityState.dataset.state = state;
+			activityState.setState(state);
 		});
 	}
 }

components/activity-state/activity-state.css

@@ -1,5 +1,6 @@
 :host {
     display: block;
-    padding: var(--padding);
     box-sizing: border-box;
+    width: 1.5rem;
+    height: 1.5rem;
 }

components/activity-state/activity-state.js

@@ -16,6 +16,23 @@ class ActivityState extends HTMLElement {
 
         this.style.display = "block";
     }
+
+    setState(state) {
+        const materialIcon = this.shadowRoot.querySelector("material-icon");
+
+        const iconName = {
+            "busy": "hourglass_full",
+            "success": "check_circle",
+            "error": "error",
+        }[state];
+
+        ComponentModule.on_ready({
+            element: materialIcon,
+            callback: () => {
+                materialIcon.setIcon(iconName);
+            }
+        })
+    }
 }
 
 customElements.define(ActivityState.name, ActivityState);

components/material-icon/material-icon.js

@@ -1,3 +1,5 @@
+import { ComponentModule } from "../../src/modules/component.js";
+
 export class MaterialIcon extends HTMLElement {
     static name = Object.freeze("material-icon");
 
@@ -19,6 +21,8 @@ export class MaterialIcon extends HTMLElement {
         this.style.alignItems = "center";
         this.style.justifyContent = "center";
         this.style.pointerEvents = "none";
+
+        ComponentModule.ready({element: this});
     }
 
     setIcon(iconName) {

components/tool-bar/tool-bar.js

@@ -24,7 +24,7 @@ export class ToolBar extends HTMLElement {
             url: import.meta.url,
         });
 
-        this.style.display = "block";
+        this.style.display = "flex";
     }
 }