Componentize and add data window

ui/app-window.slint

@@ -1,7 +1,10 @@
+// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
+// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { VerticalBox, Button } from "std-widgets.slint";
 import { Palette } from "palette.slint";
-
+import { DataWindow } from "components/data-window.slint";
-
 
 component StatusBadge {
     in property <string> label;
@@ -35,9 +38,10 @@ component MenuButton {
 
     Rectangle {
         border-width: 2px;
-        border-color: Palette.brand;
+        border-color: area.has-hover ? Palette.brand : Palette.border;
+        border-radius: 8px;
 
-        background: area.pressed ? Palette.brand.darker(0.3) : area.has-hover ? Palette.bg-hover : Palette.bg-main;
+        background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
 
         HorizontalLayout {
             padding-left: 12px;
@@ -83,21 +87,18 @@ export component AppWindow inherits Window {
         Rectangle {
             height: 40px;
             width: 100%;
-            background: Palette.bg-secondary;
+            background: Palette.bg-main;
 
             HorizontalLayout {
-                padding-top: 6px;
+                padding: 6px;
-                padding-bottom: 6px;
-                padding-left: 10px;
-                padding-right: 10px;
                 spacing: 6px;
 
                 MenuButton {
-                    text: "File";
+                    text: "Connect";
                 }
 
                 MenuButton {
-                    text: "Edit";
+                    text: "Window";
                 }
 
                 Rectangle {
@@ -118,9 +119,58 @@ export component AppWindow inherits Window {
 
         // Main content
         Rectangle {
-            background: Palette.bg-main;
+            background: Palette.bg-secondary;
             horizontal-stretch: 1;
             vertical-stretch: 1;
+            Rectangle {
+                width: parent.width / 2;
+                height: parent.height / 2;
+                x: 0px;
+                y: 0px;
+                DataWindow {
+                    data1: [
+                        { label: "Engine Temp", value: 97, unit: " °C" },
+                        { label: "Engine RPM", value: 2573, unit: " RPM" },
+                        { label: "Engine Map", value: 7, unit: "" },
+                        { label: "Fuel Rate", value: 0.62, unit: " L/h" },
+                        { label: "Injector PW", value: 2.7, unit: " ms" },
+                        { label: "Ignition Adv", value: 21, unit: " °" },
+                    ];
+                    data2: [
+                        { label: "GPS Speed", value: 38.9, unit: " km/h" },
+                        { label: "GPS Satellites", value: 14, unit: "" },
+                        { label: "Tank Pressure", value: 101.7, unit: " kPa" },
+                        { label: "Air Temp", value: 24, unit: " °C" },
+                        { label: "Humidity", value: 42, unit: " %" },
+                        { label: "Barometric", value: 1012, unit: " hPa" }
+                    ];
+                }
+            }
+
+            Rectangle {
+                width: parent.width / 2;
+                height: parent.height / 2;
+                x: parent.width / 2;
+                y: 0px;
+                DataWindow {
+                    data1: [
+                        { label: "Engine Temp", value: 97, unit: " °C" },
+                        { label: "Engine RPM", value: 2573, unit: " RPM" },
+                        { label: "Engine Map", value: 7, unit: "" },
+                        { label: "Fuel Rate", value: 0.62, unit: " L/h" },
+                        { label: "Injector PW", value: 2.7, unit: " ms" },
+                        { label: "Ignition Adv", value: 21, unit: " °" },
+                    ];
+                    data2: [
+                        { label: "GPS Speed", value: 38.9, unit: " km/h" },
+                        { label: "GPS Satellites", value: 14, unit: "" },
+                        { label: "Tank Pressure", value: 101.7, unit: " kPa" },
+                        { label: "Air Temp", value: 24, unit: " °C" },
+                        { label: "Humidity", value: 42, unit: " %" },
+                        { label: "Barometric", value: 1012, unit: " hPa" }
+                    ];
+                }
+            }
         }
 
         Rectangle {
@@ -131,7 +181,7 @@ export component AppWindow inherits Window {
 
         Rectangle {
             height: 32px;
-            background: Palette.bg-secondary;
+            background: Palette.bg-main;
             width: 100%;
 
             HorizontalLayout {
@@ -157,7 +207,7 @@ export component AppWindow inherits Window {
                     horizontal-stretch: 0;
                     height: parent.height - (2 * parent.padding-top);
                     width: 2px;
-                    background: Palette.bg-main;
+                    background: Palette.bg-secondary;
                 }
 
                 Rectangle {
@@ -173,7 +223,7 @@ export component AppWindow inherits Window {
                     horizontal-stretch: 0;
                     height: parent.height - (2 * parent.padding-top);
                     width: 2px;
-                    background: Palette.bg-main;
+                    background: Palette.bg-secondary;
                 }
 
                 StatusBadge {

ui/components/data-window.slint

@@ -0,0 +1,98 @@
+// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
+// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
+// SPDX-License-Identifier: GPL-3.0-or-later
+import { Palette } from "../palette.slint";
+struct DataItem {
+    label: string,
+    value: float,
+    unit: string,
+  }
+
+component DataColumn {
+    in property <[DataItem]> data;
+    preferred-width: 100%;
+    preferred-height: 100%;
+    HorizontalLayout {
+        width: 100%;
+        height: 100%;
+        VerticalLayout {
+            alignment: center;
+
+            for item in data: HorizontalLayout {
+                HorizontalLayout {
+                    alignment: center;
+                    padding-top: 6px;
+                    padding-bottom: 6px;
+                    Text {
+                        text: item.label;
+                        color: Palette.text-primary;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        VerticalLayout {
+            alignment: center;
+
+            for item in data: HorizontalLayout {
+                HorizontalLayout {
+                    alignment: center;
+                    padding-top: 6px;
+                    padding-bottom: 6px;
+                    Text {
+                        text: item.value + item.unit;
+                        color: Palette.text-primary;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+export component DataWindow {
+    in property <[DataItem]> data1;
+    in property <[DataItem]> data2;
+    preferred-width: 100%;
+    preferred-height: 100%;
+    HorizontalLayout {
+        padding: 12px;
+
+        Rectangle {
+            area := TouchArea {
+                mouse-cursor: pointer;
+            }
+
+            background: Palette.bg-main;
+            border-color: area.has-hover ? Palette.border-focus : Palette.border;
+            border-width: 2px;
+            border-radius: 8px;
+            drop-shadow-color: black;
+            drop-shadow-offset-x: 6px;
+            drop-shadow-offset-y: 6px;
+            drop-shadow-blur: 10px;
+            HorizontalLayout {
+                DataColumn {
+                    data: data1;
+                }
+
+                HorizontalLayout {
+                    height: 100%;
+                    width: 1px;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                    Rectangle {
+                        padding: 10px;
+                        width: 1px;
+                        background: Palette.bg-secondary;
+                    }
+                }
+
+                DataColumn {
+                    data: data2;
+                }
+            }
+        }
+    }
+}

ui/palette.slint

@@ -1,24 +1,54 @@
+// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
+// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
+// SPDX-License-Identifier: GPL-3.0-or-later
 export global Palette {
 
     // ---------- BRAND ----------
     in property <color> brand: #f67a00;
+    in property <color> brand-soft: #ff9a33;
+    in property <color> brand-dim: #c85f00;
 
-    // ---------- BACKGROUND ----------
+    // ---------- BACKGROUND LAYERS ----------
+    // application root
     in property <color> bg-main: #0f1115;
-    in property <color> bg-secondary: #3a3a3a;
+
-    in property <color> bg-panel: #171a1f;
+    // window surfaces
-    in property <color> bg-hover: #1f232a;
+    in property <color> bg-secondary: #1a1d23;
+
+    // panels / cards
+    in property <color> bg-panel: #20242b;
+
+    // hover states
+    in property <color> bg-hover: #2a2f36;
+
+    // pressed states
+    in property <color> bg-active: #313742;
 
     // ---------- TEXT ----------
     in property <color> text-primary: #ffffff;
     in property <color> text-secondary: #a0a7b4;
     in property <color> text-dim: #6b7280;
+    in property <color> text-muted: #4b5563;
 
     // ---------- STATES ----------
     in property <color> success: #22c55e;
     in property <color> warning: #f59e0b;
     in property <color> error: #ef4444;
+    in property <color> info: #38bdf8;
 
     // ---------- BORDERS ----------
-    in property <color> border: #2a2f36;
+    // subtle separators
+    in property <color> border-subtle: #22262d;
+
+    // default component border
+    in property <color> border: #2f3540;
+
+    // strong window border
+    in property <color> border-strong: #404754;
+
+    // focus ring
+    in property <color> border-focus: #f67a00;
+
+    // divider lines
+    in property <color> border-divider: #3a404c;
 }