fix: add wayland dev headers and scanner for pywayland build on NixOS

configs/quickshell/modules/background/Background.qml

@@ -0,0 +1,290 @@
+pragma ComponentBehavior: Bound
+
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions as CF
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Scope {
+    id: root
+    readonly property bool fixedClockPosition: Config.options.background.fixedClockPosition
+    readonly property real fixedClockX: Config.options.background.clockX
+    readonly property real fixedClockY: Config.options.background.clockY
+
+    Variants {
+        model: Quickshell.screens
+
+        PanelWindow {
+            id: bgRoot
+
+            required property var modelData
+
+            // Hide when fullscreen
+            readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+            property bool focusingThisMonitor: HyprlandData.activeWorkspace.monitor == monitor.name
+            visible: !(activeWindow?.fullscreen && activeWindow?.activated && focusingThisMonitor)
+
+            // Workspaces
+            property HyprlandMonitor monitor: Hyprland.monitorFor(modelData)
+            property list<var> relevantWindows: HyprlandData.windowList.filter(win => win.monitor == monitor.id && win.workspace.id >= 0).sort((a, b) => a.workspace.id - b.workspace.id)
+            property int firstWorkspaceId: relevantWindows[0]?.workspace.id || 1
+            property int lastWorkspaceId: relevantWindows[relevantWindows.length - 1]?.workspace.id || 10
+            // Wallpaper
+            property bool wallpaperIsVideo: Config.options.background.wallpaperPath.endsWith(".mp4")
+                || Config.options.background.wallpaperPath.endsWith(".webm")
+                || Config.options.background.wallpaperPath.endsWith(".mkv")
+                || Config.options.background.wallpaperPath.endsWith(".avi")
+                || Config.options.background.wallpaperPath.endsWith(".mov")
+            property string wallpaperPath: wallpaperIsVideo ? Config.options.background.thumbnailPath : Config.options.background.wallpaperPath
+            property real preferredWallpaperScale: Config.options.background.parallax.workspaceZoom
+            property real effectiveWallpaperScale: 1 // Some reasonable init value, to be updated
+            property int wallpaperWidth: modelData.width // Some reasonable init value, to be updated
+            property int wallpaperHeight: modelData.height // Some reasonable init value, to be updated
+            property real movableXSpace: (Math.min(wallpaperWidth * effectiveWallpaperScale, screen.width * preferredWallpaperScale) - screen.width) / 2
+            property real movableYSpace: (Math.min(wallpaperHeight * effectiveWallpaperScale, screen.height * preferredWallpaperScale) - screen.height) / 2
+            // Position
+            property real clockX: (modelData.width / 2) + ((Math.random() < 0.5 ? -1 : 1) * modelData.width)
+            property real clockY: (modelData.height / 2) + ((Math.random() < 0.5 ? -1 : 1) * modelData.height)
+            property var textHorizontalAlignment: clockX < screen.width / 3 ? Text.AlignLeft :
+                (clockX > screen.width * 2 / 3 ? Text.AlignRight : Text.AlignHCenter)
+            // Colors
+            property color dominantColor: Appearance.colors.colPrimary
+            property bool dominantColorIsDark: dominantColor.hslLightness < 0.5
+            property color colText: CF.ColorUtils.colorWithLightness(Appearance.colors.colPrimary, (dominantColorIsDark ? 0.8 : 0.12))
+
+            // Layer props
+            screen: modelData
+            exclusionMode: ExclusionMode.Ignore
+            WlrLayershell.layer: GlobalStates.screenLocked ? WlrLayer.Top : WlrLayer.Bottom
+            // WlrLayershell.layer: WlrLayer.Bottom
+            WlrLayershell.namespace: "quickshell:background"
+            anchors {
+                top: true
+                bottom: true
+                left: true
+                right: true
+            }
+            color: "transparent"
+
+            onWallpaperPathChanged: {
+                bgRoot.updateZoomScale()
+                // Clock position gets updated after zoom scale is updated
+            }
+
+            // Wallpaper zoom scale
+            function updateZoomScale() {
+                getWallpaperSizeProc.path = bgRoot.wallpaperPath
+                getWallpaperSizeProc.running = true;
+            }
+            Process {
+                id: getWallpaperSizeProc
+                property string path: bgRoot.wallpaperPath
+                command: [ "magick", "identify", "-format", "%w %h", path ]
+                stdout: StdioCollector {
+                    id: wallpaperSizeOutputCollector
+                    onStreamFinished: {
+                        const output = wallpaperSizeOutputCollector.text
+                        const [width, height] = output.split(" ").map(Number);
+                        bgRoot.wallpaperWidth = width
+                        bgRoot.wallpaperHeight = height
+                        bgRoot.effectiveWallpaperScale = Math.max(1, Math.min(
+                            bgRoot.preferredWallpaperScale,
+                            width / bgRoot.screen.width,
+                            height / bgRoot.screen.height
+                        ));
+
+                        bgRoot.updateClockPosition()
+                    }
+                }
+            }
+
+            // Clock positioning
+            function updateClockPosition() {
+                // Somehow all this manual setting is needed to make the proc correctly use the new values
+                leastBusyRegionProc.path = bgRoot.wallpaperPath
+                leastBusyRegionProc.contentWidth = clock.implicitWidth
+                leastBusyRegionProc.contentHeight = clock.implicitHeight
+                leastBusyRegionProc.horizontalPadding = (effectiveWallpaperScale - 1) / 2 * screen.width + 100
+                leastBusyRegionProc.verticalPadding = (effectiveWallpaperScale - 1) / 2 * screen.height + 100
+                leastBusyRegionProc.running = false;
+                leastBusyRegionProc.running = true;
+            }
+            Process {
+                id: leastBusyRegionProc
+                property string path: bgRoot.wallpaperPath
+                property int contentWidth: 300
+                property int contentHeight: 300
+                property int horizontalPadding: bgRoot.movableXSpace
+                property int verticalPadding: bgRoot.movableYSpace
+                command: [Quickshell.shellPath("scripts/images/least_busy_region.py"),
+                    "--screen-width", bgRoot.screen.width,
+                    "--screen-height", bgRoot.screen.height,
+                    "--width", contentWidth,
+                    "--height", contentHeight,
+                    "--horizontal-padding", horizontalPadding,
+                    "--vertical-padding", verticalPadding,
+                    path
+                ]
+                stdout: StdioCollector {
+                    id: leastBusyRegionOutputCollector
+                    onStreamFinished: {
+                        const output = leastBusyRegionOutputCollector.text
+                        // console.log("[Background] Least busy region output:", output)
+                        if (output.length === 0) return;
+                        const parsedContent = JSON.parse(output)
+                        bgRoot.clockX = parsedContent.center_x
+                        bgRoot.clockY = parsedContent.center_y
+                        bgRoot.dominantColor = parsedContent.dominant_color || Appearance.colors.colPrimary
+                    }
+                }
+            }
+
+            // Wallpaper
+            Image {
+                id: wallpaper
+                visible: !bgRoot.wallpaperIsVideo
+                property real value // 0 to 1, for offset
+                value: {
+                    // Range = groups that workspaces span on
+                    const chunkSize = Config?.options.bar.workspaces.shown ?? 10;
+                    const lower = Math.floor(bgRoot.firstWorkspaceId / chunkSize) * chunkSize;
+                    const upper = Math.ceil(bgRoot.lastWorkspaceId / chunkSize) * chunkSize;
+                    const range = upper - lower;
+                    return (Config.options.background.parallax.enableWorkspace ? ((bgRoot.monitor.activeWorkspace.id - lower) / range) : 0.5)
+                        + (0.15 * GlobalStates.sidebarRightOpen * Config.options.background.parallax.enableSidebar)
+                        - (0.15 * GlobalStates.sidebarLeftOpen * Config.options.background.parallax.enableSidebar)
+                }
+                property real effectiveValue: Math.max(0, Math.min(1, value))
+                x: -(bgRoot.movableXSpace) - (effectiveValue - 0.5) * 2 * bgRoot.movableXSpace
+                y: -(bgRoot.movableYSpace)
+                source: bgRoot.wallpaperPath
+                fillMode: Image.PreserveAspectCrop
+                Behavior on x {
+                    NumberAnimation {
+                        duration: 600
+                        easing.type: Easing.OutCubic
+                    }
+                }
+                sourceSize {
+                    width: bgRoot.screen.width * bgRoot.effectiveWallpaperScale
+                    height: bgRoot.screen.height * bgRoot.effectiveWallpaperScale
+                }
+            }
+
+            // The clock
+            Item {
+                id: clock
+                anchors {
+                    left: wallpaper.left
+                    top: wallpaper.top
+                    leftMargin: ((root.fixedClockPosition ? root.fixedClockX : bgRoot.clockX * bgRoot.effectiveWallpaperScale) - implicitWidth / 2) - (wallpaper.effectiveValue * bgRoot.movableXSpace)
+                    topMargin: ((root.fixedClockPosition ? root.fixedClockY : bgRoot.clockY * bgRoot.effectiveWallpaperScale) - implicitHeight / 2)
+                    Behavior on leftMargin {
+                        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                    }
+                    Behavior on topMargin {
+                        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                    }
+                }
+
+                implicitWidth: clockColumn.implicitWidth
+                implicitHeight: clockColumn.implicitHeight
+
+                ColumnLayout {
+                    id: clockColumn
+                    anchors.centerIn: wallpaper
+                    spacing: 0
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        horizontalAlignment: bgRoot.textHorizontalAlignment
+                        font {
+                            family: Appearance.font.family.expressive
+                            pixelSize: 90
+                            weight: Font.Bold
+                        }
+                        color: bgRoot.colText
+                        style: Text.Raised
+                        styleColor: Appearance.colors.colShadow
+                        text: DateTime.time
+                    }
+                    StyledText {
+                        Layout.fillWidth: true
+                        Layout.topMargin: -5
+                        horizontalAlignment: bgRoot.textHorizontalAlignment
+                        font {
+                            family: Appearance.font.family.expressive
+                            pixelSize: 20
+                            weight: Font.DemiBold
+                        }
+                        color: bgRoot.colText
+                        style: Text.Raised
+                        styleColor: Appearance.colors.colShadow
+                        text: DateTime.date
+                    }
+                }
+
+                RowLayout {
+                    anchors {
+                        top: clockColumn.bottom
+                        left: bgRoot.textHorizontalAlignment === Text.AlignLeft ? clockColumn.left : undefined
+                        right: bgRoot.textHorizontalAlignment === Text.AlignRight ? clockColumn.right : undefined
+                        horizontalCenter: bgRoot.textHorizontalAlignment === Text.AlignHCenter ? clockColumn.horizontalCenter : undefined
+                        topMargin: 5
+                        leftMargin: -5
+                        rightMargin: -5
+                    }
+                    opacity: GlobalStates.screenLocked ? 1 : 0
+                    visible: opacity > 0
+                    Behavior on opacity {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+                    Item { Layout.fillWidth: bgRoot.textHorizontalAlignment !== Text.AlignLeft; implicitWidth: 1 }
+                    MaterialSymbol {
+                        text: "lock"
+                        Layout.fillWidth: false
+                        iconSize: Appearance.font.pixelSize.huge
+                        color: bgRoot.colText
+                    }
+                    StyledText {
+                        Layout.fillWidth: false
+                        text: "Locked"
+                        color: bgRoot.colText
+                        font {
+                            pixelSize: Appearance.font.pixelSize.larger
+                        }
+                    }
+                    Item { Layout.fillWidth: bgRoot.textHorizontalAlignment !== Text.AlignRight; implicitWidth: 1 }
+
+                }
+            }
+
+            // Password prompt
+            StyledText {
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    bottom: parent.bottom
+                    bottomMargin: 30
+                }
+                opacity: (GlobalStates.screenLocked && !GlobalStates.screenLockContainsCharacters) ? 1 : 0
+                scale: opacity
+                visible: opacity > 0
+                Behavior on opacity {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                text: "Enter password"
+                color: CF.ColorUtils.transparentize(bgRoot.colText, 0.3)
+                font {
+                    pixelSize: Appearance.font.pixelSize.normal
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/bar/ActiveWindow.qml

@@ -0,0 +1,53 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Item {
+    id: root
+    required property var bar
+    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen)
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+
+    property string activeWindowAddress: `0x${activeWindow?.HyprlandToplevel?.address}`
+    property bool focusingThisMonitor: HyprlandData.activeWorkspace.monitor == monitor.name
+    property var biggestWindow: HyprlandData.biggestWindowForWorkspace(HyprlandData.monitors[root.monitor.id]?.activeWorkspace.id)
+
+    implicitWidth: colLayout.implicitWidth
+
+    ColumnLayout {
+        id: colLayout
+
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        spacing: -4
+
+        StyledText {
+            Layout.fillWidth: true
+            font.pixelSize: Appearance.font.pixelSize.smaller
+            color: Appearance.colors.colSubtext
+            elide: Text.ElideRight
+            text: root.focusingThisMonitor && root.activeWindow?.activated && root.biggestWindow ? 
+                root.activeWindow?.appId :
+                (root.biggestWindow?.class) ?? Translation.tr("Desktop")
+
+        }
+
+        StyledText {
+            Layout.fillWidth: true
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnLayer0
+            elide: Text.ElideRight
+            text: root.focusingThisMonitor && root.activeWindow?.activated && root.biggestWindow ? 
+                root.activeWindow?.title :
+                (root.biggestWindow?.title) ?? `${Translation.tr("Workspace")} ${monitor.activeWorkspace?.id}`
+        }
+
+    }
+
+}

configs/quickshell/modules/bar/Bar.qml

@@ -0,0 +1,622 @@
+import "./weather"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Services.UPower
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+Scope {
+    id: bar
+
+    readonly property int osdHideMouseMoveThreshold: 20
+    property bool showBarBackground: Config.options.bar.showBackground
+
+    component VerticalBarSeparator: Rectangle {
+        Layout.topMargin: Appearance.sizes.baseBarHeight / 3
+        Layout.bottomMargin: Appearance.sizes.baseBarHeight / 3
+        Layout.fillHeight: true
+        implicitWidth: 1
+        color: Appearance.colors.colOutlineVariant
+    }
+
+    Variants {
+        // For each monitor
+        model: {
+            const screens = Quickshell.screens;
+            const list = Config.options.bar.screenList;
+            if (!list || list.length === 0)
+                return screens;
+            return screens.filter(screen => list.includes(screen.name));
+        }
+        LazyLoader {
+            id: barLoader
+            active: GlobalStates.barOpen && !GlobalStates.screenLocked
+            required property ShellScreen modelData
+            component: PanelWindow { // Bar window
+                id: barRoot
+                screen: barLoader.modelData
+
+                property var brightnessMonitor: Brightness.getMonitorForScreen(barLoader.modelData)
+                property real useShortenedForm: (Appearance.sizes.barHellaShortenScreenWidthThreshold >= screen.width) ? 2 : (Appearance.sizes.barShortenScreenWidthThreshold >= screen.width) ? 1 : 0
+                readonly property int centerSideModuleWidth: (useShortenedForm == 2) ? Appearance.sizes.barCenterSideModuleWidthHellaShortened : (useShortenedForm == 1) ? Appearance.sizes.barCenterSideModuleWidthShortened : Appearance.sizes.barCenterSideModuleWidth
+
+                exclusionMode: ExclusionMode.Ignore
+                exclusiveZone: Appearance.sizes.baseBarHeight + (Config.options.bar.cornerStyle === 1 ? Appearance.sizes.hyprlandGapsOut : 0)
+                WlrLayershell.namespace: "quickshell:bar"
+                implicitHeight: Appearance.sizes.barHeight + Appearance.rounding.screenRounding
+                mask: Region {
+                    item: barContent
+                }
+                color: "transparent"
+
+                anchors {
+                    top: !Config.options.bar.bottom
+                    bottom: Config.options.bar.bottom
+                    left: true
+                    right: true
+                }
+
+                Item { // Bar content region
+                    id: barContent
+                    anchors {
+                        right: parent.right
+                        left: parent.left
+                        top: parent.top
+                        bottom: undefined
+                    }
+                    implicitHeight: Appearance.sizes.barHeight
+                    height: Appearance.sizes.barHeight
+
+                    states: State {
+                        name: "bottom"
+                        when: Config.options.bar.bottom
+                        AnchorChanges {
+                            target: barContent
+                            anchors {
+                                right: parent.right
+                                left: parent.left
+                                top: undefined
+                                bottom: parent.bottom
+                            }
+                        }
+                    }
+
+                    // Background shadow
+                    Loader {
+                        active: showBarBackground && Config.options.bar.cornerStyle === 1
+                        anchors.fill: barBackground
+                        sourceComponent: StyledRectangularShadow {
+                            anchors.fill: undefined // The loader's anchors act on this, and this should not have any anchor
+                            target: barBackground
+                        }
+                    }
+                    // Background
+                    Rectangle {
+                        id: barBackground
+                        anchors {
+                            fill: parent
+                            margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0 // idk why but +1 is needed
+                        }
+                        color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+                        radius: Config.options.bar.cornerStyle === 1 ? Appearance.rounding.windowRounding : 0
+                        border.width: Config.options.bar.cornerStyle === 1 ? 1 : 0
+                        border.color: Appearance.colors.colLayer0Border
+                    }
+
+                    MouseArea { // Left side | scroll to change brightness
+                        id: barLeftSideMouseArea
+                        anchors.left: parent.left
+                        implicitHeight: Appearance.sizes.baseBarHeight
+                        height: Appearance.sizes.barHeight
+                        width: (barRoot.width - middleSection.width) / 2
+                        property bool hovered: false
+                        property real lastScrollX: 0
+                        property real lastScrollY: 0
+                        property bool trackingScroll: false
+                        acceptedButtons: Qt.LeftButton
+                        hoverEnabled: true
+                        propagateComposedEvents: true
+                        onEntered: event => {
+                            barLeftSideMouseArea.hovered = true;
+                        }
+                        onExited: event => {
+                            barLeftSideMouseArea.hovered = false;
+                            barLeftSideMouseArea.trackingScroll = false;
+                        }
+                        onPressed: event => {
+                            if (event.button === Qt.LeftButton) {
+                                GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
+                            }
+                        }
+                        // Scroll to change brightness
+                        WheelHandler {
+                            onWheel: event => {
+                                if (event.angleDelta.y < 0)
+                                    barRoot.brightnessMonitor.setBrightness(barRoot.brightnessMonitor.brightness - 0.05);
+                                else if (event.angleDelta.y > 0)
+                                    barRoot.brightnessMonitor.setBrightness(barRoot.brightnessMonitor.brightness + 0.05);
+                                // Store the mouse position and start tracking
+                                barLeftSideMouseArea.lastScrollX = event.x;
+                                barLeftSideMouseArea.lastScrollY = event.y;
+                                barLeftSideMouseArea.trackingScroll = true;
+                            }
+                            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+                        }
+                        onPositionChanged: mouse => {
+                            if (barLeftSideMouseArea.trackingScroll) {
+                                const dx = mouse.x - barLeftSideMouseArea.lastScrollX;
+                                const dy = mouse.y - barLeftSideMouseArea.lastScrollY;
+                                if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
+                                    GlobalStates.osdBrightnessOpen = false;
+                                    barLeftSideMouseArea.trackingScroll = false;
+                                }
+                            }
+                        }
+                        Item {
+                            // Left section
+                            anchors.fill: parent
+                            implicitHeight: leftSectionRowLayout.implicitHeight
+                            implicitWidth: leftSectionRowLayout.implicitWidth
+
+                            ScrollHint {
+                                reveal: barLeftSideMouseArea.hovered
+                                icon: "light_mode"
+                                tooltipText: Translation.tr("Scroll to change brightness")
+                                side: "left"
+                                anchors.left: parent.left
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            RowLayout { // Content
+                                id: leftSectionRowLayout
+                                anchors.fill: parent
+                                spacing: 10
+
+                                RippleButton {
+                                    // Left sidebar button
+                                    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 : "spark-symbolic"
+                                        colorize: true
+                                        color: Appearance.colors.colOnLayer0
+                                    }
+                                }
+
+                                ActiveWindow {
+                                    visible: barRoot.useShortenedForm === 0
+                                    Layout.rightMargin: Appearance.rounding.screenRounding
+                                    Layout.fillWidth: true
+                                    Layout.fillHeight: true
+                                    bar: barRoot
+                                }
+                            }
+                        }
+                    }
+
+                    RowLayout { // Middle section
+                        id: middleSection
+                        anchors.centerIn: parent
+                        spacing: Config.options?.bar.borderless ? 4 : 8
+
+                        BarGroup {
+                            id: leftCenterGroup
+                            Layout.preferredWidth: barRoot.centerSideModuleWidth
+                            Layout.fillHeight: true
+
+                            Resources {
+                                alwaysShowAllResources: barRoot.useShortenedForm === 2
+                                Layout.fillWidth: barRoot.useShortenedForm === 2
+                            }
+
+                            Media {
+                                visible: barRoot.useShortenedForm < 2
+                                Layout.fillWidth: true
+                            }
+                        }
+
+                        VerticalBarSeparator {
+                            visible: Config.options?.bar.borderless
+                        }
+
+                        BarGroup {
+                            id: middleCenterGroup
+                            padding: workspacesWidget.widgetPadding
+                            Layout.fillHeight: true
+
+                            Workspaces {
+                                id: workspacesWidget
+                                bar: barRoot
+                                Layout.fillHeight: true
+                                MouseArea {
+                                    // Right-click to toggle overview
+                                    anchors.fill: parent
+                                    acceptedButtons: Qt.RightButton
+
+                                    onPressed: event => {
+                                        if (event.button === Qt.RightButton) {
+                                            GlobalStates.overviewOpen = !GlobalStates.overviewOpen;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        VerticalBarSeparator {
+                            visible: Config.options?.bar.borderless
+                        }
+
+                        MouseArea {
+                            id: rightCenterGroup
+                            implicitWidth: rightCenterGroupContent.implicitWidth
+                            implicitHeight: rightCenterGroupContent.implicitHeight
+                            Layout.preferredWidth: barRoot.centerSideModuleWidth
+                            Layout.fillHeight: true
+
+                            onPressed: {
+                                GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+                            }
+
+                            BarGroup {
+                                id: rightCenterGroupContent
+                                anchors.fill: parent
+
+                                ClockWidget {
+                                    showDate: (Config.options.bar.verbose && barRoot.useShortenedForm < 2)
+                                    Layout.alignment: Qt.AlignVCenter
+                                    Layout.fillWidth: true
+                                }
+
+                                UtilButtons {
+                                    visible: (Config.options.bar.verbose && barRoot.useShortenedForm === 0)
+                                    Layout.alignment: Qt.AlignVCenter
+                                }
+
+                                BatteryIndicator {
+                                    visible: (barRoot.useShortenedForm < 2 && UPower.displayDevice.isLaptopBattery)
+                                    Layout.alignment: Qt.AlignVCenter
+                                }
+                            }
+                        }
+
+                        VerticalBarSeparator {
+                            visible: Config.options.bar.borderless && Config.options.bar.weather.enable
+                        }
+                    }
+
+                    MouseArea { // Right side | scroll to change volume
+                        id: barRightSideMouseArea
+
+                        anchors.right: parent.right
+                        implicitHeight: Appearance.sizes.baseBarHeight
+                        height: Appearance.sizes.barHeight
+                        width: (barRoot.width - middleSection.width) / 2
+
+                        property bool hovered: false
+                        property real lastScrollX: 0
+                        property real lastScrollY: 0
+                        property bool trackingScroll: false
+
+                        acceptedButtons: Qt.LeftButton
+                        hoverEnabled: true
+                        propagateComposedEvents: true
+                        onEntered: event => {
+                            barRightSideMouseArea.hovered = true;
+                        }
+                        onExited: event => {
+                            barRightSideMouseArea.hovered = false;
+                            barRightSideMouseArea.trackingScroll = false;
+                        }
+                        onPressed: event => {
+                            if (event.button === Qt.LeftButton) {
+                                GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+                            } else if (event.button === Qt.RightButton) {
+                                MprisController.activePlayer.next();
+                            }
+                        }
+                        // Scroll to change volume
+                        WheelHandler {
+                            onWheel: event => {
+                                const currentVolume = Audio.value;
+                                const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
+                                if (event.angleDelta.y < 0)
+                                    Audio.sink.audio.volume -= step;
+                                else if (event.angleDelta.y > 0)
+                                    Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
+                                // Store the mouse position and start tracking
+                                barRightSideMouseArea.lastScrollX = event.x;
+                                barRightSideMouseArea.lastScrollY = event.y;
+                                barRightSideMouseArea.trackingScroll = true;
+                            }
+                            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+                        }
+                        onPositionChanged: mouse => {
+                            if (barRightSideMouseArea.trackingScroll) {
+                                const dx = mouse.x - barRightSideMouseArea.lastScrollX;
+                                const dy = mouse.y - barRightSideMouseArea.lastScrollY;
+                                if (Math.sqrt(dx * dx + dy * dy) > osdHideMouseMoveThreshold) {
+                                    GlobalStates.osdVolumeOpen = false;
+                                    barRightSideMouseArea.trackingScroll = false;
+                                }
+                            }
+                        }
+
+                        Item {
+                            anchors.fill: parent
+                            implicitHeight: rightSectionRowLayout.implicitHeight
+                            implicitWidth: rightSectionRowLayout.implicitWidth
+
+                            ScrollHint {
+                                reveal: barRightSideMouseArea.hovered
+                                icon: "volume_up"
+                                tooltipText: Translation.tr("Scroll to change volume")
+                                side: "right"
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            RowLayout {
+                                id: rightSectionRowLayout
+                                anchors.fill: parent
+                                spacing: 5
+                                layoutDirection: Qt.RightToLeft
+
+                                RippleButton { // Right sidebar button
+                                    id: rightSidebarButton
+
+                                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                                    Layout.rightMargin: Appearance.rounding.screenRounding
+                                    Layout.fillWidth: false
+
+                                    implicitWidth: indicatorsRowLayout.implicitWidth + 10 * 2
+                                    implicitHeight: indicatorsRowLayout.implicitHeight + 5 * 2
+
+                                    buttonRadius: Appearance.rounding.full
+                                    colBackground: barRightSideMouseArea.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.sidebarRightOpen
+                                    property color colText: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer0
+
+                                    Behavior on colText {
+                                        animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                                    }
+
+                                    onPressed: {
+                                        GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+                                    }
+
+                                    RowLayout {
+                                        id: indicatorsRowLayout
+                                        anchors.centerIn: parent
+                                        property real realSpacing: 15
+                                        spacing: 0
+
+                                        Revealer {
+                                            reveal: Audio.sink?.audio?.muted ?? false
+                                            Layout.fillHeight: true
+                                            Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
+                                            Behavior on Layout.rightMargin {
+                                                NumberAnimation {
+                                                    duration: Appearance.animation.elementMoveFast.duration
+                                                    easing.type: Appearance.animation.elementMoveFast.type
+                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                                                }
+                                            }
+                                            MaterialSymbol {
+                                                text: "volume_off"
+                                                iconSize: Appearance.font.pixelSize.larger
+                                                color: rightSidebarButton.colText
+                                            }
+                                        }
+                                        Revealer {
+                                            reveal: Audio.source?.audio?.muted ?? false
+                                            Layout.fillHeight: true
+                                            Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
+                                            Behavior on Layout.rightMargin {
+                                                NumberAnimation {
+                                                    duration: Appearance.animation.elementMoveFast.duration
+                                                    easing.type: Appearance.animation.elementMoveFast.type
+                                                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                                                }
+                                            }
+                                            MaterialSymbol {
+                                                text: "mic_off"
+                                                iconSize: Appearance.font.pixelSize.larger
+                                                color: rightSidebarButton.colText
+                                            }
+                                        }
+                                        Loader {
+                                            active: HyprlandXkb.layoutCodes.length > 1
+                                            visible: active
+                                            Layout.rightMargin: indicatorsRowLayout.realSpacing
+                                            sourceComponent: StyledText {
+                                                text: HyprlandXkb.currentLayoutCode
+                                                font.pixelSize: Appearance.font.pixelSize.small
+                                                color: rightSidebarButton.colText
+                                            }
+                                        }
+                                        MaterialSymbol {
+                                            Layout.rightMargin: indicatorsRowLayout.realSpacing
+                                            text: Network.materialSymbol
+                                            iconSize: Appearance.font.pixelSize.larger
+                                            color: rightSidebarButton.colText
+                                        }
+                                        MaterialSymbol {
+                                            text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
+                                            iconSize: Appearance.font.pixelSize.larger
+                                            color: rightSidebarButton.colText
+                                        }
+                                    }
+                                }
+
+                                SysTray {
+                                    bar: barRoot
+                                    visible: barRoot.useShortenedForm === 0
+                                    Layout.fillWidth: false
+                                    Layout.fillHeight: true
+                                }
+
+                                Item {
+                                    Layout.fillWidth: true
+                                    Layout.fillHeight: true
+                                }
+
+                                // Weather
+                                Loader {
+                                    Layout.leftMargin: 8
+                                    Layout.fillHeight: true
+                                    active: Config.options.bar.weather.enable
+                                    sourceComponent: BarGroup {
+                                        implicitHeight: Appearance.sizes.baseBarHeight
+                                        WeatherBar {}
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Round decorators
+                Loader {
+                    id: roundDecorators
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    y: Appearance.sizes.barHeight
+                    width: parent.width
+                    height: Appearance.rounding.screenRounding
+                    active: showBarBackground && Config.options.bar.cornerStyle === 0 // Hug
+
+                    states: State {
+                        name: "bottom"
+                        when: Config.options.bar.bottom
+                        PropertyChanges {
+                            roundDecorators.y: 0
+                        }
+                    }
+
+                    sourceComponent: Item {
+                        implicitHeight: Appearance.rounding.screenRounding
+                        RoundCorner {
+                            id: leftCorner
+                            anchors {
+                                top: parent.top
+                                bottom: parent.bottom
+                                left: parent.left
+                            }
+
+                            size: Appearance.rounding.screenRounding
+                            color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+
+                            corner: RoundCorner.CornerEnum.TopLeft
+                            states: State {
+                                name: "bottom"
+                                when: Config.options.bar.bottom
+                                PropertyChanges {
+                                    leftCorner.corner: RoundCorner.CornerEnum.BottomLeft
+                                }
+                            }
+                        }
+                        RoundCorner {
+                            id: rightCorner
+                            anchors {
+                                right: parent.right
+                                top: !Config.options.bar.bottom ? parent.top : undefined
+                                bottom: Config.options.bar.bottom ? parent.bottom : undefined
+                            }
+                            size: Appearance.rounding.screenRounding
+                            color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
+
+                            corner: RoundCorner.CornerEnum.TopRight
+                            states: State {
+                                name: "bottom"
+                                when: Config.options.bar.bottom
+                                PropertyChanges {
+                                    rightCorner.corner: RoundCorner.CornerEnum.BottomRight
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    IpcHandler {
+        target: "bar"
+
+        function toggle(): void {
+            GlobalStates.barOpen = !GlobalStates.barOpen
+        }
+
+        function close(): void {
+            GlobalStates.barOpen = false
+        }
+
+        function open(): void {
+            GlobalStates.barOpen = true
+        }
+    }
+
+    GlobalShortcut {
+        name: "barToggle"
+        description: "Toggles bar on press"
+
+        onPressed: {
+            GlobalStates.barOpen = !GlobalStates.barOpen;
+        }
+    }
+
+    GlobalShortcut {
+        name: "barOpen"
+        description: "Opens bar on press"
+
+        onPressed: {
+            GlobalStates.barOpen = true;
+        }
+    }
+
+    GlobalShortcut {
+        name: "barClose"
+        description: "Closes bar on press"
+
+        onPressed: {
+            GlobalStates.barOpen = false;
+        }
+    }
+}

configs/quickshell/modules/bar/BarGroup.qml

@@ -0,0 +1,36 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property real padding: 5
+    implicitHeight: Appearance.sizes.baseBarHeight
+    height: Appearance.sizes.barHeight
+    implicitWidth: rowLayout.implicitWidth + padding * 2
+    default property alias items: rowLayout.children
+
+    Rectangle {
+        id: background
+        anchors {
+            fill: parent
+            topMargin: 4
+            bottomMargin: 4
+        }
+        color: Config.options?.bar.borderless ? "transparent" : Appearance.colors.colLayer1
+        radius: Appearance.rounding.small
+    }
+
+    RowLayout {
+        id: rowLayout
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            right: parent.right
+            leftMargin: root.padding
+            rightMargin: root.padding
+        }
+        spacing: 4
+
+    }
+}

configs/quickshell/modules/bar/BatteryIndicator.qml

@@ -0,0 +1,95 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    readonly property var chargeState: Battery.chargeState
+    readonly property bool isCharging: Battery.isCharging
+    readonly property bool isPluggedIn: Battery.isPluggedIn
+    readonly property real percentage: Battery.percentage
+    readonly property bool isLow: percentage <= Config.options.battery.low / 100
+    readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
+    readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
+
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: 32
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 4
+        anchors.centerIn: parent
+
+        Rectangle {
+            implicitWidth: (isCharging ? (boltIconLoader?.item?.width ?? 0) : 0)
+
+            Behavior on implicitWidth {
+                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+            }
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            color: Appearance.colors.colOnLayer1
+            text: `${Math.round(percentage * 100)}`
+        }
+
+        CircularProgress {
+            enableAnimation: false
+            Layout.alignment: Qt.AlignVCenter
+            lineWidth: 2
+            value: percentage
+            size: 26
+            secondaryColor: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
+            primaryColor: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
+            fill: (isLow && !isCharging)
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                fill: 1
+                text: "battery_full"
+                iconSize: Appearance.font.pixelSize.normal
+                color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
+            }
+
+        }
+
+    }
+
+    Loader {
+        id: boltIconLoader
+        active: true
+        anchors.left: rowLayout.left
+        anchors.verticalCenter: rowLayout.verticalCenter
+
+        Connections {
+            target: root
+            function onIsChargingChanged() {
+                if (isCharging) boltIconLoader.active = true
+            }
+        }
+
+        sourceComponent: MaterialSymbol {
+            id: boltIcon
+
+            text: "bolt"
+            iconSize: Appearance.font.pixelSize.large
+            color: Appearance.m3colors.m3onSecondaryContainer
+            visible: opacity > 0 // Only show when charging
+            opacity: isCharging ? 1 : 0 // Keep opacity for visibility
+            onVisibleChanged: {
+                if (!visible) boltIconLoader.active = false
+            }
+
+            Behavior on opacity {
+                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+            }
+
+        }
+    }
+
+}

configs/quickshell/modules/bar/CircleUtilButton.qml

@@ -0,0 +1,15 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+RippleButton {
+    id: button
+
+    required default property Item content
+    property bool extraActiveCondition: false
+
+    implicitHeight: Math.max(content.implicitHeight, 26, content.implicitHeight)
+    implicitWidth: implicitHeight
+    contentItem: content
+
+}

configs/quickshell/modules/bar/ClockWidget.qml

@@ -0,0 +1,41 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    property bool showDate: Config.options.bar.verbose
+    implicitWidth: rowLayout.implicitWidth
+    implicitHeight: 32
+
+    RowLayout {
+        id: rowLayout
+        anchors.centerIn: parent
+        spacing: 4
+
+        StyledText {
+            font.pixelSize: Appearance.font.pixelSize.large
+            color: Appearance.colors.colOnLayer1
+            text: DateTime.time
+        }
+
+        StyledText {
+            visible: root.showDate
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnLayer1
+            text: "•"
+        }
+
+        StyledText {
+            visible: root.showDate
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnLayer1
+            text: DateTime.date
+        }
+
+    }
+
+}

configs/quickshell/modules/bar/Media.qml

@@ -0,0 +1,85 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs
+import qs.modules.common.functions
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Mpris
+import Quickshell.Hyprland
+
+Item {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    readonly property MprisPlayer activePlayer: MprisController.activePlayer
+    readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || Translation.tr("No media")
+
+    Layout.fillHeight: true
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: Appearance.sizes.barHeight
+
+    Timer {
+        running: activePlayer?.playbackState == MprisPlaybackState.Playing
+        interval: 1000
+        repeat: true
+        onTriggered: activePlayer.positionChanged()
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton | Qt.RightButton | Qt.LeftButton
+        onPressed: (event) => {
+            if (event.button === Qt.MiddleButton) {
+                activePlayer.togglePlaying();
+            } else if (event.button === Qt.BackButton) {
+                activePlayer.previous();
+            } else if (event.button === Qt.ForwardButton || event.button === Qt.RightButton) {
+                activePlayer.next();
+            } else if (event.button === Qt.LeftButton) {
+                GlobalStates.mediaControlsOpen = !GlobalStates.mediaControlsOpen
+            }
+        }
+    }
+
+    RowLayout { // Real content
+        id: rowLayout
+
+        spacing: 4
+        anchors.fill: parent
+
+        CircularProgress {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.leftMargin: rowLayout.spacing
+            lineWidth: 2
+            value: activePlayer?.position / activePlayer?.length
+            size: 26
+            secondaryColor: Appearance.colors.colSecondaryContainer
+            primaryColor: Appearance.m3colors.m3onSecondaryContainer
+            enableAnimation: false
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                fill: 1
+                text: activePlayer?.isPlaying ? "pause" : "music_note"
+                iconSize: Appearance.font.pixelSize.normal
+                color: Appearance.m3colors.m3onSecondaryContainer
+            }
+
+        }
+
+        StyledText {
+            visible: Config.options.bar.verbose
+            width: rowLayout.width - (CircularProgress.size + rowLayout.spacing * 2)
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true // Ensures the text takes up available space
+            Layout.rightMargin: rowLayout.spacing
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight // Truncates the text on the right
+            color: Appearance.colors.colOnLayer1
+            text: `${cleanedTitle}${activePlayer?.trackArtist ? ' • ' + activePlayer.trackArtist : ''}`
+        }
+
+    }
+
+}

configs/quickshell/modules/bar/Resource.qml

@@ -0,0 +1,58 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    required property string iconName
+    required property double percentage
+    property bool shown: true
+    clip: true
+    visible: width > 0 && height > 0
+    implicitWidth: resourceRowLayout.x < 0 ? 0 : childrenRect.width
+    implicitHeight: childrenRect.height
+
+    RowLayout {
+        spacing: 4
+        id: resourceRowLayout
+        x: shown ? 0 : -resourceRowLayout.width
+
+        CircularProgress {
+            Layout.alignment: Qt.AlignVCenter
+            lineWidth: 2
+            value: percentage
+            size: 26
+            secondaryColor: Appearance.colors.colSecondaryContainer
+            primaryColor: Appearance.m3colors.m3onSecondaryContainer
+            enableAnimation: false
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                fill: 1
+                text: iconName
+                iconSize: Appearance.font.pixelSize.normal
+                color: Appearance.m3colors.m3onSecondaryContainer
+            }
+
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            color: Appearance.colors.colOnLayer1
+            text: `${Math.round(percentage * 100)}`
+        }
+
+        Behavior on x {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+
+    }
+
+    Behavior on implicitWidth {
+        NumberAnimation {
+            duration: Appearance.animation.elementMove.duration
+            easing.type: Appearance.animation.elementMove.type
+            easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+        }
+    }
+}

configs/quickshell/modules/bar/Resources.qml

@@ -0,0 +1,47 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    property bool alwaysShowAllResources: false
+    implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
+    implicitHeight: 32
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 0
+        anchors.fill: parent
+        anchors.leftMargin: 4
+        anchors.rightMargin: 4
+
+        Resource {
+            iconName: "memory"
+            percentage: ResourceUsage.memoryUsedPercentage
+        }
+
+        Resource {
+            iconName: "swap_horiz"
+            percentage: ResourceUsage.swapUsedPercentage
+            shown: (Config.options.bar.resources.alwaysShowSwap && percentage > 0) || 
+                (MprisController.activePlayer?.trackTitle == null) ||
+                root.alwaysShowAllResources
+            Layout.leftMargin: shown ? 4 : 0
+        }
+
+        Resource {
+            iconName: "settings_slow_motion"
+            percentage: ResourceUsage.cpuUsage
+            shown: Config.options.bar.resources.alwaysShowCpu || 
+                !(MprisController.activePlayer?.trackTitle?.length > 0) ||
+                root.alwaysShowAllResources
+            Layout.leftMargin: shown ? 4 : 0
+        }
+
+    }
+
+}

configs/quickshell/modules/bar/ScrollHint.qml

@@ -0,0 +1,57 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+Revealer { // Scroll hint
+    id: root
+    property string icon
+    property string side: "left"
+    property string tooltipText: ""
+    
+    MouseArea {
+        anchors.right: root.side === "left" ? parent.right : undefined
+        anchors.left: root.side === "right" ? parent.left : undefined
+        implicitWidth: contentColumnLayout.implicitWidth
+        implicitHeight: contentColumnLayout.implicitHeight
+        property bool hovered: false
+
+        hoverEnabled: true
+        onEntered: hovered = true
+        onExited: hovered = false
+        acceptedButtons: Qt.NoButton
+
+        // StyledToolTip {
+        //     extraVisibleCondition: tooltipText.length > 0
+        //     content: tooltipText
+        // }
+
+        ColumnLayout {
+            id: contentColumnLayout
+            anchors.centerIn: parent
+            spacing: -5
+            MaterialSymbol {
+                Layout.leftMargin: 5
+                Layout.rightMargin: 5
+                text: "keyboard_arrow_up"
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+            MaterialSymbol {
+                Layout.leftMargin: 5
+                Layout.rightMargin: 5
+                text: root.icon
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+            MaterialSymbol {
+                Layout.leftMargin: 5
+                Layout.rightMargin: 5
+                text: "keyboard_arrow_down"
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+        }
+    }
+}

configs/quickshell/modules/bar/SysTray.qml

@@ -0,0 +1,47 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.SystemTray
+
+// TODO: More fancy animation
+Item {
+    id: root
+
+    required property var bar
+
+    height: parent.height
+    implicitWidth: rowLayout.implicitWidth
+    Layout.leftMargin: Appearance.rounding.screenRounding
+
+    RowLayout {
+        id: rowLayout
+
+        anchors.fill: parent
+        spacing: 15
+
+        Repeater {
+            model: SystemTray.items
+
+            SysTrayItem {
+                required property SystemTrayItem modelData
+
+                bar: root.bar
+                item: modelData
+            }
+
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            font.pixelSize: Appearance.font.pixelSize.larger
+            color: Appearance.colors.colSubtext
+            text: "•"
+            visible: {
+                SystemTray.items.values.length > 0
+            }
+        }
+
+    }
+
+}

configs/quickshell/modules/bar/SysTrayItem.qml

@@ -0,0 +1,72 @@
+import qs.modules.common
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+MouseArea {
+    id: root
+
+    required property var bar
+    required property SystemTrayItem item
+    property bool targetMenuOpen: false
+    property int trayItemWidth: Appearance.font.pixelSize.larger
+
+    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    Layout.fillHeight: true
+    implicitWidth: trayItemWidth
+    onClicked: (event) => {
+        switch (event.button) {
+        case Qt.LeftButton:
+            item.activate();
+            break;
+        case Qt.RightButton:
+            if (item.hasMenu) menu.open();
+            break;
+        }
+        event.accepted = true;
+    }
+
+    QsMenuAnchor {
+        id: menu
+
+        menu: root.item.menu
+        anchor.window: bar
+        anchor.rect.x: root.x + bar.width
+        anchor.rect.y: root.y
+        anchor.rect.height: root.height
+        anchor.edges: Edges.Bottom
+    }
+
+    IconImage {
+        id: trayIcon
+        visible: !Config.options.bar.tray.monochromeIcons
+        source: root.item.icon
+        anchors.centerIn: parent
+        width: parent.width
+        height: parent.height
+    }
+
+    Loader {
+        active: Config.options.bar.tray.monochromeIcons
+        anchors.fill: trayIcon
+        sourceComponent: Item {
+            Desaturate {
+                id: desaturatedIcon
+                visible: false // There's already color overlay
+                anchors.fill: parent
+                source: trayIcon
+                desaturation: 0.8 // 1.0 means fully grayscale
+            }
+            ColorOverlay {
+                anchors.fill: desaturatedIcon
+                source: desaturatedIcon
+                color: ColorUtils.transparentize(Appearance.colors.colOnLayer0, 0.9)
+            }
+        }
+    }
+
+}

configs/quickshell/modules/bar/UtilButtons.qml

@@ -0,0 +1,142 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.Pipewire
+import Quickshell.Services.UPower
+
+Item {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: rowLayout.implicitHeight
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 4
+        anchors.centerIn: parent
+
+        Loader {
+            active: Config.options.bar.utilButtons.showScreenSnip
+            visible: Config.options.bar.utilButtons.showScreenSnip
+            sourceComponent: CircleUtilButton {
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: Quickshell.execDetached(["qs", "-p", Quickshell.shellPath("screenshot.qml")])
+                MaterialSymbol {
+                    horizontalAlignment: Qt.AlignHCenter
+                    fill: 1
+                    text: "screenshot_region"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+
+        Loader {
+            active: Config.options.bar.utilButtons.showColorPicker
+            visible: Config.options.bar.utilButtons.showColorPicker
+            sourceComponent: CircleUtilButton {
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: Quickshell.execDetached(["hyprpicker", "-a"])
+                MaterialSymbol {
+                    horizontalAlignment: Qt.AlignHCenter
+                    fill: 1
+                    text: "colorize"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+
+        Loader {
+            active: Config.options.bar.utilButtons.showKeyboardToggle
+            visible: Config.options.bar.utilButtons.showKeyboardToggle
+            sourceComponent: CircleUtilButton {
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: GlobalStates.oskOpen = !GlobalStates.oskOpen
+                MaterialSymbol {
+                    horizontalAlignment: Qt.AlignHCenter
+                    fill: 0
+                    text: "keyboard"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+
+        Loader {
+            active: Config.options.bar.utilButtons.showMicToggle
+            visible: Config.options.bar.utilButtons.showMicToggle
+            sourceComponent: CircleUtilButton {
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: Quickshell.execDetached(["wpctl", "set-mute", "@DEFAULT_SOURCE@", "toggle"])
+                MaterialSymbol {
+                    horizontalAlignment: Qt.AlignHCenter
+                    fill: 0
+                    text: Pipewire.defaultAudioSource?.audio?.muted ? "mic_off" : "mic"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+
+        Loader {
+            active: Config.options.bar.utilButtons.showDarkModeToggle
+            visible: Config.options.bar.utilButtons.showDarkModeToggle
+            sourceComponent: CircleUtilButton {
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: event => {
+                    if (Appearance.m3colors.darkmode) {
+                        Hyprland.dispatch(`exec ${Directories.wallpaperSwitchScriptPath} --mode light --noswitch`);
+                    } else {
+                        Hyprland.dispatch(`exec ${Directories.wallpaperSwitchScriptPath} --mode dark --noswitch`);
+                    }
+                }
+                MaterialSymbol {
+                    horizontalAlignment: Qt.AlignHCenter
+                    fill: 0
+                    text: Appearance.m3colors.darkmode ? "light_mode" : "dark_mode"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+
+        Loader {
+            active: Config.options.bar.utilButtons.showPerformanceProfileToggle
+            visible: Config.options.bar.utilButtons.showPerformanceProfileToggle
+            sourceComponent: CircleUtilButton {
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: event => {
+                    if (PowerProfiles.hasPerformanceProfile) {
+                        switch(PowerProfiles.profile) {
+                            case PowerProfile.PowerSaver: PowerProfiles.profile = PowerProfile.Balanced
+                            break;
+                            case PowerProfile.Balanced: PowerProfiles.profile = PowerProfile.Performance
+                            break;
+                            case PowerProfile.Performance: PowerProfiles.profile = PowerProfile.PowerSaver
+                            break;
+                        }
+                    } else {
+                        PowerProfiles.profile = PowerProfiles.profile == PowerProfile.Balanced ? PowerProfile.PowerSaver : PowerProfile.Balanced
+                    }
+                }
+                MaterialSymbol {
+                    horizontalAlignment: Qt.AlignHCenter
+                    fill: 0
+                    text: switch(PowerProfiles.profile) {
+                        case PowerProfile.PowerSaver: return "battery_saver"
+                        case PowerProfile.Balanced: return "dynamic_form"
+                        case PowerProfile.Performance: return "speed"
+                    }
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/bar/Workspaces.qml

@@ -0,0 +1,282 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+Item {
+    required property var bar
+    property bool borderless: Config.options.bar.borderless
+    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen)
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+    
+    readonly property int workspaceGroup: Math.floor((monitor.activeWorkspace?.id - 1) / Config.options.bar.workspaces.shown)
+    property list<bool> workspaceOccupied: []
+    property int widgetPadding: 4
+    property int workspaceButtonWidth: 26
+    property real workspaceIconSize: workspaceButtonWidth * 0.69
+    property real workspaceIconSizeShrinked: workspaceButtonWidth * 0.55
+    property real workspaceIconOpacityShrinked: 1
+    property real workspaceIconMarginShrinked: -4
+    property int workspaceIndexInGroup: (monitor.activeWorkspace?.id - 1) % Config.options.bar.workspaces.shown
+
+    // Function to update workspaceOccupied
+    function updateWorkspaceOccupied() {
+        workspaceOccupied = Array.from({ length: Config.options.bar.workspaces.shown }, (_, i) => {
+            return Hyprland.workspaces.values.some(ws => ws.id === workspaceGroup * Config.options.bar.workspaces.shown + i + 1);
+        })
+    }
+
+    // Initialize workspaceOccupied when the component is created
+    Component.onCompleted: updateWorkspaceOccupied()
+
+    // Listen for changes in Hyprland.workspaces.values
+    Connections {
+        target: Hyprland.workspaces
+        function onValuesChanged() {
+            updateWorkspaceOccupied();
+        }
+    }
+
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: Appearance.sizes.barHeight
+
+    // Scroll to switch workspaces
+    WheelHandler {
+        onWheel: (event) => {
+            if (event.angleDelta.y < 0)
+                Hyprland.dispatch(`workspace r+1`);
+            else if (event.angleDelta.y > 0)
+                Hyprland.dispatch(`workspace r-1`);
+        }
+        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.BackButton
+        onPressed: (event) => {
+            if (event.button === Qt.BackButton) {
+                Hyprland.dispatch(`togglespecialworkspace`);
+            } 
+        }
+    }
+
+    // Workspaces - background
+    RowLayout {
+        id: rowLayout
+        z: 1
+
+        spacing: 0
+        anchors.fill: parent
+        implicitHeight: Appearance.sizes.barHeight
+
+        Repeater {
+            model: Config.options.bar.workspaces.shown
+
+            Rectangle {
+                z: 1
+                implicitWidth: workspaceButtonWidth
+                implicitHeight: workspaceButtonWidth
+                radius: Appearance.rounding.full
+                property var leftOccupied: (workspaceOccupied[index-1] && !(!activeWindow?.activated && monitor.activeWorkspace?.id === index))
+                property var rightOccupied: (workspaceOccupied[index+1] && !(!activeWindow?.activated && monitor.activeWorkspace?.id === index+2))
+                property var radiusLeft: leftOccupied ? 0 : Appearance.rounding.full
+                property var radiusRight: rightOccupied ? 0 : Appearance.rounding.full
+
+                topLeftRadius: radiusLeft
+                bottomLeftRadius: radiusLeft
+                topRightRadius: radiusRight
+                bottomRightRadius: radiusRight
+                
+                color: ColorUtils.transparentize(Appearance.m3colors.m3secondaryContainer, 0.4)
+                opacity: (workspaceOccupied[index] && !(!activeWindow?.activated && monitor.activeWorkspace?.id === index+1)) ? 1 : 0
+
+                Behavior on opacity {
+                    animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on radiusLeft {
+                    animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                }
+
+                Behavior on radiusRight {
+                    animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                }
+
+            }
+
+        }
+
+    }
+
+    // Active workspace
+    Rectangle {
+        z: 2
+        // Make active ws indicator, which has a brighter color, smaller to look like it is of the same size as ws occupied highlight
+        property real activeWorkspaceMargin: 2
+        implicitHeight: workspaceButtonWidth - activeWorkspaceMargin * 2
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colPrimary
+        anchors.verticalCenter: parent.verticalCenter
+
+        property real idx1: workspaceIndexInGroup
+        property real idx2: workspaceIndexInGroup
+        x: Math.min(idx1, idx2) * workspaceButtonWidth + activeWorkspaceMargin
+        implicitWidth: Math.abs(idx1 - idx2) * workspaceButtonWidth + workspaceButtonWidth - activeWorkspaceMargin * 2
+
+        Behavior on activeWorkspaceMargin {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+        Behavior on idx1 { // Leading anim
+            NumberAnimation {
+                duration: 100
+                easing.type: Easing.OutSine
+            }
+        }
+        Behavior on idx2 { // Following anim
+            NumberAnimation {
+                duration: 300
+                easing.type: Easing.OutSine
+            }
+        }
+    }
+
+    // Workspaces - numbers
+    RowLayout {
+        id: rowLayoutNumbers
+        z: 3
+
+        spacing: 0
+        anchors.fill: parent
+        implicitHeight: Appearance.sizes.barHeight
+
+        Repeater {
+            model: Config.options.bar.workspaces.shown
+
+            Button {
+                id: button
+                property int workspaceValue: workspaceGroup * Config.options.bar.workspaces.shown + index + 1
+                Layout.fillHeight: true
+                onPressed: Hyprland.dispatch(`workspace ${workspaceValue}`)
+                width: workspaceButtonWidth
+                
+                background: Item {
+                    id: workspaceButtonBackground
+                    implicitWidth: workspaceButtonWidth
+                    implicitHeight: workspaceButtonWidth
+                    property var biggestWindow: HyprlandData.biggestWindowForWorkspace(button.workspaceValue)
+                    property var mainAppIconSource: Quickshell.iconPath(AppSearch.guessIcon(biggestWindow?.class), "image-missing")
+
+                    StyledText { // Workspace number text
+                        opacity: GlobalStates.workspaceShowNumbers
+                            || ((Config.options?.bar.workspaces.alwaysShowNumbers && (!Config.options?.bar.workspaces.showAppIcons || !workspaceButtonBackground.biggestWindow || GlobalStates.workspaceShowNumbers))
+                            || (GlobalStates.workspaceShowNumbers && !Config.options?.bar.workspaces.showAppIcons)
+                            )  ? 1 : 0
+                        z: 3
+
+                        anchors.centerIn: parent
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: Appearance.font.pixelSize.small - ((text.length - 1) * (text !== "10") * 2)
+                        text: `${button.workspaceValue}`
+                        elide: Text.ElideRight
+                        color: (monitor.activeWorkspace?.id == button.workspaceValue) ? 
+                            Appearance.m3colors.m3onPrimary : 
+                            (workspaceOccupied[index] ? Appearance.m3colors.m3onSecondaryContainer : 
+                                Appearance.colors.colOnLayer1Inactive)
+
+                        Behavior on opacity {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                    }
+                    Rectangle { // Dot instead of ws number
+                        id: wsDot
+                        opacity: (Config.options?.bar.workspaces.alwaysShowNumbers
+                            || GlobalStates.workspaceShowNumbers
+                            || (Config.options?.bar.workspaces.showAppIcons && workspaceButtonBackground.biggestWindow)
+                            ) ? 0 : 1
+                        visible: opacity > 0
+                        anchors.centerIn: parent
+                        width: workspaceButtonWidth * 0.18
+                        height: width
+                        radius: width / 2
+                        color: (monitor.activeWorkspace?.id == button.workspaceValue) ? 
+                            Appearance.m3colors.m3onPrimary : 
+                            (workspaceOccupied[index] ? Appearance.m3colors.m3onSecondaryContainer : 
+                                Appearance.colors.colOnLayer1Inactive)
+
+                        Behavior on opacity {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                    }
+                    Item { // Main app icon
+                        anchors.centerIn: parent
+                        width: workspaceButtonWidth
+                        height: workspaceButtonWidth
+                        opacity: !Config.options?.bar.workspaces.showAppIcons ? 0 :
+                            (workspaceButtonBackground.biggestWindow && !GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
+                            1 : workspaceButtonBackground.biggestWindow ? workspaceIconOpacityShrinked : 0
+                            visible: opacity > 0
+                        IconImage {
+                            id: mainAppIcon
+                            anchors.bottom: parent.bottom
+                            anchors.right: parent.right
+                            anchors.bottomMargin: (!GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
+                                (workspaceButtonWidth - workspaceIconSize) / 2 : workspaceIconMarginShrinked
+                            anchors.rightMargin: (!GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
+                                (workspaceButtonWidth - workspaceIconSize) / 2 : workspaceIconMarginShrinked
+
+                            source: workspaceButtonBackground.mainAppIconSource
+                            implicitSize: (!GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? workspaceIconSize : workspaceIconSizeShrinked
+
+                            Behavior on opacity {
+                                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            }
+                            Behavior on anchors.bottomMargin {
+                                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            }
+                            Behavior on anchors.rightMargin {
+                                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            }
+                            Behavior on implicitSize {
+                                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                            }
+                        }
+
+                        Loader {
+                            active: Config.options.bar.workspaces.monochromeIcons
+                            anchors.fill: mainAppIcon
+                            sourceComponent: Item {
+                                Desaturate {
+                                    id: desaturatedIcon
+                                    visible: false // There's already color overlay
+                                    anchors.fill: parent
+                                    source: mainAppIcon
+                                    desaturation: 0.8
+                                }
+                                ColorOverlay {
+                                    anchors.fill: desaturatedIcon
+                                    source: desaturatedIcon
+                                    color: ColorUtils.transparentize(wsDot.color, 0.9)
+                                }
+                            }
+                        }
+                    }
+                }
+                
+
+            }
+
+        }
+
+    }
+
+}

configs/quickshell/modules/bar/weather/WeatherBar.qml

@@ -0,0 +1,60 @@
+pragma ComponentBehavior: Bound
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+MouseArea {
+    id: root
+    property real margin: 10
+    property bool hovered: false
+    implicitWidth: rowLayout.implicitWidth + margin * 2
+    implicitHeight: rowLayout.implicitHeight
+
+    hoverEnabled: true
+
+    RowLayout {
+        id: rowLayout
+        anchors.centerIn: parent
+        
+        MaterialSymbol {
+            fill: 0
+            text: WeatherIcons.codeToName[Weather.data.wCode]
+            iconSize: Appearance.font.pixelSize.large
+            color: Appearance.colors.colOnLayer1
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+        StyledText {
+            visible: true
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnLayer1
+            text: Weather.data.temp
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
+
+    LazyLoader {
+        id: popupLoader
+        active: root.containsMouse
+
+        component: PopupWindow {
+            id: popupWindow
+            visible: true
+            implicitWidth: weatherPopup.implicitWidth
+            implicitHeight: weatherPopup.implicitHeight
+            anchor.item: root
+            anchor.edges: Edges.Top
+            anchor.rect.x: (root.implicitWidth - popupWindow.implicitWidth) / 2
+            anchor.rect.y: Config.options.bar.bottom ? 
+                (-weatherPopup.implicitHeight - 15) :
+                (root.implicitHeight + 15 )
+            color: "transparent"
+            WeatherPopup {
+                id: weatherPopup
+            }
+        }
+    }
+}

configs/quickshell/modules/bar/weather/WeatherCard.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Layouts
+
+import qs.modules.common
+import qs.modules.common.widgets
+
+Rectangle {
+    id: root
+    radius: Appearance.rounding.small
+    color: Appearance.colors.colLayer1
+    implicitWidth: columnLayout.implicitWidth * 2
+    implicitHeight: columnLayout.implicitHeight * 2
+    Layout.fillWidth: parent
+
+    property alias title: title.text
+    property alias value: value.text
+    property alias symbol: symbol.text
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.fill: parent
+        spacing: -10
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            MaterialSymbol {
+                id: symbol
+                fill: 0
+                iconSize: Appearance.font.pixelSize.normal
+            }
+            StyledText {
+                id: title
+                font.pixelSize: Appearance.font.pixelSize.smaller
+                color: Appearance.colors.colOnLayer1
+            }
+        }
+        StyledText {
+            id: value
+            Layout.alignment: Qt.AlignHCenter
+            font.pixelSize: Appearance.font.pixelSize.normal
+            color: Appearance.colors.colOnLayer1
+        }
+    }
+}

configs/quickshell/modules/bar/weather/WeatherIcons.qml

@@ -0,0 +1,59 @@
+pragma Singleton
+
+import Quickshell
+
+Singleton {
+    // credits: calestia
+    // this snippet is taken from
+    // https://github.com/caelestia-dots/shell
+    readonly property var codeToName: ({
+            "113": "clear_day",
+            "116": "partly_cloudy_day",
+            "119": "cloud",
+            "122": "cloud",
+            "143": "foggy",
+            "176": "rainy",
+            "179": "rainy",
+            "182": "rainy",
+            "185": "rainy",
+            "200": "thunderstorm",
+            "227": "cloudy_snowing",
+            "230": "snowing_heavy",
+            "248": "foggy",
+            "260": "foggy",
+            "263": "rainy",
+            "266": "rainy",
+            "281": "rainy",
+            "284": "rainy",
+            "293": "rainy",
+            "296": "rainy",
+            "299": "rainy",
+            "302": "weather_hail",
+            "305": "rainy",
+            "308": "weather_hail",
+            "311": "rainy",
+            "314": "rainy",
+            "317": "rainy",
+            "320": "cloudy_snowing",
+            "323": "cloudy_snowing",
+            "326": "cloudy_snowing",
+            "329": "snowing_heavy",
+            "332": "snowing_heavy",
+            "335": "snowing",
+            "338": "snowing_heavy",
+            "350": "rainy",
+            "353": "rainy",
+            "356": "rainy",
+            "359": "weather_hail",
+            "362": "rainy",
+            "365": "rainy",
+            "368": "cloudy_snowing",
+            "371": "snowing",
+            "374": "rainy",
+            "377": "rainy",
+            "386": "thunderstorm",
+            "389": "thunderstorm",
+            "392": "thunderstorm",
+            "395": "snowing"
+        })
+}

configs/quickshell/modules/bar/weather/WeatherPopup.qml

@@ -0,0 +1,97 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+import QtQuick
+import QtQuick.Layouts
+
+Rectangle {
+    id: root
+    readonly property real margin: 10
+    implicitWidth: columnLayout.implicitWidth + margin * 2
+    implicitHeight: columnLayout.implicitHeight + margin * 2
+    color: Appearance.colors.colLayer0
+    radius: Appearance.rounding.small
+    border.width: 1
+    border.color: Appearance.colors.colLayer0Border
+    clip: true
+
+    ColumnLayout {
+        id: columnLayout
+        spacing: 5
+        anchors.centerIn: root
+        implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
+        implicitHeight: gridLayout.implicitHeight
+
+        // Header
+        RowLayout {
+            id: header
+            spacing: 5
+            Layout.fillWidth: parent
+            Layout.alignment: Qt.AlignHCenter
+            MaterialSymbol {
+                fill: 0
+                text: "location_on"
+                iconSize: Appearance.font.pixelSize.huge
+            }
+
+            StyledText {
+                text: Weather.data.city
+                font.pixelSize: Appearance.font.pixelSize.title
+                font.family: Appearance.font.family.title
+                color: Appearance.colors.colOnLayer0
+            }
+        }
+
+        // Metrics grid
+        GridLayout {
+            id: gridLayout
+            columns: 2
+            rowSpacing: 5
+            columnSpacing: 5
+            uniformCellWidths: true
+
+            WeatherCard {
+                title: Translation.tr("UV Index")
+                symbol: "wb_sunny"
+                value: Weather.data.uv
+            }
+            WeatherCard {
+                title: Translation.tr("Wind")
+                symbol: "air"
+                value: `(${Weather.data.windDir}) ${Weather.data.wind}`
+            }
+            WeatherCard {
+                title: Translation.tr("Precipitation")
+                symbol: "rainy_light"
+                value: Weather.data.precip
+            }
+            WeatherCard {
+                title: Translation.tr("Humidity")
+                symbol: "humidity_low"
+                value: Weather.data.humidity
+            }
+            WeatherCard {
+                title: Translation.tr("Visibility")
+                symbol: "visibility"
+                value: Weather.data.visib
+            }
+            WeatherCard {
+                title: Translation.tr("Pressure")
+                symbol: "readiness_score"
+                value: Weather.data.press
+            }
+            WeatherCard {
+                title: Translation.tr("Sunrise")
+                symbol: "wb_twilight"
+                value: Weather.data.sunrise
+            }
+            WeatherCard {
+                title: Translation.tr("Sunset")
+                symbol: "bedtime"
+                value: Weather.data.sunset
+            }
+        }
+    }
+}

configs/quickshell/modules/cheatsheet/Cheatsheet.qml

@@ -0,0 +1,236 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell.Io
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Scope { // Scope
+    id: root
+    property var tabButtonList: [
+        {
+            "icon": "keyboard",
+            "name": Translation.tr("Keybinds")
+        },
+        {
+            "icon": "experiment",
+            "name": Translation.tr("Elements")
+        },
+    ]
+    property int selectedTab: 0
+
+    Loader {
+        id: cheatsheetLoader
+        active: false
+
+        sourceComponent: PanelWindow { // Window
+            id: cheatsheetRoot
+            visible: cheatsheetLoader.active
+
+            anchors {
+                top: true
+                bottom: true
+                left: true
+                right: true
+            }
+
+            function hide() {
+                cheatsheetLoader.active = false;
+            }
+            exclusiveZone: 0
+            implicitWidth: cheatsheetBackground.width + Appearance.sizes.elevationMargin * 2
+            implicitHeight: cheatsheetBackground.height + Appearance.sizes.elevationMargin * 2
+            WlrLayershell.namespace: "quickshell:cheatsheet"
+            // Hyprland 0.49: Focus is always exclusive and setting this breaks mouse focus grab
+            // WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+            color: "transparent"
+
+            mask: Region {
+                item: cheatsheetBackground
+            }
+
+            HyprlandFocusGrab { // Click outside to close
+                id: grab
+                windows: [cheatsheetRoot]
+                active: cheatsheetRoot.visible
+                onCleared: () => {
+                    if (!active)
+                        cheatsheetRoot.hide();
+                }
+            }
+
+            // Background
+            StyledRectangularShadow {
+                target: cheatsheetBackground
+            }
+            Rectangle {
+                id: cheatsheetBackground
+                anchors.centerIn: parent
+                color: Appearance.colors.colLayer0
+                border.width: 1
+                border.color: Appearance.colors.colLayer0Border
+                radius: Appearance.rounding.windowRounding
+                property real padding: 30
+                implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
+                implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2
+
+                Keys.onPressed: event => { // Esc to close
+                    if (event.key === Qt.Key_Escape) {
+                        cheatsheetRoot.hide();
+                    }
+                    if (event.modifiers === Qt.ControlModifier) {
+                        if (event.key === Qt.Key_PageDown) {
+                            root.selectedTab = Math.min(root.selectedTab + 1, root.tabButtonList.length - 1);
+                            event.accepted = true;
+                        } else if (event.key === Qt.Key_PageUp) {
+                            root.selectedTab = Math.max(root.selectedTab - 1, 0);
+                            event.accepted = true;
+                        } else if (event.key === Qt.Key_Tab) {
+                            root.selectedTab = (root.selectedTab + 1) % root.tabButtonList.length;
+                            event.accepted = true;
+                        } else if (event.key === Qt.Key_Backtab) {
+                            root.selectedTab = (root.selectedTab - 1 + root.tabButtonList.length) % root.tabButtonList.length;
+                            event.accepted = true;
+                        }
+                    }
+                }
+
+                RippleButton { // Close button
+                    id: closeButton
+                    focus: cheatsheetRoot.visible
+                    implicitWidth: 40
+                    implicitHeight: 40
+                    buttonRadius: Appearance.rounding.full
+                    anchors {
+                        top: parent.top
+                        right: parent.right
+                        topMargin: 20
+                        rightMargin: 20
+                    }
+
+                    onClicked: {
+                        cheatsheetRoot.hide();
+                    }
+
+                    contentItem: MaterialSymbol {
+                        anchors.centerIn: parent
+                        horizontalAlignment: Text.AlignHCenter
+                        font.pixelSize: Appearance.font.pixelSize.title
+                        text: "close"
+                    }
+                }
+
+                ColumnLayout { // Real content
+                    id: cheatsheetColumnLayout
+                    anchors.centerIn: parent
+                    spacing: 20
+
+                    StyledText {
+                        id: cheatsheetTitle
+                        Layout.alignment: Qt.AlignHCenter
+                        font.family: Appearance.font.family.title
+                        font.pixelSize: Appearance.font.pixelSize.title
+                        text: Translation.tr("Cheat sheet")
+                    }
+                    PrimaryTabBar { // Tab strip
+                        id: tabBar
+                        tabButtonList: root.tabButtonList
+                        externalTrackedTab: root.selectedTab
+                        function onCurrentIndexChanged(currentIndex) {
+                            root.selectedTab = currentIndex;
+                        }
+                    }
+
+                    SwipeView { // Content pages
+                        id: swipeView
+                        Layout.topMargin: 5
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        spacing: 10
+
+                        Behavior on implicitWidth {
+                            id: contentWidthBehavior
+                            enabled: false
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        Behavior on implicitHeight {
+                            id: contentHeightBehavior
+                            enabled: false
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+
+                        currentIndex: tabBar.externalTrackedTab
+                        onCurrentIndexChanged: {
+                            contentWidthBehavior.enabled = true;
+                            contentHeightBehavior.enabled = true;
+                            tabBar.enableIndicatorAnimation = true;
+                            root.selectedTab = currentIndex;
+                        }
+
+                        clip: true
+                        layer.enabled: true
+                        layer.effect: OpacityMask {
+                            maskSource: Rectangle {
+                                width: swipeView.width
+                                height: swipeView.height
+                                radius: Appearance.rounding.small
+                            }
+                        }
+
+                        CheatsheetKeybinds {}
+                        CheatsheetPeriodicTable {}
+                    }
+                }
+            }
+        }
+    }
+
+    IpcHandler {
+        target: "cheatsheet"
+
+        function toggle(): void {
+            cheatsheetLoader.active = !cheatsheetLoader.active;
+        }
+
+        function close(): void {
+            cheatsheetLoader.active = false;
+        }
+
+        function open(): void {
+            cheatsheetLoader.active = true;
+        }
+    }
+
+    GlobalShortcut {
+        name: "cheatsheetToggle"
+        description: "Toggles cheatsheet on press"
+
+        onPressed: {
+            cheatsheetLoader.active = !cheatsheetLoader.active;
+        }
+    }
+
+    GlobalShortcut {
+        name: "cheatsheetOpen"
+        description: "Opens cheatsheet on press"
+
+        onPressed: {
+            cheatsheetLoader.active = true;
+        }
+    }
+
+    GlobalShortcut {
+        name: "cheatsheetClose"
+        description: "Closes cheatsheet on press"
+
+        onPressed: {
+            cheatsheetLoader.active = false;
+        }
+    }
+}

configs/quickshell/modules/cheatsheet/CheatsheetKeybinds.qml

@@ -0,0 +1,144 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    readonly property var keybinds: HyprlandKeybinds.keybinds
+    property real spacing: 20
+    property real titleSpacing: 7
+    implicitWidth: rowLayout.implicitWidth
+    implicitHeight: rowLayout.implicitHeight
+
+    property var keyBlacklist: ["Super_L"]
+    property var keySubstitutions: ({
+        "Super": "󰖳",
+        "mouse_up": "Scroll ↓",    // ikr, weird
+        "mouse_down": "Scroll ↑",  // trust me bro
+        "mouse:272": "LMB",
+        "mouse:273": "RMB",
+        "mouse:275": "MouseBack",
+        "Slash": "/",
+        "Hash": "#",
+        "Return": "Enter",
+        // "Shift": "",
+    })
+
+    RowLayout { // Keybind columns
+        id: rowLayout
+        spacing: root.spacing
+        Repeater {
+            model: keybinds.children
+            
+            delegate: ColumnLayout { // Keybind sections
+                spacing: root.spacing
+                required property var modelData
+                Layout.alignment: Qt.AlignTop
+                Repeater {
+                    model: modelData.children
+
+                    delegate: Item { // Section with real keybinds
+                        required property var modelData
+                        implicitWidth: sectionColumnLayout.implicitWidth
+                        implicitHeight: sectionColumnLayout.implicitHeight
+                        ColumnLayout {
+                            id: sectionColumnLayout
+                            anchors.centerIn: parent
+                            spacing: root.titleSpacing
+                            StyledText {
+                                id: sectionTitle
+                                font.family: Appearance.font.family.title
+                                font.pixelSize: Appearance.font.pixelSize.huge
+                                color: Appearance.colors.colOnLayer0
+                                text: modelData.name
+                            }
+
+                            GridLayout {
+                                id: keybindGrid
+                                columns: 2
+                                Repeater {
+                                    model: {
+                                        var result = [];
+                                        for (var i = 0; i < modelData.keybinds.length; i++) {
+                                            const keybind = modelData.keybinds[i];
+                                            result.push({
+                                                "type": "keys",
+                                                "mods": keybind.mods,
+                                                "key": keybind.key,
+                                            });
+                                            result.push({
+                                                "type": "comment",
+                                                "comment": keybind.comment,
+                                            });
+                                        }
+                                        return result;
+                                    }
+                                    delegate: Item {
+                                        required property var modelData
+                                        implicitWidth: keybindLoader.implicitWidth
+                                        implicitHeight: keybindLoader.implicitHeight
+
+                                        Loader {
+                                            id: keybindLoader
+                                            sourceComponent: (modelData.type === "keys") ? keysComponent : commentComponent
+                                        }
+
+                                        Component {
+                                            id: keysComponent
+                                            RowLayout {
+                                                spacing: 4
+                                                Repeater {
+                                                    model: modelData.mods
+                                                    delegate: KeyboardKey {
+                                                        required property var modelData
+                                                        key: keySubstitutions[modelData] || modelData
+                                                    }
+                                                }
+                                                StyledText {
+                                                    id: keybindPlus
+                                                    visible: !keyBlacklist.includes(modelData.key) && modelData.mods.length > 0
+                                                    Layout.alignment: Qt.AlignVCenter
+                                                    text: "+"
+                                                }
+                                                KeyboardKey {
+                                                    id: keybindKey
+                                                    visible: !keyBlacklist.includes(modelData.key)
+                                                    key: keySubstitutions[modelData.key] || modelData.key
+                                                    color: Appearance.colors.colOnLayer0
+                                                }
+                                            }
+                                        }
+
+                                        Component {
+                                            id: commentComponent
+                                            Item {
+                                                id: commentItem
+                                                implicitWidth: commentText.implicitWidth + 8 * 2
+                                                implicitHeight: commentText.implicitHeight
+
+                                                StyledText {
+                                                    id: commentText
+                                                    anchors.centerIn: parent
+                                                    font.pixelSize: Appearance.font.pixelSize.smaller
+                                                    text: modelData.comment
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                }
+                            }
+                        }
+                    }
+
+                }
+            }
+            
+        }
+    }
+    
+}

configs/quickshell/modules/cheatsheet/CheatsheetPeriodicTable.qml

@@ -0,0 +1,68 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import "periodic_table.js" as PTable
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    readonly property var elements: PTable.elements
+    readonly property var series: PTable.series
+    property real spacing: 6
+    implicitWidth: mainLayout.implicitWidth
+    implicitHeight: mainLayout.implicitHeight
+
+    ColumnLayout {
+        id: mainLayout
+        spacing: root.spacing
+
+        Repeater { // Main table rows
+            model: root.elements
+            
+            delegate: RowLayout { // Table cells
+                id: tableRow
+                spacing: root.spacing
+                required property var modelData
+                
+                Repeater {
+                    model: tableRow.modelData
+                    delegate: ElementTile {
+                        required property var modelData
+                        element: modelData
+                    }
+
+                }
+            }
+            
+        }
+
+        Item {
+            id: gap
+            implicitHeight: 20
+        }
+
+        Repeater { // Main table rows
+            model: root.series
+            
+            delegate: RowLayout { // Table cells
+                id: seriesTableRow
+                spacing: root.spacing
+                required property var modelData
+                
+                Repeater {
+                    model: seriesTableRow.modelData
+                    delegate: ElementTile {
+                        required property var modelData
+                        element: modelData
+                    }
+
+                }
+            }
+            
+        }
+    }
+    
+}

configs/quickshell/modules/cheatsheet/ElementTile.qml

@@ -0,0 +1,55 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+RippleButton {
+    id: root
+    required property var element
+    opacity: element.type != "empty" ? 1 : 0
+    implicitHeight: 60
+    implicitWidth: 60
+    colBackground: Appearance.colors.colLayer2
+    buttonRadius: Appearance.rounding.small
+
+    Rectangle {
+        anchors {
+            top: parent.top
+            left: parent.left
+            topMargin: 4
+            leftMargin: 4
+        }
+        color: Appearance.colors.colLayer2
+        radius: Appearance.rounding.full
+        implicitWidth: Math.max(20, elementNumber.implicitWidth)
+        implicitHeight: Math.max(20, elementNumber.implicitHeight)
+        width: height
+
+        StyledText {
+            id: elementNumber
+            anchors.centerIn: parent
+            color: Appearance.colors.colOnLayer2
+            text: root.element.number
+            font.pixelSize: Appearance.font.pixelSize.smallest
+        }
+    }
+
+    StyledText {
+        id: elementSymbol
+        anchors.centerIn: parent
+        color: Appearance.colors.colSecondary
+        font.pixelSize: Appearance.font.pixelSize.huge
+        text: root.element.symbol
+    }
+
+    StyledText {
+        id: elementName
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 4
+        }
+        font.pixelSize: Appearance.font.pixelSize.smallest
+        color: Appearance.colors.colOnLayer2
+        text: root.element.name
+    }
+}

configs/quickshell/modules/cheatsheet/periodic_table.js

@@ -0,0 +1,196 @@
+// List of rows
+const elements = [
+    [
+        { name: 'Hydrogen', symbol: 'H', number: 1, weight: 1.01, type: 'nonmetal' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: 'Helium', symbol: 'He', number: 2, weight: 4.00, type: 'noblegas' },
+    ],
+    [
+        { name: 'Lithium', symbol: 'Li', number: 3, weight: 6.94, type: 'metal' },
+        { name: 'Beryllium', symbol: 'Be', number: 4, weight: 9.01, type: 'metal' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: 'Boron', symbol: 'B', number: 5, weight: 10.81, type: 'nonmetal' },
+        { name: 'Carbon', symbol: 'C', number: 6, weight: 12.01, type: 'nonmetal' },
+        { name: 'Nitrogen', symbol: 'N', number: 7, weight: 14.01, type: 'nonmetal' },
+        { name: 'Oxygen', symbol: 'O', number: 8, weight: 16, type: 'nonmetal' },
+        { name: 'Fluorine', symbol: 'F', number: 9, weight: 19, type: 'nonmetal' },
+        { name: 'Neon', symbol: 'Ne', number: 10, weight: 20.18, type: 'noblegas' },
+
+
+    ],
+    [
+        { name: 'Sodium', symbol: 'Na', number: 11, weight: 22.99, type: 'metal' },
+        { name: 'Magnesium', symbol: 'Mg', number: 12, weight: 24.31, type: 'metal' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: 'Aluminum', symbol: 'Al', number: 13, weight: 26.98, type: 'metal' },
+        { name: 'Silicon', symbol: 'Si', number: 14, weight: 28.09, type: 'nonmetal' },
+        { name: 'Phosphorus', symbol: 'P', number: 15, weight: 30.97, type: 'nonmetal' },
+        { name: 'Sulfur', symbol: 'S', number: 16, weight: 32.07, type: 'nonmetal' },
+        { name: 'Chlorine', symbol: 'Cl', number: 17, weight: 35.45, type: 'nonmetal' },
+        { name: 'Argon', symbol: 'Ar', number: 18, weight: 39.95, type: 'noblegas' },
+    ],
+    [
+        { name: 'Potassium', symbol: 'K', number: 19, weight: 39.098, type: 'metal' },
+        { name: 'Calcium', symbol: 'Ca', number: 20, weight: 40.078, type: 'metal' },
+        { name: 'Scandium', symbol: 'Sc', number: 21, weight: 44.956, type: 'metal' },
+        { name: 'Titanium', symbol: 'Ti', number: 22, weight: 47.87, type: 'metal' },
+        { name: 'Vanadium', symbol: 'V', number: 23, weight: 50.94, type: 'metal' },
+        { name: 'Chromium', symbol: 'Cr', number: 24, weight: 52, type: 'metal'/*, icon: 'chromium-browser'*/ },
+        { name: 'Manganese', symbol: 'Mn', number: 25, weight: 54.94, type: 'metal' },
+        { name: 'Iron', symbol: 'Fe', number: 26, weight: 55.85, type: 'metal' },
+        { name: 'Cobalt', symbol: 'Co', number: 27, weight: 58.93, type: 'metal' },
+        { name: 'Nickel', symbol: 'Ni', number: 28, weight: 58.69, type: 'metal' },
+        { name: 'Copper', symbol: 'Cu', number: 29, weight: 63.55, type: 'metal' },
+        { name: 'Zinc', symbol: 'Zn', number: 30, weight: 65.38, type: 'metal' },
+        { name: 'Gallium', symbol: 'Ga', number: 31, weight: 69.72, type: 'metal' },
+        { name: 'Germanium', symbol: 'Ge', number: 32, weight: 72.63, type: 'metal' },
+        { name: 'Arsenic', symbol: 'As', number: 33, weight: 74.92, type: 'nonmetal' },
+        { name: 'Selenium', symbol: 'Se', number: 34, weight: 78.96, type: 'nonmetal' },
+        { name: 'Bromine', symbol: 'Br', number: 35, weight: 79.904, type: 'nonmetal' },
+        { name: 'Krypton', symbol: 'Kr', number: 36, weight: 83.8, type: 'noblegas' },
+    ],
+    [
+        { name: 'Rubidium', symbol: 'Rb', number: 37, weight: 85.47, type: 'metal' },
+        { name: 'Strontium', symbol: 'Sr', number: 38, weight: 87.62, type: 'metal' },
+        { name: 'Yttrium', symbol: 'Y', number: 39, weight: 88.91, type: 'metal' },
+        { name: 'Zirconium', symbol: 'Zr', number: 40, weight: 91.22, type: 'metal' },
+        { name: 'Niobium', symbol: 'Nb', number: 41, weight: 92.91, type: 'metal' },
+        { name: 'Molybdenum', symbol: 'Mo', number: 42, weight: 95.94, type: 'metal' },
+        { name: 'Technetium', symbol: 'Tc', number: 43, weight: 98, type: 'metal' },
+        { name: 'Ruthenium', symbol: 'Ru', number: 44, weight: 101.07, type: 'metal' },
+        { name: 'Rhodium', symbol: 'Rh', number: 45, weight: 102.91, type: 'metal' },
+        { name: 'Palladium', symbol: 'Pd', number: 46, weight: 106.42, type: 'metal' },
+        { name: 'Silver', symbol: 'Ag', number: 47, weight: 107.87, type: 'metal' },
+        { name: 'Cadmium', symbol: 'Cd', number: 48, weight: 112.41, type: 'metal' },
+        { name: 'Indium', symbol: 'In', number: 49, weight: 114.82, type: 'metal' },
+        { name: 'Tin', symbol: 'Sn', number: 50, weight: 118.71, type: 'metal' },
+        { name: 'Antimony', symbol: 'Sb', number: 51, weight: 121.76, type: 'metal' },
+        { name: 'Tellurium', symbol: 'Te', number: 52, weight: 127.6, type: 'nonmetal' },
+        { name: 'Iodine', symbol: 'I', number: 53, weight: 126.9, type: 'nonmetal' },
+        { name: 'Xenon', symbol: 'Xe', number: 54, weight: 131.29, type: 'noblegas' },
+    ],
+    [
+        { name: 'Cesium', symbol: 'Cs', number: 55, weight: 132.91, type: 'metal' },
+        { name: 'Barium', symbol: 'Ba', number: 56, weight: 137.33, type: 'metal' },
+        { name: 'Lanthanum', symbol: 'La', number: 57, weight: 138.91, type: 'lanthanum' },
+        { name: 'Hafnium', symbol: 'Hf', number: 72, weight: 178.49, type: 'metal' },
+        { name: 'Tantalum', symbol: 'Ta', number: 73, weight: 180.95, type: 'metal' },
+        { name: 'Tungsten', symbol: 'W', number: 74, weight: 183.84, type: 'metal' },
+        { name: 'Rhenium', symbol: 'Re', number: 75, weight: 186.21, type: 'metal' },
+        { name: 'Osmium', symbol: 'Os', number: 76, weight: 190.23, type: 'metal' },
+        { name: 'Iridium', symbol: 'Ir', number: 77, weight: 192.22, type: 'metal' },
+        { name: 'Platinum', symbol: 'Pt', number: 78, weight: 195.09, type: 'metal' },
+        { name: 'Gold', symbol: 'Au', number: 79, weight: 196.97, type: 'metal' },
+        { name: 'Mercury', symbol: 'Hg', number: 80, weight: 200.59, type: 'metal' },
+        { name: 'Thallium', symbol: 'Tl', number: 81, weight: 204.38, type: 'metal' },
+        { name: 'Lead', symbol: 'Pb', number: 82, weight: 207.2, type: 'metal' },
+        { name: 'Bismuth', symbol: 'Bi', number: 83, weight: 208.98, type: 'metal' },
+        { name: 'Polonium', symbol: 'Po', number: 84, weight: 209, type: 'metal' },
+        { name: 'Astatine', symbol: 'At', number: 85, weight: 210, type: 'nonmetal' },
+        { name: 'Radon', symbol: 'Rn', number: 86, weight: 222, type: 'noblegas' },
+    ],
+    [
+        { name: 'Francium', symbol: 'Fr', number: 87, weight: 223, type: 'metal' },
+        { name: 'Radium', symbol: 'Ra', number: 88, weight: 226, type: 'metal' },
+        { name: 'Actinium', symbol: 'Ac', number: 89, weight: 227, type: 'actinium' },
+        { name: 'Rutherfordium', symbol: 'Rf', number: 104, weight: 267, type: 'metal' },
+        { name: 'Dubnium', symbol: 'Db', number: 105, weight: 268, type: 'metal' },
+        { name: 'Seaborgium', symbol: 'Sg', number: 106, weight: 271, type: 'metal' },
+        { name: 'Bohrium', symbol: 'Bh', number: 107, weight: 272, type: 'metal' },
+        { name: 'Hassium', symbol: 'Hs', number: 108, weight: 277, type: 'metal' },
+        { name: 'Meitnerium', symbol: 'Mt', number: 109, weight: 278, type: 'metal' },
+        { name: 'Darmstadtium', symbol: 'Ds', number: 110, weight: 281, type: 'metal' },
+        { name: 'Roentgenium', symbol: 'Rg', number: 111, weight: 280, type: 'metal' },
+        { name: 'Copernicium', symbol: 'Cn', number: 112, weight: 285, type: 'metal' },
+        { name: 'Nihonium', symbol: 'Nh', number: 113, weight: 286, type: 'metal' },
+        { name: 'Flerovium', symbol: 'Fl', number: 114, weight: 289, type: 'metal' },
+        { name: 'Moscovium', symbol: 'Mc', number: 115, weight: 290, type: 'metal' },
+        { name: 'Livermorium', symbol: 'Lv', number: 116, weight: 293, type: 'metal' },
+        { name: 'Tennessine', symbol: 'Ts', number: 117, weight: 294, type: 'metal' },
+        { name: 'Oganesson', symbol: 'Og', number: 118, weight: 294, type: 'noblegas' },
+    ],
+]
+
+const series = [
+    [
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: 'Cerium', symbol: 'Ce', number: 58, weight: 140.12, type: 'lanthanum' },
+        { name: 'Praseodymium', symbol: 'Pr', number: 59, weight: 140.91, type: 'lanthanum' },
+        { name: 'Neodymium', symbol: 'Nd', number: 60, weight: 144.24, type: 'lanthanum' },
+        { name: 'Promethium', symbol: 'Pm', number: 61, weight: 145, type: 'lanthanum' },
+        { name: 'Samarium', symbol: 'Sm', number: 62, weight: 150.36, type: 'lanthanum' },
+        { name: 'Europium', symbol: 'Eu', number: 63, weight: 151.96, type: 'lanthanum' },
+        { name: 'Gadolinium', symbol: 'Gd', number: 64, weight: 157.25, type: 'lanthanum' },
+        { name: 'Terbium', symbol: 'Tb', number: 65, weight: 158.93, type: 'lanthanum' },
+        { name: 'Dysprosium', symbol: 'Dy', number: 66, weight: 162.5, type: 'lanthanum' },
+        { name: 'Holmium', symbol: 'Ho', number: 67, weight: 164.93, type: 'lanthanum' },
+        { name: 'Erbium', symbol: 'Er', number: 68, weight: 167.26, type: 'lanthanum' },
+        { name: 'Thulium', symbol: 'Tm', number: 69, weight: 168.93, type: 'lanthanum' },
+        { name: 'Ytterbium', symbol: 'Yb', number: 70, weight: 173.04, type: 'lanthanum' },
+        { name: 'Lutetium', symbol: 'Lu', number: 71, weight: 174.97, type: 'lanthanum' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+    ],
+    [
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+        { name: 'Thorium', symbol: 'Th', number: 90, weight: 232.04, type: 'actinium' },
+        { name: 'Protactinium', symbol: 'Pa', number: 91, weight: 231.04, type: 'actinium' },
+        { name: 'Uranium', symbol: 'U', number: 92, weight: 238.03, type: 'actinium' },
+        { name: 'Neptunium', symbol: 'Np', number: 93, weight: 237, type: 'actinium' },
+        { name: 'Plutonium', symbol: 'Pu', number: 94, weight: 244, type: 'actinium' },
+        { name: 'Americium', symbol: 'Am', number: 95, weight: 243, type: 'actinium' },
+        { name: 'Curium', symbol: 'Cm', number: 96, weight: 247, type: 'actinium' },
+        { name: 'Berkelium', symbol: 'Bk', number: 97, weight: 247, type: 'actinium' },
+        { name: 'Californium', symbol: 'Cf', number: 98, weight: 251, type: 'actinium' },
+        { name: 'Einsteinium', symbol: 'Es', number: 99, weight: 252, type: 'actinium' },
+        { name: 'Fermium', symbol: 'Fm', number: 100, weight: 257, type: 'actinium' },
+        { name: 'Mendelevium', symbol: 'Md', number: 101, weight: 258, type: 'actinium' },
+        { name: 'Nobelium', symbol: 'No', number: 102, weight: 259, type: 'actinium' },
+        { name: 'Lawrencium', symbol: 'Lr', number: 103, weight: 262, type: 'actinium' },
+        { name: '', symbol: '', number: -1, weight: 0, type: 'empty' },
+    ],
+];
+
+const niceTypes = {
+    'metal': "Metal",
+    'nonmetal': "Nonmetal",
+    'noblegas': "Noble gas",
+    'lanthanum': "Lanthanum",
+    'actinium': "Actinium"
+}

configs/quickshell/modules/common/Appearance.qml

@@ -0,0 +1,316 @@
+import QtQuick
+import Quickshell
+import qs.modules.common.functions
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+Singleton {
+    id: root
+    property QtObject m3colors
+    property QtObject animation
+    property QtObject animationCurves
+    property QtObject colors
+    property QtObject rounding
+    property QtObject font
+    property QtObject sizes
+    property string syntaxHighlightingTheme
+
+    // Extremely conservative transparency values for consistency and readability
+    property real transparency: Config.options?.appearance.transparency ? (m3colors.darkmode ? 0.1 : 0.07) : 0
+    property real contentTransparency: Config.options?.appearance.transparency ? (m3colors.darkmode ? 0.55 : 0.55) : 0
+
+    m3colors: QtObject {
+        property bool darkmode: false
+        property bool transparent: false
+        property color m3primary_paletteKeyColor: "#91689E"
+        property color m3secondary_paletteKeyColor: "#837186"
+        property color m3tertiary_paletteKeyColor: "#9D6A67"
+        property color m3neutral_paletteKeyColor: "#7C757B"
+        property color m3neutral_variant_paletteKeyColor: "#7D747D"
+        property color m3background: "#161217"
+        property color m3onBackground: "#EAE0E7"
+        property color m3surface: "#161217"
+        property color m3surfaceDim: "#161217"
+        property color m3surfaceBright: "#3D373D"
+        property color m3surfaceContainerLowest: "#110D12"
+        property color m3surfaceContainerLow: "#1F1A1F"
+        property color m3surfaceContainer: "#231E23"
+        property color m3surfaceContainerHigh: "#2D282E"
+        property color m3surfaceContainerHighest: "#383339"
+        property color m3onSurface: "#EAE0E7"
+        property color m3surfaceVariant: "#4C444D"
+        property color m3onSurfaceVariant: "#CFC3CD"
+        property color m3inverseSurface: "#EAE0E7"
+        property color m3inverseOnSurface: "#342F34"
+        property color m3outline: "#988E97"
+        property color m3outlineVariant: "#4C444D"
+        property color m3shadow: "#000000"
+        property color m3scrim: "#000000"
+        property color m3surfaceTint: "#E5B6F2"
+        property color m3primary: "#E5B6F2"
+        property color m3onPrimary: "#452152"
+        property color m3primaryContainer: "#5D386A"
+        property color m3onPrimaryContainer: "#F9D8FF"
+        property color m3inversePrimary: "#775084"
+        property color m3secondary: "#D5C0D7"
+        property color m3onSecondary: "#392C3D"
+        property color m3secondaryContainer: "#534457"
+        property color m3onSecondaryContainer: "#F2DCF3"
+        property color m3tertiary: "#F5B7B3"
+        property color m3onTertiary: "#4C2523"
+        property color m3tertiaryContainer: "#BA837F"
+        property color m3onTertiaryContainer: "#000000"
+        property color m3error: "#FFB4AB"
+        property color m3onError: "#690005"
+        property color m3errorContainer: "#93000A"
+        property color m3onErrorContainer: "#FFDAD6"
+        property color m3primaryFixed: "#F9D8FF"
+        property color m3primaryFixedDim: "#E5B6F2"
+        property color m3onPrimaryFixed: "#2E0A3C"
+        property color m3onPrimaryFixedVariant: "#5D386A"
+        property color m3secondaryFixed: "#F2DCF3"
+        property color m3secondaryFixedDim: "#D5C0D7"
+        property color m3onSecondaryFixed: "#241727"
+        property color m3onSecondaryFixedVariant: "#514254"
+        property color m3tertiaryFixed: "#FFDAD7"
+        property color m3tertiaryFixedDim: "#F5B7B3"
+        property color m3onTertiaryFixed: "#331110"
+        property color m3onTertiaryFixedVariant: "#663B39"
+        property color m3success: "#B5CCBA"
+        property color m3onSuccess: "#213528"
+        property color m3successContainer: "#374B3E"
+        property color m3onSuccessContainer: "#D1E9D6"
+        property color term0: "#EDE4E4"
+        property color term1: "#B52755"
+        property color term2: "#A97363"
+        property color term3: "#AF535D"
+        property color term4: "#A67F7C"
+        property color term5: "#B2416B"
+        property color term6: "#8D76AD"
+        property color term7: "#272022"
+        property color term8: "#0E0D0D"
+        property color term9: "#B52755"
+        property color term10: "#A97363"
+        property color term11: "#AF535D"
+        property color term12: "#A67F7C"
+        property color term13: "#B2416B"
+        property color term14: "#8D76AD"
+        property color term15: "#221A1A"
+    }
+
+    colors: QtObject {
+        property color colSubtext: m3colors.m3outline
+        property color colLayer0: ColorUtils.mix(ColorUtils.transparentize(m3colors.m3background, root.transparency), m3colors.m3primary, Config.options.appearance.extraBackgroundTint ? 0.99 : 1)
+        property color colOnLayer0: m3colors.m3onBackground
+        property color colLayer0Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer0, colOnLayer0, 0.9, root.contentTransparency))
+        property color colLayer0Active: ColorUtils.transparentize(ColorUtils.mix(colLayer0, colOnLayer0, 0.8, root.contentTransparency))
+        property color colLayer0Border: ColorUtils.mix(root.m3colors.m3outlineVariant, colLayer0, 0.4)
+        property color colLayer1: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerLow, m3colors.m3background, 0.8), root.contentTransparency);
+        property color colOnLayer1: m3colors.m3onSurfaceVariant;
+        property color colOnLayer1Inactive: ColorUtils.mix(colOnLayer1, colLayer1, 0.45);
+        property color colLayer2: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainer, m3colors.m3surfaceContainerHigh, 0.1), root.contentTransparency)
+        property color colOnLayer2: m3colors.m3onSurface;
+        property color colOnLayer2Disabled: ColorUtils.mix(colOnLayer2, m3colors.m3background, 0.4);
+        property color colLayer3: ColorUtils.transparentize(ColorUtils.mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96), root.contentTransparency)
+        property color colOnLayer3: m3colors.m3onSurface;
+        property color colLayer1Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer1, colOnLayer1, 0.92), root.contentTransparency)
+        property color colLayer1Active: ColorUtils.transparentize(ColorUtils.mix(colLayer1, colOnLayer1, 0.85), root.contentTransparency);
+        property color colLayer2Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer2, colOnLayer2, 0.90), root.contentTransparency)
+        property color colLayer2Active: ColorUtils.transparentize(ColorUtils.mix(colLayer2, colOnLayer2, 0.80), root.contentTransparency);
+        property color colLayer2Disabled: ColorUtils.transparentize(ColorUtils.mix(colLayer2, m3colors.m3background, 0.8), root.contentTransparency);
+        property color colLayer3Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer3, colOnLayer3, 0.90), root.contentTransparency)
+        property color colLayer3Active: ColorUtils.transparentize(ColorUtils.mix(colLayer3, colOnLayer3, 0.80), root.contentTransparency);
+        property color colPrimary: m3colors.m3primary
+        property color colOnPrimary: m3colors.m3onPrimary
+        property color colPrimaryHover: ColorUtils.mix(colors.colPrimary, colLayer1Hover, 0.87)
+        property color colPrimaryActive: ColorUtils.mix(colors.colPrimary, colLayer1Active, 0.7)
+        property color colPrimaryContainer: m3colors.m3primaryContainer
+        property color colPrimaryContainerHover: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Hover, 0.7)
+        property color colPrimaryContainerActive: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Active, 0.6)
+        property color colOnPrimaryContainer: m3colors.m3onPrimaryContainer
+        property color colSecondary: m3colors.m3secondary
+        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, 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)
+        property color colSurfaceContainer: ColorUtils.transparentize(m3colors.m3surfaceContainer, root.contentTransparency)
+        property color colSurfaceContainerHigh: ColorUtils.transparentize(m3colors.m3surfaceContainerHigh, root.contentTransparency)
+        property color colSurfaceContainerHighest: ColorUtils.transparentize(m3colors.m3surfaceContainerHighest, root.contentTransparency)
+        property color colSurfaceContainerHighestHover: ColorUtils.mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.95)
+        property color colSurfaceContainerHighestActive: ColorUtils.mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.85)
+        property color colTooltip: m3colors.m3inverseSurface
+        property color colOnTooltip: m3colors.m3inverseOnSurface
+        property color colScrim: ColorUtils.transparentize(m3colors.m3scrim, 0.5)
+        property color colShadow: ColorUtils.transparentize(m3colors.m3shadow, 0.7)
+        property color colOutlineVariant: m3colors.m3outlineVariant
+    }
+
+    rounding: QtObject {
+        property int unsharpen: 2
+        property int unsharpenmore: 6
+        property int verysmall: 8
+        property int small: 12
+        property int normal: 17
+        property int large: 23
+        property int verylarge: 30
+        property int full: 9999
+        property int screenRounding: large
+        property int windowRounding: 18
+    }
+
+    font: QtObject {
+        property QtObject family: QtObject {
+            property string main: "Rubik"
+            property string title: "Gabarito"
+            property string iconMaterial: "Material Symbols Rounded"
+            property string iconNerd: "SpaceMono NF"
+            property string monospace: "JetBrains Mono NF"
+            property string reading: "Readex Pro"
+            property string expressive: "Space Grotesk"
+        }
+        property QtObject pixelSize: QtObject {
+            property int smallest: 10
+            property int smaller: 12
+            property int small: 15
+            property int normal: 16
+            property int large: 17
+            property int larger: 19
+            property int huge: 22
+            property int hugeass: 23
+            property int title: huge
+        }
+    }
+
+    animationCurves: QtObject {
+        readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.90, 1, 1] // Default, 350ms
+        readonly property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1.00, 1, 1] // Default, 500ms
+        readonly property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1] // Default, 650ms
+        readonly property list<real> expressiveEffects: [0.34, 0.80, 0.34, 1.00, 1, 1] // Default, 200ms
+        readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
+        readonly property list<real> emphasizedFirstHalf: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82]
+        readonly property list<real> emphasizedLastHalf: [5 / 24, 0.82, 0.25, 1, 1, 1]
+        readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
+        readonly property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
+        readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
+        readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
+        readonly property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
+        readonly property real expressiveFastSpatialDuration: 350
+        readonly property real expressiveDefaultSpatialDuration: 500
+        readonly property real expressiveSlowSpatialDuration: 650
+        readonly property real expressiveEffectsDuration: 200
+    }
+
+    animation: QtObject {
+        property QtObject elementMove: QtObject {
+            property int duration: animationCurves.expressiveDefaultSpatialDuration
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.expressiveDefaultSpatial
+            property int velocity: 650
+            property Component numberAnimation: Component {
+                NumberAnimation {
+                    duration: root.animation.elementMove.duration
+                    easing.type: root.animation.elementMove.type
+                    easing.bezierCurve: root.animation.elementMove.bezierCurve
+                }
+            }
+            property Component colorAnimation: Component {
+                ColorAnimation {
+                    duration: root.animation.elementMove.duration
+                    easing.type: root.animation.elementMove.type
+                    easing.bezierCurve: root.animation.elementMove.bezierCurve
+                }
+            }
+        }
+        property QtObject elementMoveEnter: QtObject {
+            property int duration: 400
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.emphasizedDecel
+            property int velocity: 650
+            property Component numberAnimation: Component {
+                NumberAnimation {
+                    duration: root.animation.elementMoveEnter.duration
+                    easing.type: root.animation.elementMoveEnter.type
+                    easing.bezierCurve: root.animation.elementMoveEnter.bezierCurve
+                }
+            }
+        }
+        property QtObject elementMoveExit: QtObject {
+            property int duration: 200
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.emphasizedAccel
+            property int velocity: 650
+            property Component numberAnimation: Component {
+                NumberAnimation {
+                    duration: root.animation.elementMoveExit.duration
+                    easing.type: root.animation.elementMoveExit.type
+                    easing.bezierCurve: root.animation.elementMoveExit.bezierCurve
+                }
+            }
+        }
+        property QtObject elementMoveFast: QtObject {
+            property int duration: animationCurves.expressiveEffectsDuration
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.expressiveEffects
+            property int velocity: 850
+            property Component colorAnimation: Component { ColorAnimation {
+                duration: root.animation.elementMoveFast.duration
+                easing.type: root.animation.elementMoveFast.type
+                easing.bezierCurve: root.animation.elementMoveFast.bezierCurve
+            }}
+            property Component numberAnimation: Component { NumberAnimation {
+                    duration: root.animation.elementMoveFast.duration
+                    easing.type: root.animation.elementMoveFast.type
+                    easing.bezierCurve: root.animation.elementMoveFast.bezierCurve
+            }}
+        }
+
+        property QtObject clickBounce: QtObject {
+            property int duration: 200
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.expressiveFastSpatial
+            property int velocity: 850
+            property Component numberAnimation: Component { NumberAnimation {
+                    duration: root.animation.clickBounce.duration
+                    easing.type: root.animation.clickBounce.type
+                    easing.bezierCurve: root.animation.clickBounce.bezierCurve
+            }}
+        }
+        property QtObject scroll: QtObject {
+            property int duration: 400
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.standardDecel
+        }
+        property QtObject menuDecel: QtObject {
+            property int duration: 350
+            property int type: Easing.OutExpo
+        }
+    }
+
+    sizes: QtObject {
+        property real baseBarHeight: 40
+        property real barHeight: Config.options.bar.cornerStyle === 1 ? 
+            (baseBarHeight + Appearance.sizes.hyprlandGapsOut * 2) : baseBarHeight
+        property real barCenterSideModuleWidth: Config.options?.bar.verbose ? 360 : 140
+        property real barCenterSideModuleWidthShortened: 280
+        property real barCenterSideModuleWidthHellaShortened: 190
+        property real barShortenScreenWidthThreshold: 1200 // Shorten if screen width is at most this value
+        property real barHellaShortenScreenWidthThreshold: 1000 // Shorten even more...
+        property real sidebarWidth: 460
+        property real sidebarWidthExtended: 750
+        property real osdWidth: 200
+        property real mediaControlsWidth: 440
+        property real mediaControlsHeight: 160
+        property real notificationPopupWidth: 410
+        property real searchWidthCollapsed: 260
+        property real searchWidth: 450
+        property real hyprlandGapsOut: 5
+        property real elevationMargin: 10
+        property real fabShadowRadius: 5
+        property real fabHoveredShadowRadius: 7
+    }
+
+    syntaxHighlightingTheme: Appearance.m3colors.darkmode ? "Monokai" : "ayu Light"
+}

configs/quickshell/modules/common/Config.qml

@@ -0,0 +1,272 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+    property string filePath: Directories.shellConfigPath
+    property alias options: configOptionsJsonAdapter
+    property bool ready: false
+
+    function setNestedValue(nestedKey, value) {
+        let keys = nestedKey.split(".");
+        let obj = root.options;
+        let parents = [obj];
+
+        // Traverse and collect parent objects
+        for (let i = 0; i < keys.length - 1; ++i) {
+            if (!obj[keys[i]] || typeof obj[keys[i]] !== "object") {
+                obj[keys[i]] = {};
+            }
+            obj = obj[keys[i]];
+            parents.push(obj);
+        }
+
+        // Convert value to correct type using JSON.parse when safe
+        let convertedValue = value;
+        if (typeof value === "string") {
+            let trimmed = value.trim();
+            if (trimmed === "true" || trimmed === "false" || !isNaN(Number(trimmed))) {
+                try {
+                    convertedValue = JSON.parse(trimmed);
+                } catch (e) {
+                    convertedValue = value;
+                }
+            }
+        }
+
+        obj[keys[keys.length - 1]] = convertedValue;
+    }
+
+    FileView {
+        path: root.filePath
+        watchChanges: true
+        onFileChanged: reload()
+        onAdapterUpdated: writeAdapter()
+        onLoaded: root.ready = true
+        onLoadFailed: error => {
+            if (error == FileViewError.FileNotFound) {
+                writeAdapter();
+            }
+        }
+
+        JsonAdapter {
+            id: configOptionsJsonAdapter
+            property JsonObject policies: JsonObject {
+                property int ai: 1 // 0: No | 1: Yes | 2: Local
+                property int weeb: 1 // 0: No | 1: Open | 2: Closet
+            }
+
+            property JsonObject ai: JsonObject {
+                property string systemPrompt: "## Style\n- Use casual tone, don't be formal! Make sure you answer precisely without hallucination and prefer bullet points over walls of text. You can have a friendly greeting at the beginning of the conversation, but don't repeat the user's question\n\n## Context (ignore when irrelevant)\n- You are a helpful and inspiring sidebar assistant on a {DISTRO} Linux system\n- Desktop environment: {DE}\n- Current date & time: {DATETIME}\n- Focused app: {WINDOWCLASS}\n\n## Presentation\n- Use Markdown features in your response: \n  - **Bold** text to **highlight keywords** in your response\n  - **Split long information into small sections** with h2 headers and a relevant emoji at the start of it (for example `## 🐧 Linux`). Bullet points are preferred over long paragraphs, unless you're offering writing support or instructed otherwise by the user.\n- Asked to compare different options? You should firstly use a table to compare the main aspects, then elaborate or include relevant comments from online forums *after* the table. Make sure to provide a final recommendation for the user's use case!\n- Use LaTeX formatting for mathematical and scientific notations whenever appropriate. Enclose all LaTeX '$$' delimiters. NEVER generate LaTeX code in a latex block unless the user explicitly asks for it. DO NOT use LaTeX for regular documents (resumes, letters, essays, CVs, etc.).\n"
+                property string tool: "functions" // search, functions, or none
+                property list<var> extraModels: [
+                    {
+                        "api_format": "openai", // Most of the time you want "openai". Use "gemini" for Google's models
+                        "description": "This is a custom model. Edit the config to add more! | Anyway, this is DeepSeek R1 Distill LLaMA 70B",
+                        "endpoint": "https://openrouter.ai/api/v1/chat/completions",
+                        "homepage": "https://openrouter.ai/deepseek/deepseek-r1-distill-llama-70b:free", // Not mandatory
+                        "icon": "spark-symbolic", // Not mandatory
+                        "key_get_link": "https://openrouter.ai/settings/keys", // Not mandatory
+                        "key_id": "openrouter",
+                        "model": "deepseek/deepseek-r1-distill-llama-70b:free",
+                        "name": "Custom: DS R1 Dstl. LLaMA 70B",
+                        "requires_key": true
+                    }
+                ]
+            }
+
+            property JsonObject appearance: JsonObject {
+                property bool extraBackgroundTint: true
+                property int fakeScreenRounding: 2 // 0: None | 1: Always | 2: When not fullscreen
+                property bool transparency: false
+                property JsonObject wallpaperTheming: JsonObject {
+                    property bool enableAppsAndShell: true
+                    property bool enableQtApps: true
+                    property bool enableTerminal: true
+                }
+                property JsonObject palette: JsonObject {
+                    property string type: "auto" // Allowed: auto, scheme-content, scheme-expressive, scheme-fidelity, scheme-fruit-salad, scheme-monochrome, scheme-neutral, scheme-rainbow, scheme-tonal-spot
+                }
+            }
+
+            property JsonObject audio: JsonObject {
+                // Values in %
+                property JsonObject protection: JsonObject {
+                    // Prevent sudden bangs
+                    property bool enable: true
+                    property real maxAllowedIncrease: 10
+                    property real maxAllowed: 90 // Realistically should already provide some protection when it's 99...
+                }
+            }
+
+            property JsonObject apps: JsonObject {
+                property string bluetooth: "kcmshell6-bluetooth"
+                property string network: "plasmawindowed-network"
+                property string networkEthernet: "kcmshell6-network"
+                property string taskManager: "plasma-systemmonitor --page-name Processes"
+                property string terminal: "kitty -1" // This is only for shell actions
+            }
+
+            property JsonObject background: JsonObject {
+                property bool fixedClockPosition: false
+                property real clockX: -500
+                property real clockY: -500
+                property string wallpaperPath: ""
+                property string thumbnailPath: ""
+                property JsonObject parallax: JsonObject {
+                    property bool enableWorkspace: true
+                    property real workspaceZoom: 1.07 // Relative to your screen, not wallpaper size
+                    property bool enableSidebar: true
+                }
+            }
+
+            property JsonObject bar: JsonObject {
+                property bool bottom: false // Instead of top
+                property int cornerStyle: 0 // 0: Hug | 1: Float | 2: Plain rectangle
+                property bool borderless: false // true for no grouping of items
+                property string topLeftIcon: "spark" // Options: distro, spark
+                property bool showBackground: true
+                property bool verbose: true
+                property JsonObject resources: JsonObject {
+                    property bool alwaysShowSwap: true
+                    property bool alwaysShowCpu: false
+                }
+                property list<string> screenList: [] // List of names, like "eDP-1", find out with 'hyprctl monitors' command
+                property JsonObject utilButtons: JsonObject {
+                    property bool showScreenSnip: true
+                    property bool showColorPicker: false
+                    property bool showMicToggle: false
+                    property bool showKeyboardToggle: true
+                    property bool showDarkModeToggle: true
+                    property bool showPerformanceProfileToggle: false
+                }
+                property JsonObject tray: JsonObject {
+                    property bool monochromeIcons: true
+                }
+                property JsonObject workspaces: JsonObject {
+                    property bool monochromeIcons: true
+                    property int shown: 10
+                    property bool showAppIcons: true
+                    property bool alwaysShowNumbers: false
+                    property int showNumberDelay: 300 // milliseconds
+                }
+                property JsonObject weather: JsonObject {
+                    property bool enable: false
+                    property bool enableGPS: true // gps based location
+                    property string city: "" // When 'enableGPS' is false
+                    property bool useUSCS: false // Instead of metric (SI) units
+                    property int fetchInterval: 10 // minutes
+                }
+            }
+
+            property JsonObject battery: JsonObject {
+                property int low: 20
+                property int critical: 5
+                property bool automaticSuspend: true
+                property int suspend: 3
+            }
+
+            property JsonObject dock: JsonObject {
+                property bool enable: false
+                property bool monochromeIcons: true
+                property real height: 60
+                property real hoverRegionHeight: 2
+                property bool pinnedOnStartup: false
+                property bool hoverToReveal: true // When false, only reveals on empty workspace
+                property list<string> pinnedApps: [ // IDs of pinned entries
+                    "org.kde.dolphin", "kitty",]
+                property list<string> ignoredAppRegexes: []
+            }
+
+            property JsonObject language: JsonObject {
+                property JsonObject translator: JsonObject {
+                    property string engine: "auto" // Run `trans -list-engines` for available engines. auto should use google
+                    property string targetLanguage: "auto" // Run `trans -list-all` for available languages
+                    property string sourceLanguage: "auto"
+                }
+            }
+
+            property JsonObject light: JsonObject {
+                property JsonObject night: JsonObject {
+                    property bool automatic: true
+                    property string from: "19:00" // Format: "HH:mm", 24-hour time
+                    property string to: "06:30"   // Format: "HH:mm", 24-hour time
+                    property int colorTemperature: 5000
+                }
+            }
+
+            property JsonObject networking: JsonObject {
+                property string userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"
+            }
+
+            property JsonObject osd: JsonObject {
+                property int timeout: 1000
+            }
+
+            property JsonObject osk: JsonObject {
+                property string layout: "qwerty_full"
+                property bool pinnedOnStartup: false
+            }
+
+            property JsonObject overview: JsonObject {
+                property bool enable: true
+                property real scale: 0.18 // Relative to screen size
+                property real rows: 2
+                property real columns: 5
+            }
+
+            property JsonObject resources: JsonObject {
+                property int updateInterval: 3000
+            }
+
+            property JsonObject search: JsonObject {
+                property int nonAppResultDelay: 30 // This prevents lagging when typing
+                property string engineBaseUrl: "https://www.google.com/search?q="
+                property list<string> excludedSites: ["quora.com"]
+                property bool sloppy: false // Uses levenshtein distance based scoring instead of fuzzy sort. Very weird.
+                property JsonObject prefix: JsonObject {
+                    property string action: "/"
+                    property string clipboard: ";"
+                    property string emojis: ":"
+                }
+            }
+
+            property JsonObject sidebar: JsonObject {
+                property bool keepRightSidebarLoaded: true
+                property JsonObject translator: JsonObject {
+                    property int delay: 300 // Delay before sending request. Reduces (potential) rate limits and lag.
+                }
+                property JsonObject booru: JsonObject {
+                    property bool allowNsfw: false
+                    property string defaultProvider: "yandere"
+                    property int limit: 20
+                    property JsonObject zerochan: JsonObject {
+                        property string username: "[unset]"
+                    }
+                }
+            }
+
+            property JsonObject time: JsonObject {
+                // https://doc.qt.io/qt-6/qtime.html#toString
+                property string format: "hh:mm"
+                property string dateFormat: "ddd, dd/MM"
+            }
+
+            property JsonObject windows: JsonObject {
+                property bool showTitlebar: true // Client-side decoration for shell apps
+                property bool centerTitle: true
+            }
+
+            property JsonObject hacks: JsonObject {
+                property int arbitraryRaceConditionDelay: 20 // milliseconds
+            }
+
+            property JsonObject screenshotTool: JsonObject {
+                property bool showContentRegions: true
+            }
+        }
+    }
+}

configs/quickshell/modules/common/Directories.qml

@@ -0,0 +1,49 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import qs.modules.common.functions as Functions
+import Qt.labs.platform
+import QtQuick
+import Quickshell
+
+Singleton {
+    // XDG Dirs, with "file://"
+    readonly property string config: StandardPaths.standardLocations(StandardPaths.ConfigLocation)[0]
+    readonly property string state: StandardPaths.standardLocations(StandardPaths.StateLocation)[0]
+    readonly property string cache: StandardPaths.standardLocations(StandardPaths.CacheLocation)[0]
+    readonly property string pictures: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
+    readonly property string downloads: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
+    
+    // Other dirs used by the shell, without "file://"
+    property string assetsPath: Quickshell.shellPath("assets")
+    property string scriptPath: Quickshell.shellPath("scripts")
+    property string favicons: Functions.FileUtils.trimFileProtocol(`${cache}/media/favicons`)
+    property string coverArt: Functions.FileUtils.trimFileProtocol(`${cache}/media/coverart`)
+    property string booruPreviews: Functions.FileUtils.trimFileProtocol(`${cache}/media/boorus`)
+    property string booruDownloads: Functions.FileUtils.trimFileProtocol(pictures  + "/homework")
+    property string booruDownloadsNsfw: Functions.FileUtils.trimFileProtocol(pictures + "/homework/🌶️")
+    property string latexOutput: Functions.FileUtils.trimFileProtocol(`${cache}/media/latex`)
+    property string shellConfig: Functions.FileUtils.trimFileProtocol(`${config}/illogical-impulse`)
+    property string shellConfigName: "config.json"
+    property string shellConfigPath: `${shellConfig}/${shellConfigName}`
+    property string todoPath: Functions.FileUtils.trimFileProtocol(`${state}/user/todo.json`)
+    property string notificationsPath: Functions.FileUtils.trimFileProtocol(`${cache}/notifications/notifications.json`)
+    property string generatedMaterialThemePath: Functions.FileUtils.trimFileProtocol(`${state}/user/generated/colors.json`)
+    property string cliphistDecode: Functions.FileUtils.trimFileProtocol(`/tmp/quickshell/media/cliphist`)
+    property string screenshotTemp: "/tmp/quickshell/media/screenshot"
+    property string wallpaperSwitchScriptPath: Functions.FileUtils.trimFileProtocol(`${scriptPath}/colors/switchwall.sh`)
+    property string defaultAiPrompts: Quickshell.shellPath("defaults/ai/prompts")
+    property string userAiPrompts: FileUtils.trimFileProtocol(`${Directories.shellConfig}/ai/prompts`)
+    property string aiChats: FileUtils.trimFileProtocol(`${Directories.state}/user/ai/chats`)
+    // Cleanup on init
+    Component.onCompleted: {
+        Quickshell.execDetached(["mkdir", "-p", `${shellConfig}`])
+        Quickshell.execDetached(["mkdir", "-p", `${favicons}`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${coverArt}'; mkdir -p '${coverArt}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${booruPreviews}'; mkdir -p '${booruPreviews}'`])
+        Quickshell.execDetached(["bash", "-c", `mkdir -p '${booruDownloads}' && mkdir -p '${booruDownloadsNsfw}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${latexOutput}'; mkdir -p '${latexOutput}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${cliphistDecode}'; mkdir -p '${cliphistDecode}'`])
+        Quickshell.execDetached(["mkdir", "-p", `${aiChats}`])
+    }
+}

configs/quickshell/modules/common/Persistent.qml

@@ -0,0 +1,49 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+    property alias states: persistentStatesJsonAdapter
+    property string fileDir: Directories.state
+    property string fileName: "states.json"
+    property string filePath: `${root.fileDir}/${root.fileName}`
+
+    FileView {
+        path: root.filePath
+
+        watchChanges: true
+        onFileChanged: reload()
+        onAdapterUpdated: {
+            writeAdapter()
+        }
+        onLoadFailed: error => {
+            console.log("Failed to load persistent states file:", error);
+            if (error == FileViewError.FileNotFound) {
+                writeAdapter();
+            }
+        }
+
+        adapter: JsonAdapter {
+            id: persistentStatesJsonAdapter
+            property JsonObject ai: JsonObject {
+                property string model
+                property real temperature: 0.5
+            }
+
+            property JsonObject sidebar: JsonObject {
+                property JsonObject bottomGroup: JsonObject {
+                    property bool collapsed: false
+                    property int tab: 0
+                }
+            }
+
+            property JsonObject booru: JsonObject {
+                property bool allowNsfw: false
+                property string provider: "yandere"
+            }
+        }
+    }
+}

configs/quickshell/modules/common/functions/ColorUtils.qml

@@ -0,0 +1,114 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+    id: root
+
+    /**
+     * Returns a color with the hue of color2 and the saturation, value, and alpha of color1.
+     *
+     * @param {string} color1 - The base color (any Qt.color-compatible string).
+     * @param {string} color2 - The color to take hue from.
+     * @returns {Qt.rgba} The resulting color.
+     */
+    function colorWithHueOf(color1, color2) {
+        var c1 = Qt.color(color1);
+        var c2 = Qt.color(color2);
+
+        // Qt.color hsvHue/hsvSaturation/hsvValue/alpha return 0-1
+        var hue = c2.hsvHue;
+        var sat = c1.hsvSaturation;
+        var val = c1.hsvValue;
+        var alpha = c1.a;
+
+        return Qt.hsva(hue, sat, val, alpha);
+    }
+
+    /**
+     * Returns a color with the saturation of color2 and the hue/value/alpha of color1.
+     *
+     * @param {string} color1 - The base color (any Qt.color-compatible string).
+     * @param {string} color2 - The color to take saturation from.
+     * @returns {Qt.rgba} The resulting color.
+     */
+    function colorWithSaturationOf(color1, color2) {
+        var c1 = Qt.color(color1);
+        var c2 = Qt.color(color2);
+
+        var hue = c1.hsvHue;
+        var sat = c2.hsvSaturation;
+        var val = c1.hsvValue;
+        var alpha = c1.a;
+
+        return Qt.hsva(hue, sat, val, alpha);
+    }
+
+    /**
+     * Returns a color with the given lightness and the hue, saturation, and alpha of the input color (using HSL).
+     *
+     * @param {string} color - The base color (any Qt.color-compatible string).
+     * @param {number} lightness - The lightness value to use (0-1).
+     * @returns {Qt.rgba} The resulting color.
+     */
+    function colorWithLightness(color, lightness) {
+        var c = Qt.color(color);
+        return Qt.hsla(c.hslHue, c.hslSaturation, lightness, c.a);
+    }
+
+    /**
+     * Returns a color with the lightness of color2 and the hue, saturation, and alpha of color1 (using HSL).
+     *
+     * @param {string} color1 - The base color (any Qt.color-compatible string).
+     * @param {string} color2 - The color to take lightness from.
+     * @returns {Qt.rgba} The resulting color.
+     */
+    function colorWithLightnessOf(color1, color2) {
+        var c2 = Qt.color(color2);
+        return colorWithLightness(color1, c2.hslLightness);
+    }
+
+    /**
+     * Adapts color1 to the accent (hue and saturation) of color2 using HSL, keeping lightness and alpha from color1.
+     *
+     * @param {string} color1 - The base color (any Qt.color-compatible string).
+     * @param {string} color2 - The accent color.
+     * @returns {Qt.rgba} The resulting color.
+     */
+    function adaptToAccent(color1, color2) {
+        var c1 = Qt.color(color1);
+        var c2 = Qt.color(color2);
+
+        var hue = c2.hslHue;
+        var sat = c2.hslSaturation;
+        var light = c1.hslLightness;
+        var alpha = c1.a;
+
+        return Qt.hsla(hue, sat, light, alpha);
+    }
+
+    /**
+     * Mixes two colors by a given percentage.
+     *
+     * @param {string} color1 - The first color (any Qt.color-compatible string).
+     * @param {string} color2 - The second color.
+     * @param {number} percentage - The mix ratio (0-1). 1 = all color1, 0 = all color2.
+     * @returns {Qt.rgba} The resulting mixed color.
+     */
+    function mix(color1, color2, percentage = 0.5) {
+        var c1 = Qt.color(color1);
+        var c2 = Qt.color(color2);
+        return Qt.rgba(percentage * c1.r + (1 - percentage) * c2.r, percentage * c1.g + (1 - percentage) * c2.g, percentage * c1.b + (1 - percentage) * c2.b, percentage * c1.a + (1 - percentage) * c2.a);
+    }
+
+    /**
+     * Transparentizes a color by a given percentage.
+     *
+     * @param {string} color - The color (any Qt.color-compatible string).
+     * @param {number} percentage - The amount to transparentize (0-1).
+     * @returns {Qt.rgba} The resulting color.
+     */
+    function transparentize(color, percentage = 1) {
+        var c = Qt.color(color);
+        return Qt.rgba(c.r, c.g, c.b, c.a * (1 - percentage));
+    }
+}

configs/quickshell/modules/common/functions/FileUtils.qml

@@ -0,0 +1,41 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+    id: root
+
+    /**
+     * Trims the File protocol off the input string
+     * @param {string} str
+     * @returns {string}
+     */
+    function trimFileProtocol(str) {
+        return str.startsWith("file://") ? str.slice(7) : str;
+    }
+
+    /**
+     * Extracts the file name from a file path
+     * @param {string} str
+     * @returns {string}
+     */
+    function fileNameForPath(str) {
+        if (typeof str !== "string") return "";
+        const trimmed = trimFileProtocol(str);
+        return trimmed.split(/[\\/]/).pop();
+    }
+
+    /**
+     * Removes the file extension from a file path or name
+     * @param {string} str
+     * @returns {string}
+     */
+    function trimFileExt(str) {
+        if (typeof str !== "string") return "";
+        const trimmed = trimFileProtocol(str);
+        const lastDot = trimmed.lastIndexOf(".");
+        if (lastDot > -1 && lastDot > trimmed.lastIndexOf("/")) {
+            return trimmed.slice(0, lastDot);
+        }
+        return trimmed;
+    }
+}

configs/quickshell/modules/common/functions/Fuzzy.qml

@@ -0,0 +1,18 @@
+pragma Singleton
+import Quickshell
+import "./fuzzysort.js" as FuzzySort
+
+/**
+ * Wrapper for FuzzySort to play nicely with Quickshell's imports
+ */
+
+Singleton {
+    function go(...args) {
+        return FuzzySort.go(...args)
+    }
+
+    function prepare(...args) {
+        return FuzzySort.prepare(...args)
+    }
+}
+

configs/quickshell/modules/common/functions/Levendist.qml

@@ -0,0 +1,18 @@
+pragma Singleton
+import Quickshell
+import "./levendist.js" as Levendist
+
+/**
+ * Wrapper for levendist.js to play nicely with Quickshell's imports
+ */
+
+Singleton {
+    function computeScore(...args) {
+        return Levendist.computeScore(...args)
+    }
+
+    function computeTextMatchScore(...args) {
+        return Levendist.computeTextMatchScore(...args)
+    }
+}
+

configs/quickshell/modules/common/functions/ObjectUtils.qml

@@ -0,0 +1,98 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+    id: root
+
+    function toPlainObject(qtObj) {
+        if (qtObj === null || typeof qtObj !== "object") return qtObj;
+
+        // Handle true arrays
+        if (Array.isArray(qtObj)) {
+            return qtObj.map(item => toPlainObject(item));
+        }
+
+        // Handle array-like Qt objects (e.g., have length and numeric keys)
+        if (
+            typeof qtObj.length === "number" &&
+            qtObj.length > 0 &&
+            Object.keys(qtObj).every(
+                key => !isNaN(key) || key === "length"
+            )
+        ) {
+            let arr = [];
+            for (let i = 0; i < qtObj.length; i++) {
+                arr.push(toPlainObject(qtObj[i]));
+            }
+            return arr;
+        }
+
+        const result = ({});
+        for (let key in qtObj) {
+            if (
+                typeof qtObj[key] !== "function" &&
+                !key.startsWith("objectName") &&
+                !key.startsWith("children") &&
+                !key.startsWith("object") &&
+                !key.startsWith("parent") &&
+                !key.startsWith("metaObject") &&
+                !key.startsWith("destroyed") &&
+                !key.startsWith("reloadableId")
+            ) {
+                result[key] = toPlainObject(qtObj[key]);
+            }
+        }
+        // console.log(JSON.stringify(result))
+        return result;
+    }
+
+    function applyToQtObject(qtObj, jsonObj) {
+        // console.log("applyToQtObject", JSON.stringify(qtObj, null, 2), "<<", JSON.stringify(jsonObj, null, 2));
+        if (!qtObj || typeof jsonObj !== "object" || jsonObj === null) return;
+
+        // Detect array-like Qt objects
+        const isQtArrayLike = obj => {
+            return obj && typeof obj === "object" &&
+                typeof obj.length === "number" &&
+                obj.length > 0 &&
+                Object.keys(obj).every(key => !isNaN(key) || key === "length");
+        };
+
+        // If both are arrays or array-like, update in place or replace
+        if ((Array.isArray(qtObj) || isQtArrayLike(qtObj)) && Array.isArray(jsonObj)) {
+            qtObj.length = 0;
+            for (let i = 0; i < jsonObj.length; i++) {
+                qtObj.push(jsonObj[i]);
+            }
+            return;
+        }
+
+        // If target is array or array-like but source is not, clear
+        if ((Array.isArray(qtObj) || isQtArrayLike(qtObj)) && !Array.isArray(jsonObj)) {
+            qtObj.length = 0;
+            return;
+        }
+
+        // If source is array but target is not, assign directly if possible
+        if (!(Array.isArray(qtObj) || isQtArrayLike(qtObj)) && Array.isArray(jsonObj)) {
+            return jsonObj;
+        }
+
+        for (let key in jsonObj) {
+            if (!qtObj.hasOwnProperty(key)) continue;
+            const value = qtObj[key];
+            const jsonValue = jsonObj[key];
+            // console.log("applying to qt obj key:", value, "jsonValue:", jsonValue);
+            if ((Array.isArray(value) || isQtArrayLike(value)) && Array.isArray(jsonValue)) {
+                value.length = 0;
+                for (let i = 0; i < jsonValue.length; i++) {
+                    value.push(jsonValue[i]);
+                }
+            } else if (value && typeof value === "object" && !Array.isArray(value) && !isQtArrayLike(value)) {
+                applyToQtObject(value, jsonValue);
+            } else {
+                qtObj[key] = jsonValue;
+            }
+        }
+    }
+}

configs/quickshell/modules/common/functions/StringUtils.qml

@@ -0,0 +1,221 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+    id: root
+
+    /**
+     * Formats a string according to the args that are passed inc
+     * @param { string } str
+     * @param  {...any} args
+     * @returns
+     */
+    function format(str, ...args) {
+        return str.replace(/{(\d+)}/g, (match, index) => typeof args[index] !== 'undefined' ? args[index] : match);
+    }
+
+    /**
+     * Returns the domain of the passed in url or null
+     * @param { string } url
+     * @returns { string| null }
+     */
+    function getDomain(url) {
+        const match = url.match(/^(?:https?:\/\/)?(?:www\.)?([^\/]+)/);
+        return match ? match[1] : null;
+    }
+
+    /**
+     * Returns the base url of the passed in url or null
+     * @param { string } url
+     * @returns { string | null }
+     */
+    function getBaseUrl(url) {
+        const match = url.match(/^(https?:\/\/[^\/]+)(\/.*)?$/);
+        return match ? match[1] : null;
+    }
+
+    /**
+      * Escapes single quotes in shell commands
+      * @param { string } str
+      * @returns { string }
+      */
+    function shellSingleQuoteEscape(str) {
+        //  escape single quotes
+        return String(str)
+        // .replace(/\\/g, '\\\\')
+        .replace(/'/g, "'\\''");
+    }
+
+    /**
+     * Splits markdown blocks into three different types: text, think, and code.
+     * @param { string } markdown
+     */
+    function splitMarkdownBlocks(markdown) {
+        const regex = /```(\w+)?\n([\s\S]*?)```|<think>([\s\S]*?)<\/think>/g;
+        /**
+         * @type {{type: "text" | "think" | "code"; content: string; lang: string | undefined; completed: boolean | undefined}[]}
+         */
+        let result = [];
+        let lastIndex = 0;
+        let match;
+        while ((match = regex.exec(markdown)) !== null) {
+            if (match.index > lastIndex) {
+                const text = markdown.slice(lastIndex, match.index);
+                if (text.trim()) {
+                    result.push({
+                        type: "text",
+                        content: text
+                    });
+                }
+            }
+            if (match[0].startsWith('```')) {
+                if (match[2] && match[2].trim()) {
+                    result.push({
+                        type: "code",
+                        lang: match[1] || "",
+                        content: match[2],
+                        completed: true
+                    });
+                }
+            } else if (match[0].startsWith('<think>')) {
+                if (match[3] && match[3].trim()) {
+                    result.push({
+                        type: "think",
+                        content: match[3],
+                        completed: true
+                    });
+                }
+            }
+            lastIndex = regex.lastIndex;
+        }
+        // Handle any remaining text after the last match
+        if (lastIndex < markdown.length) {
+            const text = markdown.slice(lastIndex);
+            // Check for unfinished <think> block
+            const thinkStart = text.indexOf('<think>');
+            const codeStart = text.indexOf('```');
+            if (thinkStart !== -1 && (codeStart === -1 || thinkStart < codeStart)) {
+                const beforeThink = text.slice(0, thinkStart);
+                if (beforeThink.trim()) {
+                    result.push({
+                        type: "text",
+                        content: beforeThink
+                    });
+                }
+                const thinkContent = text.slice(thinkStart + 7);
+                if (thinkContent.trim()) {
+                    result.push({
+                        type: "think",
+                        content: thinkContent,
+                        completed: false
+                    });
+                }
+            } else if (codeStart !== -1) {
+                const beforeCode = text.slice(0, codeStart);
+                if (beforeCode.trim()) {
+                    result.push({
+                        type: "text",
+                        content: beforeCode
+                    });
+                }
+                // Try to detect language after ```
+                const codeLangMatch = text.slice(codeStart + 3).match(/^(\w+)?\n/);
+                let lang = "";
+                let codeContentStart = codeStart + 3;
+                if (codeLangMatch) {
+                    lang = codeLangMatch[1] || "";
+                    codeContentStart += codeLangMatch[0].length;
+                } else if (text[codeStart + 3] === '\n') {
+                    codeContentStart += 1;
+                }
+                const codeContent = text.slice(codeContentStart);
+                if (codeContent.trim()) {
+                    result.push({
+                        type: "code",
+                        lang,
+                        content: codeContent,
+                        completed: false
+                    });
+                }
+            } else if (text.trim()) {
+                result.push({
+                    type: "text",
+                    content: text
+                });
+            }
+        }
+        // console.log(JSON.stringify(result, null, 2));
+        return result;
+    }
+
+    /**
+     * Returns the original string with backslashes escaped
+     * @param { string } str
+     * @returns { string }
+     */
+    function escapeBackslashes(str) {
+        return str.replace(/\\/g, '\\\\');
+    }
+
+    /**
+     * Wraps words to supplied maximum length
+     * @param { string | null } str
+     * @param { number } maxLen
+     * @returns { string }
+     */
+    function wordWrap(str, maxLen) {
+        if (!str)
+            return "";
+        let words = str.split(" ");
+        let lines = [];
+        let current = "";
+        for (let i = 0; i < words.length; ++i) {
+            if ((current + (current.length > 0 ? " " : "") + words[i]).length > maxLen) {
+                if (current.length > 0)
+                    lines.push(current);
+                current = words[i];
+            } else {
+                current += (current.length > 0 ? " " : "") + words[i];
+            }
+        }
+        if (current.length > 0)
+            lines.push(current);
+        return lines.join("\n");
+    }
+
+    function cleanMusicTitle(title) {
+        if (!title)
+            return "";
+        // Brackets
+        title = title.replace(/^ *\([^)]*\) */g, " "); // Round brackets
+        title = title.replace(/^ *\[[^\]]*\] */g, " "); // Square brackets
+        title = title.replace(/^ *\{[^\}]*\} */g, " "); // Curly brackets
+        // Japenis brackets
+        title = title.replace(/^ *【[^】]*】/, ""); // Touhou
+        title = title.replace(/^ *《[^》]*》/, ""); // ??
+        title = title.replace(/^ *「[^」]*」/, ""); // OP/ED thingie
+        title = title.replace(/^ *『[^』]*』/, ""); // OP/ED thingie
+
+        return title.trim();
+    }
+
+    function friendlyTimeForSeconds(seconds) {
+        if (isNaN(seconds) || seconds < 0)
+            return "0:00";
+        seconds = Math.floor(seconds);
+        const h = Math.floor(seconds / 3600);
+        const m = Math.floor((seconds % 3600) / 60);
+        const s = seconds % 60;
+        if (h > 0) {
+            return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+        } else {
+            return `${m}:${s.toString().padStart(2, '0')}`;
+        }
+    }
+
+    function escapeHtml(str) {
+        if (typeof str !== 'string')
+            return str;
+        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+    }
+}

configs/quickshell/modules/common/functions/fuzzysort.js

@@ -0,0 +1,682 @@
+.pragma library
+
+// https://github.com/farzher/fuzzysort
+// License: MIT | Copyright (c) 2018 Stephen Kamenar
+// A copy of the license is available in the `licenses` folder of this repository
+
+var single =  (search, target) => {
+    if(!search || !target) return NULL
+
+    var preparedSearch = getPreparedSearch(search)
+    if(!isPrepared(target)) target = getPrepared(target)
+
+    var searchBitflags = preparedSearch.bitflags
+    if((searchBitflags & target._bitflags) !== searchBitflags) return NULL
+
+    return algorithm(preparedSearch, target)
+}
+
+var go = (search, targets, options) => {
+    if(!search) return options?.all ? all(targets, options) : noResults
+
+    var preparedSearch = getPreparedSearch(search)
+    var searchBitflags = preparedSearch.bitflags
+    var containsSpace  = preparedSearch.containsSpace
+
+    var threshold = denormalizeScore( options?.threshold || 0 )
+    var limit     = options?.limit || INFINITY
+
+    var resultsLen = 0; var limitedCount = 0
+    var targetsLen = targets.length
+
+    function push_result(result) {
+    if(resultsLen < limit) { q.add(result); ++resultsLen }
+    else {
+        ++limitedCount
+        if(result._score > q.peek()._score) q.replaceTop(result)
+    }
+    }
+
+    // This code is copy/pasted 3 times for performance reasons [options.key, options.keys, no keys]
+
+    // options.key
+    if(options?.key) {
+    var key = options.key
+    for(var i = 0; i < targetsLen; ++i) { var obj = targets[i]
+        var target = getValue(obj, key)
+        if(!target) continue
+        if(!isPrepared(target)) target = getPrepared(target)
+
+        if((searchBitflags & target._bitflags) !== searchBitflags) continue
+        var result = algorithm(preparedSearch, target)
+        if(result === NULL) continue
+        if(result._score < threshold) continue
+
+        result.obj = obj
+        push_result(result)
+    }
+
+    // options.keys
+    } else if(options?.keys) {
+    var keys = options.keys
+    var keysLen = keys.length
+
+    outer: for(var i = 0; i < targetsLen; ++i) { var obj = targets[i]
+
+        { // early out based on bitflags
+        var keysBitflags = 0
+        for (var keyI = 0; keyI < keysLen; ++keyI) {
+            var key = keys[keyI]
+            var target = getValue(obj, key)
+            if(!target) { tmpTargets[keyI] = noTarget; continue }
+            if(!isPrepared(target)) target = getPrepared(target)
+            tmpTargets[keyI] = target
+
+            keysBitflags |= target._bitflags
+        }
+
+        if((searchBitflags & keysBitflags) !== searchBitflags) continue
+        }
+
+        if(containsSpace) for(let i=0; i<preparedSearch.spaceSearches.length; i++) keysSpacesBestScores[i] = NEGATIVE_INFINITY
+
+        for (var keyI = 0; keyI < keysLen; ++keyI) {
+        target = tmpTargets[keyI]
+        if(target === noTarget) { tmpResults[keyI] = noTarget; continue }
+
+        tmpResults[keyI] = algorithm(preparedSearch, target, /*allowSpaces=*/false, /*allowPartialMatch=*/containsSpace)
+        if(tmpResults[keyI] === NULL) { tmpResults[keyI] = noTarget; continue }
+
+        // todo: this seems weird and wrong. like what if our first match wasn't good. this should just replace it instead of averaging with it
+        // if our second match isn't good we ignore it instead of averaging with it
+        if(containsSpace) for(let i=0; i<preparedSearch.spaceSearches.length; i++) {
+            if(allowPartialMatchScores[i] > -1000) {
+            if(keysSpacesBestScores[i] > NEGATIVE_INFINITY) {
+                var tmp = (keysSpacesBestScores[i] + allowPartialMatchScores[i]) / 4/*bonus score for having multiple matches*/
+                if(tmp > keysSpacesBestScores[i]) keysSpacesBestScores[i] = tmp
+            }
+            }
+            if(allowPartialMatchScores[i] > keysSpacesBestScores[i]) keysSpacesBestScores[i] = allowPartialMatchScores[i]
+        }
+        }
+
+        if(containsSpace) {
+        for(let i=0; i<preparedSearch.spaceSearches.length; i++) { if(keysSpacesBestScores[i] === NEGATIVE_INFINITY) continue outer }
+        } else {
+        var hasAtLeast1Match = false
+        for(let i=0; i < keysLen; i++) { if(tmpResults[i]._score !== NEGATIVE_INFINITY) { hasAtLeast1Match = true; break } }
+        if(!hasAtLeast1Match) continue
+        }
+
+        var objResults = new KeysResult(keysLen)
+        for(let i=0; i < keysLen; i++) { objResults[i] = tmpResults[i] }
+
+        if(containsSpace) {
+        var score = 0
+        for(let i=0; i<preparedSearch.spaceSearches.length; i++) score += keysSpacesBestScores[i]
+        } else {
+        // todo could rewrite this scoring to be more similar to when there's spaces
+        // if we match multiple keys give us bonus points
+        var score = NEGATIVE_INFINITY
+        for(let i=0; i<keysLen; i++) {
+            var result = objResults[i]
+            if(result._score > -1000) {
+            if(score > NEGATIVE_INFINITY) {
+                var tmp = (score + result._score) / 4/*bonus score for having multiple matches*/
+                if(tmp > score) score = tmp
+            }
+            }
+            if(result._score > score) score = result._score
+        }
+        }
+
+        objResults.obj = obj
+        objResults._score = score
+        if(options?.scoreFn) {
+        score = options.scoreFn(objResults)
+        if(!score) continue
+        score = denormalizeScore(score)
+        objResults._score = score
+        }
+
+        if(score < threshold) continue
+        push_result(objResults)
+    }
+
+    // no keys
+    } else {
+    for(var i = 0; i < targetsLen; ++i) { var target = targets[i]
+        if(!target) continue
+        if(!isPrepared(target)) target = getPrepared(target)
+
+        if((searchBitflags & target._bitflags) !== searchBitflags) continue
+        var result = algorithm(preparedSearch, target)
+        if(result === NULL) continue
+        if(result._score < threshold) continue
+
+        push_result(result)
+    }
+    }
+
+    if(resultsLen === 0) return noResults
+    var results = new Array(resultsLen)
+    for(var i = resultsLen - 1; i >= 0; --i) results[i] = q.poll()
+    results.total = resultsLen + limitedCount
+    return results
+}
+
+
+// this is written as 1 function instead of 2 for minification. perf seems fine ...
+// except when minified. the perf is very slow
+var highlight = (result, open='<b>', close='</b>') => {
+    var callback = typeof open === 'function' ? open : undefined
+
+    var target      = result.target
+    var targetLen   = target.length
+    var indexes     = result.indexes
+    var highlighted = ''
+    var matchI      = 0
+    var indexesI    = 0
+    var opened      = false
+    var parts       = []
+
+    for(var i = 0; i < targetLen; ++i) { var char = target[i]
+    if(indexes[indexesI] === i) {
+        ++indexesI
+        if(!opened) { opened = true
+        if(callback) {
+            parts.push(highlighted); highlighted = ''
+        } else {
+            highlighted += open
+        }
+        }
+
+        if(indexesI === indexes.length) {
+        if(callback) {
+            highlighted += char
+            parts.push(callback(highlighted, matchI++)); highlighted = ''
+            parts.push(target.substr(i+1))
+        } else {
+            highlighted += char + close + target.substr(i+1)
+        }
+        break
+        }
+    } else {
+        if(opened) { opened = false
+        if(callback) {
+            parts.push(callback(highlighted, matchI++)); highlighted = ''
+        } else {
+            highlighted += close
+        }
+        }
+    }
+    highlighted += char
+    }
+
+    return callback ? parts : highlighted
+}
+
+
+var prepare = (target) => {
+    if(typeof target === 'number') target = ''+target
+    else if(typeof target !== 'string') target = ''
+    var info = prepareLowerInfo(target)
+    return new_result(target, {_targetLower:info._lower, _targetLowerCodes:info.lowerCodes, _bitflags:info.bitflags})
+}
+
+var cleanup = () => { preparedCache.clear(); preparedSearchCache.clear() }
+
+
+// Below this point is only internal code
+// Below this point is only internal code
+// Below this point is only internal code
+// Below this point is only internal code
+
+
+class Result {
+    get ['indexes']() { return this._indexes.slice(0, this._indexes.len).sort((a,b)=>a-b) }
+    set ['indexes'](indexes) { return this._indexes = indexes }
+    ['highlight'](open, close) { return highlight(this, open, close) }
+    get ['score']() { return normalizeScore(this._score) }
+    set ['score'](score) { this._score = denormalizeScore(score) }
+}
+
+class KeysResult extends Array {
+    get ['score']() { return normalizeScore(this._score) }
+    set ['score'](score) { this._score = denormalizeScore(score) }
+}
+
+var new_result = (target, options) => {
+    const result = new Result()
+    result['target']             = target
+    result['obj']                = options.obj                   ?? NULL
+    result._score                = options._score                ?? NEGATIVE_INFINITY
+    result._indexes              = options._indexes              ?? []
+    result._targetLower          = options._targetLower          ?? ''
+    result._targetLowerCodes     = options._targetLowerCodes     ?? NULL
+    result._nextBeginningIndexes = options._nextBeginningIndexes ?? NULL
+    result._bitflags             = options._bitflags             ?? 0
+    return result
+}
+
+
+var normalizeScore = score => {
+    if(score === NEGATIVE_INFINITY) return 0
+    if(score > 1) return score
+    return Math.E ** ( ((-score + 1)**.04307 - 1) * -2)
+}
+var denormalizeScore = normalizedScore => {
+    if(normalizedScore === 0) return NEGATIVE_INFINITY
+    if(normalizedScore > 1) return normalizedScore
+    return 1 - Math.pow((Math.log(normalizedScore) / -2 + 1), 1 / 0.04307)
+}
+
+
+var prepareSearch = (search) => {
+    if(typeof search === 'number') search = ''+search
+    else if(typeof search !== 'string') search = ''
+    search = search.trim()
+    var info = prepareLowerInfo(search)
+
+    var spaceSearches = []
+    if(info.containsSpace) {
+    var searches = search.split(/\s+/)
+    searches = [...new Set(searches)] // distinct
+    for(var i=0; i<searches.length; i++) {
+        if(searches[i] === '') continue
+        var _info = prepareLowerInfo(searches[i])
+        spaceSearches.push({lowerCodes:_info.lowerCodes, _lower:searches[i].toLowerCase(), containsSpace:false})
+    }
+    }
+
+    return {lowerCodes: info.lowerCodes, _lower: info._lower, containsSpace: info.containsSpace, bitflags: info.bitflags, spaceSearches: spaceSearches}
+}
+
+
+
+var getPrepared = (target) => {
+    if(target.length > 999) return prepare(target) // don't cache huge targets
+    var targetPrepared = preparedCache.get(target)
+    if(targetPrepared !== undefined) return targetPrepared
+    targetPrepared = prepare(target)
+    preparedCache.set(target, targetPrepared)
+    return targetPrepared
+}
+var getPreparedSearch = (search) => {
+    if(search.length > 999) return prepareSearch(search) // don't cache huge searches
+    var searchPrepared = preparedSearchCache.get(search)
+    if(searchPrepared !== undefined) return searchPrepared
+    searchPrepared = prepareSearch(search)
+    preparedSearchCache.set(search, searchPrepared)
+    return searchPrepared
+}
+
+
+var all = (targets, options) => {
+    var results = []; results.total = targets.length // this total can be wrong if some targets are skipped
+
+    var limit = options?.limit || INFINITY
+
+    if(options?.key) {
+    for(var i=0;i<targets.length;i++) { var obj = targets[i]
+        var target = getValue(obj, options.key)
+        if(target == NULL) continue
+        if(!isPrepared(target)) target = getPrepared(target)
+        var result = new_result(target.target, {_score: target._score, obj: obj})
+        results.push(result); if(results.length >= limit) return results
+    }
+    } else if(options?.keys) {
+    for(var i=0;i<targets.length;i++) { var obj = targets[i]
+        var objResults = new KeysResult(options.keys.length)
+        for (var keyI = options.keys.length - 1; keyI >= 0; --keyI) {
+        var target = getValue(obj, options.keys[keyI])
+        if(!target) { objResults[keyI] = noTarget; continue }
+        if(!isPrepared(target)) target = getPrepared(target)
+        target._score = NEGATIVE_INFINITY
+        target._indexes.len = 0
+        objResults[keyI] = target
+        }
+        objResults.obj = obj
+        objResults._score = NEGATIVE_INFINITY
+        results.push(objResults); if(results.length >= limit) return results
+    }
+    } else {
+    for(var i=0;i<targets.length;i++) { var target = targets[i]
+        if(target == NULL) continue
+        if(!isPrepared(target)) target = getPrepared(target)
+        target._score = NEGATIVE_INFINITY
+        target._indexes.len = 0
+        results.push(target); if(results.length >= limit) return results
+    }
+    }
+
+    return results
+}
+
+
+var algorithm = (preparedSearch, prepared, allowSpaces=false, allowPartialMatch=false) => {
+    if(allowSpaces===false && preparedSearch.containsSpace) return algorithmSpaces(preparedSearch, prepared, allowPartialMatch)
+
+    var searchLower      = preparedSearch._lower
+    var searchLowerCodes = preparedSearch.lowerCodes
+    var searchLowerCode  = searchLowerCodes[0]
+    var targetLowerCodes = prepared._targetLowerCodes
+    var searchLen        = searchLowerCodes.length
+    var targetLen        = targetLowerCodes.length
+    var searchI          = 0 // where we at
+    var targetI          = 0 // where you at
+    var matchesSimpleLen = 0
+
+    // very basic fuzzy match; to remove non-matching targets ASAP!
+    // walk through target. find sequential matches.
+    // if all chars aren't found then exit
+    for(;;) {
+    var isMatch = searchLowerCode === targetLowerCodes[targetI]
+    if(isMatch) {
+        matchesSimple[matchesSimpleLen++] = targetI
+        ++searchI; if(searchI === searchLen) break
+        searchLowerCode = searchLowerCodes[searchI]
+    }
+    ++targetI; if(targetI >= targetLen) return NULL // Failed to find searchI
+    }
+
+    var searchI = 0
+    var successStrict = false
+    var matchesStrictLen = 0
+
+    var nextBeginningIndexes = prepared._nextBeginningIndexes
+    if(nextBeginningIndexes === NULL) nextBeginningIndexes = prepared._nextBeginningIndexes = prepareNextBeginningIndexes(prepared.target)
+    targetI = matchesSimple[0]===0 ? 0 : nextBeginningIndexes[matchesSimple[0]-1]
+
+    // Our target string successfully matched all characters in sequence!
+    // Let's try a more advanced and strict test to improve the score
+    // only count it as a match if it's consecutive or a beginning character!
+    var backtrackCount = 0
+    if(targetI !== targetLen) for(;;) {
+    if(targetI >= targetLen) {
+        // We failed to find a good spot for this search char, go back to the previous search char and force it forward
+        if(searchI <= 0) break // We failed to push chars forward for a better match
+
+        ++backtrackCount; if(backtrackCount > 200) break // exponential backtracking is taking too long, just give up and return a bad match
+
+        --searchI
+        var lastMatch = matchesStrict[--matchesStrictLen]
+        targetI = nextBeginningIndexes[lastMatch]
+
+    } else {
+        var isMatch = searchLowerCodes[searchI] === targetLowerCodes[targetI]
+        if(isMatch) {
+        matchesStrict[matchesStrictLen++] = targetI
+        ++searchI; if(searchI === searchLen) { successStrict = true; break }
+        ++targetI
+        } else {
+        targetI = nextBeginningIndexes[targetI]
+        }
+    }
+    }
+
+    // check if it's a substring match
+    var substringIndex = searchLen <= 1 ? -1 : prepared._targetLower.indexOf(searchLower, matchesSimple[0]) // perf: this is slow
+    var isSubstring = !!~substringIndex
+    var isSubstringBeginning = !isSubstring ? false : substringIndex===0 || prepared._nextBeginningIndexes[substringIndex-1] === substringIndex
+
+    // if it's a substring match but not at a beginning index, let's try to find a substring starting at a beginning index for a better score
+    if(isSubstring && !isSubstringBeginning) {
+    for(var i=0; i<nextBeginningIndexes.length; i=nextBeginningIndexes[i]) {
+        if(i <= substringIndex) continue
+
+        for(var s=0; s<searchLen; s++) if(searchLowerCodes[s] !== prepared._targetLowerCodes[i+s]) break
+        if(s === searchLen) { substringIndex = i; isSubstringBeginning = true; break }
+    }
+    }
+
+    // tally up the score & keep track of matches for highlighting later
+    // if it's a simple match, we'll switch to a substring match if a substring exists
+    // if it's a strict match, we'll switch to a substring match only if that's a better score
+
+    var calculateScore = matches => {
+    var score = 0
+
+    var extraMatchGroupCount = 0
+    for(var i = 1; i < searchLen; ++i) {
+        if(matches[i] - matches[i-1] !== 1) {score -= matches[i]; ++extraMatchGroupCount}
+    }
+    var unmatchedDistance = matches[searchLen-1] - matches[0] - (searchLen-1)
+
+    score -= (12+unmatchedDistance) * extraMatchGroupCount // penality for more groups
+
+    if(matches[0] !== 0) score -= matches[0]*matches[0]*.2 // penality for not starting near the beginning
+
+    if(!successStrict) {
+        score *= 1000
+    } else {
+        // successStrict on a target with too many beginning indexes loses points for being a bad target
+        var uniqueBeginningIndexes = 1
+        for(var i = nextBeginningIndexes[0]; i < targetLen; i=nextBeginningIndexes[i]) ++uniqueBeginningIndexes
+
+        if(uniqueBeginningIndexes > 24) score *= (uniqueBeginningIndexes-24)*10 // quite arbitrary numbers here ...
+    }
+
+    score -= (targetLen - searchLen)/2 // penality for longer targets
+
+    if(isSubstring)          score /= 1+searchLen*searchLen*1 // bonus for being a full substring
+    if(isSubstringBeginning) score /= 1+searchLen*searchLen*1 // bonus for substring starting on a beginningIndex
+
+    score -= (targetLen - searchLen)/2 // penality for longer targets
+
+    return score
+    }
+
+    if(!successStrict) {
+    if(isSubstring) for(var i=0; i<searchLen; ++i) matchesSimple[i] = substringIndex+i // at this point it's safe to overwrite matchehsSimple with substr matches
+    var matchesBest = matchesSimple
+    var score = calculateScore(matchesBest)
+    } else {
+    if(isSubstringBeginning) {
+        for(var i=0; i<searchLen; ++i) matchesSimple[i] = substringIndex+i // at this point it's safe to overwrite matchehsSimple with substr matches
+        var matchesBest = matchesSimple
+        var score = calculateScore(matchesSimple)
+    } else {
+        var matchesBest = matchesStrict
+        var score = calculateScore(matchesStrict)
+    }
+    }
+
+    prepared._score = score
+
+    for(var i = 0; i < searchLen; ++i) prepared._indexes[i] = matchesBest[i]
+    prepared._indexes.len = searchLen
+
+    const result    = new Result()
+    result.target   = prepared.target
+    result._score   = prepared._score
+    result._indexes = prepared._indexes
+    return result
+}
+var algorithmSpaces = (preparedSearch, target, allowPartialMatch) => {
+    var seen_indexes = new Set()
+    var score = 0
+    var result = NULL
+
+    var first_seen_index_last_search = 0
+    var searches = preparedSearch.spaceSearches
+    var searchesLen = searches.length
+    var changeslen = 0
+
+    // Return _nextBeginningIndexes back to its normal state
+    var resetNextBeginningIndexes = () => {
+    for(let i=changeslen-1; i>=0; i--) target._nextBeginningIndexes[nextBeginningIndexesChanges[i*2 + 0]] = nextBeginningIndexesChanges[i*2 + 1]
+    }
+
+    var hasAtLeast1Match = false
+    for(var i=0; i<searchesLen; ++i) {
+    allowPartialMatchScores[i] = NEGATIVE_INFINITY
+    var search = searches[i]
+
+    result = algorithm(search, target)
+    if(allowPartialMatch) {
+        if(result === NULL) continue
+        hasAtLeast1Match = true
+    } else {
+        if(result === NULL) {resetNextBeginningIndexes(); return NULL}
+    }
+
+    // if not the last search, we need to mutate _nextBeginningIndexes for the next search
+    var isTheLastSearch = i === searchesLen - 1
+    if(!isTheLastSearch) {
+        var indexes = result._indexes
+
+        var indexesIsConsecutiveSubstring = true
+        for(let i=0; i<indexes.len-1; i++) {
+        if(indexes[i+1] - indexes[i] !== 1) {
+            indexesIsConsecutiveSubstring = false; break;
+        }
+        }
+
+        if(indexesIsConsecutiveSubstring) {
+        var newBeginningIndex = indexes[indexes.len-1] + 1
+        var toReplace = target._nextBeginningIndexes[newBeginningIndex-1]
+        for(let i=newBeginningIndex-1; i>=0; i--) {
+            if(toReplace !== target._nextBeginningIndexes[i]) break
+            target._nextBeginningIndexes[i] = newBeginningIndex
+            nextBeginningIndexesChanges[changeslen*2 + 0] = i
+            nextBeginningIndexesChanges[changeslen*2 + 1] = toReplace
+            changeslen++
+        }
+        }
+    }
+
+    score += result._score / searchesLen
+    allowPartialMatchScores[i] = result._score / searchesLen
+
+    // dock points based on order otherwise "c man" returns Manifest.cpp instead of CheatManager.h
+    if(result._indexes[0] < first_seen_index_last_search) {
+        score -= (first_seen_index_last_search - result._indexes[0]) * 2
+    }
+    first_seen_index_last_search = result._indexes[0]
+
+    for(var j=0; j<result._indexes.len; ++j) seen_indexes.add(result._indexes[j])
+    }
+
+    if(allowPartialMatch && !hasAtLeast1Match) return NULL
+
+    resetNextBeginningIndexes()
+
+    // allows a search with spaces that's an exact substring to score well
+    var allowSpacesResult = algorithm(preparedSearch, target, /*allowSpaces=*/true)
+    if(allowSpacesResult !== NULL && allowSpacesResult._score > score) {
+    if(allowPartialMatch) {
+        for(var i=0; i<searchesLen; ++i) {
+        allowPartialMatchScores[i] = allowSpacesResult._score / searchesLen
+        }
+    }
+    return allowSpacesResult
+    }
+
+    if(allowPartialMatch) result = target
+    result._score = score
+
+    var i = 0
+    for (let index of seen_indexes) result._indexes[i++] = index
+    result._indexes.len = i
+
+    return result
+}
+
+// we use this instead of just .normalize('NFD').replace(/[\u0300-\u036f]/g, '') because that screws with japanese characters
+var remove_accents = (str) => str.replace(/\p{Script=Latin}+/gu, match => match.normalize('NFD')).replace(/[\u0300-\u036f]/g, '')
+
+var prepareLowerInfo = (str) => {
+    str = remove_accents(str)
+    var strLen = str.length
+    var lower = str.toLowerCase()
+    var lowerCodes = [] // new Array(strLen)    sparse array is too slow
+    var bitflags = 0
+    var containsSpace = false // space isn't stored in bitflags because of how searching with a space works
+
+    for(var i = 0; i < strLen; ++i) {
+    var lowerCode = lowerCodes[i] = lower.charCodeAt(i)
+
+    if(lowerCode === 32) {
+        containsSpace = true
+        continue // it's important that we don't set any bitflags for space
+    }
+
+    var bit = lowerCode>=97&&lowerCode<=122 ? lowerCode-97 // alphabet
+            : lowerCode>=48&&lowerCode<=57  ? 26           // numbers
+                                                            // 3 bits available
+            : lowerCode<=127                ? 30           // other ascii
+            :                                 31           // other utf8
+    bitflags |= 1<<bit
+    }
+
+    return {lowerCodes:lowerCodes, bitflags:bitflags, containsSpace:containsSpace, _lower:lower}
+}
+var prepareBeginningIndexes = (target) => {
+    var targetLen = target.length
+    var beginningIndexes = []; var beginningIndexesLen = 0
+    var wasUpper = false
+    var wasAlphanum = false
+    for(var i = 0; i < targetLen; ++i) {
+    var targetCode = target.charCodeAt(i)
+    var isUpper = targetCode>=65&&targetCode<=90
+    var isAlphanum = isUpper || targetCode>=97&&targetCode<=122 || targetCode>=48&&targetCode<=57
+    var isBeginning = isUpper && !wasUpper || !wasAlphanum || !isAlphanum
+    wasUpper = isUpper
+    wasAlphanum = isAlphanum
+    if(isBeginning) beginningIndexes[beginningIndexesLen++] = i
+    }
+    return beginningIndexes
+}
+var prepareNextBeginningIndexes = (target) => {
+    target = remove_accents(target)
+    var targetLen = target.length
+    var beginningIndexes = prepareBeginningIndexes(target)
+    var nextBeginningIndexes = [] // new Array(targetLen)     sparse array is too slow
+    var lastIsBeginning = beginningIndexes[0]
+    var lastIsBeginningI = 0
+    for(var i = 0; i < targetLen; ++i) {
+    if(lastIsBeginning > i) {
+        nextBeginningIndexes[i] = lastIsBeginning
+    } else {
+        lastIsBeginning = beginningIndexes[++lastIsBeginningI]
+        nextBeginningIndexes[i] = lastIsBeginning===undefined ? targetLen : lastIsBeginning
+    }
+    }
+    return nextBeginningIndexes
+}
+
+var preparedCache       = new Map()
+var preparedSearchCache = new Map()
+
+// the theory behind these being globals is to reduce garbage collection by not making new arrays
+var matchesSimple = []; var matchesStrict = []
+var nextBeginningIndexesChanges = [] // allows straw berry to match strawberry well, by modifying the end of a substring to be considered a beginning index for the rest of the search
+var keysSpacesBestScores = []; var allowPartialMatchScores = []
+var tmpTargets = []; var tmpResults = []
+
+// prop = 'key'                  2.5ms optimized for this case, seems to be about as fast as direct obj[prop]
+// prop = 'key1.key2'            10ms
+// prop = ['key1', 'key2']       27ms
+// prop = obj => obj.tags.join() ??ms
+var getValue = (obj, prop) => {
+    var tmp = obj[prop]; if(tmp !== undefined) return tmp
+    if(typeof prop === 'function') return prop(obj) // this should run first. but that makes string props slower
+    var segs = prop
+    if(!Array.isArray(prop)) segs = prop.split('.')
+    var len = segs.length
+    var i = -1
+    while (obj && (++i < len)) obj = obj[segs[i]]
+    return obj
+}
+
+var isPrepared = (x) => { return typeof x === 'object' && typeof x._bitflags === 'number' }
+var INFINITY = Infinity; var NEGATIVE_INFINITY = -INFINITY
+var noResults = []; noResults.total = 0
+var NULL = null
+
+var noTarget = prepare('')
+
+// Hacked version of https://github.com/lemire/FastPriorityQueue.js
+var fastpriorityqueue=r=>{var e=[],o=0,a={},v=r=>{for(var a=0,v=e[a],c=1;c<o;){var s=c+1;a=c,s<o&&e[s]._score<e[c]._score&&(a=s),e[a-1>>1]=e[a],c=1+(a<<1)}for(var f=a-1>>1;a>0&&v._score<e[f]._score;f=(a=f)-1>>1)e[a]=e[f];e[a]=v};return a.add=(r=>{var a=o;e[o++]=r;for(var v=a-1>>1;a>0&&r._score<e[v]._score;v=(a=v)-1>>1)e[a]=e[v];e[a]=r}),a.poll=(r=>{if(0!==o){var a=e[0];return e[0]=e[--o],v(),a}}),a.peek=(r=>{if(0!==o)return e[0]}),a.replaceTop=(r=>{e[0]=r,v()}),a}
+var q = fastpriorityqueue() // reuse this

configs/quickshell/modules/common/functions/levendist.js

@@ -0,0 +1,141 @@
+// Original code from https://github.com/koeqaife/hyprland-material-you
+// Original code license: GPLv3
+// Translated to Js from Cython with an LLM and reviewed
+
+function min3(a, b, c) {
+    return a < b && a < c ? a : b < c ? b : c;
+}
+
+function max3(a, b, c) {
+    return a > b && a > c ? a : b > c ? b : c;
+}
+
+function min2(a, b) {
+    return a < b ? a : b;
+}
+
+function max2(a, b) {
+    return a > b ? a : b;
+}
+
+function levenshteinDistance(s1, s2) {
+    let len1 = s1.length;
+    let len2 = s2.length;
+
+    if (len1 === 0) return len2;
+    if (len2 === 0) return len1;
+
+    if (len2 > len1) {
+        [s1, s2] = [s2, s1];
+        [len1, len2] = [len2, len1];
+    }
+
+    let prev = new Array(len2 + 1);
+    let curr = new Array(len2 + 1);
+
+    for (let j = 0; j <= len2; j++) {
+        prev[j] = j;
+    }
+
+    for (let i = 1; i <= len1; i++) {
+        curr[0] = i;
+        for (let j = 1; j <= len2; j++) {
+            let cost = s1[i - 1] === s2[j - 1] ? 0 : 1;
+            curr[j] = min3(prev[j] + 1, curr[j - 1] + 1, prev[j - 1] + cost);
+        }
+        [prev, curr] = [curr, prev];
+    }
+
+    return prev[len2];
+}
+
+function partialRatio(shortS, longS) {
+    let lenS = shortS.length;
+    let lenL = longS.length;
+    let best = 0.0;
+
+    if (lenS === 0) return 1.0;
+
+    for (let i = 0; i <= lenL - lenS; i++) {
+        let sub = longS.slice(i, i + lenS);
+        let dist = levenshteinDistance(shortS, sub);
+        let score = 1.0 - (dist / lenS);
+        if (score > best) best = score;
+    }
+
+    return best;
+}
+
+function computeScore(s1, s2) {
+    if (s1 === s2) return 1.0;
+
+    let dist = levenshteinDistance(s1, s2);
+    let maxLen = max2(s1.length, s2.length);
+    if (maxLen === 0) return 1.0;
+
+    let full = 1.0 - (dist / maxLen);
+    let part = s1.length < s2.length ? partialRatio(s1, s2) : partialRatio(s2, s1);
+
+    let score = 0.85 * full + 0.15 * part;
+
+    if (s1 && s2 && s1[0] !== s2[0]) {
+        score -= 0.05;
+    }
+
+    let lenDiff = Math.abs(s1.length - s2.length);
+    if (lenDiff >= 3) {
+        score -= 0.05 * lenDiff / maxLen;
+    }
+
+    let commonPrefixLen = 0;
+    let minLen = min2(s1.length, s2.length);
+    for (let i = 0; i < minLen; i++) {
+        if (s1[i] === s2[i]) {
+            commonPrefixLen++;
+        } else {
+            break;
+        }
+    }
+    score += 0.02 * commonPrefixLen;
+
+    if (s1.includes(s2) || s2.includes(s1)) {
+        score += 0.06;
+    }
+
+    return Math.max(0.0, Math.min(1.0, score));
+}
+
+function computeTextMatchScore(s1, s2) {
+    if (s1 === s2) return 1.0;
+
+    let dist = levenshteinDistance(s1, s2);
+    let maxLen = max2(s1.length, s2.length);
+    if (maxLen === 0) return 1.0;
+
+    let full = 1.0 - (dist / maxLen);
+    let part = s1.length < s2.length ? partialRatio(s1, s2) : partialRatio(s2, s1);
+
+    let score = 0.4 * full + 0.6 * part;
+
+    let lenDiff = Math.abs(s1.length - s2.length);
+    if (lenDiff >= 10) {
+        score -= 0.02 * lenDiff / maxLen;
+    }
+
+    let commonPrefixLen = 0;
+    let minLen = min2(s1.length, s2.length);
+    for (let i = 0; i < minLen; i++) {
+        if (s1[i] === s2[i]) {
+            commonPrefixLen++;
+        } else {
+            break;
+        }
+    }
+    score += 0.01 * commonPrefixLen;
+
+    if (s1.includes(s2) || s2.includes(s1)) {
+        score += 0.2;
+    }
+
+    return Math.max(0.0, Math.min(1.0, score));
+}

configs/quickshell/modules/common/functions/qmldir

@@ -0,0 +1,7 @@
+module qs.modules.common.functions
+singleton ColorUtils 1.0 ColorUtils.qml
+singleton FileUtils 1.0 FileUtils.qml
+singleton Fuzzy 1.0 Fuzzy.qml
+singleton Levendist 1.0 Levendist.qml
+singleton ObjectUtils 1.0 ObjectUtils.qml
+singleton StringUtils 1.0 StringUtils.qml

configs/quickshell/modules/common/qmldir

@@ -0,0 +1,5 @@
+module qs.modules.common
+singleton Appearance 1.0 Appearance.qml
+singleton Config 1.0 Config.qml
+singleton Directories 1.0 Directories.qml
+singleton Persistent 1.0 Persistent.qml

configs/quickshell/modules/common/widgets/ButtonGroup.qml

@@ -0,0 +1,46 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+/**
+ * A container that supports GroupButton children for bounciness.
+ * See https://m3.material.io/components/button-groups/overview
+ */
+Rectangle {
+    id: root
+    default property alias data: rowLayout.data
+    property real spacing: 5
+    property real padding: 0
+    property int clickIndex: rowLayout.clickIndex
+
+    property real contentWidth: {
+        let total = 0;
+        for (let i = 0; i < rowLayout.children.length; ++i) {
+            const child = rowLayout.children[i];
+            if (!child.visible) continue;
+            total += child.baseWidth ?? child.implicitWidth ?? child.width;
+        }
+        return total + rowLayout.spacing * (rowLayout.children.length - 1);
+    }
+
+    topLeftRadius: rowLayout.children.length > 0 ? (rowLayout.children[0].radius + padding) : 
+        Appearance?.rounding?.small
+    bottomLeftRadius: topLeftRadius
+    topRightRadius: rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : 
+        Appearance?.rounding?.small
+    bottomRightRadius: topRightRadius
+
+    color: "transparent"
+    width: root.contentWidth + padding * 2
+    implicitHeight: rowLayout.implicitHeight + padding * 2
+    implicitWidth: root.contentWidth + padding * 2
+    
+    children: [RowLayout {
+        id: rowLayout
+        anchors.fill: parent
+        anchors.margins: root.padding
+        spacing: root.spacing
+        property int clickIndex: -1
+    }]
+}

configs/quickshell/modules/common/widgets/CircularProgress.qml

@@ -0,0 +1,97 @@
+// From https://github.com/rafzby/circular-progressbar with modifications
+// License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
+
+import QtQuick
+import qs.modules.common
+
+/**
+ * Material 3 circular progress. See https://m3.material.io/components/progress-indicators/specs
+ */
+Item {
+    id: root
+
+    property int size: 30
+    property int lineWidth: 2
+    property real value: 0
+    property color primaryColor: Appearance.m3colors.m3onSecondaryContainer
+    property color secondaryColor: Appearance.colors.colSecondaryContainer
+    property real gapAngle: Math.PI / 9
+    property bool fill: false
+    property int fillOverflow: 2
+    property bool enableAnimation: true
+    property int animationDuration: 1000
+    property var easingType: Easing.OutCubic
+
+    width: size
+    height: size
+
+    signal animationFinished();
+
+    onValueChanged: {
+        canvas.degree = value * 360;
+    }
+    onPrimaryColorChanged: {
+        canvas.requestPaint();
+    }
+    onSecondaryColorChanged: {
+        canvas.requestPaint();
+    }
+
+    Canvas {
+        id: canvas
+
+        property real degree: 0
+
+        anchors.fill: parent
+        antialiasing: true
+
+        onDegreeChanged: {
+            requestPaint();
+        }
+
+        onPaint: {
+            var ctx = getContext("2d");
+            var x = root.width / 2;
+            var y = root.height / 2;
+            var radius = root.size / 2 - root.lineWidth;
+            var startAngle = (Math.PI / 180) * 270;
+            var fullAngle = (Math.PI / 180) * (270 + 360);
+            var progressAngle = (Math.PI / 180) * (270 + degree);
+            var epsilon = 0.01; // Small angle in radians
+            
+            ctx.reset();
+            if (root.fill) {
+                ctx.fillStyle = root.secondaryColor;
+                ctx.beginPath();
+                ctx.arc(x, y, radius + fillOverflow, startAngle, fullAngle);
+                ctx.fill();
+            }
+            ctx.lineCap = 'round';
+            ctx.lineWidth = root.lineWidth;
+
+            // Secondary
+            ctx.beginPath();
+            ctx.arc(x, y, radius, progressAngle + gapAngle, fullAngle - gapAngle);
+            ctx.strokeStyle = root.secondaryColor;
+            ctx.stroke();
+
+            // Primary (value indication)
+            var endAngle = progressAngle + (value > 0 ? 0 : epsilon);
+            ctx.beginPath();
+            ctx.arc(x, y, radius, startAngle, endAngle);
+            ctx.strokeStyle = root.primaryColor;
+            ctx.stroke();
+        }
+
+        Behavior on degree {
+            enabled: root.enableAnimation
+            NumberAnimation {
+                duration: root.animationDuration
+                easing.type: root.easingType
+            }
+
+        }
+
+    }
+
+}

configs/quickshell/modules/common/widgets/CliphistImage.qml

@@ -0,0 +1,96 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs.modules.common.functions
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Rectangle {
+    id: root
+    property string entry
+    property real maxWidth
+    property real maxHeight
+
+    property string imageDecodePath: Directories.cliphistDecode
+    property string imageDecodeFileName: `${entryNumber}`
+    property string imageDecodeFilePath: `${imageDecodePath}/${imageDecodeFileName}`
+    property string source
+
+    property int entryNumber: {
+        if (!root.entry) return 0
+        const match = root.entry.match(/^(\d+)\t/)
+        return match ? parseInt(match[1]) : 0
+    }
+    property int imageWidth: {
+        if (!root.entry) return 0
+        const match = root.entry.match(/(\d+)x(\d+)/)
+        return match ? parseInt(match[1]) : 0
+    }
+    property int imageHeight: {
+        if (!root.entry) return 0
+        const match = root.entry.match(/(\d+)x(\d+)/)
+        return match ? parseInt(match[2]) : 0
+    }
+    property real scale: {
+        return Math.min(
+            root.maxWidth / imageWidth,
+            root.maxHeight / imageHeight,
+            1
+        )
+    }
+
+    color: Appearance.colors.colLayer1
+    radius: Appearance.rounding.small
+    implicitHeight: imageHeight * scale
+    implicitWidth: imageWidth * scale
+
+    Component.onCompleted: {
+        decodeImageProcess.running = true
+    }
+
+    Process {
+        id: decodeImageProcess
+        command: ["bash", "-c", 
+            `[ -f ${imageDecodeFilePath} ] || echo '${StringUtils.shellSingleQuoteEscape(root.entry)}' | cliphist decode > '${imageDecodeFilePath}'`
+        ]
+        onExited: (exitCode, exitStatus) => {
+            if (exitCode === 0) {
+                root.source = imageDecodeFilePath
+            } else {
+                console.error("[CliphistImage] Failed to decode image for entry:", root.entry)
+                root.source = ""
+            }
+        }
+    }
+
+    Component.onDestruction: {
+        Quickshell.execDetached(["bash", "-c", `[ -f '${imageDecodeFilePath}' ] && rm -f '${imageDecodeFilePath}'`])
+    }
+
+    Image {
+        id: image
+        anchors.fill: parent
+
+        source: Qt.resolvedUrl(root.source)
+        fillMode: Image.PreserveAspectFit
+        antialiasing: true
+        asynchronous: true
+
+        width: root.imageWidth * root.scale
+        height: root.imageHeight * root.scale
+        sourceSize.width: width
+        sourceSize.height: height
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: image.width
+                height: image.height
+                radius: root.radius
+            }
+        }
+    }
+}
+

configs/quickshell/modules/common/widgets/ConfigRow.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    property bool uniform: false
+    spacing: 10
+    uniformCellSizes: uniform
+}

configs/quickshell/modules/common/widgets/ConfigSelectionArray.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+Flow {
+    id: root
+    Layout.fillWidth: true
+    spacing: 2
+    property list<var> options: []
+    property string configOptionName: ""
+    property var currentValue: null
+
+    signal selected(var newValue)
+
+    Repeater {
+        model: root.options
+        delegate: SelectionGroupButton {
+            id: paletteButton
+            required property var modelData
+            required property int index
+            onYChanged: {
+                if (index === 0) {
+                    paletteButton.leftmost = true
+                } else {
+                    var prev = root.children[index - 1]
+                    var thisIsOnNewLine = prev && prev.y !== paletteButton.y
+                    paletteButton.leftmost = thisIsOnNewLine
+                    prev.rightmost = thisIsOnNewLine
+                }
+            }
+            leftmost: index === 0
+            rightmost: index === root.options.length - 1
+            buttonText: modelData.displayName;
+            toggled: root.currentValue === modelData.value
+            onClicked: {
+                root.selected(modelData.value);
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/ConfigSpinBox.qml

@@ -0,0 +1,30 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+    property string text: ""
+    property alias value: spinBoxWidget.value
+    property alias stepSize: spinBoxWidget.stepSize
+    property alias from: spinBoxWidget.from
+    property alias to: spinBoxWidget.to
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    StyledText {
+        id: labelWidget
+        Layout.fillWidth: true
+        text: root.text
+        font.pixelSize: Appearance.font.pixelSize.small
+        color: Appearance.colors.colOnSecondaryContainer
+    }
+
+    StyledSpinBox {
+        id: spinBoxWidget
+        Layout.fillWidth: false
+        value: root.value
+    }
+}

configs/quickshell/modules/common/widgets/ConfigSwitch.qml

@@ -0,0 +1,32 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+RippleButton {
+    id: root
+    Layout.fillWidth: true
+    implicitHeight: contentItem.implicitHeight + 8 * 2
+    onClicked: checked = !checked
+
+    contentItem: RowLayout {
+        spacing: 10
+        StyledText {
+            id: labelWidget
+            Layout.fillWidth: true
+            text: root.text
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+        StyledSwitch {
+            id: switchWidget
+            down: root.down
+            scale: 0.6
+            Layout.fillWidth: false
+            checked: root.checked
+            onClicked: root.clicked()
+        }
+    }
+}
+

configs/quickshell/modules/common/widgets/ContentPage.qml

@@ -0,0 +1,29 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.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
+    }
+
+}

configs/quickshell/modules/common/widgets/ContentSection.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+ColumnLayout {
+    id: root
+    property string title
+    default property alias data: sectionContent.data
+
+    Layout.fillWidth: true
+    spacing: 8
+    StyledText {
+        text: root.title
+        font.pixelSize: Appearance.font.pixelSize.larger
+        font.weight: Font.Medium
+    }
+    ColumnLayout {
+        id: sectionContent
+        spacing: 8
+    }
+}

configs/quickshell/modules/common/widgets/ContentSubsection.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+ColumnLayout {
+    id: root
+    property string title: ""
+    property string tooltip: ""
+    default property alias data: sectionContent.data
+
+    Layout.fillWidth: true
+    Layout.topMargin: 4
+    spacing: 2
+
+    RowLayout {
+        ContentSubsectionLabel {
+            visible: root.title && root.title.length > 0
+            text: root.title
+        }
+        MaterialSymbol {
+            visible: root.tooltip && root.tooltip.length > 0
+            text: "info"
+            iconSize: Appearance.font.pixelSize.large
+            
+            color: Appearance.colors.colSubtext
+            MouseArea {
+                id: infoMouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.WhatsThisCursor
+                StyledToolTip {
+                    extraVisibleCondition: false
+                    alternativeVisibleCondition: infoMouseArea.containsMouse
+                    content: root.tooltip
+                }
+            }
+        }
+        Item { Layout.fillWidth: true }
+    }
+    ColumnLayout {
+        id: sectionContent
+        Layout.fillWidth: true
+        spacing: 2
+    }
+}

configs/quickshell/modules/common/widgets/ContentSubsectionLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+StyledText {
+    text: "Subsection"
+    color: Appearance.colors.colSubtext
+    Layout.leftMargin: 4
+}

configs/quickshell/modules/common/widgets/CustomIcon.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+    
+    property bool colorize: false
+    property color color
+    property string source: ""
+    property string iconFolder: Qt.resolvedUrl(Quickshell.shellPath("assets/icons"))  // The folder to check first
+    width: 30
+    height: 30
+    
+    IconImage {
+        id: iconImage
+        anchors.fill: parent
+        source: {
+            const fullPathWhenSourceIsIconName = iconFolder + "/" + root.source;
+            if (iconFolder && fullPathWhenSourceIsIconName) {
+                return fullPathWhenSourceIsIconName
+            }
+            return root.source
+        }
+        implicitSize: root.height
+    }
+
+    Loader {
+        active: root.colorize
+        anchors.fill: iconImage
+        sourceComponent: ColorOverlay {
+            source: iconImage
+            color: root.color
+        }
+    }
+}

configs/quickshell/modules/common/widgets/DialogButton.qml

@@ -0,0 +1,33 @@
+import qs.modules.common
+import QtQuick
+
+/**
+ * Material 3 dialog button. See https://m3.material.io/components/dialogs/overview
+ */
+RippleButton {
+    id: button
+
+    property string buttonText
+    implicitHeight: 30
+    implicitWidth: buttonTextWidget.implicitWidth + 15 * 2
+    buttonRadius: Appearance?.rounding.full ?? 9999
+
+    property color colEnabled: Appearance?.colors.colPrimary ?? "#65558F"
+    property color colDisabled: Appearance?.m3colors.m3outline ?? "#8D8C96"
+
+    contentItem: StyledText {
+        id: buttonTextWidget
+        anchors.fill: parent
+        anchors.leftMargin: 15
+        anchors.rightMargin: 15
+        text: buttonText
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: Appearance?.font.pixelSize.small ?? 12
+        color: button.enabled ? button.colEnabled : button.colDisabled
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+}

configs/quickshell/modules/common/widgets/DragManager.qml

@@ -0,0 +1,72 @@
+import qs.modules.common
+import qs.services
+import QtQuick
+
+/**
+ * A convenience MouseArea for handling drag events.
+ */
+MouseArea {
+    id: root
+    hoverEnabled: true
+    acceptedButtons: Qt.LeftButton
+
+    property bool interactive: true
+    property bool automaticallyReset: true
+    readonly property real dragDiffX: _dragDiffX
+    readonly property real dragDiffY: _dragDiffY
+
+    signal dragPressed(diffX: real, diffY: real)
+    signal dragReleased(diffX: real, diffY: real)
+    
+    property real startX: 0
+    property real startY: 0
+    property bool dragging: false
+    property real _dragDiffX: 0
+    property real _dragDiffY: 0
+
+    function resetDrag() {
+        _dragDiffX = 0
+        _dragDiffY = 0
+    }
+
+    onPressed: (mouse) => {
+        if (!root.interactive) {
+            if (mouse.button === Qt.LeftButton) {
+                mouse.accepted = false;
+            }
+            return;
+        }
+        if (mouse.button === Qt.LeftButton) {
+            startX = mouse.x
+            startY = mouse.y
+        }
+    }
+    onReleased: (mouse) => {
+        if (!root.interactive) {
+            return;
+        }
+        dragging = false
+        root.dragReleased(_dragDiffX, _dragDiffY);
+        if (root.automaticallyReset) {
+            root.resetDrag();
+        }
+    }
+    onPositionChanged: (mouse) => {
+        if (!root.interactive) {
+            return;
+        }
+        if (mouse.buttons & Qt.LeftButton) {
+            root._dragDiffX = mouse.x - startX
+            root._dragDiffY = mouse.y - startY
+            const dist = Math.sqrt(root._dragDiffX * root._dragDiffX + root._dragDiffY * root._dragDiffY);
+            root.dragPressed(_dragDiffX, _dragDiffY);
+            root.dragging = true;
+        }
+    }
+    onCanceled: (mouse) => {
+        if (!root.interactive) {
+            return;
+        }
+        released(mouse);
+    }
+}

configs/quickshell/modules/common/widgets/Favicon.qml

@@ -0,0 +1,48 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs.modules.common.functions
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import Quickshell.Io
+import Quickshell.Widgets
+
+IconImage {
+    id: root
+    property string url
+    property string displayText
+
+    property real size: 32
+    property string downloadUserAgent: Config.options?.networking.userAgent ?? ""
+    property string faviconDownloadPath: Directories.favicons
+    property string domainName: url.includes("vertexaisearch") ? displayText : StringUtils.getDomain(url)
+    property string faviconUrl: `https://www.google.com/s2/favicons?domain=${domainName}&sz=32`
+    property string fileName: `${domainName}.ico`
+    property string faviconFilePath: `${faviconDownloadPath}/${fileName}`
+    property string urlToLoad
+
+    Process {
+        id: faviconDownloadProcess
+        running: false
+        command: ["bash", "-c", `[ -f ${faviconFilePath} ] || curl -s '${root.faviconUrl}' -o '${faviconFilePath}' -L -H 'User-Agent: ${downloadUserAgent}'`]
+        onExited: (exitCode, exitStatus) => {
+            root.urlToLoad = root.faviconFilePath
+        }
+    }
+
+    Component.onCompleted: {
+        faviconDownloadProcess.running = true
+    }
+
+    source: Qt.resolvedUrl(root.urlToLoad)
+    implicitSize: root.size
+
+    layer.enabled: true
+    layer.effect: OpacityMask {
+        maskSource: Rectangle {
+            width: root.implicitSize
+            height: root.implicitSize
+            radius: Appearance.rounding.full
+        }
+    }
+}

configs/quickshell/modules/common/widgets/FloatingActionButton.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.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
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/FlowButtonGroup.qml

@@ -0,0 +1,8 @@
+import QtQuick
+
+/** 
+ * This is just to make sure `RippleButton`s can be used in a Flow layout.
+ */
+Flow {
+    property int clickIndex: -1
+}

configs/quickshell/modules/common/widgets/GroupButton.qml

@@ -0,0 +1,130 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+/**
+ * Material 3 button with expressive bounciness. 
+ * See https://m3.material.io/components/button-groups/overview
+ */
+Button {
+    id: root
+    property bool toggled
+    property string buttonText
+    property real buttonRadius: Appearance?.rounding?.small ?? 8
+    property real buttonRadiusPressed: Appearance?.rounding?.small ?? 6
+    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 bool bounce: true
+    property real baseWidth: contentItem.implicitWidth + horizontalPadding * 2
+    property real baseHeight: contentItem.implicitHeight + verticalPadding * 2
+    property real clickedWidth: baseWidth + 20
+    property real clickedHeight: baseHeight
+    property var parentGroup: root.parent
+    property int clickIndex: parentGroup?.clickIndex ?? -1
+
+    Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(root) && parentGroup.children.indexOf(root) <= clickIndex + 1)
+    Layout.fillHeight: (clickIndex - 1 <= parentGroup.children.indexOf(root) && parentGroup.children.indexOf(root) <= clickIndex + 1)
+    implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth
+    implicitHeight: (root.down && bounce) ? clickedHeight : baseHeight
+
+    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
+    property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
+    property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
+    property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F"
+    property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
+    property color colBackgroundToggledActive: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+
+    property real radius: root.down ? root.buttonRadiusPressed : root.buttonRadius
+    property real leftRadius: root.down ? root.buttonRadiusPressed : root.buttonRadius
+    property real rightRadius: root.down ? root.buttonRadiusPressed : root.buttonRadius
+    property color color: root.enabled ? (root.toggled ? 
+        (root.down ? colBackgroundToggledActive : 
+            root.hovered ? colBackgroundToggledHover : 
+            colBackgroundToggled) :
+        (root.down ? colBackgroundActive : 
+            root.hovered ? colBackgroundHover : 
+            colBackground)) : colBackground
+
+    onDownChanged: {
+        if (root.down) {
+            if (root.parent.clickIndex !== undefined) {
+                root.parent.clickIndex = parent.children.indexOf(root)
+            }
+        }
+    }
+
+    Behavior on implicitWidth {
+        animation: Appearance.animation.clickBounce.numberAnimation.createObject(this)
+    }
+
+    Behavior on implicitHeight {
+        animation: Appearance.animation.clickBounce.numberAnimation.createObject(this)
+    }
+
+    Behavior on leftRadius {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+    Behavior on rightRadius {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    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();
+        }
+        onReleased: (event) => {
+            root.down = false
+            if (event.button != Qt.LeftButton) return;
+            if (root.releaseAction) root.releaseAction();
+        }
+        onClicked: (event) => {
+            if (event.button != Qt.LeftButton) return;
+            root.click()
+        }
+        onCanceled: (event) => {
+            root.down = false
+        }
+
+        onPressAndHold: () => {
+            altAction(); 
+            root.down = false; 
+            root.clicked = false;
+        };
+    }
+
+
+    background: Rectangle {
+        id: buttonBackground
+        topLeftRadius: root.leftRadius
+        topRightRadius: root.rightRadius
+        bottomLeftRadius: root.leftRadius
+        bottomRightRadius: root.rightRadius
+        implicitHeight: 50
+
+        color: root.color
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+    contentItem: StyledText {
+        text: root.buttonText
+    }
+}

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

@@ -0,0 +1,42 @@
+import qs.modules.common
+import QtQuick
+
+Rectangle {
+    id: root
+    property string key
+
+    property real horizontalPadding: 6
+    property real verticalPadding: 1
+    property real borderWidth: 1
+    property real extraBottomBorderWidth: 2
+    property color borderColor: Appearance.colors.colOnLayer0
+    property real borderRadius: 5
+    property color keyColor: Appearance.m3colors.m3surfaceContainerLow
+    implicitWidth: keyFace.implicitWidth + borderWidth * 2
+    implicitHeight: keyFace.implicitHeight + borderWidth * 2 + extraBottomBorderWidth
+    radius: borderRadius
+    color: borderColor
+
+    Rectangle {
+        id: keyFace
+        anchors {
+            fill: parent
+            topMargin: borderWidth
+            leftMargin: borderWidth
+            rightMargin: borderWidth
+            bottomMargin: extraBottomBorderWidth + borderWidth
+        }
+        implicitWidth: keyText.implicitWidth + horizontalPadding * 2
+        implicitHeight: keyText.implicitHeight + verticalPadding * 2
+        color: keyColor
+        radius: borderRadius - borderWidth
+
+        StyledText {
+            id: keyText
+            anchors.centerIn: parent
+            font.family: Appearance.font.family.monospace
+            font.pixelSize: Appearance.font.pixelSize.smaller
+            text: key
+        }
+    }
+}

configs/quickshell/modules/common/widgets/LightDarkPreferenceButton.qml

@@ -0,0 +1,122 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+GroupButton {
+    id: lightDarkButtonRoot
+    required property bool dark
+    property color previewBg: dark ? ColorUtils.colorWithHueOf("#3f3838", Appearance.m3colors.m3primary) : 
+        ColorUtils.colorWithHueOf("#F7F9FF", Appearance.m3colors.m3primary)
+    property color previewFg: dark ? Qt.lighter(previewBg, 2.2) : ColorUtils.mix(previewBg, "#292929", 0.85)
+    padding: 5
+    Layout.fillWidth: true
+    colBackground: Appearance.colors.colLayer2
+    toggled: Appearance.m3colors.darkmode === dark
+    onClicked: {
+        Quickshell.execDetached(["bash", "-c", `${Directories.wallpaperSwitchScriptPath} --mode ${dark ? "dark" : "light"} --noswitch`])
+    }
+    contentItem: Item {
+        anchors.centerIn: parent
+        implicitWidth: buttonContentLayout.implicitWidth
+        implicitHeight: buttonContentLayout.implicitHeight
+        ColumnLayout {
+            id: buttonContentLayout
+            anchors.centerIn: parent
+            Rectangle {
+                Layout.alignment: Qt.AlignHCenter
+                implicitWidth: 250
+                implicitHeight: skeletonColumnLayout.implicitHeight + 10 * 2
+                radius: lightDarkButtonRoot.buttonRadius - lightDarkButtonRoot.padding
+                color: lightDarkButtonRoot.previewBg
+                border {
+                    width: 1
+                    color: Appearance.m3colors.m3outlineVariant
+                }
+
+                // Some skeleton items
+                ColumnLayout {
+                    id: skeletonColumnLayout
+                    anchors.fill: parent
+                    anchors.margins: 10
+                    spacing: 10
+                    RowLayout {
+                        Rectangle {
+                            radius: Appearance.rounding.full
+                            color: lightDarkButtonRoot.previewFg
+                            implicitWidth: 50
+                            implicitHeight: 50
+                        }
+                        ColumnLayout {
+                            spacing: 4
+                            Rectangle {
+                                radius: Appearance.rounding.unsharpenmore
+                                color: lightDarkButtonRoot.previewFg
+                                Layout.fillWidth: true
+                                implicitHeight: 22
+                            }
+                            Rectangle {
+                                radius: Appearance.rounding.unsharpenmore
+                                color: lightDarkButtonRoot.previewFg
+                                Layout.fillWidth: true
+                                Layout.rightMargin: 45
+                                implicitHeight: 18
+                            }
+                        }
+                    }
+                    StyledProgressBar {
+                        Layout.topMargin: 5
+                        Layout.bottomMargin: 5
+                        Layout.fillWidth: true
+                        value: 0.7
+                        sperm: true
+                        animateSperm: lightDarkButtonRoot.toggled
+                        highlightColor: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3primary : lightDarkButtonRoot.previewFg
+                        trackColor: ColorUtils.mix(lightDarkButtonRoot.previewBg, lightDarkButtonRoot.previewFg, 0.5)
+                    }
+                    RowLayout {
+                        spacing: 2
+                        Rectangle {
+                            radius: Appearance.rounding.full
+                            color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3primary : lightDarkButtonRoot.previewFg
+                            Layout.fillWidth: true
+                            implicitHeight: 30
+                            MaterialSymbol {
+                                visible: lightDarkButtonRoot.toggled
+                                anchors.centerIn: parent
+                                horizontalAlignment: Text.AlignHCenter
+                                text: "check"
+                                iconSize: 20
+                                color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3onPrimary : lightDarkButtonRoot.previewBg
+                            }
+                        }
+                        Rectangle {
+                            radius: Appearance.rounding.unsharpenmore
+                            color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3secondaryContainer : lightDarkButtonRoot.previewFg
+                            Layout.fillWidth: true
+                            implicitHeight: 30
+                        }
+                        Rectangle {
+                            topLeftRadius: Appearance.rounding.unsharpenmore
+                            bottomLeftRadius: Appearance.rounding.unsharpenmore
+                            topRightRadius: Appearance.rounding.full
+                            bottomRightRadius: Appearance.rounding.full
+                            color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3secondaryContainer : lightDarkButtonRoot.previewFg
+                            Layout.fillWidth: true
+                            implicitHeight: 30
+                        }
+                    }
+                }
+            }
+            StyledText {
+                Layout.fillWidth: true
+                text: dark ? Translation.tr("Dark") : Translation.tr("Light")
+                color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer2
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/MaterialSymbol.qml

@@ -0,0 +1,32 @@
+import qs.modules.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,
+            // "wght": font.weight,
+            // "GRAD": 0,
+            "opsz": iconSize,
+        }
+    }
+    verticalAlignment: Text.AlignVCenter
+    color: Appearance.m3colors.m3onBackground
+
+    // Behavior on fill {
+    //     NumberAnimation {
+    //         duration: Appearance?.animation.elementMoveFast.duration ?? 200
+    //         easing.type: Appearance?.animation.elementMoveFast.type ?? Easing.BezierSpline
+    //         easing.bezierCurve: Appearance?.animation.elementMoveFast.bezierCurve ?? [0.34, 0.80, 0.34, 1.00, 1, 1]
+    //     }
+    // }
+}

configs/quickshell/modules/common/widgets/MaterialTextField.qml

@@ -0,0 +1,52 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls
+
+/**
+ * Material 3 styled TextArea (filled style)
+ * https://m3.material.io/components/text-fields/overview
+ * Note: We don't use NativeRendering because it makes the small placeholder text look weird
+ */
+TextArea {
+    id: root
+    Material.theme: Material.System
+    Material.accent: Appearance.m3colors.m3primary
+    Material.primary: Appearance.m3colors.m3primary
+    Material.background: Appearance.m3colors.m3surface
+    Material.foreground: Appearance.m3colors.m3onSurface
+    Material.containerStyle: Material.Filled
+    renderType: Text.QtRendering
+
+    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+    placeholderTextColor: Appearance.m3colors.m3outline
+
+    background: Rectangle {
+        implicitHeight: 56
+        color: Appearance.m3colors.m3surface
+        topLeftRadius: 4
+        topRightRadius: 4
+        Rectangle {
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            height: 1
+            color: root.focus ? Appearance.m3colors.m3primary : 
+                root.hovered ? Appearance.m3colors.m3outline : Appearance.m3colors.m3outlineVariant
+
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+        }
+    }
+
+    font {
+        family: Appearance?.font.family.main ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        hintingPreference: Font.PreferFullHinting
+    }
+    wrapMode: TextEdit.Wrap
+}

configs/quickshell/modules/common/widgets/MenuButton.qml

@@ -0,0 +1,26 @@
+import qs.modules.common
+import QtQuick
+
+RippleButton {
+    id: root
+
+    buttonRadius: 0
+    implicitHeight: 36
+    implicitWidth: buttonTextWidget.implicitWidth + 14 * 2
+
+    contentItem: StyledText {
+        id: buttonTextWidget
+        anchors.fill: parent
+        anchors.leftMargin: 14
+        anchors.rightMargin: 14
+        text: root.buttonText
+        horizontalAlignment: Text.AlignLeft
+        font.pixelSize: Appearance.font.pixelSize.small
+        color: root.enabled ? Appearance.m3colors.m3onSurface : Appearance.m3colors.m3outline
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+}

configs/quickshell/modules/common/widgets/NavigationRail.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+ColumnLayout { // Window content with navigation rail and content pane
+    id: root
+    property bool expanded: true
+    property int currentIndex: 0
+    spacing: 5
+}

configs/quickshell/modules/common/widgets/NavigationRailButton.qml

@@ -0,0 +1,148 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.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
+        }
+    }
+
+}

configs/quickshell/modules/common/widgets/NavigationRailExpandButton.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.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"
+    }
+}

configs/quickshell/modules/common/widgets/NavigationRailTabArray.qml

@@ -0,0 +1,41 @@
+import qs.modules.common
+import qs.modules.common.widgets
+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
+
+    }
+}

configs/quickshell/modules/common/widgets/NotificationActionButton.qml

@@ -0,0 +1,24 @@
+import qs.modules.common
+import qs.services
+import QtQuick
+import Quickshell.Services.Notifications
+
+RippleButton {
+    id: button
+    property string buttonText
+    property string urgency
+
+    implicitHeight: 30
+    leftPadding: 15
+    rightPadding: 15
+    buttonRadius: Appearance.rounding.small
+    colBackground: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainer : Appearance.colors.colSurfaceContainerHighest
+    colBackgroundHover: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSurfaceContainerHighestHover
+    colRipple: (urgency == NotificationUrgency.Critical) ? Appearance.colors.colSecondaryContainerActive : Appearance.colors.colSurfaceContainerHighestActive
+
+    contentItem: StyledText {
+        horizontalAlignment: Text.AlignHCenter
+        text: buttonText
+        color: (urgency == NotificationUrgency.Critical) ? Appearance.m3colors.m3onSurfaceVariant : Appearance.m3colors.m3onSurface
+    }
+}

configs/quickshell/modules/common/widgets/NotificationAppIcon.qml

@@ -0,0 +1,103 @@
+import qs.modules.common
+import "./notification_utils.js" as NotificationUtils
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Notifications
+
+Rectangle { // App icon
+    id: root
+    property var appIcon: ""
+    property var summary: ""
+    property var urgency: NotificationUrgency.Normal
+    property var image: ""
+    property real scale: 1
+    property real size: 45 * scale
+    property real materialIconScale: 0.57
+    property real appIconScale: 0.7
+    property real smallAppIconScale: 0.49
+    property real materialIconSize: size * materialIconScale
+    property real appIconSize: size * appIconScale
+    property real smallAppIconSize: size * smallAppIconScale
+
+    implicitWidth: size
+    implicitHeight: size
+    radius: Appearance.rounding.full
+    color: Appearance.colors.colSecondaryContainer
+    Loader {
+        id: materialSymbolLoader
+        active: root.appIcon == ""
+        anchors.fill: parent
+        sourceComponent: MaterialSymbol {
+            text: {
+                const defaultIcon = NotificationUtils.findSuitableMaterialSymbol("")
+                const guessedIcon = NotificationUtils.findSuitableMaterialSymbol(root.summary)
+                return (root.urgency == NotificationUrgency.Critical && guessedIcon === defaultIcon) ?
+                    "release_alert" : guessedIcon
+            }
+            anchors.fill: parent
+            color: (root.urgency == NotificationUrgency.Critical) ? 
+                ColorUtils.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) :
+                Appearance.m3colors.m3onSecondaryContainer
+            iconSize: root.materialIconSize
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+    Loader {
+        id: appIconLoader
+        active: root.image == "" && root.appIcon != ""
+        anchors.centerIn: parent
+        sourceComponent: IconImage {
+            id: appIconImage
+            implicitSize: root.appIconSize
+            asynchronous: true
+            source: Quickshell.iconPath(root.appIcon, "image-missing")
+        }
+    }
+    Loader {
+        id: notifImageLoader
+        active: root.image != ""
+        anchors.fill: parent
+        sourceComponent: Item {
+            anchors.fill: parent
+            Image {
+                id: notifImage
+                anchors.fill: parent
+                readonly property int size: parent.width
+
+                source: root.image
+                fillMode: Image.PreserveAspectCrop
+                cache: false
+                antialiasing: true
+                asynchronous: true
+
+                width: size
+                height: size
+                sourceSize.width: size
+                sourceSize.height: size
+
+                layer.enabled: true
+                layer.effect: OpacityMask {
+                    maskSource: Rectangle {
+                        width: notifImage.size
+                        height: notifImage.size
+                        radius: Appearance.rounding.full
+                    }
+                }
+            }
+            Loader {
+                id: notifImageAppIconLoader
+                active: root.appIcon != ""
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                sourceComponent: IconImage {
+                    implicitSize: root.smallAppIconSize
+                    asynchronous: true
+                    source: Quickshell.iconPath(root.appIcon, "image-missing")
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/NotificationGroup.qml

@@ -0,0 +1,236 @@
+import qs.modules.common
+import qs.services
+import qs.modules.common.functions
+import "./notification_utils.js" as NotificationUtils
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+/**
+ * A group of notifications from the same app.
+ * Similar to Android's notifications
+ */
+Item { // Notification group area
+    id: root
+    property var notificationGroup
+    property var notifications: notificationGroup?.notifications ?? []
+    property int notificationCount: notifications.length
+    property bool multipleNotifications: notificationCount > 1
+    property bool expanded: false
+    property bool popup: false
+    property real padding: 10
+    implicitHeight: background.implicitHeight
+
+    property real dragConfirmThreshold: 70 // Drag further to discard notification
+    property real dismissOvershoot: 20 // Account for gaps and bouncy animations
+    property var qmlParent: root.parent.parent // There's something between this and the parent ListView
+    property var parentDragIndex: qmlParent.dragIndex
+    property var parentDragDistance: qmlParent.dragDistance
+    property var dragIndexDiff: Math.abs(parentDragIndex - index)
+    property real xOffset: dragIndexDiff == 0 ? Math.max(0, parentDragDistance) : 
+        parentDragDistance > dragConfirmThreshold ? 0 :
+        dragIndexDiff == 1 ? Math.max(0, parentDragDistance * 0.3) :
+        dragIndexDiff == 2 ? Math.max(0, parentDragDistance * 0.1) : 0
+
+    function destroyWithAnimation() {
+        root.qmlParent.resetDrag()
+        background.anchors.leftMargin = background.anchors.leftMargin; // Break binding
+        destroyAnimation.running = true;
+    }
+
+    SequentialAnimation { // Drag finish animation
+        id: destroyAnimation
+        running: false
+
+        NumberAnimation {
+            target: background.anchors
+            property: "leftMargin"
+            to: root.width + root.dismissOvershoot
+            duration: Appearance.animation.elementMove.duration
+            easing.type: Appearance.animation.elementMove.type
+            easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+        }
+        onFinished: () => {
+            root.notifications.forEach((notif) => {
+                Qt.callLater(() => {
+                    Notifications.discardNotification(notif.notificationId);
+                });
+            });
+        }
+    }
+
+    function toggleExpanded() {
+        if (expanded) implicitHeightAnim.enabled = true;
+        else implicitHeightAnim.enabled = false;
+        root.expanded = !root.expanded;
+    }
+
+    DragManager { // Drag manager
+        id: dragManager
+        anchors.fill: parent
+        interactive: !expanded
+        automaticallyReset: false
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.RightButton) 
+                root.toggleExpanded();
+            else if (mouse.button === Qt.MiddleButton) 
+                root.destroyWithAnimation();
+        }
+
+        onDraggingChanged: () => {
+            if (dragging) {
+                root.qmlParent.dragIndex = root.index ?? root.parent.children.indexOf(root);
+            }
+        }
+
+        onDragDiffXChanged: () => {
+            root.qmlParent.dragDistance = dragDiffX;
+        }
+
+        onDragReleased: (diffX, diffY) => {
+            if (diffX > root.dragConfirmThreshold)
+                root.destroyWithAnimation();
+            else 
+                dragManager.resetDrag();
+        }
+    }
+
+    StyledRectangularShadow {
+        target: background
+        visible: popup
+    }
+    Rectangle { // Background of the notification
+        id: background
+        anchors.left: parent.left
+        width: parent.width
+        color: Appearance.colors.colSurfaceContainer
+        radius: Appearance.rounding.normal
+        anchors.leftMargin: root.xOffset
+
+        Behavior on anchors.leftMargin {
+            enabled: !dragManager.dragging
+            NumberAnimation {
+                duration: Appearance.animation.elementMove.duration
+                easing.type: Appearance.animation.elementMove.type
+                easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial
+            }
+        }
+        
+        clip: true
+        implicitHeight: expanded ? 
+            row.implicitHeight + padding * 2 :
+            Math.min(80, row.implicitHeight + padding * 2)
+
+        Behavior on implicitHeight {
+            id: implicitHeightAnim
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+
+        RowLayout { // Left column for icon, right column for content
+            id: row
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.margins: root.padding
+            spacing: 10
+
+            NotificationAppIcon { // Icons
+                Layout.alignment: Qt.AlignTop
+                Layout.fillWidth: false
+                image: root?.multipleNotifications ? "" : notificationGroup?.notifications[0]?.image ?? ""
+                appIcon: notificationGroup?.appIcon
+                summary: notificationGroup?.notifications[root.notificationCount - 1]?.summary
+            }
+
+            ColumnLayout { // Content
+                Layout.fillWidth: true
+                spacing: expanded ? (root.multipleNotifications ? 
+                    (notificationGroup?.notifications[root.notificationCount - 1].image != "") ? 35 : 
+                    5 : 0) : 0
+                // spacing: 00
+                Behavior on spacing {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+
+                Item { // App name (or summary when there's only 1 notif) and time
+                    id: topRow
+                    // spacing: 0
+                    Layout.fillWidth: true
+                    property real fontSize: Appearance.font.pixelSize.smaller
+                    property bool showAppName: root.multipleNotifications
+                    implicitHeight: Math.max(topTextRow.implicitHeight, expandButton.implicitHeight)
+
+                    RowLayout {
+                        id: topTextRow
+                        anchors.left: parent.left
+                        anchors.right: expandButton.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: 5
+                        StyledText {
+                            id: appName
+                            elide: Text.ElideRight
+                            Layout.fillWidth: true
+                            text: (topRow.showAppName ?
+                                notificationGroup?.appName :
+                                notificationGroup?.notifications[0]?.summary) || ""
+                            font.pixelSize: topRow.showAppName ?
+                                topRow.fontSize :
+                                Appearance.font.pixelSize.small
+                            color: topRow.showAppName ?
+                                Appearance.colors.colSubtext :
+                                Appearance.colors.colOnLayer2
+                        }
+                        StyledText {
+                            id: timeText
+                            // Layout.fillWidth: true
+                            Layout.rightMargin: 10
+                            horizontalAlignment: Text.AlignLeft
+                            text: NotificationUtils.getFriendlyNotifTimeString(notificationGroup?.time)
+                            font.pixelSize: topRow.fontSize
+                            color: Appearance.colors.colSubtext
+                        }
+                    }
+                    NotificationGroupExpandButton {
+                        id: expandButton
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        count: root.notificationCount
+                        expanded: root.expanded
+                        fontSize: topRow.fontSize
+                        onClicked: { root.toggleExpanded() }
+                    }
+                }
+
+                StyledListView { // Notification body (expanded)
+                    id: notificationsColumn
+                    implicitHeight: contentHeight
+                    Layout.fillWidth: true
+                    spacing: expanded ? 5 : 3
+                    // clip: true
+                    interactive: false
+                    Behavior on spacing {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+                    model: ScriptModel {
+                        values: root.expanded ? root.notifications.slice().reverse() : 
+                            root.notifications.slice().reverse().slice(0, 2)
+                    }
+                    delegate: NotificationItem {
+                        required property int index
+                        required property var modelData
+                        notificationObject: modelData
+                        expanded: root.expanded
+                        onlyNotification: (root.notificationCount === 1)
+                        opacity: (!root.expanded && index == 1 && root.notificationCount > 2) ? 0.5 : 1
+                        visible: root.expanded || (index < 2)
+                        anchors.left: parent?.left
+                        anchors.right: parent?.right
+                    }
+                }
+
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/NotificationGroupExpandButton.qml

@@ -0,0 +1,48 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+
+RippleButton { // Expand button
+    id: root
+    required property int count
+    required property bool expanded
+    property real fontSize: Appearance?.font.pixelSize.small ?? 12
+    property real iconSize: Appearance?.font.pixelSize.normal ?? 16
+    implicitHeight: fontSize + 4 * 2
+    implicitWidth: Math.max(contentItem.implicitWidth + 5 * 2, 30)
+    Layout.alignment: Qt.AlignVCenter
+    Layout.fillHeight: false
+
+    buttonRadius: Appearance.rounding.full
+    colBackground: ColorUtils.mix(Appearance?.colors.colLayer2, Appearance?.colors.colLayer2Hover, 0.5)
+    colBackgroundHover: Appearance?.colors.colLayer2Hover ?? "#E5DFED"
+    colRipple: Appearance?.colors.colLayer2Active ?? "#D6CEE2"
+
+    contentItem: Item {
+        anchors.centerIn: parent
+        implicitWidth: contentRow.implicitWidth
+        RowLayout {
+            id: contentRow
+            anchors.centerIn: parent
+            spacing: 3
+            StyledText {
+                Layout.leftMargin: 4
+                visible: root.count > 1
+                text: root.count
+                font.pixelSize: root.fontSize
+            }
+            MaterialSymbol {
+                text: "keyboard_arrow_down"
+                iconSize: root.iconSize
+                color: Appearance.colors.colOnLayer2
+                rotation: expanded ? 180 : 0
+                Behavior on rotation {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+            }
+        }
+    }
+
+}

configs/quickshell/modules/common/widgets/NotificationItem.qml

@@ -0,0 +1,313 @@
+import qs
+import qs.modules.common
+import qs.services
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.Notifications
+
+Item { // Notification item area
+    id: root
+    property var notificationObject
+    property bool expanded: false
+    property bool onlyNotification: false
+    property real fontSize: Appearance.font.pixelSize.small
+    property real padding: onlyNotification ? 0 : 8
+
+    property real dragConfirmThreshold: 70 // Drag further to discard notification
+    property real dismissOvershoot: notificationIcon.implicitWidth + 20 // Account for gaps and bouncy animations
+    property var qmlParent: root?.parent?.parent // There's something between this and the parent ListView
+    property var parentDragIndex: qmlParent?.dragIndex ?? -1
+    property var parentDragDistance: qmlParent?.dragDistance ?? 0
+    property var dragIndexDiff: Math.abs(parentDragIndex - index)
+    property real xOffset: dragIndexDiff == 0 ? Math.max(0, parentDragDistance) : 
+        parentDragDistance > dragConfirmThreshold ? 0 :
+        dragIndexDiff == 1 ? Math.max(0, parentDragDistance * 0.3) :
+        dragIndexDiff == 2 ? Math.max(0, parentDragDistance * 0.1) : 0
+
+    implicitHeight: background.implicitHeight
+
+    function processNotificationBody(body, appName) {
+        let processedBody = body
+        
+        // Clean Chromium-based browsers notifications - remove first line
+        if (appName) {
+            const lowerApp = appName.toLowerCase()
+            const chromiumBrowsers = [
+                "brave", "chrome", "chromium", "vivaldi", "opera", "microsoft edge"
+            ]
+
+            if (chromiumBrowsers.some(name => lowerApp.includes(name))) {
+                const lines = body.split('\n\n')
+
+                if (lines.length > 1 && lines[0].startsWith('<a')) {
+                    processedBody = lines.slice(1).join('\n\n')
+                }
+            }
+        }
+        
+        return processedBody
+    }
+
+    function destroyWithAnimation() {
+        root.qmlParent.resetDrag()
+        background.anchors.leftMargin = background.anchors.leftMargin; // Break binding
+        destroyAnimation.running = true;
+    }
+
+    SequentialAnimation { // Drag finish animation
+        id: destroyAnimation
+        running: false
+
+        NumberAnimation {
+            target: background.anchors
+            property: "leftMargin"
+            to: root.width + root.dismissOvershoot
+            duration: Appearance.animation.elementMove.duration
+            easing.type: Appearance.animation.elementMove.type
+            easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+        }
+        onFinished: () => {
+            Notifications.discardNotification(notificationObject.notificationId);
+        }
+    }
+
+    DragManager { // Drag manager
+        id: dragManager
+        anchors.fill: root
+        anchors.leftMargin: root.expanded ? -notificationIcon.implicitWidth : 0
+        interactive: expanded
+        automaticallyReset: false
+        acceptedButtons: Qt.LeftButton | Qt.MiddleButton
+
+        onClicked: (mouse) => {
+            if (mouse.button === Qt.MiddleButton) {
+                root.destroyWithAnimation();
+            }
+        }
+
+        onDraggingChanged: () => {
+            if (dragging) {
+                root.qmlParent.dragIndex = root.index ?? root.parent.children.indexOf(root);
+            }
+        }
+
+        onDragDiffXChanged: () => {
+            root.qmlParent.dragDistance = dragDiffX;
+        }
+
+        onDragReleased: (diffX, diffY) => {
+            if (diffX > root.dragConfirmThreshold)
+                root.destroyWithAnimation();
+            else 
+                dragManager.resetDrag();
+        }
+    }
+
+    NotificationAppIcon { // App icon
+        id: notificationIcon
+        opacity: (!onlyNotification && notificationObject.image != "" && expanded) ? 1 : 0
+        visible: opacity > 0
+
+        Behavior on opacity {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+
+        image: notificationObject.image
+        anchors.right: background.left
+        anchors.top: background.top
+        anchors.rightMargin: 10
+    }
+
+    Rectangle { // Background of notification item
+        id: background
+        width: parent.width
+        anchors.left: parent.left
+        radius: Appearance.rounding.small
+        anchors.leftMargin: root.xOffset
+
+        Behavior on anchors.leftMargin {
+            enabled: !dragManager.dragging
+            NumberAnimation {
+                duration: Appearance.animation.elementMove.duration
+                easing.type: Appearance.animation.elementMove.type
+                easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial
+            }
+        }
+
+        color: (expanded && !onlyNotification) ? 
+            (notificationObject.urgency == NotificationUrgency.Critical) ? 
+                ColorUtils.mix(Appearance.colors.colSecondaryContainer, Appearance.colors.colLayer2, 0.35) :
+                (Appearance.colors.colSurfaceContainerHigh) :
+            ColorUtils.transparentize(Appearance.colors.colSurfaceContainerHighest)
+
+        implicitHeight: expanded ? (contentColumn.implicitHeight + padding * 2) : summaryRow.implicitHeight
+        Behavior on implicitHeight {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+
+        ColumnLayout { // Content column
+            id: contentColumn
+            anchors.fill: parent
+            anchors.margins: expanded ? root.padding : 0
+            spacing: 3
+
+            Behavior on anchors.margins {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+
+            RowLayout { // Summary row
+                id: summaryRow
+                visible: !root.onlyNotification || !root.expanded
+                Layout.fillWidth: true
+                implicitHeight: summaryText.implicitHeight
+                // Layout.fillWidth: true
+                StyledText {
+                    id: summaryText
+                    visible: !root.onlyNotification
+                    font.pixelSize: root.fontSize
+                    color: Appearance.colors.colOnLayer2
+                    elide: Text.ElideRight
+                    text: root.notificationObject.summary || ""
+                }
+                StyledText {
+                    opacity: !root.expanded ? 1 : 0
+                    visible: opacity > 0
+                    Layout.fillWidth: true
+                    Behavior on opacity {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+                    font.pixelSize: root.fontSize
+                    color: Appearance.colors.colSubtext
+                    elide: Text.ElideRight
+                    wrapMode: Text.Wrap // Needed for proper eliding????
+                    maximumLineCount: 1
+                    textFormat: Text.StyledText
+                    text: {
+                        return processNotificationBody(notificationObject.body, notificationObject.appName || notificationObject.summary).replace(/\n/g, "<br/>")
+                    }
+                }
+            }
+
+            ColumnLayout { // Expanded content
+                Layout.fillWidth: true
+                opacity: root.expanded ? 1 : 0
+                visible: opacity > 0
+
+                StyledText { // Notification body (expanded)
+                    id: notificationBodyText
+                    Behavior on opacity {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+                    Layout.fillWidth: true
+                    font.pixelSize: root.fontSize
+                    color: Appearance.colors.colSubtext
+                    wrapMode: Text.Wrap
+                    elide: Text.ElideRight
+                    textFormat: Text.RichText
+                    text: {
+                        return `<style>img{max-width:${300 /* binding to notificationBodyText.width would cause a binding loop */}px;}</style>` + 
+                               `${processNotificationBody(notificationObject.body, notificationObject.appName || notificationObject.summary).replace(/\n/g, "<br/>")}`
+                    }
+
+                    onLinkActivated: (link) => {
+                        Qt.openUrlExternally(link)
+                        GlobalStates.sidebarRightOpen = false
+                    }
+                    
+                    PointingHandLinkHover {}
+                }
+
+                StyledFlickable { // Notification actions
+                    id: actionsFlickable
+                    Layout.fillWidth: true
+                    implicitHeight: actionRowLayout.implicitHeight
+                    contentWidth: actionRowLayout.implicitWidth
+                    clip: !onlyNotification
+
+                    Behavior on opacity {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+                    Behavior on height {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+                    Behavior on implicitHeight {
+                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                    }
+
+                    RowLayout {
+                        id: actionRowLayout
+                        Layout.alignment: Qt.AlignBottom
+
+                        NotificationActionButton {
+                            Layout.fillWidth: true
+                            buttonText: Translation.tr("Close")
+                            urgency: notificationObject.urgency
+                            implicitWidth: (notificationObject.actions.length == 0) ? ((actionsFlickable.width - actionRowLayout.spacing) / 2) : 
+                                (contentItem.implicitWidth + leftPadding + rightPadding)
+
+                            onClicked: {
+                                root.destroyWithAnimation()
+                            }
+
+                            contentItem: MaterialSymbol {
+                                iconSize: Appearance.font.pixelSize.large
+                                horizontalAlignment: Text.AlignHCenter
+                                color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
+                                    Appearance.m3colors.m3onSurfaceVariant : Appearance.m3colors.m3onSurface
+                                text: "close"
+                            }
+                        }
+
+                        Repeater {
+                            id: actionRepeater
+                            model: notificationObject.actions
+                            NotificationActionButton {
+                                Layout.fillWidth: true
+                                buttonText: modelData.text
+                                urgency: notificationObject.urgency
+                                onClicked: {
+                                    Notifications.attemptInvokeAction(notificationObject.notificationId, modelData.identifier);
+                                }
+                            }
+                        }
+
+                        NotificationActionButton {
+                            Layout.fillWidth: true
+                            urgency: notificationObject.urgency
+                            implicitWidth: (notificationObject.actions.length == 0) ? ((actionsFlickable.width - actionRowLayout.spacing) / 2) : 
+                                (contentItem.implicitWidth + leftPadding + rightPadding)
+
+                            onClicked: {
+                                Quickshell.clipboardText = notificationObject.body
+                                copyIcon.text = "inventory"
+                                copyIconTimer.restart()
+                            }
+
+                            Timer {
+                                id: copyIconTimer
+                                interval: 1500
+                                repeat: false
+                                onTriggered: {
+                                    copyIcon.text = "content_copy"
+                                }
+                            }
+
+                            contentItem: MaterialSymbol {
+                                id: copyIcon
+                                iconSize: Appearance.font.pixelSize.large
+                                horizontalAlignment: Text.AlignHCenter
+                                color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
+                                    Appearance.m3colors.m3onSurfaceVariant : Appearance.m3colors.m3onSurface
+                                text: "content_copy"
+                            }
+                        }
+                        
+                    }
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/NotificationListView.qml

@@ -0,0 +1,27 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import Quickshell
+
+StyledListView { // Scrollable window
+    id: root
+    property bool popup: false
+
+    spacing: 3
+
+    model: ScriptModel {
+        values: root.popup ? Notifications.popupAppNameList : Notifications.appNameList
+    }
+    delegate: NotificationGroup {
+        required property int index
+        required property var modelData
+        popup: root.popup
+        anchors.left: parent?.left
+        anchors.right: parent?.right
+        notificationGroup: popup ? 
+            Notifications.popupGroupsByAppName[modelData] :
+            Notifications.groupsByAppName[modelData]
+    }
+}

configs/quickshell/modules/common/widgets/PointingHandInteraction.qml

@@ -0,0 +1,7 @@
+import QtQuick
+
+MouseArea {
+    anchors.fill: parent
+    onPressed: (mouse) => mouse.accepted = false
+    cursorShape: Qt.PointingHandCursor 
+}

configs/quickshell/modules/common/widgets/PointingHandLinkHover.qml

@@ -0,0 +1,8 @@
+import QtQuick
+
+MouseArea {
+    anchors.fill: parent
+    acceptedButtons: Qt.NoButton // Only for hover
+    hoverEnabled: true
+    cursorShape: parent.hoveredLink !== "" ? Qt.PointingHandCursor : Qt.ArrowCursor
+}

configs/quickshell/modules/common/widgets/PrimaryTabBar.qml

@@ -0,0 +1,97 @@
+import qs.modules.common
+import qs
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+    spacing: 0
+    required property var tabButtonList // Something like [{"icon": "notifications", "name": Translation.tr("Notifications")}, {"icon": "volume_up", "name": Translation.tr("Volume mixer")}]
+    required property var externalTrackedTab
+    property bool enableIndicatorAnimation: false
+    property color colIndicator: Appearance?.colors.colPrimary ?? "#65558F"
+    property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0"
+    signal currentIndexChanged(int index)
+
+    property bool centerTabBar: parent.width > 500
+    Layout.fillWidth: !centerTabBar
+    Layout.alignment: Qt.AlignHCenter
+    implicitWidth: Math.max(tabBar.implicitWidth, 600)
+
+    TabBar {
+        id: tabBar
+        Layout.fillWidth: true
+        currentIndex: root.externalTrackedTab
+        onCurrentIndexChanged: {
+            root.onCurrentIndexChanged(currentIndex)
+        }
+
+        background: Item {
+            WheelHandler {
+                onWheel: (event) => {
+                    if (event.angleDelta.y < 0)
+                        tabBar.currentIndex = Math.min(tabBar.currentIndex + 1, root.tabButtonList.length - 1)
+                    else if (event.angleDelta.y > 0)
+                        tabBar.currentIndex = Math.max(tabBar.currentIndex - 1, 0)
+                }
+                acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+            }
+        }
+
+        Repeater {
+            model: root.tabButtonList
+            delegate: PrimaryTabButton {
+                selected: (index == root.externalTrackedTab)
+                buttonText: modelData.name
+                buttonIcon: modelData.icon
+                minimumWidth: 160
+            }
+        }
+    }
+
+    Item { // Tab indicator
+        id: tabIndicator
+        Layout.fillWidth: true
+        height: 3
+        Connections {
+            target: root
+            function onExternalTrackedTabChanged() {
+                root.enableIndicatorAnimation = true
+            }
+        }
+
+        Rectangle {
+            id: indicator
+            property int tabCount: root.tabButtonList.length
+            property real fullTabSize: root.width / tabCount;
+            property real targetWidth: tabBar.contentItem?.children[0]?.children[tabBar.currentIndex]?.tabContentWidth ?? 0
+
+            implicitWidth: targetWidth
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+
+            x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2
+
+            color: root.colIndicator
+            radius: Appearance?.rounding.full ?? 9999
+
+            Behavior on x {
+                animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+            }
+
+            Behavior on implicitWidth {
+                animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+            }
+        }
+    }
+
+    Rectangle { // Tabbar bottom border
+        id: tabBarBottomBorder
+        Layout.fillWidth: true
+        implicitHeight: 1
+        color: root.colBorder
+    }
+}

configs/quickshell/modules/common/widgets/PrimaryTabButton.qml

@@ -0,0 +1,171 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+TabButton {
+    id: button
+    property string buttonText
+    property string buttonIcon
+    property real minimumWidth: 110
+    property bool selected: false
+    property int tabContentWidth: contentItem.children[0].implicitWidth
+    property int rippleDuration: 1200
+    height: buttonBackground.height
+    implicitWidth: Math.max(tabContentWidth, buttonBackground.implicitWidth, minimumWidth)
+
+    property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
+    property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
+    property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
+    property color colActive: Appearance?.colors.colPrimary ?? "#65558F"
+    property color colInactive: Appearance?.colors.colOnLayer1 ?? "#45464F"
+
+    component RippleAnim: NumberAnimation {
+        duration: rippleDuration
+        easing.type: Appearance?.animation.elementMoveEnter.type
+        easing.bezierCurve: Appearance?.animationCurves.standardDecel
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onPressed: (event) => { 
+            const {x,y} = event
+            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();
+        }
+        onReleased: (event) => {
+            button.click() // Because the MouseArea already consumed the event
+            rippleFadeAnim.restart();
+        }
+    }
+
+    RippleAnim {
+        id: rippleFadeAnim
+        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: Appearance?.rounding.small
+        implicitHeight: 50
+        color: (button.hovered ? button.colBackgroundHover : button.colBackground)
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: buttonBackground.width
+                height: buttonBackground.height
+                radius: buttonBackground.radius
+            }
+        }
+        
+        Behavior on color {
+            animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        Item {
+            id: ripple
+            width: ripple.implicitWidth
+            height: ripple.implicitHeight
+            opacity: 0
+
+            property real implicitWidth: 0
+            property real implicitHeight: 0
+            visible: width > 0 && height > 0
+
+            Behavior on opacity {
+                animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: button.colRipple }
+                    GradientStop { position: 0.3; color: button.colRipple }
+                    GradientStop { position: 0.5 ; color: Qt.rgba(button.colRipple.r, button.colRipple.g, button.colRipple.b, 0) }
+                }
+            }
+
+            transform: Translate {
+                x: -ripple.width / 2
+                y: -ripple.height / 2
+            }
+        }
+    }
+    
+    contentItem: Item {
+        anchors.centerIn: buttonBackground
+        ColumnLayout {
+            anchors.centerIn: parent
+            spacing: 0
+            MaterialSymbol {
+                visible: buttonIcon?.length > 0
+                Layout.alignment: Qt.AlignHCenter
+                horizontalAlignment: Text.AlignHCenter
+                text: buttonIcon
+                iconSize: Appearance?.font.pixelSize.hugeass ?? 25
+                fill: selected ? 1 : 0
+                color: selected ? button.colActive : button.colInactive
+                Behavior on color {
+                    animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+            }
+            StyledText {
+                id: buttonTextWidget
+                Layout.alignment: Qt.AlignHCenter
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: Appearance?.font.pixelSize.small
+                color: selected ? button.colActive : button.colInactive
+                text: buttonText
+                Behavior on color {
+                    animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/Revealer.qml

@@ -0,0 +1,25 @@
+import qs.modules.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)
+    }
+}

configs/quickshell/modules/common/widgets/RippleButton.qml

@@ -0,0 +1,183 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.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
+        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
+    }
+}

configs/quickshell/modules/common/widgets/RippleButtonWithIcon.qml

@@ -0,0 +1,55 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+RippleButton {
+    id: buttonWithIconRoot
+    property string nerdIcon
+    property string materialIcon
+    property bool materialIconFill: true
+    property string mainText: "Button text"
+    property Component mainContentComponent: Component {
+        StyledText {
+            text: buttonWithIconRoot.mainText
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+    implicitHeight: 35
+    horizontalPadding: 15
+    buttonRadius: Appearance.rounding.small
+    colBackground: Appearance.colors.colLayer2
+
+    contentItem: RowLayout {
+        Item {
+            implicitWidth: Math.max(materialIconLoader.implicitWidth, nerdIconLoader.implicitWidth)
+            Loader {
+                id: materialIconLoader
+                anchors.centerIn: parent
+                active: !nerdIcon
+                sourceComponent: MaterialSymbol {
+                    text: buttonWithIconRoot.materialIcon
+                    iconSize: Appearance.font.pixelSize.larger
+                    color: Appearance.colors.colOnSecondaryContainer
+                    fill: buttonWithIconRoot.materialIconFill ? 1 : 0
+                }
+            }
+            Loader {
+                id: nerdIconLoader
+                anchors.centerIn: parent
+                active: nerdIcon
+                sourceComponent: StyledText {
+                    text: buttonWithIconRoot.nerdIcon
+                    font.pixelSize: Appearance.font.pixelSize.larger
+                    font.family: Appearance.font.family.iconNerd
+                    color: Appearance.colors.colOnSecondaryContainer
+                }
+            }
+        }
+        Loader {
+            sourceComponent: buttonWithIconRoot.mainContentComponent
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
+}

configs/quickshell/modules/common/widgets/RoundCorner.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.9
+
+Item {
+    id: root
+
+    enum CornerEnum { TopLeft, TopRight, BottomLeft, BottomRight }
+    property var corner: RoundCorner.CornerEnum.TopLeft // Default to TopLeft
+
+    property int size: 25
+    property color color: "#000000"
+
+    onColorChanged: {
+        canvas.requestPaint();
+    }
+    onCornerChanged: {
+        canvas.requestPaint();
+    }
+
+    implicitWidth: size
+    implicitHeight: size
+
+    Canvas {
+        id: canvas
+
+        anchors.fill: parent
+        antialiasing: true
+        
+        onPaint: {
+            var ctx = getContext("2d");
+            var r = root.size;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.beginPath();
+            switch (root.corner) {
+                case RoundCorner.CornerEnum.TopLeft:
+                    ctx.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
+                    ctx.lineTo(0, 0);
+                    break;
+                case RoundCorner.CornerEnum.TopRight:
+                    ctx.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
+                    ctx.lineTo(r, 0);
+                    break;
+                case RoundCorner.CornerEnum.BottomLeft:
+                    ctx.arc(r, 0, r, Math.PI / 2, Math.PI);
+                    ctx.lineTo(0, r);
+                    break;
+                case RoundCorner.CornerEnum.BottomRight:
+                    ctx.arc(0, 0, r, 0, Math.PI / 2);
+                    ctx.lineTo(r, r);
+                    break;
+            }
+            ctx.closePath();
+            ctx.fillStyle = root.color;
+            ctx.fill();
+        }
+    }
+
+    Behavior on size {
+        animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+}

configs/quickshell/modules/common/widgets/SecondaryTabButton.qml

@@ -0,0 +1,161 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+TabButton {
+    id: root
+    property string buttonText
+    property string buttonIcon
+    property bool selected: false
+    property int rippleDuration: 1200
+    height: buttonBackground.height
+    property int tabContentWidth: buttonBackground.width - buttonBackground.radius*2
+
+    property color colBackground: ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
+    property color colBackgroundHover: Appearance.colors.colLayer1Hover
+    property color colRipple: Appearance.colors.colLayer1Active
+
+    PointingHandInteraction {}
+
+    component RippleAnim: NumberAnimation {
+        duration: rippleDuration
+        easing.type: Appearance.animation.elementMoveEnter.type
+        easing.bezierCurve: Appearance.animationCurves.standardDecel
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onPressed: (event) => { 
+            const {x,y} = event
+            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();
+        }
+        onReleased: (event) => {
+            root.click() // Because the MouseArea already consumed the event
+            rippleFadeAnim.restart();
+        }
+    }
+
+    RippleAnim {
+        id: rippleFadeAnim
+        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: Appearance?.rounding.small ?? 7
+        implicitHeight: 37
+        color: (root.hovered ? root.colBackgroundHover : root.colBackground)
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: buttonBackground.width
+                height: buttonBackground.height
+                radius: buttonBackground.radius
+            }
+        }
+        
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        Rectangle {
+            id: ripple
+
+            radius: Appearance.rounding.full
+            color: root.colRipple
+            opacity: 0
+
+            transform: Translate {
+                x: -ripple.width / 2
+                y: -ripple.height / 2
+            }
+        }
+    }
+
+    contentItem: Item {
+        anchors.centerIn: buttonBackground
+        RowLayout {
+            anchors.centerIn: parent
+            spacing: 0
+            
+            Loader {
+                id: iconLoader
+                active: buttonIcon?.length > 0
+                sourceComponent: buttonIcon?.length > 0 ? materialSymbolComponent : null
+                Layout.rightMargin: 5
+            }
+
+            Component {
+                id: materialSymbolComponent
+                MaterialSymbol {
+                    verticalAlignment: Text.AlignVCenter
+                    text: buttonIcon
+                    iconSize: Appearance.font.pixelSize.huge
+                    fill: selected ? 1 : 0
+                    color: selected ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1
+                    Behavior on color {
+                        animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                    }
+                }
+            }
+            StyledText {
+                id: buttonTextWidget
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: Appearance.font.pixelSize.small
+                color: selected ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1
+                text: buttonText
+                Behavior on color {
+                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/SelectionDialog.qml

@@ -0,0 +1,132 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+Item {
+    id: root
+    property real dialogPadding: 15
+    property real dialogMargin: 30
+    property string titleText: "Selection Dialog"
+    property alias items: choiceModel.values
+    property int selectedId: choiceListView.currentIndex
+    property var defaultChoice
+
+    signal canceled();
+    signal selected(var result);
+
+    Rectangle { // Scrim
+        id: scrimOverlay
+        anchors.fill: parent
+        radius: Appearance.rounding.small
+        color: Appearance.colors.colScrim
+        MouseArea {
+            hoverEnabled: true
+            anchors.fill: parent
+            preventStealing: true
+            propagateComposedEvents: false
+        }
+    }
+
+    Rectangle { // The dialog
+        id: dialog
+        color: Appearance.colors.colSurfaceContainerHigh
+        radius: Appearance.rounding.normal
+        anchors.fill: parent
+        anchors.margins: dialogMargin
+        implicitHeight: dialogColumnLayout.implicitHeight
+        
+        ColumnLayout {
+            id: dialogColumnLayout
+            anchors.fill: parent
+            spacing: 16
+
+            StyledText {
+                id: dialogTitle
+                Layout.topMargin: dialogPadding
+                Layout.leftMargin: dialogPadding
+                Layout.rightMargin: dialogPadding
+                Layout.alignment: Qt.AlignLeft
+                color: Appearance.m3colors.m3onSurface
+                font.pixelSize: Appearance.font.pixelSize.larger
+                text: root.titleText
+            }
+
+            Rectangle {
+                color: Appearance.m3colors.m3outline
+                implicitHeight: 1
+                Layout.fillWidth: true
+                Layout.leftMargin: dialogPadding
+                Layout.rightMargin: dialogPadding
+            }
+
+            ListView {
+                id: choiceListView
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                clip: true
+                currentIndex: root.defaultChoice !== undefined ? root.items.indexOf(root.defaultChoice) : -1
+                spacing: 6
+
+                maximumFlickVelocity: 3500
+                boundsBehavior: Flickable.DragOverBounds
+
+                model: ScriptModel {
+                    id: choiceModel
+                }
+
+                delegate: StyledRadioButton {
+                    id: radioButton
+                    required property var modelData
+                    required property int index
+                    anchors {
+                        left: parent?.left
+                        right: parent?.right
+                        leftMargin: root.dialogPadding
+                        rightMargin: root.dialogPadding
+                    }
+
+                    description: modelData.toString()
+                    checked: index === choiceListView.currentIndex
+
+                    onCheckedChanged: {
+                        if (checked) {
+                            choiceListView.currentIndex = index;
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                color: Appearance.m3colors.m3outline
+                implicitHeight: 1
+                Layout.fillWidth: true
+                Layout.leftMargin: dialogPadding
+                Layout.rightMargin: dialogPadding
+            }
+
+            RowLayout {
+                id: dialogButtonsRowLayout
+                Layout.bottomMargin: dialogPadding
+                Layout.leftMargin: dialogPadding
+                Layout.rightMargin: dialogPadding
+                Layout.alignment: Qt.AlignRight
+
+                DialogButton {
+                    buttonText: Translation.tr("Cancel")
+                    onClicked: root.canceled()
+                }
+                DialogButton {
+                    buttonText: Translation.tr("OK")
+                    onClicked: root.selected(
+                        root.selectedId === -1 ? null :
+                        root.items[root.selectedId]
+                    )
+                }
+            }
+        }
+    }
+}

configs/quickshell/modules/common/widgets/SelectionGroupButton.qml

@@ -0,0 +1,24 @@
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Hyprland
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+GroupButton {
+    id: root
+    horizontalPadding: 12
+    verticalPadding: 8
+    bounce: false
+    property bool leftmost: false
+    property bool rightmost: false
+    leftRadius: (toggled || leftmost) ? (height / 2) : Appearance.rounding.unsharpenmore
+    rightRadius: (toggled || rightmost) ? (height / 2) : Appearance.rounding.unsharpenmore
+    colBackground: Appearance.colors.colSecondaryContainer
+    contentItem: StyledText {
+        color: parent.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+        text: root.buttonText
+    }
+}

configs/quickshell/modules/common/widgets/StyledFlickable.qml

@@ -0,0 +1,6 @@
+import QtQuick
+
+Flickable {
+    maximumFlickVelocity: 3500
+    boundsBehavior: Flickable.DragOverBounds
+}

configs/quickshell/modules/common/widgets/StyledLabel.qml

@@ -0,0 +1,15 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Controls
+
+Label {
+    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
+}

configs/quickshell/modules/common/widgets/StyledListView.qml

@@ -0,0 +1,108 @@
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+
+/**
+ * A ListView with animations.
+ */
+ListView {
+    id: root
+    spacing: 5
+    property real removeOvershoot: 20 // Account for gaps and bouncy animations
+    property int dragIndex: -1
+    property real dragDistance: 0
+    property bool popin: true
+
+    function resetDrag() {
+        root.dragIndex = -1
+        root.dragDistance = 0
+    }
+
+    maximumFlickVelocity: 3500
+    boundsBehavior: Flickable.DragOverBounds
+
+    add: Transition {
+        animations: [
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                properties: popin ? "opacity,scale" : "opacity",
+                from: 0,
+                to: 1,
+            }),
+        ]
+    }
+
+    addDisplaced: Transition {
+        animations: [
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                property: "y",
+            }),
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                properties: popin ? "opacity,scale" : "opacity",
+                to: 1,
+            }),
+        ]
+    }
+    
+    // displaced: Transition {
+    //     animations: [
+    //         Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+    //             property: "y",
+    //         }),
+    //         Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+    //             properties: "opacity,scale",
+    //             to: 1,
+    //         }),
+    //     ]
+    // }
+
+    // move: Transition {
+    //     animations: [
+    //         Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+    //             property: "y",
+    //         }),
+    //         Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+    //             properties: "opacity,scale",
+    //             to: 1,
+    //         }),
+    //     ]
+    // }
+    // moveDisplaced: Transition {
+    //     animations: [
+    //         Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+    //             property: "y",
+    //         }),
+    //         Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+    //             properties: "opacity,scale",
+    //             to: 1,
+    //         }),
+    //     ]
+    // }
+
+    remove: Transition {
+        animations: [
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                property: "x",
+                to: root.width + root.removeOvershoot,
+            }),
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                property: "opacity",
+                to: 0,
+            })
+        ]
+    }
+
+    // This is movement when something is removed, not removing animation!
+    removeDisplaced: Transition { 
+        animations: [
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                property: "y",
+            }),
+            Appearance?.animation.elementMove.numberAnimation.createObject(this, {
+                properties: "opacity,scale",
+                to: 1,
+            }),
+        ]
+    }
+}

configs/quickshell/modules/common/widgets/StyledProgressBar.qml

@@ -0,0 +1,103 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+/**
+ * Material 3 progress bar. See https://m3.material.io/components/progress-indicators/overview
+ */
+ProgressBar {
+    id: root
+    property real valueBarWidth: 120
+    property real valueBarHeight: 4
+    property real valueBarGap: 4
+    property color highlightColor: Appearance?.colors.colPrimary ?? "#685496"
+    property color trackColor: Appearance?.m3colors.m3secondaryContainer ?? "#F1D3F9"
+    property bool sperm: false // If true, the progress bar will have a wavy fill effect
+    property bool animateSperm: true
+    property real spermAmplitudeMultiplier: sperm ? 0.5 : 0
+    property real spermFrequency: 6
+    property real spermFps: 60
+
+    Behavior on spermAmplitudeMultiplier {
+        animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    Behavior on value {
+        animation: Appearance?.animation.elementMoveEnter.numberAnimation.createObject(this)
+    }
+    
+    background: Item {
+        anchors.fill: parent
+        implicitHeight: valueBarHeight
+        implicitWidth: valueBarWidth
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+
+        Canvas {
+            id: wavyFill
+            anchors {
+                left: parent.left
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            height: parent.height * 6
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.clearRect(0, 0, width, height);
+
+                var progress = root.visualPosition;
+                var fillWidth = progress * width;
+                var amplitude = parent.height * root.spermAmplitudeMultiplier;
+                var frequency = root.spermFrequency;
+                var phase = Date.now() / 400.0;
+                var centerY = height / 2;
+
+                ctx.strokeStyle = root.highlightColor;
+                ctx.lineWidth = parent.height;
+                ctx.lineCap = "round";
+                ctx.beginPath();
+                for (var x = ctx.lineWidth / 2; x <= fillWidth; x += 1) {
+                    var waveY = centerY + amplitude * Math.sin(frequency * 2 * Math.PI * x / width + phase);
+                    if (x === 0)
+                        ctx.moveTo(x, waveY);
+                    else
+                        ctx.lineTo(x, waveY);
+                }
+                ctx.stroke();
+            }
+            Connections {
+                target: root
+                function onValueChanged() { wavyFill.requestPaint(); }
+                function onHighlightColorChanged() { wavyFill.requestPaint(); }
+            }
+            Timer {
+                interval: 1000 / root.spermFps
+                running: root.animateSperm
+                repeat: root.sperm
+                onTriggered: wavyFill.requestPaint()
+            }
+        }
+        Rectangle { // Right remaining part fill
+            anchors.right: parent.right
+            width: (1 - root.visualPosition) * parent.width - valueBarGap
+            height: parent.height
+            radius: Appearance?.rounding.full ?? 9999
+            color: root.trackColor
+        }
+        Rectangle { // Stop point
+            anchors.right: parent.right
+            width: valueBarGap
+            height: valueBarGap
+            radius: Appearance?.rounding.full ?? 9999
+            color: root.highlightColor
+        }
+    }
+}

configs/quickshell/modules/common/widgets/StyledRadioButton.qml

@@ -0,0 +1,87 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+
+RadioButton {
+    id: root
+    implicitHeight: contentItem.implicitHeight + 4 * 2
+    property string description
+    property color activeColor: Appearance?.colors.colPrimary ?? "#685496"
+    property color inactiveColor: Appearance?.m3colors.m3onSurfaceVariant ?? "#45464F"
+
+    PointingHandInteraction {}
+
+    indicator: Item{}
+    
+    contentItem: RowLayout {
+        id: contentItem
+        Layout.fillWidth: true
+        spacing: 12
+        Rectangle {
+            id: radio
+            Layout.fillWidth: false
+            Layout.alignment: Qt.AlignVCenter
+            width: 20
+            height: 20
+            radius: Appearance?.rounding.full
+            border.color: checked ? root.activeColor : root.inactiveColor
+            border.width: 2
+            color: "transparent"
+
+            // Checked indicator
+            Rectangle {
+                anchors.centerIn: parent
+                width: checked ? 10 : 4
+                height: checked ? 10 : 4
+                radius: Appearance?.rounding.full
+                color: Appearance?.colors.colPrimary
+                opacity: checked ? 1 : 0
+
+                Behavior on opacity {
+                    animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                Behavior on width {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on height {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+
+            }
+
+            // Hover
+            Rectangle {
+                anchors.centerIn: parent
+                width: root.hovered ? 40 : 20
+                height: root.hovered ? 40 : 20
+                radius: Appearance?.rounding.full
+                color: Appearance?.m3colors.m3onSurface
+                opacity: root.hovered ? 0.1 : 0
+
+                Behavior on opacity {
+                    animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                Behavior on width {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on height {
+                    animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
+                }
+            }
+        }
+
+        StyledText {
+            text: root.description
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            wrapMode: Text.Wrap
+            color: Appearance?.m3colors.m3onSurface
+        }
+    }
+}

configs/quickshell/modules/common/widgets/StyledRectangularShadow.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Effects
+import qs.modules.common
+
+RectangularShadow {
+    required property var target
+    anchors.fill: target
+    radius: target.radius
+    blur: 0.9 * Appearance.sizes.elevationMargin
+    offset: Qt.vector2d(0.0, 1.0)
+    spread: 1
+    color: Appearance.colors.colShadow
+    cached: true
+}

configs/quickshell/modules/common/widgets/StyledSlider.qml

@@ -0,0 +1,155 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Widgets
+
+/**
+ * Material 3 slider. See https://m3.material.io/components/sliders/overview
+ * It doesn't exactly match the spec because it does not make sense to have stuff on a computer that fucking huge.
+ * Should be at 3/4 scale...
+ */
+ 
+Slider {
+    id: root
+
+    property list<real> stopIndicatorValues: [1]
+    enum Configuration {
+        XS = 12,
+        S = 18,
+        M = 30,
+        L = 42,
+        XL = 72
+    }
+
+    property var configuration: StyledSlider.Configuration.S
+
+    property real handleDefaultWidth: 3
+    property real handlePressedWidth: 1.5
+
+    property color highlightColor: Appearance.colors.colPrimary
+    property color trackColor: Appearance.colors.colSecondaryContainer
+    property color handleColor: Appearance.m3colors.m3onSecondaryContainer
+    property color dotColor: Appearance.m3colors.m3onSecondaryContainer
+    property color dotColorHighlighted: Appearance.m3colors.m3onPrimary
+    property real unsharpenRadius: Appearance.rounding.unsharpen
+    property real trackWidth: configuration
+    property real trackRadius: trackWidth >= StyledSlider.Configuration.XL ? 21
+        : trackWidth >= StyledSlider.Configuration.L ? 12
+        : trackWidth >= StyledSlider.Configuration.M ? 9
+        : 6
+    property real handleHeight: Math.max(33, trackWidth + 9)
+    property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
+    property real handleMargins: 4
+    onHandleMarginsChanged: {
+        console.log("Handle margins changed to", handleMargins);
+    }
+    property real trackDotSize: 3
+    property string tooltipContent: `${Math.round(value * 100)}%`
+
+    leftPadding: handleMargins
+    rightPadding: handleMargins
+    property real effectiveDraggingWidth: width - leftPadding - rightPadding
+
+    Layout.fillWidth: true
+    from: 0
+    to: 1
+
+    Behavior on value { // This makes the adjusted value (like volume) shift smoothly
+        SmoothedAnimation {
+            velocity: Appearance.animation.elementMoveFast.velocity
+        }
+    }
+
+    Behavior on handleMargins {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    component TrackDot: Rectangle {
+        required property real value
+        anchors.verticalCenter: parent.verticalCenter
+        x: root.handleMargins + (value * root.effectiveDraggingWidth) - (root.trackDotSize / 2)
+        width: root.trackDotSize
+        height: root.trackDotSize
+        radius: Appearance.rounding.full
+        color: value > root.visualPosition ? root.dotColor : root.dotColorHighlighted
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onPressed: (mouse) => mouse.accepted = false
+        cursorShape: root.pressed ? Qt.ClosedHandCursor : Qt.PointingHandCursor 
+    }
+
+    background: Item {
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width
+        implicitHeight: trackWidth
+        
+        // Fill left
+        Rectangle {
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+            height: trackWidth
+            color: root.highlightColor
+            topLeftRadius: root.trackRadius
+            bottomLeftRadius: root.trackRadius
+            topRightRadius: root.unsharpenRadius
+            bottomRightRadius: root.unsharpenRadius
+        }
+
+        // Fill right
+        Rectangle {
+            anchors {
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            width: root.handleMargins + ((1 - root.visualPosition) * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+            height: trackWidth
+            color: root.trackColor
+            topRightRadius: root.trackRadius
+            bottomRightRadius: root.trackRadius
+            topLeftRadius: root.unsharpenRadius
+            bottomLeftRadius: root.unsharpenRadius
+        }
+
+        // Stop indicators
+        Repeater {
+            model: root.stopIndicatorValues
+            TrackDot {
+                required property real modelData
+                value: modelData
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+
+    handle: Rectangle {
+        id: handle
+
+        implicitWidth: root.handleWidth
+        implicitHeight: root.handleHeight
+        x: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2)
+        anchors.verticalCenter: parent.verticalCenter
+        radius: Appearance.rounding.full
+        color: root.handleColor
+
+        Behavior on implicitWidth {
+            animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+
+        StyledToolTip {
+            extraVisibleCondition: root.pressed
+            content: root.tooltipContent
+        }
+    }
+}

configs/quickshell/modules/common/widgets/StyledSpinBox.qml

@@ -0,0 +1,92 @@
+import qs.modules.common
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Controls
+
+/**
+ * Material 3 styled SpinBox component.
+ */
+SpinBox {
+    id: root
+
+    property real baseHeight: 35
+    property real radius: Appearance.rounding.small
+    property real innerButtonRadius: Appearance.rounding.unsharpen
+    editable: true
+
+    background: Rectangle {
+        color: Appearance.colors.colLayer2
+        radius: root.radius
+    }
+
+    contentItem: Item {
+        implicitHeight: root.baseHeight
+        implicitWidth: Math.max(labelText.implicitWidth, 40)
+
+        StyledTextInput {
+            id: labelText
+            anchors.centerIn: parent
+            text: root.value // displayText would make the numbers weird like 1,000 instead of 1000
+            color: Appearance.colors.colOnLayer2
+            font.pixelSize: Appearance.font.pixelSize.small
+            validator: root.validator
+            onTextChanged: {
+                root.value = parseFloat(text);
+            }
+        }
+    }
+
+    down.indicator: Rectangle {
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+        }
+        implicitHeight: root.baseHeight
+        implicitWidth: root.baseHeight
+        topLeftRadius: root.radius
+        bottomLeftRadius: root.radius
+        topRightRadius: root.innerButtonRadius
+        bottomRightRadius: root.innerButtonRadius
+
+        color: root.down.pressed ? Appearance.colors.colLayer2Active : 
+            root.down.hovered ? Appearance.colors.colLayer2Hover : 
+            ColorUtils.transparentize(Appearance.colors.colLayer2)
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        MaterialSymbol {
+            anchors.centerIn: parent
+            text: "remove"
+            iconSize: 20
+            color: Appearance.colors.colOnLayer2
+        }
+    }
+
+    up.indicator: Rectangle {
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+        }
+        implicitHeight: root.baseHeight
+        implicitWidth: root.baseHeight
+        topRightRadius: root.radius
+        bottomRightRadius: root.radius
+        topLeftRadius: root.innerButtonRadius
+        bottomLeftRadius: root.innerButtonRadius
+
+        color: root.up.pressed ? Appearance.colors.colLayer2Active : 
+            root.up.hovered ? Appearance.colors.colLayer2Hover : 
+            ColorUtils.transparentize(Appearance.colors.colLayer2)
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        MaterialSymbol {
+            anchors.centerIn: parent
+            text: "add"
+            iconSize: 20
+            color: Appearance.colors.colOnLayer2
+        }
+    }
+}

configs/quickshell/modules/common/widgets/StyledSwitch.qml

@@ -0,0 +1,60 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+
+/**
+ * Material 3 switch. See https://m3.material.io/components/switch/overview
+ */
+Switch {
+    id: root
+    property real scale: 0.6 // Default in m3 spec is huge af
+    implicitHeight: 32 * root.scale
+    implicitWidth: 52 * root.scale
+    property color activeColor: Appearance?.colors.colPrimary ?? "#685496"
+    property color inactiveColor: Appearance?.colors.colSurfaceContainerHighest ?? "#45464F"
+
+    PointingHandInteraction {}
+
+    // Custom track styling
+    background: Rectangle {
+        width: parent.width
+        height: parent.height
+        radius: Appearance?.rounding.full ?? 9999
+        color: root.checked ? root.activeColor : root.inactiveColor
+        border.width: 2 * root.scale
+        border.color: root.checked ? root.activeColor : Appearance.m3colors.m3outline
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+        Behavior on border.color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+    // Custom thumb styling
+    indicator: Rectangle {
+        width: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
+        height: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
+        radius: Appearance.rounding.full
+        color: root.checked ? Appearance.m3colors.m3onPrimary : Appearance.m3colors.m3outline
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: root.checked ? ((root.pressed || root.down) ? (22 * root.scale) : 24 * root.scale) : ((root.pressed || root.down) ? (2 * root.scale) : 8 * root.scale)
+
+        Behavior on anchors.leftMargin {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+        Behavior on width {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+        Behavior on height {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+}

configs/quickshell/modules/common/widgets/StyledText.qml

@@ -0,0 +1,15 @@
+import qs.modules.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
+}

configs/quickshell/modules/common/widgets/StyledTextArea.qml

@@ -0,0 +1,18 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Controls
+
+/**
+ * Does not include visual layout, but includes the easily neglected colors.
+ */
+TextArea {
+    renderType: Text.NativeRendering
+    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+    placeholderTextColor: Appearance.m3colors.m3outline
+    font {
+        family: Appearance?.font.family.main ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        hintingPreference: Font.PreferFullHinting
+    }
+}

configs/quickshell/modules/common/widgets/StyledTextInput.qml

@@ -0,0 +1,17 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Controls
+
+/**
+ * Does not include visual layout, but includes the easily neglected colors.
+ */
+TextInput {
+    renderType: Text.NativeRendering
+    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+    font {
+        family: Appearance?.font.family.main ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        hintingPreference: Font.PreferFullHinting
+    }
+}

configs/quickshell/modules/common/widgets/StyledToolTip.qml

@@ -0,0 +1,60 @@
+import qs.modules.common
+import qs.modules.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
+            }
+        }   
+    }
+}

configs/quickshell/modules/common/widgets/VerticalButtonGroup.qml

@@ -0,0 +1,45 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+/**
+ * A container that supports GroupButton children for bounciness.
+ * See https://m3.material.io/components/button-groups/overview
+ */
+Rectangle {
+    id: root
+    default property alias content: columnLayout.data
+    property real spacing: 5
+    property real padding: 0
+    property int clickIndex: columnLayout.clickIndex
+
+    property real contentHeight: {
+        let total = 0;
+        for (let i = 0; i < columnLayout.children.length; ++i) {
+            const child = columnLayout.children[i];
+            total += child.baseHeight ?? child.implicitHeight ?? child.height;
+        }
+        return total + columnLayout.spacing * (columnLayout.children.length - 1);
+    }
+
+    topLeftRadius: columnLayout.children.length > 0 ? (columnLayout.children[0].radius + padding) : 
+        Appearance?.rounding?.small
+    topRightRadius: topLeftRadius
+    bottomLeftRadius: columnLayout.children.length > 0 ? (columnLayout.children[columnLayout.children.length - 1].radius + padding) : 
+        Appearance?.rounding?.small
+    bottomRightRadius: bottomLeftRadius
+
+    color: "transparent"
+    height: root.contentHeight + padding * 2
+    implicitWidth: columnLayout.implicitWidth + padding * 2
+    implicitHeight: root.contentHeight + padding * 2
+    
+    children: [ColumnLayout {
+        id: columnLayout
+        anchors.fill: parent
+        anchors.margins: root.padding
+        spacing: root.spacing
+        property int clickIndex: -1
+    }]
+}

configs/quickshell/modules/common/widgets/WaveVisualizer.qml

@@ -0,0 +1,73 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Effects
+
+Canvas { // Visualizer
+    id: root
+    property list<var> points
+    property list<var> smoothPoints
+    property real maxVisualizerValue: 1000
+    property int smoothing: 2
+    property bool live: true
+    property color color: Appearance.m3colors.m3primary
+
+    onPointsChanged: () => {
+        root.requestPaint()
+    }
+
+    anchors.fill: parent
+    onPaint: {
+        var ctx = getContext("2d");
+        ctx.clearRect(0, 0, width, height);
+
+        var points = root.points;
+        var maxVal = root.maxVisualizerValue || 1;
+        var h = height;
+        var w = width;
+        var n = points.length;
+        if (n < 2) return;
+
+        // Smoothing: simple moving average (optional)
+        var smoothWindow = root.smoothing; // adjust for more/less smoothing
+        root.smoothPoints = [];
+        for (var i = 0; i < n; ++i) {
+            var sum = 0, count = 0;
+            for (var j = -smoothWindow; j <= smoothWindow; ++j) {
+                var idx = Math.max(0, Math.min(n - 1, i + j));
+                sum += points[idx];
+                count++;
+            }
+            root.smoothPoints.push(sum / count);
+        }
+        if (!root.live) root.smoothPoints.fill(0); // If not playing, show no points
+
+        ctx.beginPath();
+        ctx.moveTo(0, h);
+        for (var i = 0; i < n; ++i) {
+            var x = i * w / (n - 1);
+            var y = h - (root.smoothPoints[i] / maxVal) * h;
+            ctx.lineTo(x, y);
+        }
+        ctx.lineTo(w, h);
+        ctx.closePath();
+
+        ctx.fillStyle = Qt.rgba(
+            root.color.r,
+            root.color.g,
+            root.color.b,
+            0.15
+        );
+        ctx.fill();
+    }
+
+    layer.enabled: true
+    layer.effect: MultiEffect { // Blur a bit to obscure away the points
+        source: root
+        saturation: 0.2
+        blurEnabled: true
+        blurMax: 7
+        blur: 1
+    }
+}

configs/quickshell/modules/common/widgets/notification_utils.js

@@ -0,0 +1,77 @@
+
+/**
+ * @param { string } summary 
+ * @returns { string }
+ */
+function findSuitableMaterialSymbol(summary = "") {
+    const defaultType = 'chat';
+    if(summary.length === 0) return defaultType;
+
+    const keywordsToTypes = {
+        'reboot': 'restart_alt',
+        'recording': 'screen_record',
+        'battery': 'power',
+        'power': 'power',
+        'screenshot': 'screenshot_monitor',
+        'welcome': 'waving_hand',
+        'time': 'scheduleb',
+        'installed': 'download',
+        'configuration reloaded': 'reset_wrench',
+        'config': 'reset_wrench',
+        'update': 'update',
+        'ai response': 'neurology',
+        'control': 'settings',
+        'upscale': 'compare',
+        'install': 'deployed_code_update',
+        'startswith:file': 'folder_copy', // Declarative startsWith check
+    };
+
+    const lowerSummary = summary.toLowerCase();
+
+    for (const [keyword, type] of Object.entries(keywordsToTypes)) {
+        if (keyword.startsWith('startswith:')) {
+            const startsWithKeyword = keyword.replace('startswith:', '');
+            if (lowerSummary.startsWith(startsWithKeyword)) {
+                return type;
+            }
+        } else if (lowerSummary.includes(keyword)) {
+            return type;
+        }
+    }
+
+    return defaultType;
+}
+
+/**
+ * @param { number | string | Date } timestamp 
+ * @returns { string }
+ */
+const getFriendlyNotifTimeString = (timestamp) => {
+    if (!timestamp) return '';
+    const messageTime = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - messageTime.getTime();
+
+    // Less than 1 minute
+    if (diffMs < 60000) 
+        return 'Now';
+    
+    // Same day - show relative time
+    if (messageTime.toDateString() === now.toDateString()) {
+        const diffMinutes = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        
+        if (diffHours > 0) {
+            return `${diffHours}h`;
+        } else {
+            return `${diffMinutes}m`;
+        }
+    }
+    
+    // Yesterday
+    if (messageTime.toDateString() === new Date(now.getTime() - 86400000).toDateString()) 
+        return 'Yesterday';
+    
+    // Older dates
+    return Qt.formatDateTime(messageTime, "MMMM dd");
+};

configs/quickshell/modules/common/widgets/qmldir

@@ -0,0 +1,15 @@
+module qs.modules.common.widgets
+RippleButton 1.0 RippleButton.qml
+ClickableIcon 1.0 ClickableIcon.qml
+HoverableIcon 1.0 HoverableIcon.qml
+IconButton 1.0 IconButton.qml
+IconLabel 1.0 IconLabel.qml
+IconLabelButton 1.0 IconLabelButton.qml
+IconTextButton 1.0 IconTextButton.qml
+PanelButton 1.0 PanelButton.qml
+PanelIconButton 1.0 PanelIconButton.qml
+PanelIconLabel 1.0 PanelIconLabel.qml
+PanelIconLabelButton 1.0 PanelIconLabelButton.qml
+PanelIconTextButton 1.0 PanelIconTextButton.qml
+PanelTextButton 1.0 PanelTextButton.qml
+TextButton 1.0 TextButton.qml

configs/quickshell/modules/dock/Dock.qml

@@ -0,0 +1,148 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Scope { // Scope
+    id: root
+    property bool pinned: Config.options?.dock.pinnedOnStartup ?? false
+
+    Variants { // For each monitor
+        model: Quickshell.screens
+
+        PanelWindow { // Window
+            required property var modelData
+            id: dockRoot
+            screen: modelData
+            visible: !GlobalStates.screenLocked
+            
+            property bool reveal: root.pinned 
+                || (Config.options?.dock.hoverToReveal && dockMouseArea.containsMouse) 
+                || dockApps.requestDockShow 
+                || (!ToplevelManager.activeToplevel?.activated)
+
+            anchors {
+                bottom: true
+                left: true
+                right: true
+            }
+
+            exclusiveZone: root.pinned ? implicitHeight 
+                - (Appearance.sizes.hyprlandGapsOut) 
+                - (Appearance.sizes.elevationMargin - Appearance.sizes.hyprlandGapsOut) : 0
+
+            implicitWidth: dockBackground.implicitWidth
+            WlrLayershell.namespace: "quickshell:dock"
+            color: "transparent"
+
+            implicitHeight: (Config.options?.dock.height ?? 70) + Appearance.sizes.elevationMargin + Appearance.sizes.hyprlandGapsOut
+
+            mask: Region {
+                item: dockMouseArea
+            }
+
+            MouseArea {
+                id: dockMouseArea
+                height: parent.height
+                anchors {
+                    top: parent.top
+                    topMargin: dockRoot.reveal ? 0 : 
+                        Config.options?.dock.hoverToReveal ? (dockRoot.implicitHeight - Config.options.dock.hoverRegionHeight) :
+                        (dockRoot.implicitHeight + 1)
+                    horizontalCenter: parent.horizontalCenter
+                }
+                implicitWidth: dockHoverRegion.implicitWidth + Appearance.sizes.elevationMargin * 2
+                hoverEnabled: true
+
+                Behavior on anchors.topMargin {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+
+                Item {
+                    id: dockHoverRegion
+                    anchors.fill: parent
+                    implicitWidth: dockBackground.implicitWidth
+
+                    Item { // Wrapper for the dock background
+                        id: dockBackground
+                        anchors {
+                            top: parent.top
+                            bottom: parent.bottom
+                            horizontalCenter: parent.horizontalCenter
+                        }
+
+                        implicitWidth: dockRow.implicitWidth + 5 * 2
+                        height: parent.height - Appearance.sizes.elevationMargin - Appearance.sizes.hyprlandGapsOut
+
+                        StyledRectangularShadow {
+                            target: dockVisualBackground
+                        }
+                        Rectangle { // The real rectangle that is visible
+                            id: dockVisualBackground
+                            property real margin: Appearance.sizes.elevationMargin
+                            anchors.fill: parent
+                            anchors.topMargin: Appearance.sizes.elevationMargin
+                            anchors.bottomMargin: Appearance.sizes.hyprlandGapsOut
+                            color: Appearance.colors.colLayer0
+                            border.width: 1
+                            border.color: Appearance.colors.colLayer0Border
+                            radius: Appearance.rounding.large
+                        }
+
+                        RowLayout {
+                            id: dockRow
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            spacing: 3
+                            property real padding: 5
+
+                            VerticalButtonGroup {
+                                Layout.topMargin: Appearance.sizes.hyprlandGapsOut // why does this work
+                                GroupButton { // Pin button
+                                    baseWidth: 35
+                                    baseHeight: 35
+                                    clickedWidth: baseWidth
+                                    clickedHeight: baseHeight + 20
+                                    buttonRadius: Appearance.rounding.normal
+                                    toggled: root.pinned
+                                    onClicked: root.pinned = !root.pinned
+                                    contentItem: MaterialSymbol {
+                                        text: "keep"
+                                        horizontalAlignment: Text.AlignHCenter
+                                        iconSize: Appearance.font.pixelSize.larger
+                                        color: root.pinned ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer0
+                                    }
+                                }
+                            }
+                            DockSeparator {}
+                            DockApps { id: dockApps; }
+                            DockSeparator {}
+                            DockButton {
+                                Layout.fillHeight: true
+                                onClicked: GlobalStates.overviewOpen = !GlobalStates.overviewOpen
+                                contentItem: MaterialSymbol {
+                                    anchors.fill: parent
+                                    horizontalAlignment: Text.AlignHCenter
+                                    font.pixelSize: parent.width / 2
+                                    text: "apps"
+                                    color: Appearance.colors.colOnLayer0
+                                }
+                            }
+                        }
+                    }    
+                }
+
+            }
+        }
+    }
+}