feat: dashboard user

config/DashboardConfig.qml

@@ -9,5 +9,8 @@ Singleton {
     component Sizes: QtObject {
         readonly property int tabIndicatorHeight: 3
         readonly property int tabIndicatorSpacing: 5
+        readonly property int faceSize: 100
+        readonly property int infoWidth: 200
+        readonly property int infoIconSize: 25
     }
 }

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

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
+        }
+    }
+}

utils/Icons.qml

@@ -151,6 +151,7 @@ Singleton {
         })
 
     property string osIcon: ""
+    property string osName
 
     function getAppCategoryIcon(name: string, fallback: string): string {
         const categories = DesktopEntries.applications.values.find(app => app.id === name)?.categories;
@@ -187,14 +188,22 @@ Singleton {
     FileView {
         path: "/etc/os-release"
         onLoaded: {
-            const osId = this.text().split("\n").find(l => l.startsWith("ID="))?.split("=")[1];
+            const lines = text().split("\n");
+            let osId = lines.find(l => l.startsWith("ID="))?.split("=")[1];
             if (root.osIcons.hasOwnProperty(osId))
-                return root.osIcon = root.osIcons[osId];
+                root.osIcon = root.osIcons[osId];
-            const osIdLike = this.text().split("\n").find(l => l.startsWith("ID_LIKE="))?.split("=")[1];
+            else {
-            if (osIdLike)
+                const osIdLike = lines.find(l => l.startsWith("ID_LIKE="))?.split("=")[1];
-                for (const id of osIdLike.split(" "))
+                if (osIdLike)
-                    if (root.osIcons.hasOwnProperty(id))
+                    for (const id of osIdLike.split(" "))
-                        return root.osIcon = root.osIcons[id];
+                        if (root.osIcons.hasOwnProperty(id))
+                            return root.osIcon = root.osIcons[id];
+            }
+
+            let nameLine = lines.find(l => l.startsWith("PRETTY_NAME="));
+            if (!nameLine)
+                nameLine = lines.find(l => l.startsWith("NAME="));
+            root.osName = nameLine.split("=")[1].slice(1, -1);
         }
     }
 }