Move files around, add UI

ui/app-window.slint

@@ -0,0 +1,161 @@
+import { Button, HorizontalBox, VerticalBox, Slider, StandardButton } from "std-widgets.slint";
+import { DashboardPage } from "pages/dashboard.slint";
+import { ListenersPage } from "pages/listeners.slint";
+import { ClientsPage } from "pages/clients.slint";
+import { ToolsPage } from "pages/tools.slint";
+import { UITcpListener } from "structs.slint";
+import { BorderedRectangle } from "components.slint";
+
+component SideButton inherits Button {
+    in property <length> sidebar_size: 40px;
+
+    preferred-width: sidebar_size;
+    height: sidebar_size;
+}
+
+export component AppWindow inherits Window {
+
+    in-out property <int> current-tab: 0;
+    in-out property <[UITcpListener]> listeners;
+
+    in-out property <string> app-info;
+
+    callback tab-clicked(int);
+
+    tab-clicked(index) => {
+        current-tab = index;
+    }
+
+    // background: @linear-gradient(20deg, #1a161d 0%, #27222a 100%);
+    MenuBar {
+
+        Menu {
+            title: @tr("File");
+            MenuItem {
+                title: @tr("New");
+                activated => {
+                    // file-new();
+                }
+            }
+
+            MenuItem {
+                title: @tr("Open");
+                activated => {
+                    // file-open();
+                }
+            }
+        }
+
+        Menu {
+            title: @tr("Edit");
+
+            MenuItem {
+                title: @tr("Copy");
+            }
+
+            MenuItem {
+                title: @tr("Paste");
+            }
+
+            MenuSeparator { }
+
+            Menu {
+                title: @tr("Find");
+                MenuItem {
+                    title: @tr("Find in document...");
+                }
+
+                MenuItem {
+                    title: @tr("Find Next");
+                }
+
+                MenuItem {
+                    title: @tr("Find Previous");
+                }
+            }
+        }
+    }
+
+    callback request-increase-value();
+    HorizontalLayout {
+
+        BorderedRectangle {
+            VerticalLayout {
+                spacing: 5px;
+                padding: 10px;
+
+                Text {
+                    text: "Unshell";
+                    font-size: 14px;
+                    font-weight: 1000;
+                    horizontal-alignment: center;
+                }
+
+                for entry[i] in [
+                    { name: "Dashboard" },
+                    { name: "Listeners" },
+                    { name: "Clients" },
+                    { name: "Tools" },
+                ]: SideButton {
+                    text: entry.name;
+
+                    clicked => {
+                        root.tab-clicked(i);
+                    }
+                }
+
+
+            // Strechy
+            Rectangle { }
+
+                SideButton {
+                    text: "Info";
+
+                    clicked => {
+                        info-window.visible = true;
+                    }
+                }
+            }
+        }
+
+        // Text {
+        //     text: "Counter: \{root.counter}";
+        // }
+
+        Rectangle {
+
+            if current-tab == 0: DashboardPage { }
+            if current-tab == 1: ListenersPage {
+                listeners: listeners;
+            }
+            if current-tab == 2: ClientsPage { }
+            if current-tab == 3: ToolsPage { }
+        }
+
+        callback file-new();
+        callback file-open();
+    }
+
+    info-window := Dialog {
+        visible: false;
+
+        BorderedRectangle {
+            VerticalLayout {
+                padding: 10px;
+                spacing: 10px;
+
+                Text {
+                    font-size: 20px;
+                    text: app-info;
+                }
+
+                StandardButton {
+                    kind: ok;
+                    clicked => {
+                        info-window.visible = false;
+                    }
+                }
+            }
+        }
+    }
+}

ui/components.slint

@@ -0,0 +1,27 @@
+
+export component BorderedRectangle inherits Rectangle {
+    background: #2a232a;
+    border-width: 1px;
+    border-color: darkslateblue;
+}
+
+export component BoolText inherits Text {
+    in property <bool> state;
+
+    text: state ? "TRUE" : "FALSE";
+    color: state ? #00ff00 : #ff0000;
+}
+
+export component TitleText inherits HorizontalLayout {
+    in property <string> text;
+
+    alignment: start;
+
+    Text {
+        text: text;
+        font-weight: 700;
+        font-size: 15px;
+    }
+
+    @children
+}

ui/page.slint

@@ -0,0 +1,5 @@
+import { VerticalBox } from "std-widgets.slint";
+export component Page inherits VerticalBox {
+    padding: 20px;
+    alignment: start;
+}

ui/pages/clients.slint

@@ -0,0 +1,9 @@
+import { Page } from "../page.slint";
+
+export component ClientsPage inherits Page {
+    Text {
+        text: "Clients";
+        font-size: 18px;
+        font-weight: 700;
+    }
+}

ui/pages/dashboard.slint

@@ -0,0 +1,3 @@
+import { Page } from "../page.slint";
+
+export component DashboardPage inherits Page { }

ui/pages/listeners.slint

@@ -0,0 +1,64 @@
+import { Page } from "../page.slint";
+import { UITcpListener } from "../structs.slint";
+import { ScrollView, GridBox, Button } from "std-widgets.slint";
+import { BorderedRectangle, BoolText, TitleText } from "../components.slint";
+
+
+component ListenerCard inherits BorderedRectangle {
+    in property <UITcpListener> listener;
+
+    VerticalLayout {
+        padding: 10px;
+
+        Text {
+            text: listener.name;
+            font-weight: 700;
+            font-size: 18px;
+        }
+
+        TitleText {
+            text: "Enabled: ";
+            BoolText {
+                state: listener.enabled;
+                font-weight: 500;
+                font-size: 14px;
+            }
+        }
+
+        TitleText {
+            text: "Remote Host: ";
+            Text {
+                text: listener.remote-host;
+                font-weight: 500;
+                font-size: 14px;
+            }
+        }
+
+        TitleText {
+            text: "Port: ";
+
+            Text {
+                text: listener.port;
+                font-weight: 500;
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+export component ListenersPage inherits Page {
+    in-out property <[UITcpListener]> listeners;
+
+    ScrollView {
+        width: 100%;
+        height: 100%;
+        VerticalLayout {
+
+            for listener[i] in listeners: ListenerCard {
+                listener: listener;
+            }
+
+            Rectangle { }
+        }
+    }
+}

ui/pages/tools.slint

@@ -0,0 +1,3 @@
+import { Page } from "../page.slint";
+
+export component ToolsPage inherits Page { }

ui/structs.slint

@@ -0,0 +1,6 @@
+export struct UITcpListener {
+    enabled: bool,
+    name: string,
+    remote_host: string,
+    port: int,
+}