feat: separate components

build.rs

@@ -2,5 +2,5 @@
 // SPDX-License-Identifier: MIT
 
 fn main() {
-    slint_build::compile("ui/todo.slint").unwrap();
+    slint_build::compile("ui/main.slint").unwrap();
 }

ui/browser_item.slint

@@ -0,0 +1,38 @@
+import {
+    Button,
+    HorizontalBox,
+} from "std-widgets.slint";
+
+import { BrowserConfig } from "./types.slint";
+
+export component BrowserItem {
+    height: 80px;
+    in property <BrowserConfig> browser;
+
+    Rectangle {
+        height: 100%;
+        width: 100%;
+        background: rgba(30, 41,  59, 0.3);
+        HorizontalBox {
+            height: 80px;
+            padding: 8px;
+            alignment: space-between;
+            Text {
+                text: browser.path;
+                vertical_alignment: center;
+            }
+
+            Text {
+                text: browser.flags;
+                vertical_alignment: center;
+            }
+
+            VerticalLayout {
+                alignment: center;
+                Button {
+                    text: "use";
+                }
+            }
+        }
+    }
+}

ui/main.slint

@@ -0,0 +1,45 @@
+import {
+    SpinBox,
+    Button,
+    CheckBox,
+    Slider,
+    LineEdit,
+    ScrollView,
+    ListView,
+    HorizontalBox,
+    VerticalBox,
+    GridBox,
+    StandardButton,
+    Palette,
+} from "std-widgets.slint";
+import { BrowserItem } from "./browser_item.slint";
+
+import { BrowserConfig } from "./types.slint";
+
+export component MainWindow inherits Window {
+    in property <[BrowserConfig]> browser-model: [];
+
+    callback todo-added(string);
+    callback remove-done();
+    callback update_todo(BrowserConfig);
+
+    preferred-width: 400px;
+    preferred-height: 600px;
+
+    VerticalBox {
+        x: root.safe-area-insets.left;
+        y: root.safe-area-insets.top;
+        width: root.width - root.safe-area-insets.right - root.safe-area-insets.left;
+        height: root.height - root.safe-area-insets.bottom - root.safe-area-insets.top;
+
+        list-view := ScrollView {
+            VerticalLayout {
+                spacing: 10px;
+                padding: 5px;
+                for browser in root.browser-model: BrowserItem {
+                    browser: browser;
+                }
+            }
+        }
+    }
+}

ui/todo.slint

@@ -1,64 +0,0 @@
-import {
-    SpinBox,
-    Button,
-    CheckBox,
-    Slider,
-    LineEdit,
-    ScrollView,
-    ListView,
-    HorizontalBox,
-    VerticalBox,
-    GridBox,
-    StandardButton,
-    Palette,
-} from "std-widgets.slint";
-
-@rust-attr(derive(serde::Serialize, serde::Deserialize))
-export struct BrowserConfig  {
-    path: string,
-    flags: string,
-}
-
-export component MainWindow inherits Window {
-    in property <[BrowserConfig]> browser-model: [
-        { path: "chrome.exe", flags: "profile 1" },
-        { path: "chrome.exe", flags: "profile 2" },
-        { path: "zen.exe", flags: "" },
-        { path: "edge.exe", flags: "" },
-    ];
-
-    callback todo-added(string);
-    callback remove-done();
-    callback update_todo(BrowserConfig);
-
-    preferred-width: 400px;
-    preferred-height: 600px;
-
-    VerticalBox {
-        x: root.safe-area-insets.left;
-        y: root.safe-area-insets.top;
-        width: root.width - root.safe-area-insets.right - root.safe-area-insets.left;
-        height: root.height - root.safe-area-insets.bottom - root.safe-area-insets.top;
-
-        list-view := ListView {
-            for browser in root.browser-model: HorizontalLayout {
-                HorizontalBox {
-                    padding: 8px;
-                    alignment: center;
-
-                    Text {
-                        text: browser.path;
-                    }
-
-                    Text {
-                        text: browser.flags;
-                    }
-
-                    Button {
-                        text: "use";
-                    }
-                }
-            }
-        }
-    }
-}

ui/types.slint

@@ -0,0 +1,6 @@
+
+@rust-attr(derive(serde::Serialize, serde::Deserialize))
+export struct BrowserConfig  {
+    path: string,
+    flags: string,
+}