building out UI a ton more and also working on serialization and deserial for the desktop app

desktop_app/ui/widgets/chat_window.py

@@ -1,16 +1,82 @@
-from textual.containers import Vertical, VerticalScroll, HorizontalGroup
+from textual.containers import Vertical, VerticalScroll, VerticalGroup, HorizontalGroup
 from textual.widgets import Input, Button, Static
+from api.message import Message
+from api.node import MeshNode
 
 
-class Message(Static):
-    def __init__(self, message):
+class MessageView(VerticalGroup):
+    DEFAULT_CSS = """
+    MessageView {
+        margin-bottom: 1;
+        
+        #message-text {
+            background: $surface;
+            padding: 1;
+            width: auto;
+            max-width: 25;
+        }
+        
+        #triangle {
+            color: $surface;
+            width: auto;
+        }
+        
+        &.right {
+            align-horizontal: right;
+        }
+        
+        
+    }
+    """
+    
+    def __init__(self, message: Message):
         super().__init__()
+        self.message = message
+        
+        if self.message.sender != self.app.mesh_node:
+            self.notify("right side")
+            self.add_class("right")
+        
+    def compose(self):
+        user_name = self.message.sender.name
+        if self.message.sender == self.app.mesh_node:
+            user_name += " (You)"
+        
+        yield Static(f"[b u cyan]{user_name}[/]\n{self.message.content}", id="message-text")
+        yield Static("", id="triangle")
 
 class ChatWindow(Vertical):
-    def compose(self):
-        with VerticalScroll():
-            pass
+    DEFAULT_CSS = """
+    ChatWindow {
+        #message-history {
+            padding: 1;
+        }
         
-        with HorizontalGroup():
-            yield Input(placeholder="Send a message")
-            yield Button("", flat=True)
+        #message-box {
+            margin-right: 2;
+            align: left middle;
+            
+            #message-input {
+                margin: 1;
+                width: 90%;
+            }
+            
+            #send-btn {
+                max-width: 10%;
+                margin: 1 0;
+            }
+        }
+    }
+    """
+    
+    def compose(self):
+        with VerticalScroll(id="message-history"):
+            fake = MeshNode(None, self.app)
+            fake.name = "billy"
+            yield MessageView(Message("hi!!!", fake))
+            yield MessageView(Message("hi!!!", fake))
+            yield MessageView(Message("hi!!!", self.app.mesh_node))
+        
+        with HorizontalGroup(id="message-box"):
+            yield Input(placeholder="Send a message", id="message-input")
+            yield Button("", flat=True, id="send-btn")