launcher: animate content

modules/launcher/Content.qml

@@ -4,8 +4,14 @@ import Quickshell
 import QtQuick
 
 Item {
+    id: root
+
+    required property Scope launcher
+
     implicitWidth: LauncherConfig.sizes.width
     implicitHeight: search.height + list.height + Appearance.padding.large * 5 // Don't question it
+
+    anchors.bottom: parent.bottom
     anchors.horizontalCenter: parent.horizontalCenter
 
     StyledRect {
@@ -22,12 +28,16 @@ Item {
         ListView {
             id: list
 
-            model: DesktopEntries.applications.values.filter(x => x.name.toLowerCase().includes(search.text.toLowerCase()))
+            model: ScriptModel {
+                // TODO: sort
+                values: DesktopEntries.applications.values.filter(x => x.name.toLowerCase().includes(search.text.toLowerCase()))
+            }
 
+            clip: true
+            spacing: Appearance.spacing.small
             orientation: Qt.Vertical
             verticalLayoutDirection: Qt.BottomToTop
-            height: 100
+            implicitHeight: ((currentItem?.height ?? 1) + spacing) * Math.min(10, count) - spacing
-            width: 100
 
             anchors.left: parent.left
             anchors.right: parent.right
@@ -39,7 +49,8 @@ Item {
 
                 required property DesktopEntry modelData
 
-                width: LauncherConfig.sizes.width
+                radius: Appearance.rounding.normal
+                color: Appearance.alpha(Appearance.colours.m3surfaceContainerHighest, true)
 
                 StyledText {
                     text: modelData.name
@@ -47,6 +58,40 @@ Item {
                     font.pointSize: Appearance.font.size.smaller
                 }
             }
+
+            add: Transition {
+                Anim {
+                    properties: "opacity,scale"
+                    from: 0
+                    to: 1
+                }
+            }
+
+            remove: Transition {
+                Anim {
+                    properties: "opacity,scale"
+                    from: 1
+                    to: 0
+                }
+            }
+
+            addDisplaced: Transition {
+                Anim {
+                    properties: "x,y"
+                    duration: Appearance.anim.durations.small
+                }
+            }
+
+            removeDisplaced: Transition {
+                Anim {
+                    properties: "x,y"
+                    duration: Appearance.anim.durations.large
+                }
+            }
+
+            Behavior on implicitHeight {
+                Anim {}
+            }
         }
     }
 
@@ -58,11 +103,23 @@ Item {
         anchors.bottom: parent.bottom
         anchors.margins: Appearance.padding.large
 
-        placeholderText: "Type \">\" for commands"
+        placeholderText: qsTr("Type \">\" for commands")
 
         background: StyledRect {
             color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
             radius: Appearance.rounding.large
         }
+
+        // TODO: apps service with launch
+        // onAccepted: console.log(list.currentItem?.modelData.id)
+
+        // TODO: key press grab focus + close on esc anywhere
+        Keys.onEscapePressed: root.launcher.launcherVisible = false
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
     }
 }

modules/launcher/Launcher.qml

@@ -22,8 +22,11 @@ Scope {
             visible: wrapper.shouldBeVisible
 
             width: content.width + bg.rounding * 2
-            height: content.implicitHeight
+            mask: Region {
+                item: wrapper
+            }
 
+            anchors.top: true
             anchors.bottom: true
 
             Background {
@@ -36,9 +39,12 @@ Scope {
                 id: wrapper
 
                 launcherVisible: root.launcherVisible
+                contentHeight: content.height
 
                 Content {
                     id: content
+
+                    launcher: root
                 }
             }
         }

modules/launcher/Wrapper.qml

@@ -5,6 +5,7 @@ Item {
     id: root
 
     required property bool launcherVisible
+    required property real contentHeight
     property bool shouldBeVisible
 
     anchors.left: parent.left
@@ -12,7 +13,6 @@ Item {
     anchors.bottom: parent.bottom
 
     height: 0
-
     clip: true
 
     states: State {
@@ -20,7 +20,7 @@ Item {
         when: root.launcherVisible
 
         PropertyChanges {
-            root.height: content.height
+            root.height: contentHeight
             root.shouldBeVisible: true
         }
     }
@@ -52,7 +52,7 @@ Item {
                 NumberAnimation {
                     target: root
                     property: "height"
-                    duration: Appearance.anim.durations.extraLarge
+                    duration: Appearance.anim.durations.normal
                     easing.type: Easing.BezierSpline
                     easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
                 }