feat: launcher empty placeholder

config/Appearance.qml

@@ -99,6 +99,7 @@ Singleton {
         readonly property int normal: 13
         readonly property int larger: 15
         readonly property int large: 18
+        readonly property int extraLarge: 28
     }
 
     component Font: QtObject {

modules/launcher/Content.qml

@@ -14,15 +14,17 @@ Item {
     readonly property int rounding: Appearance.rounding.large
 
     implicitWidth: LauncherConfig.sizes.width
-    implicitHeight: search.height + list.height + padding * 4 + spacing
+    implicitHeight: search.height + listWrapper.height + padding * 2 + spacing
 
     anchors.bottom: parent.bottom
     anchors.horizontalCenter: parent.horizontalCenter
 
     StyledRect {
+        id: listWrapper
+
         color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
         radius: root.rounding
-        implicitHeight: list.height + root.padding * 2
+        implicitHeight: Math.max(empty.height, list.height) + root.padding * 2
 
         anchors.left: parent.left
         anchors.right: parent.right
@@ -51,6 +53,7 @@ Item {
             delegate: AppItem {
                 launcher: root.launcher
             }
+            // TODO highlight
 
             ScrollBar.vertical: StyledScrollBar {
                 // Move half out
@@ -102,6 +105,12 @@ Item {
                 Anim {}
             }
         }
+
+        EmptyIndicator {
+            id: empty
+
+            empty: list.count === 0
+        }
     }
 
     StyledTextField {
@@ -131,14 +140,18 @@ Item {
             }
         }
 
-        onVisibleChanged: {
-            if (visible)
-                forceActiveFocus();
-            else
-                text = "";
-        }
-
         Keys.onEscapePressed: root.launcher.launcherVisible = false
+
+        Connections {
+            target: root.launcher
+
+            function onLauncherVisibleChanged(): void {
+                if (root.launcher.launcherVisible)
+                    search.forceActiveFocus();
+                else
+                    search.text = "";
+            }
+        }
     }
 
     component Anim: NumberAnimation {

modules/launcher/EmptyIndicator.qml

@@ -0,0 +1,62 @@
+import "root:/widgets"
+import "root:/config"
+import QtQuick
+
+Loader {
+    id: root
+
+    required property bool empty
+
+    active: false
+    opacity: 0
+    scale: 0
+    asynchronous: true
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.verticalCenter: parent.verticalCenter
+
+    sourceComponent: Item {
+        implicitWidth: childrenRect.width
+        implicitHeight: icon.height
+
+        MaterialIcon {
+            id: icon
+
+            text: "manage_search"
+            color: Appearance.colours.m3outline
+            font.pointSize: Appearance.font.size.extraLarge
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            anchors.left: icon.right
+            anchors.leftMargin: Appearance.spacing.small
+            anchors.verticalCenter: icon.verticalCenter
+
+            text: qsTr("No matching apps found")
+            color: Appearance.colours.m3outline
+            font.pointSize: Appearance.font.size.larger
+            font.weight: 500
+        }
+    }
+
+    states: State {
+        name: "visible"
+        when: root.empty
+
+        PropertyChanges {
+            root.active: true
+            root.opacity: 1
+            root.scale: 1
+        }
+    }
+
+    transitions: Transition {
+        NumberAnimation {
+            properties: "opacity,scale"
+            duration: Appearance.anim.durations.large
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}