api deserialization, sidebars

ui/app-window.slint

@@ -1,32 +1,50 @@
 import { Button, VerticalBox, TextEdit } from "std-widgets.slint";
 import { ChatView } from "chat-view.slint";
+import { ChannelSidebar, ServerSidebar } from "sidebar.slint";
 
 export component AppWindow inherits Window {
+    title: "ermine";
 
-    VerticalLayout {
+    property <bool> sidebar-open: true;
 
-        ChatView {
-            messages: [
-                { text: "hello", sender: "Bob", time: "10:00" },
-                { text: "hey!", sender: "Joe", time: "10:01" },
-                { text: "i like cats c:", sender: "Bob", time: "10:03" },
-                { text: "me too c:", sender: "Joe", time: "10:08" },
-                {
-                    text: "meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow ",
-                    sender: "Joe",
-                    time: "10:08"
-                },
-                {
-                    text: "meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow ",
-                    sender: "Bob",
-                    time: "10:12"
-                },
-            ];
+    HorizontalLayout {
+        ServerSidebar {
+            open: root.width > 600px;
+            server_list: [{ icon: "😳" }, { icon: "😍" }];
+            background: yellow;
         }
 
-        TextEdit {
-            height: 64px;
-            font-size: 16px;
+        ChannelSidebar {
+            open: root.width > 600px ? sidebar-open : false;
+            channel_list: [{ title: "Foo" }, { title: "Bar" }];
+            background: blue;
+        }
+
+        VerticalLayout {
+
+            ChatView {
+                messages: [
+                    { text: "hello", sender: "Bob", time: "10:00" },
+                    { text: "hey!", sender: "Joe", time: "10:01" },
+                    { text: "i like cats c:", sender: "Bob", time: "10:03" },
+                    { text: "me too c:", sender: "Joe", time: "10:08" },
+                    {
+                        text: "meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow ",
+                        sender: "Joe",
+                        time: "10:08"
+                    },
+                    {
+                        text: "meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow ",
+                        sender: "Bob",
+                        time: "10:12"
+                    },
+                ];
+            }
+
+            TextEdit {
+                height: 64px;
+                font-size: 16px;
+            }
         }
     }
 }

ui/sidebar.slint

@@ -0,0 +1,27 @@
+export component ChannelSidebar inherits Rectangle {
+    in property <bool> open;
+    in property <[{title: string}]> channel_list;
+
+    width: open ? 200px : 0px;
+    clip: true;
+
+    VerticalLayout {
+        width: 200px;
+        for channel in channel_list: Text {
+            text: channel.title;
+        }
+    }
+}
+
+export component ServerSidebar inherits Rectangle {
+    in property <bool> open;
+    in property <[{icon: string}]> server_list;
+
+    width: open ? 48px : 0px;
+    VerticalLayout {
+        width: 48px;
+        for server in server_list: Text {
+            text: server.icon;
+        }
+    }
+}