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

desktop_app/ui/app.py

@@ -1,6 +1,7 @@
 from textual.app import App
 from ui.screens.pair_screen import PairScreen
 from api.node import MeshNode
+from api.channel import Channel
 
 
 class mesh(App):
@@ -9,6 +10,9 @@ class mesh(App):
     def __init__(self, driver_class = None, css_path = None, watch_css = False, ansi_color = False):
         super().__init__(driver_class, css_path, watch_css, ansi_color)
         self.mesh_node: MeshNode = None
+        # key = channel name
+        # value = channel
+        self.channels: dict[str, Channel]
     
     def on_ready(self):
         self.push_screen(PairScreen())

desktop_app/ui/screens/main_screen.py

@@ -3,6 +3,7 @@ from textual.widgets import Header, Footer, ContentSwitcher
 from ui.widgets.home_sidebar import HomeSidebar
 from ui.widgets.home_info import HomeInfo
 from ui.widgets.channels_list import ChannelsList
+from ui.widgets.chat_window import ChatWindow
 
 
 class MainScreen(Screen):
@@ -13,5 +14,6 @@ class MainScreen(Screen):
         with ContentSwitcher(initial="home-info"):
             yield HomeInfo(id="home-info")
             yield ChannelsList(id="channels-list")
+            yield ChatWindow(id="chat-window")
         
         yield Footer()

desktop_app/ui/screens/pair_screen.py

@@ -15,7 +15,7 @@ class PairScreen(Screen):
     async def connect_to_node(self, is_retry = False):
         if not is_retry:
             self.notify("This may take a moment...", title="Discovering nearby nodes...")
-        self.app.mesh_node = await MeshNode.discover()
+        self.app.mesh_node = await MeshNode.discover(self.app)
 
         if self.app.mesh_node == None:
             self.notify("Check your node is powered on and nearby.\nRetrying...", title="Failed to find a nearby node!", severity="warning")

desktop_app/ui/widgets/channels_list.py

@@ -1,5 +1,5 @@
 from textual.containers import VerticalScroll, Vertical, HorizontalGroup
-from textual.widgets import Static, Button, Rule
+from textual.widgets import Static, Button, Rule, ContentSwitcher
 
 from api.channel import Channel
 
@@ -37,16 +37,19 @@ class ChannelsList(Vertical):
     }
     """
     
+    def on_button_pressed(self, event: ChannelView.Pressed):
+        self.screen.query_one(ContentSwitcher).current = "chat-window"
+    
     def compose(self):
         with VerticalScroll():
             yield Static("channels", classes="banner")
-            yield ChannelView(Channel("test channel", "AQ=="))
-            yield ChannelView(Channel("test channel", "AQ=="))
-            yield ChannelView(Channel("test channel", "AQ=="))
-            yield ChannelView(Channel("test channel", "AQ=="))
-            yield ChannelView(Channel("test channel", "AQ=="))
-            yield ChannelView(Channel("test channel", "AQ=="))
-            yield ChannelView(Channel("test channel", "AQ=="))
+            yield ChannelView(Channel("test channel 1", "AQ=="))
+            yield ChannelView(Channel("test channel 2", "AQ=="))
+            yield ChannelView(Channel("test channel 3", "AQ=="))
+            yield ChannelView(Channel("test channel 4", "AQ=="))
+            yield ChannelView(Channel("test channel 5", "AQ=="))
+            yield ChannelView(Channel("test channel 6", "AQ=="))
+            yield ChannelView(Channel("test channel 7", "AQ=="))
             
         yield Rule()
             

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")