Inital commit checkpoint

2025-08-31 23:39:53 -04:00
commit f5dbdea627
39 changed files with 2637 additions and 0 deletions
--- a/common/widgets/CircularProgress.qml
+++ b/common/widgets/CircularProgress.qml
@@ -0,0 +1,84 @@
+// CircularProgress.qml taken from end-4 https://github.com/end-4/dots-hyprland/blob/main/.config/quickshell/ii/modules/common/widgets/CircularProgress.qml
+import QtQuick
+import QtQuick.Shapes
+import qs.common
+
+// Material 3 circular progress. https://m3.material.io/components/progress-indicators/specs
+Item {
+  id: root
+
+  property int implicitSize: 30
+  property int lineWidth: 2
+  property real value: 0
+  property color colPrimary: Appearance.m3colors.m3onSecondaryContainer
+  property color colSecondary: Appearance.m3colors.colSecondaryContainer
+  property real gapAngle: 360 / 18
+  property bool fill: false
+  property bool enableAnimation: true
+  property int animationDuration: 800
+  property var easingType: Easing.OutCubic
+  
+  implicitHeight: implicitSize
+  implicitWidth: implicitSize
+
+  property real degree: value * 360
+  property real centerX: root.width / 2
+  property real centerY: root.height / 2
+  property real arcRadius: root.implicitSize / 2 - root.lineWidth
+  property real startAngle: -90
+
+  Behavior on degree {
+    enabled: root.enableAnimation
+    NumberAnimation {
+      duration: root.animationDuration
+      easing.type: root.easingType
+    }
+  }
+
+  Loader {
+    active: root.fill
+    anchors.fill: parent
+
+    sourceComponent: Rectangle {
+      radius: 9999
+      color: root.colSecondary
+    }
+  }
+
+  Shape {
+    anchors.fill: parent
+    layer.enabled: true
+    layer.smooth: true
+    preferredRendererType: Shape.CurveRenderer
+    ShapePath {
+      id: secondaryPath
+      strokeColor: root.colSecondary
+      strokeWidth: root.lineWidth
+      capStyle: ShapePath.RoundCap
+      fillColor: "transparent"
+      PathAngleArc {
+        centerX: root.centerX
+        centerY: root.centerY
+        radiusX: root.arcRadius
+        radiusY: root.arcRadius
+        startAngle: root.startAngle - root.gapAngle
+        sweepAngle: -(360 - root.degree - 2 * root.gapAngle)
+      }
+    }
+    ShapePath {
+      id: primaryPath
+      strokeColor: root.colPrimary
+      strokeWidth: root.lineWidth
+      capStyle: ShapePath.RoundCap
+      fillColor: "transparent"
+      PathAngleArc {
+        centerX: root.centerX
+        centerY: root.centerY
+        radiusX: root.arcRadius
+        radiusY: root.arcRadius
+        startAngle: root.startAngle
+        sweepAngle: root.degree
+      }
+    }
+  }
+}
--- a/common/widgets/ContentPage.qml
+++ b/common/widgets/ContentPage.qml
@@ -0,0 +1,29 @@
+// ContentPage.qml from end-4 https://github.com/end-4/dots-hyprland/blob/main/.config/quickshell/ii/modules/common/widgets/ContentPage.qml
+import QtQuick
+import QtQuick.Layouts
+import qs.common.widgets
+
+StyledFlickable {
+    id: root
+    property real baseWidth: 550
+    property bool forceWidth: false
+    property real bottomContentPadding: 100
+
+    default property alias data: contentColumn.data
+
+    clip: true
+    contentHeight: contentColumn.implicitHeight + root.bottomContentPadding // Add some padding at the bottom
+    implicitWidth: contentColumn.implicitWidth
+    
+    ColumnLayout {
+        id: contentColumn
+        width: root.forceWidth ? root.baseWidth : Math.max(root.baseWidth, implicitWidth)
+        anchors {
+            top: parent.top
+            horizontalCenter: parent.horizontalCenter
+            margins: 10
+        }
+        spacing: 20
+    }
+
+}
--- a/common/widgets/FloatingActionButton.qml
+++ b/common/widgets/FloatingActionButton.qml
@@ -0,0 +1,60 @@
+// FloatingActionButton.qml from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/FloatingActionButton.qml
+import QtQuick
+import QtQuick.Layouts
+import qs.common
+import qs.common.widgets
+
+/**
+ * Material 3 FAB.
+ */
+RippleButton {
+    id: root
+    property string iconText: "add"
+    property bool expanded: false
+    property real baseSize: 56
+    property real elementSpacing: 5
+    implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize)
+    implicitHeight: baseSize
+    buttonRadius: Appearance.rounding.small
+    colBackground: Appearance.colors.colPrimaryContainer
+    colBackgroundHover: Appearance.colors.colPrimaryContainerHover
+    colRipple: Appearance.colors.colPrimaryContainerActive
+    contentItem: RowLayout {
+        id: contentRowLayout
+        property real horizontalMargins: (root.baseSize - icon.width) / 2
+        anchors {
+            verticalCenter: parent?.verticalCenter
+            left: parent?.left
+            leftMargin: contentRowLayout.horizontalMargins
+        }
+        spacing: 0
+
+        MaterialSymbol {
+            id: icon
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            iconSize: 24
+            color: Appearance.colors.colOnPrimaryContainer
+            text: root.iconText
+        }
+        Loader {
+            active: true
+            sourceComponent: Revealer {
+                visible: root.expanded || implicitWidth > 0
+                reveal: root.expanded
+                implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0
+                StyledText {
+                    id: buttonText
+                    anchors {
+                        left: parent.left
+                        leftMargin: root.elementSpacing
+                    }
+                    text: root.buttonText
+                    color: Appearance.colors.colOnPrimaryContainer
+                    font.pixelSize: 14
+                    font.weight: 450
+                }
+            }
+        }
+    }
+}
--- a/common/widgets/MaterialSymbol.qml
+++ b/common/widgets/MaterialSymbol.qml
@@ -0,0 +1,23 @@
+// MaterialSymbol.qml taken from end-4 https://github.com/end-4/dots-hyprland/blob/main/.config/quickshell/ii/modules/common/widgets/MaterialSymbol.qml
+import qs.common
+import QtQuick
+
+Text {
+    id: root
+    property real iconSize: Appearance?.font.pixelSize.small ?? 16
+    property real fill: 0
+    property real truncatedFill: Math.round(fill * 100) / 100 // Reduce memory consumption spikes from constant font remapping
+    renderType: Text.NativeRendering
+    font {
+        hintingPreference: Font.PreferFullHinting
+        family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
+        pixelSize: iconSize
+        weight: Font.Normal + (Font.DemiBold - Font.Normal) * fill
+        variableAxes: { 
+            "FILL": truncatedFill,
+            "opsz": iconSize,
+        }
+    }
+    verticalAlignment: Text.AlignVCenter
+    color: Appearance.m3colors.m3onBackground
+}
--- a/common/widgets/NavigationRail.qml
+++ b/common/widgets/NavigationRail.qml
@@ -0,0 +1,9 @@
+import QtQuick.Layouts
+
+// Window content with navigation rail and content pane
+ColumnLayout {
+  id: root
+  property bool expanded: true
+  property int currentIndex: 0
+  spacing: 5
+}
--- a/common/widgets/NavigationRailButton.qml
+++ b/common/widgets/NavigationRailButton.qml
@@ -0,0 +1,149 @@
+// NavigationRailButton.qml from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/NavigationRailButton.qml
+import qs.common
+import qs.common.widgets
+import qs.common.functions
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+TabButton {
+    id: root
+
+    property bool toggled: TabBar.tabBar.currentIndex === TabBar.index
+    property string buttonIcon
+    property string buttonText
+    property bool expanded: false
+    property bool showToggledHighlight: true
+    readonly property real visualWidth: root.expanded ? root.baseSize + 20 + itemText.implicitWidth : root.baseSize
+
+    property real baseSize: 56
+    property real baseHighlightHeight: 32
+    property real highlightCollapsedTopMargin: 8
+    padding: 0
+
+    // The navigation item’s target area always spans the full width of the
+    // nav rail, even if the item container hugs its contents.
+    Layout.fillWidth: true
+    // implicitWidth: contentItem.implicitWidth
+    implicitHeight: baseSize
+
+    background: null
+    PointingHandInteraction {}
+
+    // Real stuff
+    contentItem: Item {
+        id: buttonContent
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            right: undefined
+        }
+        
+        implicitWidth: root.visualWidth
+        implicitHeight: root.expanded ? itemIconBackground.implicitHeight : itemIconBackground.implicitHeight + itemText.implicitHeight 
+
+        Rectangle {
+            id: itemBackground
+            anchors.top: itemIconBackground.top
+            anchors.left: itemIconBackground.left
+            anchors.bottom: itemIconBackground.bottom
+            implicitWidth: root.visualWidth
+            radius: Appearance.rounding.full
+            color: toggled ? 
+                root.showToggledHighlight ?
+                    (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer)
+                    : ColorUtils.transparentize(Appearance.colors.colSecondaryContainer) :
+                (root.down ? Appearance.colors.colLayer1Active : root.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
+
+            states: State {
+                name: "expanded"
+                when: root.expanded
+                AnchorChanges {
+                    target: itemBackground
+                    anchors.top: buttonContent.top
+                    anchors.left: buttonContent.left
+                    anchors.bottom: buttonContent.bottom
+                }
+                PropertyChanges {
+                    target: itemBackground
+                    implicitWidth: root.visualWidth
+                }
+            }
+            transitions: Transition {
+                AnchorAnimation {
+                    duration: Appearance.animation.elementMoveFast.duration
+                    easing.type: Appearance.animation.elementMoveFast.type
+                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                }
+                PropertyAnimation {
+                    target: itemBackground
+                    property: "implicitWidth"
+                    duration: Appearance.animation.elementMove.duration
+                    easing.type: Appearance.animation.elementMove.type
+                    easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                }
+            }
+
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+        }
+
+        Item {
+            id: itemIconBackground
+            implicitWidth: root.baseSize
+            implicitHeight: root.baseHighlightHeight
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+            }
+            MaterialSymbol {
+                id: navRailButtonIcon
+                anchors.centerIn: parent
+                iconSize: 24
+                fill: toggled ? 1 : 0
+                font.weight: (toggled || root.hovered) ? Font.DemiBold : Font.Normal
+                text: buttonIcon
+                color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
+
+                Behavior on color {
+                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+            }
+        }
+
+        StyledText {
+            id: itemText
+            anchors {
+                top: itemIconBackground.bottom
+                topMargin: 2
+                horizontalCenter: itemIconBackground.horizontalCenter
+            }
+            states: State {
+                name: "expanded"
+                when: root.expanded
+                AnchorChanges {
+                    target: itemText
+                    anchors {
+                        top: undefined
+                        horizontalCenter: undefined
+                        left: itemIconBackground.right
+                        verticalCenter: itemIconBackground.verticalCenter
+                    }
+                }
+            }
+            transitions: Transition {
+                AnchorAnimation {
+                    duration: Appearance.animation.elementMoveFast.duration
+                    easing.type: Appearance.animation.elementMoveFast.type
+                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                }
+            }
+            text: buttonText
+            font.pixelSize: 14
+            color: Appearance.colors.colOnLayer1
+        }
+    }
+
+}
--- a/common/widgets/NavigationRailExpandButton.qml
+++ b/common/widgets/NavigationRailExpandButton.qml
@@ -0,0 +1,31 @@
+// NavigationRailExpandButton.qml from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/NavigationRailExpandButton.qml
+import QtQuick
+import QtQuick.Layouts
+import qs.common
+import qs.common.widgets
+
+RippleButton {
+    id: root
+    Layout.alignment: Qt.AlignLeft
+    implicitWidth: 40
+    implicitHeight: 40
+    Layout.leftMargin: 8
+    onClicked: {
+        parent.expanded = !parent.expanded;
+    }
+    buttonRadius: Appearance.rounding.full
+
+    rotation: root.parent.expanded ? 0 : -180
+    Behavior on rotation {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    contentItem: MaterialSymbol {
+        id: icon
+        anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        iconSize: 24
+        color: Appearance.colors.colOnLayer1
+        text: root.parent.expanded ? "menu_open" : "menu"
+    }
+}
--- a/common/widgets/NavigationRailTabArray.qml
+++ b/common/widgets/NavigationRailTabArray.qml
@@ -0,0 +1,40 @@
+// NavigationRailTabArray.qml from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/NavigationRailTabArray.qml
+import qs.common
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property int currentIndex: 0
+    property bool expanded: false
+    default property alias data: tabBarColumn.data  
+    implicitHeight: tabBarColumn.implicitHeight
+    implicitWidth: tabBarColumn.implicitWidth
+    Layout.topMargin: 25
+    Rectangle {
+        property real itemHeight: tabBarColumn.children[0].baseSize
+        property real baseHighlightHeight: tabBarColumn.children[0].baseHighlightHeight
+        anchors {
+            top: tabBarColumn.top
+            left: tabBarColumn.left
+            topMargin: itemHeight * root.currentIndex + (root.expanded ? 0 : ((itemHeight - baseHighlightHeight) / 2))
+        }
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colSecondaryContainer
+        implicitHeight: root.expanded ? itemHeight : baseHighlightHeight
+        implicitWidth: tabBarColumn.children[root.currentIndex].visualWidth
+
+        Behavior on anchors.topMargin {
+            NumberAnimation {
+                duration: Appearance.animationCurves.expressiveFastSpatialDuration
+                easing.type: Appearance.animation.elementMove.type
+                easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial
+            }
+        }
+    }
+    ColumnLayout {
+        id: tabBarColumn
+        anchors.fill: parent
+        spacing: 0
+    }
+}
--- a/common/widgets/PointingHandInteraction.qml
+++ b/common/widgets/PointingHandInteraction.qml
@@ -0,0 +1,8 @@
+// PointingHandInteraction.qml from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/PointingHandInteraction.qml
+import QtQuick
+
+MouseArea {
+    anchors.fill: parent
+    onPressed: (mouse) => mouse.accepted = false
+    cursorShape: Qt.PointingHandCursor 
+}
--- a/common/widgets/Revealer.qml
+++ b/common/widgets/Revealer.qml
@@ -0,0 +1,26 @@
+// Revealer from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/Revealer.qml
+import qs.common
+import QtQuick
+
+/**
+ * Recreation of GTK revealer. Expects one single child.
+ */
+Item {
+    id: root
+    property bool reveal
+    property bool vertical: false
+    clip: true
+
+    implicitWidth: (reveal || vertical) ? childrenRect.width : 0
+    implicitHeight: (reveal || !vertical) ? childrenRect.height : 0
+    visible: reveal || (width > 0 && height > 0)
+
+    Behavior on implicitWidth {
+        enabled: !vertical
+        animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+    }
+    Behavior on implicitHeight {
+        enabled: vertical
+        animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+    }
+}
--- a/common/widgets/RippleButton.qml
+++ b/common/widgets/RippleButton.qml
@@ -0,0 +1,201 @@
+// RippleButton.qml from end-4 https://github.com/end-4/dots-hyprland/blob/eac4ab3e3c249008d9596023f79dbc2d31012600/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
+import qs.common
+import qs.common.widgets
+import qs.common.functions
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+
+/**
+ * A button with ripple effect similar to in Material Design.
+ */
+Button {
+    id: root
+    property bool toggled
+    property string buttonText
+    property real buttonRadius: Appearance?.rounding?.small ?? 4
+    property real buttonRadiusPressed: buttonRadius
+    property real buttonEffectiveRadius: root.down ? root.buttonRadiusPressed : root.buttonRadius
+    property int rippleDuration: 1200
+    property bool rippleEnabled: true
+    property var downAction // When left clicking (down)
+    property var releaseAction // When left clicking (release)
+    property var altAction // When right clicking
+    property var middleClickAction // When middle clicking
+
+    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
+    property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
+    property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F"
+    property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
+    property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
+    property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+
+    property color buttonColor: root.enabled ? 
+      (root.toggled ? 
+        (root.hovered ? colBackgroundToggledHover : colBackgroundToggled) :
+        (root.hovered ? colBackgroundHover : colBackground)) :
+      colBackground
+    property color rippleColor: root.toggled ? colRippleToggled : colRipple
+
+    function startRipple(x, y) {
+        const stateY = buttonBackground.y;
+        rippleAnim.x = x;
+        rippleAnim.y = y - stateY;
+
+        const dist = (ox,oy) => ox*ox + oy*oy
+        const stateEndY = stateY + buttonBackground.height
+        rippleAnim.radius = Math.sqrt(Math.max(dist(0, stateY), dist(0, stateEndY), dist(width, stateY), dist(width, stateEndY)))
+
+        rippleFadeAnim.complete();
+        rippleAnim.restart();
+    }
+
+    component RippleAnim: NumberAnimation {
+        duration: rippleDuration
+        easing.type: Appearance?.animation.elementMoveEnter.type
+        easing.bezierCurve: Appearance?.animationCurves.standardDecel
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        onPressed: (event) => { 
+            if(event.button === Qt.RightButton) {
+                if (root.altAction) {
+                  root.altAction();
+                }
+                return;
+            }
+            if(event.button === Qt.MiddleButton) {
+                if (root.middleClickAction) {
+                  root.middleClickAction();
+                }
+                return;
+            }
+            root.down = true
+            if (root.downAction) {
+              root.downAction();
+            }
+            if (!root.rippleEnabled) {
+              return;
+            }
+            const {x,y} = event
+            startRipple(x, y)
+        }
+        onReleased: (event) => {
+            root.down = false
+            if (event.button != Qt.LeftButton) {
+              return;
+            }
+            if (root.releaseAction) {
+              root.releaseAction();
+            }
+            root.click() // Because the MouseArea already consumed the event
+            if (!root.rippleEnabled) {
+              return;
+            }
+            rippleFadeAnim.restart();
+        }
+        onCanceled: (event) => {
+            root.down = false
+            if (!root.rippleEnabled) {
+              return;
+            }
+            rippleFadeAnim.restart();
+        }
+    }
+
+    RippleAnim {
+        id: rippleFadeAnim
+        duration: rippleDuration * 2
+        target: ripple
+        property: "opacity"
+        to: 0
+    }
+
+    SequentialAnimation {
+        id: rippleAnim
+
+        property real x
+        property real y
+        property real radius
+
+        PropertyAction {
+            target: ripple
+            property: "x"
+            value: rippleAnim.x
+        }
+        PropertyAction {
+            target: ripple
+            property: "y"
+            value: rippleAnim.y
+        }
+        PropertyAction {
+            target: ripple
+            property: "opacity"
+            value: 1
+        }
+        ParallelAnimation {
+            RippleAnim {
+                target: ripple
+                properties: "implicitWidth,implicitHeight"
+                from: 0
+                to: rippleAnim.radius * 2
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: buttonBackground
+        radius: root.buttonEffectiveRadius
+        implicitHeight: 50
+
+        color: root.buttonColor
+        Behavior on color {
+            animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: buttonBackground.width
+                height: buttonBackground.height
+                radius: root.buttonEffectiveRadius
+            }
+        }
+
+        Item {
+            id: ripple
+            width: ripple.implicitWidth
+            height: ripple.implicitHeight
+            opacity: 0
+            visible: width > 0 && height > 0
+
+            property real implicitWidth: 0
+            property real implicitHeight: 0
+
+            Behavior on opacity {
+                animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: root.rippleColor }
+                    GradientStop { position: 0.3; color: root.rippleColor }
+                    GradientStop { position: 0.5; color: Qt.rgba(root.rippleColor.r, root.rippleColor.g, root.rippleColor.b, 0) }
+                }
+            }
+
+            transform: Translate {
+                x: -ripple.width / 2
+                y: -ripple.height / 2
+            }
+        }
+    }
+
+    contentItem: StyledText {
+        text: root.buttonText
+    }
+}
--- a/common/widgets/StyledFlickable.qml
+++ b/common/widgets/StyledFlickable.qml
@@ -0,0 +1,46 @@
+// StyledFlickable.qml from end-4 https://github.com/end-4/dots-hyprland/blob/main/.config/quickshell/ii/modules/common/widgets/StyledFlickable.qml
+import QtQuick
+import qs.common
+
+Flickable {
+    id: root
+    maximumFlickVelocity: 3500
+    boundsBehavior: Flickable.DragOverBounds
+
+    property real touchpadScrollFactor: Config?.options.interactions.scrolling.touchpadScrollFactor ?? 100
+    property real mouseScrollFactor: Config?.options.interactions.scrolling.mouseScrollFactor ?? 50
+    property real mouseScrollDeltaThreshold: Config?.options.interactions.scrolling.mouseScrollDeltaThreshold ?? 120
+    property real scrollTargetY: 0
+
+    MouseArea {
+        visible: Config?.options.interactions.scrolling.fasterTouchpadScroll
+        anchors.fill: parent
+        acceptedButtons: Qt.NoButton
+        onWheel: function(wheelEvent) {
+            const delta = wheelEvent.angleDelta.y / root.mouseScrollDeltaThreshold;
+            // The angleDelta.y of a touchpad is usually small and continuous, 
+            // while that of a mouse wheel is typically in multiples of ±120.
+            var scrollFactor = Math.abs(wheelEvent.angleDelta.y) >= root.mouseScrollDeltaThreshold ? root.mouseScrollFactor : root.touchpadScrollFactor;
+
+            const maxY = Math.max(0, root.contentHeight - root.height);
+            const base = scrollAnim.running ? root.scrollTargetY : root.contentY;
+            var targetY = Math.max(0, Math.min(base - delta * scrollFactor, maxY))
+        }
+    }
+
+    Behavior on contentY {
+        NumberAnimation {
+            id: scrollAnim
+            duration: Appearance.animation.scroll.duration
+            easing.type: Appearance.animation.scroll.type
+            easing.bezierCurve: Appearance.animation.scroll.bezierCurve
+        }
+    }
+
+    // to keep target synced when not animating
+    onContentYChanged: {
+      if (!scrollAnim.running) {
+        root.scrollTargetY = root.contentY;
+      }
+    }
+}
--- a/common/widgets/StyledText.qml
+++ b/common/widgets/StyledText.qml
@@ -0,0 +1,16 @@
+// StyledText.qml from end-4 https://github.com/end-4/dots-hyprland/blob/main/.config/quickshell/ii/modules/common/widgets/StyledText.qml
+import qs.common
+import QtQuick
+import QtQuick.Layouts
+
+Text {
+  renderType: Text.NativeRendering
+  verticalAlignment: Text.AlignVCenter
+  font {
+    hintingPreference: Font.PreferFullHinting
+    family: Appearance?.font.family.main ?? "sans-serif"
+    pixelSize: Appearance?.font.pixelSize.small ?? 15
+  }
+  color: Appearance?.m3colors.m3onBackground ?? "black"
+  linkColor: Appearance?.m3colors.m3primary
+}
--- a/common/widgets/StyledToolTip.qml
+++ b/common/widgets/StyledToolTip.qml
@@ -0,0 +1,61 @@
+// StyledToolTip.qml 
+import qs.common
+import qs.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ToolTip {
+    id: root
+    property string content
+    property bool extraVisibleCondition: true
+    property bool alternativeVisibleCondition: false
+    property bool internalVisibleCondition: {
+        const ans = (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
+        return ans
+    }
+    verticalPadding: 5
+    horizontalPadding: 10    
+    opacity: internalVisibleCondition ? 1 : 0
+    visible: opacity > 0
+
+    Behavior on opacity {
+        animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    background: null
+    
+    contentItem: Item {
+        id: contentItemBackground
+        implicitWidth: tooltipTextObject.width + 2 * root.horizontalPadding
+        implicitHeight: tooltipTextObject.height + 2 * root.verticalPadding
+
+        Rectangle {
+            id: backgroundRectangle
+            anchors.bottom: contentItemBackground.bottom
+            anchors.horizontalCenter: contentItemBackground.horizontalCenter
+            color: Appearance?.colors.colTooltip ?? "#3C4043"
+            radius: Appearance?.rounding.verysmall ?? 7
+            width: internalVisibleCondition ? (tooltipTextObject.width + 2 * padding) : 0
+            height: internalVisibleCondition ? (tooltipTextObject.height + 2 * padding) : 0
+            clip: true
+
+            Behavior on width {
+                animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+            Behavior on height {
+                animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+
+            StyledText {
+                id: tooltipTextObject
+                anchors.centerIn: parent
+                text: content
+                font.pixelSize: Appearance?.font.pixelSize.smaller ?? 14
+                font.hintingPreference: Font.PreferNoHinting // Prevent shaky text
+                color: Appearance?.colors.colOnTooltip ?? "#FFFFFF"
+                wrapMode: Text.Wrap
+            }
+        }   
+    }
+}