adding search bar to appz

ui/site/apps/Messages.js

@@ -1,15 +1,44 @@
 css(`
-    messages- {
-        width: 100%; height: 100%;
+    messages- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
     }
 `)
-    
-export default class Messages extends HTMLElement {
 
-    connectedCallback() {     
-        console.log("rendeirng messages")
-        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+class Messages extends Shadow {
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                input("Search...", "50vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
+            })
+            .x(50, vw).y(5, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
     }
 }
 
-customElements.define("messages-", Messages)
+registerShadow(Messages)