fix: media & user images being transparent when enabled

Also add a fallback icon for pfp

modules/dashboard/dash/Media.qml

@@ -22,6 +22,7 @@ Item {
 
     readonly property real arcCoverGap: Tokens.spacing.extraSmall
     property bool coverHadPrevious
+    property color coverFallbackColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
 
     anchors.top: parent.top
     anchors.bottom: parent.bottom
@@ -33,6 +34,10 @@ Item {
         }
     }
 
+    Behavior on coverFallbackColour {
+        CAnim {}
+    }
+
     Timer {
         running: Players.active?.isPlaying ?? false
         interval: GlobalConfig.dashboard.mediaUpdateInterval
@@ -82,15 +87,18 @@ Item {
         }
 
         Item {
-            id: coverShape
+            id: coverShapeWrapper
 
             anchors.fill: parent
             layer.enabled: true
+            opacity: root.coverFallbackColour.a
 
             MaterialShape {
+                id: coverShape
+
                 implicitSize: cover.width
                 shape: MaterialShape.Cookie12Sided
-                color: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
+                color: Qt.alpha(root.coverFallbackColour, 1)
 
                 Anim on rotation {
                     running: true
@@ -159,7 +167,7 @@ Item {
 
             layer.enabled: true
             layer.effect: Mask {
-                maskSource: coverShape
+                maskSource: coverShapeWrapper
             }
 
             retainWhileLoading: true

modules/dashboard/dash/User.qml

@@ -16,9 +16,15 @@ Item {
     required property DrawerVisibilities visibilities
     required property FileDialog facePicker
 
+    property color pfpFallbackColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
+
     anchors.fill: parent
     anchors.margins: Tokens.padding.large
 
+    Behavior on pfpFallbackColour {
+        CAnim {}
+    }
+
     Item {
         id: pfpContainer
 
@@ -34,13 +40,10 @@ Item {
             anchors.centerIn: parent
             implicitSize: parent.height
             shape: MaterialShape.Pill
-            color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
+            color: Qt.alpha(root.pfpFallbackColour, 1)
+            opacity: root.pfpFallbackColour.a
             layer.enabled: true
 
-            Behavior on color {
-                CAnim {}
-            }
-
             MouseArea {
                 id: mouse
 
@@ -67,14 +70,30 @@ Item {
                 maskSource: shape
             }
 
+            Loader {
+                anchors.centerIn: parent
+                asynchronous: true
+                active: pfp.status !== Image.Ready
+
+                sourceComponent: MaterialIcon {
+                    text: "person_add"
+                    color: Colours.palette.m3onSurfaceVariant
+                    fontStyle: Tokens.font.icon.extraLarge
+                    fill: 1
+                    grade: -2 // Ugh material symbols are such a pain with fill
+                }
+            }
+
             CachingImage {
+                id: pfp
+
                 anchors.fill: parent
                 path: `${Paths.home}/.face`
             }
 
             StyledRect {
                 anchors.fill: parent
-                color: Qt.alpha(Colours.palette.m3scrim, 0.4)
+                color: Qt.alpha(Colours.palette.m3scrim, pfp.status === Image.Ready ? 0.4 : 0)
                 opacity: mouse.containsMouse ? 1 : 0
                 layer.enabled: opacity < 1