sidebar: make ai and booru suggestion description clearer

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

@@ -131,7 +131,7 @@ Singleton {
         property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85)
         property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4)
         property color colSecondaryContainer: m3colors.m3secondaryContainer
-        property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.6)
+        property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, m3colors.m3onSecondaryContainer, 0.90)
         property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54)
         property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer
         property color colSurfaceContainerLow: ColorUtils.transparentize(m3colors.m3surfaceContainerLow, root.contentTransparency)
@@ -171,7 +171,7 @@ Singleton {
         }
         property QtObject pixelSize: QtObject {
             property int smallest: 10
-            property int smaller: 13
+            property int smaller: 12
             property int small: 15
             property int normal: 16
             property int large: 17

.config/quickshell/modules/common/widgets/KeyboardKey.qml

@@ -9,8 +9,8 @@ Rectangle {
     id: root
     property string key
 
-    property real horizontalPadding: 7
+    property real horizontalPadding: 6
-    property real verticalPadding: 2
+    property real verticalPadding: 1
     property real borderWidth: 1
     property real extraBottomBorderWidth: 2
     property color borderColor: Appearance.colors.colOnLayer0

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

@@ -250,33 +250,8 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
             }
         }
 
-        Item { // Suggestion description
+        DescriptionBox {
-            visible: descriptionText.text.length > 0
+            text: root.suggestionList[suggestions.selectedIndex]?.description ?? ""
-            Layout.fillWidth: true
-            implicitHeight: descriptionBackground.implicitHeight
-
-            Rectangle {
-                id: descriptionBackground
-                color: Appearance.colors.colTooltip
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                implicitHeight: descriptionText.implicitHeight + 5 * 2
-                radius: Appearance.rounding.verysmall
-
-                StyledText {
-                    id: descriptionText
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.leftMargin: 10
-                    anchors.rightMargin: 10
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.pixelSize: Appearance.font.pixelSize.smaller
-                    color: Appearance.colors.colOnTooltip
-                    wrapMode: Text.Wrap
-                    text: root.suggestionList[suggestions.selectedIndex]?.description ?? ""
-                }
-            }
         }
 
         FlowButtonGroup { // Suggestions
@@ -294,7 +269,7 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
                 }
                 delegate: ApiCommandButton {
                     id: commandButton
-                    colBackground: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
+                    colBackground: suggestions.selectedIndex === index ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer
                     bounce: false
                     contentItem: StyledText {
                         font.pixelSize: Appearance.font.pixelSize.small

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

@@ -6,14 +6,11 @@ import "root:/modules/common/functions/fuzzysort.js" as Fuzzy
 import "root:/modules/common/functions/string_utils.js" as StringUtils
 import "root:/modules/common/functions/file_utils.js" as FileUtils
 import "./anime/"
-import Qt.labs.platform
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
-import Quickshell.Io
 import Quickshell
-import Quickshell.Hyprland
 
 Item {
     id: root
@@ -251,33 +248,8 @@ Item {
             }
         }
 
-        Item { // Tag suggestion description
+        DescriptionBox { // Tag suggestion description
-            visible: tagDescriptionText.text.length > 0
+            text: root.suggestionList[tagSuggestions.selectedIndex]?.description ?? ""
-            Layout.fillWidth: true
-            implicitHeight: tagDescriptionBackground.implicitHeight
-
-            Rectangle {
-                id: tagDescriptionBackground
-                color: Appearance.colors.colTooltip
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                implicitHeight: tagDescriptionText.implicitHeight + 5 * 2
-                radius: Appearance.rounding.verysmall
-
-                StyledText {
-                    id: tagDescriptionText
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.leftMargin: 10
-                    anchors.rightMargin: 10
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.pixelSize: Appearance.font.pixelSize.smaller
-                    color: Appearance.colors.colOnTooltip
-                    wrapMode: Text.Wrap
-                    text: root.suggestionList[tagSuggestions.selectedIndex]?.description ?? ""
-                }
-            }
         }
 
         FlowButtonGroup { // Tag suggestions
@@ -295,7 +267,7 @@ Item {
                 }
                 delegate: ApiCommandButton {
                     id: tagButton
-                    colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
+                    colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer
                     bounce: false
                     contentItem: RowLayout {
                         anchors.centerIn: parent
@@ -303,7 +275,7 @@ Item {
                         StyledText {
                             Layout.fillWidth: false
                             font.pixelSize: Appearance.font.pixelSize.small
-                            color: Appearance.m3colors.m3onSurface
+                            color: Appearance.colors.colOnSecondaryContainer
                             horizontalAlignment: Text.AlignRight
                             text: modelData.displayName ?? modelData.name
                         }
@@ -311,7 +283,7 @@ Item {
                             Layout.fillWidth: false
                             visible: modelData.count !== undefined
                             font.pixelSize: Appearance.font.pixelSize.smaller
-                            color: Appearance.m3colors.m3outline
+                            color: Appearance.colors.colOnSecondaryContainer
                             horizontalAlignment: Text.AlignLeft
                             text: modelData.count ?? ""
                         }

.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml

@@ -16,7 +16,7 @@ GroupButton {
     baseWidth: contentItem.implicitWidth + horizontalPadding * 2
     clickedWidth: baseWidth + 20
     baseHeight: contentItem.implicitHeight + verticalPadding * 2
-    buttonRadius: down ? Appearance.rounding.small : baseHeight / 2
+    buttonRadius: down ? Appearance.rounding.verysmall : Appearance.rounding.small
 
     colBackground: Appearance.colors.colLayer2
     colBackgroundHover: Appearance.colors.colLayer2Hover

.config/quickshell/modules/sidebarLeft/DescriptionBox.qml

@@ -0,0 +1,55 @@
+import "root:/services"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Layouts
+
+Item { // Tag suggestion description
+    id: root
+    property alias text: tagDescriptionText.text
+
+    visible: tagDescriptionText.text.length > 0
+    Layout.fillWidth: true
+    implicitHeight: tagDescriptionBackground.implicitHeight
+
+    Rectangle {
+        id: tagDescriptionBackground
+        color: Appearance.colors.colLayer2
+        anchors.fill: parent
+        radius: Appearance.rounding.verysmall
+        implicitHeight: descriptionRow.implicitHeight + 5 * 2
+
+        RowLayout {
+            id: descriptionRow
+            spacing: 4
+            anchors {
+                fill: parent
+                leftMargin: 10
+                rightMargin: 10
+            }
+
+            StyledText {
+                id: tagDescriptionText
+                Layout.fillWidth: true
+                font.pixelSize: Appearance.font.pixelSize.smaller
+                color: Appearance.colors.colOnLayer2
+                wrapMode: Text.Wrap
+            }
+            KeyboardKey {
+                key: "↑"
+            }
+            KeyboardKey {
+                key: "↓"
+            }
+            StyledText {
+                text: qsTr("or")
+                font.pixelSize: Appearance.font.pixelSize.smaller
+            }
+            KeyboardKey {
+                id: tagDescriptionKey
+                key: "Tab"
+                Layout.alignment: Qt.AlignVCenter
+            }
+        }
+    }
+}