Basic layout work

ui/appwindow.slint

@@ -1,6 +1,20 @@
+import { Theme } from "theme.slint";
+import { EditorBar } from "editor_bar.slint";
+import { StatusBar } from "status_bar.slint";
+import { ToolBar } from "tool_bar.slint";
+
 export component AppWindow inherits Window {
-    Text {
+    title: @tr("FM Editor");
-        text: "Hello world!";
+    preferred-width: 1280px;
-        color: green;
+    preferred-height: 720px;
+    VerticalLayout {
+        EditorBar { }
+
+        HorizontalLayout {
+            alignment: start;
+            ToolBar { }
+        }
+
+        StatusBar { }
     }
 }

ui/editor_bar.slint

@@ -0,0 +1,17 @@
+import { Theme } from "theme.slint";
+
+export component EditorBar inherits Rectangle {
+    height: Theme.size-xl;
+    border-color: black;
+    border-width: 1px;
+
+    HorizontalLayout {
+        alignment: start;
+        padding: Theme.padding-md;
+        spacing: Theme.padding-xl;
+        Text {
+            vertical-alignment: center;
+            text: "Damn look at all the options and shit here it's like Hammer 2!!";
+        }
+    }
+}

ui/status_bar.slint

@@ -0,0 +1,36 @@
+import { Theme } from "theme.slint";
+
+export component StatusBar inherits Rectangle {
+    border-color: black;
+    border-width: 1px;
+    height: Theme.size-lg;
+    HorizontalLayout {
+        alignment: start;
+        padding-left: Theme.padding-lg;
+        padding-right: Theme.padding-lg;
+        spacing: Theme.padding-lg;
+        Text {
+            vertical-alignment: center;
+            text: "Last saved: 18:50";
+        }
+
+        Path {
+            width: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 0 24 Z";
+        }
+
+        Text {
+            vertical-alignment: center;
+            text: "Saved by: Jayrude";
+        }
+
+        Path {
+            width: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 0 24 Z";
+        }
+    }
+}

ui/theme.slint

@@ -0,0 +1,21 @@
+export global Theme {
+    in-out property <length> padding-sm: 4px;
+    in-out property <length> padding-md: 8px;
+    in-out property <length> padding-lg: 16px;
+    in-out property <length> padding-xl: 24px;
+
+    in-out property <length> spacing-sm: 4px;
+    in-out property <length> spacing-md: 8px;
+    in-out property <length> spacing-lg: 16px;
+    in-out property <length> spacing-xl: 24px;
+
+    in-out property <length> size-sm: 16px;
+    in-out property <length> size-md: 24px;
+    in-out property <length> size-lg: 32px;
+    in-out property <length> size-xl: 48px;
+
+    in-out property <length> radius-sm: 4px;
+    in-out property <length> radius-md: 8px;
+    in-out property <length> radius-lg: 16px;
+    in-out property <length> radius-xl: 32px;
+}

ui/tool_bar.slint

@@ -0,0 +1,68 @@
+import { Theme } from "theme.slint";
+import { Button } from "std-widgets.slint";
+
+component ToolBarItem inherits Rectangle {
+    width: Theme.size-lg;
+    height: Theme.size-lg;
+    border-color: black;
+    border-width: 1px;
+    border-radius: Theme.radius-md;
+}
+
+export component ToolBar inherits Rectangle {
+    width: Theme.size-xl;
+    border-color: black;
+    border-width: 1px;
+
+    VerticalLayout {
+        alignment: start;
+        padding: Theme.padding-md;
+        spacing: Theme.padding-md;
+
+        Button {
+            checkable: true;
+        }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        Path {
+            width: 32px;
+            height: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 32 0 Z";
+        }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        Path {
+            width: 32px;
+            height: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 32 0 Z";
+        }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+    }
+}