bar: add scrolling hint

.config/quickshell/modules/bar/Bar.qml

@@ -100,8 +100,21 @@ Scope {
                             }
                         }
                     }
-                    RowLayout { // Left section
-                        id: leftSection
+                    Item {  // Left section
+                        anchors.fill: parent
+                        implicitHeight: leftSectionRowLayout.implicitHeight
+                        implicitWidth: leftSectionRowLayout.implicitWidth
+
+                        ScrollHint {
+                            reveal: barLeftSideMouseArea.hovered
+                            icon: "light_mode"
+                            side: "left"
+                            anchors.left: parent.left
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                        
+                        RowLayout { // Content
+                            id: leftSectionRowLayout
                             anchors.fill: parent
                             spacing: 10
 
@@ -139,6 +152,7 @@ Scope {
                             }
                         }
                     }
+                }
 
                 RowLayout { // Middle section
                     id: middleSection
@@ -259,8 +273,21 @@ Scope {
                         }
                     }
 
+                    Item {
+                        anchors.fill: parent
+                        implicitHeight: rightSectionRowLayout.implicitHeight
+                        implicitWidth: rightSectionRowLayout.implicitWidth
+                        
+                        ScrollHint {
+                            reveal: barRightSideMouseArea.hovered
+                            icon: "volume_up"
+                            side: "right"
+                            anchors.right: parent.right
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
                         RowLayout {
-                        id: rightSection
+                            id: rightSectionRowLayout
                             anchors.fill: parent
                             spacing: 5
                             layoutDirection: Qt.RightToLeft
@@ -335,13 +362,14 @@ Scope {
                             SysTray {
                                 bar: barRoot
                                 Layout.fillWidth: false
+                                Layout.fillHeight: true
                             }
 
                             Item {
                                 Layout.fillWidth: true
+                                Layout.fillHeight: true
+                            }
                         }
-
-
                     }
                 }
             }

.config/quickshell/modules/bar/ScrollHint.qml

@@ -0,0 +1,39 @@
+import "root:/"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Revealer { // Scroll hint
+    id: root
+    property string icon
+    property string side: "left"
+    
+    ColumnLayout {
+        anchors.right: root.side === "left" ? parent.right : undefined
+        anchors.left: root.side === "right" ? parent.left : undefined
+        spacing: -5
+        MaterialSymbol {
+            Layout.leftMargin: 5
+            Layout.rightMargin: 5
+            text: "keyboard_arrow_up"
+            iconSize: 14
+            color: Appearance.colors.colOnLayer0
+        }
+        MaterialSymbol {
+            Layout.leftMargin: 5
+            Layout.rightMargin: 5
+            text: root.icon
+            iconSize: 14
+            color: Appearance.colors.colOnLayer0
+        }
+        MaterialSymbol {
+            Layout.leftMargin: 5
+            Layout.rightMargin: 5
+            text: "keyboard_arrow_down"
+            iconSize: 14
+            color: Appearance.colors.colOnLayer0
+        }
+    }
+}

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

@@ -162,6 +162,7 @@ Singleton {
             property string reading: "Readex Pro"
         }
         property QtObject pixelSize: QtObject {
+            property int smallest: 10
             property int smaller: 13
             property int small: 15
             property int normal: 16