From f7af29eb75e01ba8d90a6a658435ed55215987d3 Mon Sep 17 00:00:00 2001
From: Margret Riegert <margret@eowyn.net>
Date: Sun, 22 Feb 2026 23:23:49 -0500
Subject: [PATCH] Experiments with slint

---
 src/main.rs         | 14 +++++++-------
 ui/app-window.slint | 36 +++++++++++++++++++++++++-----------
 ui/chat-view.slint  | 16 ++++++++++++++++
 ui/message.slint    | 24 ++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 18 deletions(-)
 create mode 100644 ui/chat-view.slint
 create mode 100644 ui/message.slint

diff --git a/src/main.rs b/src/main.rs
index d065a6d..c251e1f 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -8,13 +8,13 @@ slint::include_modules!();
 fn main() -> Result<(), Box<dyn Error>> {
     let ui = AppWindow::new()?;
 
-    ui.on_request_increase_value({
-        let ui_handle = ui.as_weak();
-        move || {
-            let ui = ui_handle.unwrap();
-            ui.set_counter(ui.get_counter() + 1);
-        }
-    });
+    // ui.on_request_increase_value({
+    //     let ui_handle = ui.as_weak();
+    //     move || {
+    //         let ui = ui_handle.unwrap();
+    //         ui.set_counter(ui.get_counter() + 1);
+    //     }
+    // });
 
     ui.run()?;
 
diff --git a/ui/app-window.slint b/ui/app-window.slint
index 2d5522c..6629e27 100644
--- a/ui/app-window.slint
+++ b/ui/app-window.slint
@@ -1,18 +1,32 @@
-import { Button, VerticalBox } from "std-widgets.slint";
+import { Button, VerticalBox, TextEdit } from "std-widgets.slint";
+import { ChatView } from "chat-view.slint";
 
 export component AppWindow inherits Window {
-    in-out property <int> counter: 42;
-    callback request-increase-value();
-    VerticalBox {
-        Text {
-            text: "Counter: \{root.counter}";
+
+    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"
+                },
+            ];
         }
 
-        Button {
-            text: "Increase value";
-            clicked => {
-                root.request-increase-value();
-            }
+        TextEdit {
+            height: 64px;
+            font-size: 16px;
         }
     }
 }
diff --git a/ui/chat-view.slint b/ui/chat-view.slint
new file mode 100644
index 0000000..4790d6b
--- /dev/null
+++ b/ui/chat-view.slint
@@ -0,0 +1,16 @@
+import { Button, VerticalBox, ScrollView } from "std-widgets.slint";
+import { Message } from "message.slint";
+
+export component ChatView inherits ScrollView {
+    in property <[{text: string, sender: string, time: string}]> messages;
+
+    VerticalLayout {
+        spacing: 5px;
+
+        for message in root.messages: Message {
+            text: message.text;
+            sender: message.sender;
+            time: message.time;
+        }
+    }
+}
diff --git a/ui/message.slint b/ui/message.slint
new file mode 100644
index 0000000..35f08db
--- /dev/null
+++ b/ui/message.slint
@@ -0,0 +1,24 @@
+export component Message inherits Rectangle {
+    in property <string> sender;
+    in property <string> time;
+    in property <string> text;
+
+    VerticalLayout {
+        padding-top: 12px;
+
+        Text {
+            text: sender + " " + time;
+
+            x: 12px;
+            font-size: 12px;
+        }
+
+        Text {
+            text: text;
+
+            x: 24px;
+            font-size: 16px;
+            wrap: word-wrap;
+        }
+    }
+}