bar: show ping icon when ai or booru finished responding

.config/quickshell/ii/modules/bar/BarContent.qml

@@ -82,38 +82,10 @@ Item { // Bar content region
             anchors.fill: parent
             spacing: 10
 
-            RippleButton {
+            LeftSidebarButton { // Left sidebar button
-                // Left sidebar button
+                Layout.alignment: Qt.AlignVCenter
-                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                 Layout.leftMargin: Appearance.rounding.screenRounding
-                Layout.fillWidth: false
-                property real buttonPadding: 5
-                implicitWidth: distroIcon.width + buttonPadding * 2
-                implicitHeight: distroIcon.height + buttonPadding * 2
-
-                buttonRadius: Appearance.rounding.full
                 colBackground: barLeftSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
-                colBackgroundHover: Appearance.colors.colLayer1Hover
-                colRipple: Appearance.colors.colLayer1Active
-                colBackgroundToggled: Appearance.colors.colSecondaryContainer
-                colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
-                colRippleToggled: Appearance.colors.colSecondaryContainerActive
-                toggled: GlobalStates.sidebarLeftOpen
-                property color colText: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer0
-
-                onPressed: {
-                    GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
-                }
-
-                CustomIcon {
-                    id: distroIcon
-                    anchors.centerIn: parent
-                    width: 19.5
-                    height: 19.5
-                    source: Config.options.bar.topLeftIcon == 'distro' ? SystemInfo.distroIcon : `${Config.options.bar.topLeftIcon}-symbolic`
-                    colorize: true
-                    color: Appearance.colors.colOnLayer0
-                }
             }
 
             ActiveWindow {

.config/quickshell/ii/modules/bar/LeftSidebarButton.qml

@@ -0,0 +1,79 @@
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+RippleButton {
+    id: root
+
+    property bool showPing: false
+
+    property real buttonPadding: 5
+    implicitWidth: distroIcon.width + buttonPadding * 2
+    implicitHeight: distroIcon.height + buttonPadding * 2
+    buttonRadius: Appearance.rounding.full
+    colBackgroundHover: Appearance.colors.colLayer1Hover
+    colRipple: Appearance.colors.colLayer1Active
+    colBackgroundToggled: Appearance.colors.colSecondaryContainer
+    colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
+    colRippleToggled: Appearance.colors.colSecondaryContainerActive
+    toggled: GlobalStates.sidebarLeftOpen
+
+    onPressed: {
+        GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
+    }
+
+    Connections {
+        target: Ai
+        function onResponseFinished() {
+            if (GlobalStates.sidebarLeftOpen) return;
+            root.showPing = true;
+        }
+    }
+
+    Connections {
+        target: Booru
+        function onResponseFinished() {
+            if (GlobalStates.sidebarLeftOpen) return;
+            root.showPing = true;
+        }
+    }
+
+    Connections {
+        target: GlobalStates
+        function onSidebarLeftOpenChanged() {
+            root.showPing = false;
+        }
+    }
+
+    CustomIcon {
+        id: distroIcon
+        anchors.centerIn: parent
+        width: 19.5
+        height: 19.5
+        source: Config.options.bar.topLeftIcon == 'distro' ? SystemInfo.distroIcon : `${Config.options.bar.topLeftIcon}-symbolic`
+        colorize: true
+        color: Appearance.colors.colOnLayer0
+
+        Rectangle {
+            opacity: root.showPing ? 1 : 0
+            visible: opacity > 0
+            anchors {
+                bottom: parent.bottom
+                right: parent.right
+                bottomMargin: -2
+                rightMargin: -2
+            }
+            implicitWidth: 8
+            implicitHeight: 8
+            radius: Appearance.rounding.full
+            color: Appearance.colors.colTertiary
+
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/common/Appearance.qml

@@ -155,6 +155,12 @@ Singleton {
         property color colSecondaryContainer: m3colors.m3secondaryContainer
         property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, m3colors.m3onSecondaryContainer, 0.90)
         property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54)
+        property color colTertiary: m3colors.m3tertiary
+        property color colTertiaryHover: ColorUtils.mix(m3colors.m3tertiary, colLayer1Hover, 0.85)
+        property color colTertiaryActive: ColorUtils.mix(m3colors.m3tertiary, colLayer1Active, 0.4)
+        property color colTertiaryContainer: m3colors.m3tertiaryContainer
+        property color colTertiaryContainerHover: ColorUtils.mix(m3colors.m3tertiaryContainer, m3colors.m3onTertiaryContainer, 0.90)
+        property color colTertiaryContainerActive: ColorUtils.mix(m3colors.m3tertiaryContainer, colLayer1Active, 0.54)
         property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer
         property color colSurfaceContainerLow: ColorUtils.transparentize(m3colors.m3surfaceContainerLow, root.contentTransparency)
         property color colSurfaceContainer: ColorUtils.transparentize(m3colors.m3surfaceContainer, root.contentTransparency)

.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml

@@ -66,37 +66,10 @@ Item { // Bar content region
             anchors.fill: parent
             spacing: 10
 
-            RippleButton { // Left sidebar button
+            Bar.LeftSidebarButton { // Left sidebar button
-                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+                Layout.alignment: Qt.AlignHCenter
                 Layout.topMargin: (Appearance.sizes.baseVerticalBarWidth - implicitWidth) / 2 + Appearance.sizes.hyprlandGapsOut
-                Layout.fillHeight: false
-                property real buttonPadding: 5
-                implicitWidth: distroIcon.width + buttonPadding * 2
-                implicitHeight: distroIcon.height + buttonPadding * 2
-
-                buttonRadius: Appearance.rounding.full
                 colBackground: barTopSectionMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
-                colBackgroundHover: Appearance.colors.colLayer1Hover
-                colRipple: Appearance.colors.colLayer1Active
-                colBackgroundToggled: Appearance.colors.colSecondaryContainer
-                colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
-                colRippleToggled: Appearance.colors.colSecondaryContainerActive
-                toggled: GlobalStates.sidebarLeftOpen
-                property color colText: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer0
-
-                onPressed: {
-                    GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
-                }
-
-                CustomIcon {
-                    id: distroIcon
-                    anchors.centerIn: parent
-                    width: 19.5
-                    height: 19.5
-                    source: Config.options.bar.topLeftIcon == 'distro' ? SystemInfo.distroIcon : `${Config.options.bar.topLeftIcon}-symbolic`
-                    colorize: true
-                    color: Appearance.colors.colOnLayer0
-                }
             }
 
             Item {

.config/quickshell/ii/services/Ai.qml

@@ -27,6 +27,8 @@ Singleton {
     readonly property string interfaceRole: "interface"
     readonly property string apiKeyEnvVarName: "API_KEY"
 
+    signal responseFinished()
+
     property string systemPrompt: {
         let prompt = Config.options?.ai?.systemPrompt ?? "";
         for (let key in root.promptSubstitutions) {
@@ -628,6 +630,7 @@ Singleton {
                 root.postResponseHook = null; // Reset hook after use
             }
             root.saveChat("lastSession")
+            root.responseFinished()
         }
 
         function makeRequest() {

.config/quickshell/ii/services/Booru.qml

@@ -14,6 +14,7 @@ Singleton {
     property Component booruResponseDataComponent: BooruResponseData {}
 
     signal tagSuggestion(string query, var suggestions)
+    signal responseFinished()
 
     property string failMessage: Translation.tr("That didn't work. Tips:\n- Check your tags and NSFW settings\n- If you don't have a tag in mind, type a page number")
     property var responses: []
@@ -399,6 +400,7 @@ Singleton {
             else if (xhr.readyState === XMLHttpRequest.DONE) {
                 console.log("[Booru] Request failed with status: " + xhr.status)
             }
+            root.responseFinished()
         }
 
         try {