-

ui/layouts/container.slint

@@ -0,0 +1,11 @@
+// Container component - Card-style container with border and rounded corners
+import { Theme, SpacingSystem } from "../theme/theme.slint";
+
+export component Container inherits Rectangle {
+    @children
+
+    background: Theme.colors.card;
+    border-radius: SpacingSystem.radius.md;
+    border-width: 1px;
+    border-color: Theme.colors.border;
+}

ui/layouts/page-layout.slint

@@ -0,0 +1,52 @@
+// Page layout component - Fixed header with scrollable content area
+import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
+
+export component PageLayout inherits Rectangle {
+    in property <string> title;
+    in property <bool> show-actions: false;
+
+    @children
+
+    background: Theme.colors.background;
+
+    VerticalLayout {
+        // Fixed header
+        header := Rectangle {
+            height: 48px;
+            background: Theme.colors.background;
+
+            HorizontalLayout {
+                padding-left: SpacingSystem.spacing.s4;
+                padding-right: SpacingSystem.spacing.s4;
+                padding-top: SpacingSystem.spacing.s3;
+                padding-bottom: SpacingSystem.spacing.s3;
+                spacing: SpacingSystem.spacing.s4;
+                alignment: space-between;
+
+                Text {
+                    text: root.title;
+                    font-size: Typography.sizes.xl;
+                    font-weight: Typography.weights.bold;
+                    color: Theme.colors.foreground;
+                    vertical-alignment: center;
+                }
+
+                // Right side actions area (inserted via @children)
+                if root.show-actions: HorizontalLayout {
+                    spacing: SpacingSystem.spacing.s2;
+                    vertical-alignment: center;
+                }
+            }
+        }
+
+        // Scrollable content area
+        Flickable {
+            viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;
+
+            content-layout := VerticalLayout {
+                padding: SpacingSystem.spacing.s4;
+                spacing: SpacingSystem.spacing.s4;
+            }
+        }
+    }
+}