left sidebar: more animated placeholders

.config/quickshell/ii/modules/sidebarLeft/AiChat.qml

@@ -361,43 +361,11 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
                 }
             }
 
-            Item { // Placeholder when list is empty
+            PagePlaceholder {
-                opacity: Ai.messageIDs.length === 0 ? 1 : 0
+                shown: Ai.messageIDs.length === 0
-                visible: opacity > 0
+                icon: "neurology"
-                anchors.fill: parent
+                title: Translation.tr("Large language models")
-
+                description: Translation.tr("Type /key to get started with online models\nCtrl+O to expand the sidebar\nCtrl+P to detach sidebar into a window")
-                Behavior on opacity {
-                    animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
-                }
-
-                ColumnLayout {
-                    anchors.centerIn: parent
-                    spacing: 5
-
-                    CookieWrappedMaterialSymbol {
-                        Layout.alignment: Qt.AlignHCenter
-                        iconSize: 60
-                        text: "neurology"
-                    }
-                    StyledText {
-                        id: widgetNameText
-                        Layout.alignment: Qt.AlignHCenter
-                        font.pixelSize: Appearance.font.pixelSize.larger
-                        font.family: Appearance.font.family.title
-                        color: Appearance.m3colors.m3outline
-                        horizontalAlignment: Text.AlignHCenter
-                        text: Translation.tr("Large language models")
-                    }
-                    StyledText {
-                        id: widgetDescriptionText
-                        Layout.fillWidth: true
-                        font.pixelSize: Appearance.font.pixelSize.small
-                        color: Appearance.m3colors.m3outline
-                        horizontalAlignment: Text.AlignLeft
-                        wrapMode: Text.Wrap
-                        text: Translation.tr("Type /key to get started with online models\nCtrl+O to expand the sidebar\nCtrl+P to detach sidebar into a window")
-                    }
-                }
             }
         }
 

.config/quickshell/ii/modules/sidebarLeft/Anime.qml

@@ -185,34 +185,12 @@ Item {
                 }
             }
 
-            Item { // Placeholder when list is empty
+            PagePlaceholder {
-                opacity: root.responses.length === 0 ? 1 : 0
+                id: placeholderItem
-                visible: opacity > 0
+                shown: root.responses.length === 0
-                anchors.fill: parent
+                icon: "bookmark_heart"
-
+                title: Translation.tr("Anime boorus")
-                Behavior on opacity {
+                description: ""
-                    animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
-                }
-
-                ColumnLayout {
-                    anchors.centerIn: parent
-                    spacing: 5
-
-                    CookieWrappedMaterialSymbol {
-                        Layout.alignment: Qt.AlignHCenter
-                        iconSize: 60
-                        text: "bookmark_heart"
-                    }
-                    StyledText {
-                        id: widgetNameText
-                        Layout.alignment: Qt.AlignHCenter
-                        font.pixelSize: Appearance.font.pixelSize.larger
-                        font.family: Appearance.font.family.title
-                        color: Appearance.m3colors.m3outline
-                        horizontalAlignment: Text.AlignHCenter
-                        text: Translation.tr("Anime boorus")
-                    }
-                }
             }
 
             Item { // Queries awaiting response

.config/quickshell/ii/modules/sidebarLeft/PagePlaceholder.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+Item {
+    id: root
+
+    property bool shown: true
+    property alias icon: cookieWrappedMaterialSymbol.text
+    property alias title: widgetNameText.text
+    property alias description: widgetDescriptionText.text
+
+    opacity: shown ? 1 : 0
+    visible: opacity > 0
+    anchors {
+        fill: parent
+        topMargin: -30 * (1 - opacity)
+        bottomMargin: 30 * (1 - opacity)
+    }
+
+    Behavior on opacity {
+        animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+    }
+
+    ColumnLayout {
+        anchors.centerIn: parent
+        spacing: 5
+
+        CookieWrappedMaterialSymbol {
+            id: cookieWrappedMaterialSymbol
+            Layout.alignment: Qt.AlignHCenter
+            iconSize: 60
+            rotation: -60 * (1 - root.opacity)
+        }
+        StyledText {
+            id: widgetNameText
+            Layout.alignment: Qt.AlignHCenter
+            font.pixelSize: Appearance.font.pixelSize.larger
+            font.family: Appearance.font.family.title
+            color: Appearance.m3colors.m3outline
+            horizontalAlignment: Text.AlignHCenter
+        }
+        StyledText {
+            id: widgetDescriptionText
+            Layout.fillWidth: true
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.m3colors.m3outline
+            horizontalAlignment: Text.AlignLeft
+            wrapMode: Text.Wrap
+        }
+    }
+}