2 files changed, 88 insertions, 1 deletions
diff --git a/modules/dashboard/dash/Media.qml b/modules/dashboard/dash/Media.qml
index 945b989..7894c59 100644
--- a/modules/dashboard/dash/Media.qml
+++ b/modules/dashboard/dash/Media.qml
@@ -13,11 +13,13 @@ Item {
         return active ? active.position / active.length : 0;
     }
 
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
     implicitWidth: DashboardConfig.sizes.mediaWidth
 
     Behavior on playerProgress {
         NumberAnimation {
-            duration: Appearance.anim.durations.normal
+            duration: Appearance.anim.durations.large
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Appearance.anim.curves.standard
         }
diff --git a/modules/dashboard/dash/Resources.qml b/modules/dashboard/dash/Resources.qml
new file mode 100644
index 0000000..b22b2d1
--- /dev/null
+++ b/modules/dashboard/dash/Resources.qml
@@ -0,0 +1,85 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Controls
+
+Row {
+    id: root
+
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+
+    padding: Appearance.padding.large
+    spacing: Appearance.spacing.normal
+
+    Resource {
+        icon: "memory"
+        value: SystemUsage.cpuPerc
+        colour: Colours.palette.m3primary
+    }
+
+    Resource {
+        icon: "memory_alt"
+        value: SystemUsage.memPerc
+        colour: Colours.palette.m3secondary
+    }
+
+    Resource {
+        icon: "hard_disk"
+        value: SystemUsage.storagePerc
+        colour: Colours.palette.m3tertiary
+    }
+
+    component Resource: Item {
+        id: res
+
+        required property string icon
+        required property real value
+        required property color colour
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.margins: Appearance.padding.large
+        implicitWidth: icon.implicitWidth
+
+        StyledRect {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.bottom: icon.top
+            anchors.bottomMargin: Appearance.spacing.small
+
+            implicitWidth: DashboardConfig.sizes.resourceProgessThickness
+
+            color: Colours.palette.m3surfaceContainerHigh
+            radius: Appearance.rounding.full
+
+            StyledRect {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                implicitHeight: res.value * parent.height
+
+                color: res.colour
+                radius: Appearance.rounding.full
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.bottom: parent.bottom
+
+            text: res.icon
+            color: res.colour
+        }
+
+        Behavior on value {
+            NumberAnimation {
+                duration: Appearance.anim.durations.large
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+}