feat: dashboard user

2 files changed, 126 insertions, 6 deletions

diff --git a/modules/dashboard/Dash.qml b/modules/dashboard/Dash.qml
index 66af8cb..1631287 100644
--- a/modules/dashboard/Dash.qml
+++ b/modules/dashboard/Dash.qml
@@ -1,7 +1,7 @@
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
-import Quickshell
+import "dash"
 import QtQuick.Layouts
 
 GridLayout {
@@ -11,11 +11,9 @@ GridLayout {
     columnSpacing: Appearance.spacing.small
 
     Rect {
-        text: "user"
-
         Layout.columnSpan: 3
-        Layout.preferredWidth: 300
-        Layout.preferredHeight: 150
+
+        User {}
     }
 
     Rect {
@@ -65,7 +63,7 @@ GridLayout {
     }
 
     component Rect: StyledRect {
-        required property string text
+        property string text
 
         radius: Appearance.rounding.small
         color: Colours.palette.m3surfaceContainer
diff --git a/modules/dashboard/dash/User.qml b/modules/dashboard/dash/User.qml
new file mode 100644
index 0000000..f8acdfd
--- /dev/null
+++ b/modules/dashboard/dash/User.qml
@@ -0,0 +1,122 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import "root:/utils"
+import Quickshell
+import Quickshell.Io
+import Quickshell.Widgets
+import QtQuick
+import Qt.labs.platform
+
+Row {
+    id: root
+
+    padding: Appearance.padding.large
+    spacing: Appearance.spacing.large
+
+    ClippingRectangle {
+        implicitWidth: DashboardConfig.sizes.faceSize
+        implicitHeight: DashboardConfig.sizes.faceSize
+
+        radius: Appearance.rounding.full
+        color: Colours.palette.m3surfaceContainerHigh
+
+        MaterialIcon {
+            anchors.centerIn: parent
+
+            text: "person"
+            font.pointSize: DashboardConfig.sizes.faceSize / 2
+        }
+
+        CachingImage {
+            anchors.fill: parent
+            path: `${StandardPaths.standardLocations(StandardPaths.HomeLocation)[0]}/.face`
+        }
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+
+    Column {
+        spacing: Appearance.spacing.normal
+
+        InfoLine {
+            icon: Icons.osIcon
+            text: Icons.osName
+            colour: Colours.palette.m3primary
+        }
+
+        InfoLine {
+            icon: "select_window_2"
+            text: Quickshell.env("XDG_CURRENT_DESKTOP") || Quickshell.env("XDG_SESSION_DESKTOP")
+            colour: Colours.palette.m3secondary
+        }
+
+        InfoLine {
+            icon: "timer"
+            text: uptimeProc.uptime
+            colour: Colours.palette.m3tertiary
+
+            Timer {
+                running: true
+                repeat: true
+                interval: 15000
+                onTriggered: uptimeProc.running = true
+            }
+
+            Process {
+                id: uptimeProc
+
+                property string uptime
+
+                running: true
+                command: ["uptime", "-p"]
+                stdout: SplitParser {
+                    onRead: data => uptimeProc.uptime = data
+                }
+            }
+        }
+    }
+
+    component InfoLine: Item {
+        id: line
+
+        required property string icon
+        required property string text
+        required property color colour
+
+        implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
+        implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
+
+        MaterialIcon {
+            id: icon
+
+            anchors.left: parent.left
+            anchors.leftMargin: (DashboardConfig.sizes.infoIconSize - implicitWidth) / 2
+
+            text: line.icon
+            color: line.colour
+            font.pointSize: Appearance.font.size.normal
+            font.variableAxes: ({
+                    FILL: 1
+                })
+        }
+
+        AnchorText {
+            id: text
+
+            prevAnchor: icon
+            anchors.leftMargin: icon.anchors.leftMargin
+            text: `:  ${line.text}`
+            font.pointSize: Appearance.font.size.normal
+
+            width: DashboardConfig.sizes.infoWidth
+            elide: Text.ElideRight
+        }
+    }
+}