Added Tab Bar and animations

ui/app-window.slint

@@ -6,6 +6,7 @@ import { VerticalBox, Button } from "std-widgets.slint";
 import { Palette } from "palette.slint";
 import { DataWindow } from "components/data-window.slint";
 import { MapWindow } from "components/map-window.slint";
+import { MinimizedTab } from "components/minimized-tab.slint";
 
 component StatusBadge {
     in property <string> label;
@@ -43,6 +44,8 @@ component MenuButton {
         border-radius: 8px;
 
         background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
+        animate background { duration: 100ms; }
+        animate border-color { duration: 100ms; }
 
         HorizontalLayout {
             padding-left: 12px;
@@ -123,6 +126,21 @@ export component AppWindow inherits Window {
             background: Palette.bg-secondary;
             horizontal-stretch: 1;
             vertical-stretch: 1;
+            VerticalLayout {
+                padding-top: 4px;
+                height: 100%;
+                width: 28px;
+                x: parent.width - self.width + 2px;
+                alignment: start;
+                MinimizedTab {
+                    name: "Spark Advance";
+                }
+
+                MinimizedTab {
+                    name: "Voltage Graph";
+                }
+            }
+
             DataWindow {
                 x: 0;
                 y: 0;
@@ -149,7 +167,7 @@ export component AppWindow inherits Window {
                 y: 0;
                 data-min: 2200;
                 data-max: 9400;
-                name: "Config 1 - Injection Period";
+                name: "Injection Period";
                 map-axis: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
                 rpm-axis: [
                     250,

ui/components/data-window.slint

@@ -106,6 +106,7 @@ export component DataWindow {
                 border-width: 2px;
                 border-radius: 8px;
                 vertical-stretch: 1;
+                animate border-color { duration: 200ms; }
             }
         }
     }

ui/components/map-window.slint

@@ -139,6 +139,7 @@ export component MapWindow {
                 border-width: 2px;
                 border-radius: 8px;
                 vertical-stretch: 1;
+                animate border-color { duration: 200ms; }
             }
         }
     }

ui/components/minimized-tab.slint

@@ -0,0 +1,40 @@
+// 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";
+
+export component MinimizedTab {
+    in property <string> name;
+    height: label.width + 20px;
+    VerticalLayout {
+        padding-bottom: 4px;
+        Rectangle {
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+            border-width: 2px;
+            border-color: area.has-hover ? Palette.brand : Palette.border;
+            background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;
+
+            animate background { duration: 100ms; }
+            animate border-color { duration: 100ms; }
+
+            label := Text {
+                text: name;
+                transform-origin: { x: self.width / 2, y: self.height / 2 };
+                transform-rotation: -90deg;
+                color: Palette.text-primary;
+                font-size: 14px;
+
+                horizontal-alignment: center;
+                vertical-alignment: center;
+
+                x: parent.width / 2 - self.width / 2 + 1px;
+                y: parent.height / 2 - self.height / 2;
+            }
+
+            area := TouchArea {
+                mouse-cursor: pointer;
+            }
+        }
+    }
+}