Rearrange for tidier structure (#2212)

dots/.config/quickshell/ii/modules/background/Background.qml

@@ -0,0 +1,480 @@
+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 Qt5Compat.GraphicalEffects
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+import "./cookieClock"
+
+Variants {
+    id: root
+    readonly property bool fixedClockPosition: Config.options.background.clock.fixedPosition
+    readonly property real fixedClockX: Config.options.background.clock.x
+    readonly property real fixedClockY: Config.options.background.clock.y
+    readonly property real clockSizePadding: 20
+    readonly property real screenSizePadding: 50
+    readonly property string clockStyle: Config.options.background.clock.style
+    readonly property bool showCookieQuote: Config.options.background.showQuote && Config.options.background.quote !== "" && !GlobalStates.screenLocked && Config.options.background.clock.style === "cookie"
+    readonly property real clockParallaxFactor: Math.max(0, Math.min(1, Config.options.background.parallax.clockFactor)) // 0 = full parallax, 1 = no parallax
+    model: Quickshell.screens
+
+    PanelWindow {
+        id: bgRoot
+
+        required property var modelData
+
+        // Hide when fullscreen
+        property list<HyprlandWorkspace> workspacesForMonitor: Hyprland.workspaces.values.filter(workspace => workspace.monitor && workspace.monitor.name == monitor.name)
+        property var activeWorkspaceWithFullscreen: workspacesForMonitor.filter(workspace => ((workspace.toplevels.values.filter(window => window.wayland?.fullscreen)[0] != undefined) && workspace.active))[0]
+        visible: GlobalStates.screenLocked || (!(activeWorkspaceWithFullscreen != undefined)) || !Config?.options.background.hideWhenFullscreen
+
+        // 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 bool wallpaperSafetyTriggered: {
+            const enabled = Config.options.workSafety.enable.wallpaper
+            const sensitiveWallpaper = (CF.StringUtils.stringListContainsSubstring(wallpaperPath.toLowerCase(), Config.options.workSafety.triggerCondition.fileKeywords))
+            const sensitiveNetwork = (CF.StringUtils.stringListContainsSubstring(Network.networkName.toLowerCase(), Config.options.workSafety.triggerCondition.networkNameKeywords))
+            return enabled && sensitiveWallpaper && sensitiveNetwork;
+        }
+        property real wallpaperToScreenRatio: Math.min(wallpaperWidth / screen.width, wallpaperHeight / screen.height)
+        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: ((wallpaperWidth / wallpaperToScreenRatio * effectiveWallpaperScale) - screen.width) / 2
+        property real movableYSpace: ((wallpaperHeight / wallpaperToScreenRatio * effectiveWallpaperScale) - screen.height) / 2
+        readonly property bool verticalParallax: (Config.options.background.parallax.autoVertical && wallpaperHeight > wallpaperWidth) || Config.options.background.parallax.vertical
+        // Position
+        property real clockX: (modelData.width / 2)
+        property real clockY: (modelData.height / 2)
+        property var textHorizontalAlignment: {
+            if ((Config.options.lock.centerClock && GlobalStates.screenLocked) || wallpaperSafetyTriggered)
+                return Text.AlignHCenter;
+            if (clockX < screen.width / 3)
+                return Text.AlignLeft;
+            if (clockX > screen.width * 2 / 3)
+                return Text.AlignRight;
+            return Text.AlignHCenter;
+        }
+        // Colors
+        property bool shouldBlur: (GlobalStates.screenLocked && Config.options.lock.blur.enable)
+        property color dominantColor: Appearance.colors.colPrimary // Default, to be changed
+        property bool dominantColorIsDark: dominantColor.hslLightness < 0.5
+        property color colText: {
+            if (wallpaperSafetyTriggered)
+                return CF.ColorUtils.mix(Appearance.colors.colOnLayer0, Appearance.colors.colPrimary, 0.75);
+            return (GlobalStates.screenLocked && shouldBlur) ? Appearance.colors.colOnLayer0 : CF.ColorUtils.colorWithLightness(Appearance.colors.colPrimary, (dominantColorIsDark ? 0.8 : 0.12));
+        }
+        Behavior on colText {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        // Layer props
+        screen: modelData
+        exclusionMode: ExclusionMode.Ignore
+        WlrLayershell.layer: (GlobalStates.screenLocked && !scaleAnim.running) ? WlrLayer.Overlay : WlrLayer.Bottom
+        // WlrLayershell.layer: WlrLayer.Bottom
+        WlrLayershell.namespace: "quickshell:background"
+        anchors {
+            top: true
+            bottom: true
+            left: true
+            right: true
+        }
+        color: CF.ColorUtils.transparentize(CF.ColorUtils.mix(Appearance.colors.colLayer0, Appearance.colors.colPrimary, 0.75), (bgRoot.wallpaperIsVideo ? 1 : 0))
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
+        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);
+                    const [screenWidth, screenHeight] = [bgRoot.screen.width, bgRoot.screen.height];
+                    bgRoot.wallpaperWidth = width;
+                    bgRoot.wallpaperHeight = height;
+
+                    if (width <= screenWidth || height <= screenHeight) {
+                        // Undersized/perfectly sized wallpapers
+                        bgRoot.effectiveWallpaperScale = Math.max(screenWidth / width, screenHeight / height);
+                    } else {
+                        // Oversized = can be zoomed for parallax, yay
+                        bgRoot.effectiveWallpaperScale = Math.min(bgRoot.preferredWallpaperScale, width / screenWidth, height / screenHeight);
+                    }
+
+                    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 = clockLoader.implicitWidth + root.clockSizePadding * 2;
+            leastBusyRegionProc.contentHeight = clockLoader.implicitHeight + root.clockSizePadding * 2;
+            leastBusyRegionProc.horizontalPadding = bgRoot.movableXSpace + root.screenSizePadding * 2;
+            leastBusyRegionProc.verticalPadding = bgRoot.movableYSpace + root.screenSizePadding * 2;
+            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-venv.sh"), "--screen-width", Math.round(bgRoot.screen.width / bgRoot.effectiveWallpaperScale), "--screen-height", Math.round(bgRoot.screen.height / bgRoot.effectiveWallpaperScale), "--width", contentWidth, "--height", contentHeight, "--horizontal-padding", horizontalPadding, "--vertical-padding", verticalPadding, path
+                // "--visual-output",
+                ,]
+            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.effectiveWallpaperScale;
+                    bgRoot.clockY = parsedContent.center_y * bgRoot.effectiveWallpaperScale;
+                    bgRoot.dominantColor = parsedContent.dominant_color || Appearance.colors.colPrimary;
+                }
+            }
+        }
+
+        // Wallpaper
+        Item {
+            anchors.fill: parent
+            clip: true
+
+            StyledImage {
+                id: wallpaper
+                visible: opacity > 0 && !blurLoader.active
+                opacity: (status === Image.Ready && !bgRoot.wallpaperIsVideo) ? 1 : 0
+                cache: false
+                smooth: false
+                // Range = groups that workspaces span on
+                property int chunkSize: Config?.options.bar.workspaces.shown ?? 10
+                property int lower: Math.floor(bgRoot.firstWorkspaceId / chunkSize) * chunkSize
+                property int upper: Math.ceil(bgRoot.lastWorkspaceId / chunkSize) * chunkSize
+                property int range: upper - lower
+                property real valueX: {
+                    let result = 0.5;
+                    if (Config.options.background.parallax.enableWorkspace && !bgRoot.verticalParallax) {
+                        result = ((bgRoot.monitor.activeWorkspace?.id - lower) / range);
+                    }
+                    if (Config.options.background.parallax.enableSidebar) {
+                        result += (0.15 * GlobalStates.sidebarRightOpen - 0.15 * GlobalStates.sidebarLeftOpen);
+                    }
+                    return result;
+                }
+                property real valueY: {
+                    let result = 0.5;
+                    if (Config.options.background.parallax.enableWorkspace && bgRoot.verticalParallax) {
+                        result = ((bgRoot.monitor.activeWorkspace?.id - lower) / range);
+                    }
+                    return result;
+                }
+                property real effectiveValueX: Math.max(0, Math.min(1, valueX))
+                property real effectiveValueY: Math.max(0, Math.min(1, valueY))
+                x: -(bgRoot.movableXSpace) - (effectiveValueX - 0.5) * 2 * bgRoot.movableXSpace
+                y: -(bgRoot.movableYSpace) - (effectiveValueY - 0.5) * 2 * bgRoot.movableYSpace
+                source: bgRoot.wallpaperSafetyTriggered ? "" : bgRoot.wallpaperPath
+                fillMode: Image.PreserveAspectCrop
+                Behavior on x {
+                    NumberAnimation {
+                        duration: 600
+                        easing.type: Easing.OutCubic
+                    }
+                }
+                Behavior on y {
+                    NumberAnimation {
+                        duration: 600
+                        easing.type: Easing.OutCubic
+                    }
+                }
+                sourceSize {
+                    width: bgRoot.screen.width * bgRoot.effectiveWallpaperScale * bgRoot.monitor.scale
+                    height: bgRoot.screen.height * bgRoot.effectiveWallpaperScale * bgRoot.monitor.scale
+                }
+                width: bgRoot.wallpaperWidth / bgRoot.wallpaperToScreenRatio * bgRoot.effectiveWallpaperScale
+                height: bgRoot.wallpaperHeight / bgRoot.wallpaperToScreenRatio * bgRoot.effectiveWallpaperScale
+            }
+
+            Loader {
+                id: blurLoader
+                active: Config.options.lock.blur.enable && (GlobalStates.screenLocked || scaleAnim.running)
+                anchors.fill: wallpaper
+                scale: GlobalStates.screenLocked ? Config.options.lock.blur.extraZoom : 1
+                Behavior on scale {
+                    NumberAnimation {
+                        id: scaleAnim
+                        duration: 400
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.animationCurves.expressiveDefaultSpatial
+                    }
+                }
+                sourceComponent: GaussianBlur {
+                    source: wallpaper
+                    radius: GlobalStates.screenLocked ? Config.options.lock.blur.radius : 0
+                    samples: radius * 2 + 1
+
+                    Rectangle {
+                        opacity: GlobalStates.screenLocked ? 1 : 0
+                        anchors.fill: parent
+                        color: CF.ColorUtils.transparentize(Appearance.colors.colLayer0, 0.7)
+                    }
+                }
+            }
+
+            // The clock
+            Loader {
+                id: clockLoader
+                scale: Config.options.background.clock.scale
+                active: Config.options.background.clock.show
+                anchors {
+                    left: wallpaper.left
+                    top: wallpaper.top
+                    horizontalCenter: undefined
+                    verticalCenter: undefined
+                    leftMargin: {
+                        const clockXOnWallpaper = bgRoot.movableXSpace + ((root.fixedClockPosition ? root.fixedClockX : bgRoot.clockX * bgRoot.effectiveWallpaperScale) - implicitWidth / 2)
+                        const moveBack = (wallpaper.effectiveValueX * 2 * bgRoot.movableXSpace) * (1 - root.clockParallaxFactor);
+                        return clockXOnWallpaper + moveBack;
+                    }
+                    topMargin: {
+                        const clockYOnWallpaper = bgRoot.movableYSpace + ((root.fixedClockPosition ? root.fixedClockY : bgRoot.clockY * bgRoot.effectiveWallpaperScale) - implicitHeight / 2)
+                        const moveBack = (wallpaper.effectiveValueY * 2 * bgRoot.movableYSpace) * (1 - root.clockParallaxFactor);
+                        return clockYOnWallpaper + moveBack;
+                    }
+                    Behavior on leftMargin {
+                        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                    }
+                    Behavior on topMargin {
+                        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                    }
+                }
+                states: State {
+                    name: "centered"
+                    when: (GlobalStates.screenLocked && Config.options.lock.centerClock) || bgRoot.wallpaperSafetyTriggered
+                    AnchorChanges {
+                        target: clockLoader
+                        anchors {
+                            left: undefined
+                            right: undefined
+                            top: undefined
+                            verticalCenter: parent.verticalCenter
+                            horizontalCenter: parent.horizontalCenter
+                        }
+                    }
+                }
+                transitions: Transition {
+                    AnchorAnimation {
+                        duration: Appearance.animation.elementMove.duration
+                        easing.type: Appearance.animation.elementMove.type
+                        easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                    }
+                }
+                sourceComponent: Column {
+                    Loader {
+                        id: digitalClockLoader
+                        visible: root.clockStyle === "digital"
+                        active: visible
+                        sourceComponent: ColumnLayout {
+                            id: clockColumn
+                            spacing: 6
+
+                            ClockText {
+                                font.pixelSize: 90
+                                text: DateTime.time
+                            }
+                            ClockText {
+                                Layout.topMargin: -5
+                                text: DateTime.date
+                            }
+                            StyledText {
+                                // Somehow gets fucked up if made a ClockText???
+                                visible: Config.options.background.showQuote && Config.options.background.quote.length > 0
+                                Layout.fillWidth: true
+                                horizontalAlignment: bgRoot.textHorizontalAlignment
+                                font {
+                                    family: Appearance.font.family.main
+                                    pixelSize: Appearance.font.pixelSize.normal
+                                    weight: 350
+                                    italic: true
+                                }
+                                color: bgRoot.colText
+                                style: Text.Raised
+                                styleColor: Appearance.colors.colShadow
+                                text: Config.options.background.quote
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: cookieClockLoader
+                        visible: root.clockStyle === "cookie" 
+                        active: visible
+                        sourceComponent: CookieClock {}
+                    }
+
+                    Loader {
+                        id: cookieQuoteLoader
+                        visible: root.showCookieQuote
+                        active: visible
+                        sourceComponent: CookieQuote {}
+                        anchors.horizontalCenter: cookieClockLoader.horizontalCenter
+                    }
+                    
+                }
+
+                Item {
+                    anchors {
+                        top: clockLoader.bottom
+                        topMargin: 8
+                        horizontalCenter: (bgRoot.textHorizontalAlignment === Text.AlignHCenter || root.clockStyle === "cookie") ? clockLoader.horizontalCenter : undefined
+                        left: (bgRoot.textHorizontalAlignment === Text.AlignLeft) ? clockLoader.left : undefined
+                        right: (bgRoot.textHorizontalAlignment === Text.AlignRight) ? clockLoader.right : undefined
+                        leftMargin: -26
+                        rightMargin: -26
+                    }
+                    implicitWidth: statusTextBg.implicitWidth
+                    implicitHeight: statusTextBg.implicitHeight
+
+                    StyledRectangularShadow {
+                        target: statusTextBg
+                        visible: statusTextBg.visible && root.clockStyle === "cookie"
+                        opacity: statusTextBg.opacity
+                    }
+
+                    Rectangle {
+                        id: statusTextBg
+                        anchors.centerIn: parent
+                        clip: true
+                        opacity: (safetyStatusText.shown || lockStatusText.shown) ? 1 : 0
+                        visible: opacity > 0
+                        implicitHeight: statusTextRow.implicitHeight + 5 * 2
+                        implicitWidth: statusTextRow.implicitWidth + 5 * 2
+                        radius: Appearance.rounding.small
+                        color: CF.ColorUtils.transparentize(Appearance.colors.colSecondaryContainer, root.clockStyle === "cookie" ? 0 : 1)
+
+                        Behavior on implicitWidth {
+                            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                        }
+                        Behavior on implicitHeight {
+                            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                        }
+                        Behavior on opacity {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+
+                        RowLayout {
+                            id: statusTextRow
+                            anchors.centerIn: parent
+                            spacing: 14
+                            Item {
+                                Layout.fillWidth: bgRoot.textHorizontalAlignment !== Text.AlignLeft
+                                implicitWidth: 1
+                            }
+                            ClockStatusText {
+                                id: safetyStatusText
+                                shown: bgRoot.wallpaperSafetyTriggered
+                                statusIcon: "hide_image"
+                                statusText: Translation.tr("Wallpaper safety enforced")
+                            }
+                            ClockStatusText {
+                                id: lockStatusText
+                                shown: GlobalStates.screenLocked && Config.options.lock.showLockedText
+                                statusIcon: "lock"
+                                statusText: Translation.tr("Locked")
+                            }
+                            Item {
+                                Layout.fillWidth: bgRoot.textHorizontalAlignment !== Text.AlignRight
+                                implicitWidth: 1
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // ComponentsCookieClock {}
+    component ClockText: StyledText {
+        Layout.fillWidth: true
+        horizontalAlignment: bgRoot.textHorizontalAlignment
+        font {
+            family: Appearance.font.family.expressive
+            pixelSize: 20
+            weight: Font.DemiBold
+        }
+        color: bgRoot.colText
+        style: Text.Raised
+        styleColor: Appearance.colors.colShadow
+        animateChange: true
+    }
+    component ClockStatusText: Row {
+        id: statusTextRow
+        property alias statusIcon: statusIconWidget.text
+        property alias statusText: statusTextWidget.text
+        property bool shown: true
+        property color textColor: root.clockStyle === "cookie" ? Appearance.colors.colOnSecondaryContainer : bgRoot.colText
+        opacity: shown ? 1 : 0
+        visible: opacity > 0
+        Behavior on opacity {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+        spacing: 4
+        MaterialSymbol {
+            id: statusIconWidget
+            anchors.verticalCenter: statusTextRow.verticalCenter
+            iconSize: Appearance.font.pixelSize.huge
+            color: statusTextRow.textColor
+            style: Text.Raised
+            styleColor: Appearance.colors.colShadow
+        }
+        ClockText {
+            id: statusTextWidget
+            color: statusTextRow.textColor
+            anchors.verticalCenter: statusTextRow.verticalCenter
+            font {
+                family: Appearance.font.family.main
+                pixelSize: Appearance.font.pixelSize.large
+                weight: Font.Normal
+            }
+            style: Text.Raised
+            styleColor: Appearance.colors.colShadow
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -0,0 +1,203 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell.Io
+
+import "./dateIndicator"
+import "./minuteMarks"
+
+Item {
+    id: root
+
+    readonly property string clockStyle: Config.options.background.clock.style
+
+    property real implicitSize: 230
+
+    property color colShadow: Appearance.colors.colShadow
+    property color colBackground: Appearance.colors.colSecondaryContainer
+    property color colOnBackground: ColorUtils.mix(Appearance.colors.colSecondary, Appearance.colors.colSecondaryContainer, 0.15)
+    property color colBackgroundInfo: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.55)
+    property color colHourHand: Appearance.colors.colPrimary
+    property color colMinuteHand: Appearance.colors.colSecondary
+    property color colSecondHand: Appearance.colors.colTertiary
+
+    readonly property list<string> clockNumbers: DateTime.time.split(/[: ]/)
+    readonly property int clockHour: parseInt(clockNumbers[0]) % 12
+    readonly property int clockMinute: DateTime.clock.minutes
+    readonly property int clockSecond: DateTime.clock.seconds
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    function applyStyle(sides, dialStyle, hourHandStyle, minuteHandStyle, secondHandStyle, dateStyle) {
+        Config.options.background.clock.cookie.sides = sides
+        Config.options.background.clock.cookie.dialNumberStyle = dialStyle
+        Config.options.background.clock.cookie.hourHandStyle = hourHandStyle
+        Config.options.background.clock.cookie.minuteHandStyle = minuteHandStyle
+        Config.options.background.clock.cookie.secondHandStyle = secondHandStyle
+        Config.options.background.clock.cookie.dateStyle = dateStyle
+    }
+
+    function setClockPreset(category) {
+        if (!Config.options.background.clock.cookie.aiStyling) return;
+        if (category === "") return;
+        print("[Cookie clock] Setting clock preset for category: " + category)
+        // "abstract", "anime", "city", "minimalist", "landscape", "plants", "person", "space"
+        if (category == "abstract") {
+            applyStyle(10, "dots", "fill", "medium", "dot", "bubble")
+        } else if (category == "anime") {
+            applyStyle(12, "dots", "fill", "bold", "dot", "bubble")
+        } else if (category == "city" || category == "space") {
+            applyStyle(23, "full", "hollow", "thin", "classic", "bubble")
+        } else if (category == "minimalist") {
+            applyStyle(6, "none", "fill", "bold", "dot", "hide")
+        } else if (category == "landscape") {
+            applyStyle(14, "full", "hollow", "medium", "classic", "bubble")
+        } else if (category == "plants") {
+            applyStyle(9, "dots", "fill", "bold", "dot", "border")
+        } else if (category == "person") {
+            applyStyle(14, "full", "classic", "classic", "classic", "rect")
+        }
+    }
+
+    Connections {
+        target: Config
+        function onReadyChanged() {
+            categoryFileView.path = Directories.generatedWallpaperCategoryPath
+        }
+    }
+
+    FileView {
+        id: categoryFileView
+        path: ""
+        watchChanges: true
+        onFileChanged: reload()
+        onLoaded: {
+            root.setClockPreset(categoryFileView.text().trim())
+        }
+    }
+
+    DropShadow {
+        source: cookie
+        anchors.fill: source
+        horizontalOffset: 0
+        verticalOffset: 1
+        radius: 8
+        samples: radius * 2 + 1
+        color: root.colShadow
+        transparentBorder: true
+    }
+
+    MaterialCookie {
+        id: cookie
+        z: 0
+        implicitSize: root.implicitSize
+        amplitude: implicitSize / 70
+        sides: Config.options.background.clock.cookie.sides
+        color: root.colBackground
+        constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
+    
+        // Hour/minutes numbers/dots/lines
+        MinuteMarks {
+            anchors.fill: parent
+            color: root.colOnBackground
+        }
+
+        // Stupid extra hour marks in the middle
+        FadeLoader {
+            id: hourMarksLoader
+            anchors.centerIn: parent
+            shown: Config.options.background.clock.cookie.hourMarks
+            sourceComponent: HourMarks {
+                implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity)
+                color: root.colOnBackground
+                colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5)
+            }
+        }
+
+        // Number column in the middle
+        FadeLoader {
+            id: timeColumnLoader
+            anchors.centerIn: parent
+            shown: Config.options.background.clock.cookie.timeIndicators
+            scale: 1.4 - 0.4 * timeColumnLoader.shown
+            Behavior on scale {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+
+            sourceComponent: TimeColumn {
+                color: root.colBackgroundInfo
+            }
+        }
+
+        // Hour hand
+        FadeLoader {
+            anchors.fill: parent
+            z: 1
+            shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
+            sourceComponent: HourHand {
+                clockHour: root.clockHour
+                clockMinute: root.clockMinute
+                style: Config.options.background.clock.cookie.hourHandStyle
+                color: root.colHourHand
+            }
+        }
+
+        // Minute hand
+        FadeLoader {
+            anchors.fill: parent
+            z: 2
+            shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide"
+            sourceComponent: MinuteHand {
+                anchors.fill: parent
+                clockMinute: root.clockMinute
+                style: Config.options.background.clock.cookie.minuteHandStyle
+                color: root.colMinuteHand
+            }
+        }
+
+        // Second hand
+        FadeLoader {
+            id: secondHandLoader
+            z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3
+            shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide"
+            anchors.fill: parent
+            sourceComponent: SecondHand {
+                id: secondHand
+                clockSecond: root.clockSecond
+                style: Config.options.background.clock.cookie.secondHandStyle
+                color: root.colSecondHand
+            }
+        }
+
+        // Center dot
+        FadeLoader {
+            z: 4
+            anchors.centerIn: parent
+            shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold"
+            sourceComponent: Rectangle {
+                color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand
+                implicitWidth: 6
+                implicitHeight: implicitWidth
+                radius: width / 2
+            }
+        }
+
+        // Date
+        FadeLoader {
+            anchors.fill: parent
+            shown: Config.options.background.clock.cookie.dateStyle !== "hide"
+
+            sourceComponent: DateIndicator {
+                color: root.colBackgroundInfo
+                style: Config.options.background.clock.cookie.dateStyle
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml

@@ -0,0 +1,60 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+
+Item {
+    id: root
+
+    readonly property string quoteText: Config.options.background.quote
+
+    implicitWidth: quoteBox.implicitWidth
+    implicitHeight: quoteBox.implicitHeight
+
+    anchors.bottom: parent.bottom
+    anchors.bottomMargin: -24
+
+    DropShadow {
+        source: quoteBox 
+        anchors.fill: quoteBox
+        horizontalOffset: 0
+        verticalOffset: 2
+        radius: 12
+        samples: radius * 2 + 1
+        color: Appearance.colors.colShadow
+        transparentBorder: true
+    }
+    
+    Rectangle {
+        id: quoteBox
+
+        implicitWidth: quoteStyledText.width + quoteIcon.width + 16 // for spacing on both sides
+        implicitHeight: quoteStyledText.height + 8 
+        radius: Appearance.rounding.small
+        color: Appearance.colors.colSecondaryContainer
+
+        Row {
+            anchors.centerIn: parent
+            spacing: 4
+            MaterialSymbol {
+                id: quoteIcon
+                anchors.top: parent.top
+                iconSize: Appearance.font.pixelSize.huge
+                text: "format_quote"
+                color: Appearance.colors.colOnSecondaryContainer
+            }
+            StyledText {
+                id: quoteStyledText
+                horizontalAlignment: Text.AlignLeft
+                text: Config.options.background.quote
+                color: Appearance.colors.colOnSecondaryContainer
+                font {
+                    family: Appearance.font.family.reading
+                    pixelSize: Appearance.font.pixelSize.large
+                    weight: Font.Normal
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/HourHand.qml

@@ -0,0 +1,37 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import QtQuick
+
+Item {
+    id: root
+
+    required property int clockHour
+    required property int clockMinute
+    property real handLength: 72
+    property real handWidth: 18
+    property string style: "fill"
+    property color color: Appearance.colors.colPrimary
+
+    property real fillColorAlpha: root.style === "hollow" ? 0 : 1
+    Behavior on fillColorAlpha {
+        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+    }
+
+    rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60)
+
+    Rectangle {
+        anchors.verticalCenter: parent.verticalCenter
+        x: (parent.width - root.handWidth) / 2 - 15 * (root.style === "classic")
+        width: root.handLength
+        height: root.style === "classic" ? 8 : root.handWidth
+        radius: root.style === "classic" ? 2 : root.handWidth / 2
+        color : Qt.rgba(root.color.r, root.color.g, root.color.b, root.fillColorAlpha)
+        border.color: root.color
+        border.width: 4
+
+        Behavior on x {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/HourMarks.qml

@@ -0,0 +1,50 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+
+Item {
+    id: root
+    property real implicitSize: 135
+    property real markLength: 12
+    property real markWidth: 4
+    property color color: Appearance.colors.colOnSecondaryContainer
+    property color colOnBackground: Appearance.colors.colSecondaryContainer
+    property real padding: 8
+
+    Rectangle {
+        color: root.color
+        anchors.centerIn: parent
+        implicitWidth: root.implicitSize
+        implicitHeight: root.implicitSize
+        radius: width / 2
+
+        // Hour mark lines
+        Repeater {
+            model: 12
+
+            Item {
+                required property int index
+                anchors.fill: parent
+                rotation: 360 / 12 * index 
+
+                Rectangle {
+                    anchors {
+                        left: parent.left
+                        verticalCenter: parent.verticalCenter
+                        leftMargin: root.padding
+                    }
+                    implicitWidth: root.markLength
+                    implicitHeight: root.markWidth
+
+                    radius: width / 2
+                    color: root.colOnBackground
+                }
+            }
+        }
+    }
+
+}

dots/.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml

@@ -0,0 +1,43 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import QtQuick
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    required property int clockMinute
+    property string style: "medium"
+    property real handLength: 95
+    property real handWidth: style === "bold" ? 18 : style === "medium" ? 12 : 5
+    property color color: Appearance.colors.colSecondary
+
+    rotation: -90 + (360 / 60) * root.clockMinute
+
+    Behavior on rotation {
+        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+    }
+
+    Rectangle {
+        anchors.verticalCenter: parent.verticalCenter
+        x: {
+            let position = parent.width / 2 - root.handWidth / 2;
+            if (root.style === "classic") position -= 15;
+            return position;
+        }
+        width: root.handLength
+        height: root.handWidth
+        
+        radius: root.style === "classic" ? 2 : root.handWidth / 2
+        color: Appearance.colors.colSecondary
+
+        Behavior on height {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+
+        Behavior on x {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/SecondHand.qml

@@ -0,0 +1,70 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    required property int clockSecond
+    property real handWidth: 2
+    property real handLength: 100
+    property real dotSize: 20
+    property string style: "hide"
+    property color color: Appearance.colors.colSecondary
+    
+    rotation: (360 / 60 * clockSecond) + 90
+
+    Behavior on rotation {
+        enabled: Config.options.background.clock.cookie.constantlyRotate // Animating every second is expensive...
+        animation: NumberAnimation {
+            duration: 1000 // 1 second
+            easing.type: Easing.InOutQuad
+        }
+    }
+
+    Rectangle {
+        anchors {
+            left: parent.left
+            verticalCenter: parent.verticalCenter
+            leftMargin: 10
+        }
+        implicitWidth: root.style === "dot" ? root.dotSize : root.handLength
+        implicitHeight: root.style === "dot" ? root.dotSize : root.handWidth
+        radius: Math.min(width, height) / 2
+        color: root.color
+        Behavior on implicitHeight {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+        Behavior on implicitWidth {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+    }
+
+    // Classic style dot in the middle of the hand
+    FadeLoader {
+        id: classicDotLoader
+        anchors {
+            left: parent.left
+            verticalCenter: parent.verticalCenter
+        }
+        shown: root.style === "classic"
+        Rectangle {
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+                leftMargin: 40
+            }
+            implicitWidth: root.style === "classic" ? 14 : 0
+            implicitHeight: implicitWidth
+            color: root.color
+            radius: Appearance.rounding.small
+
+            Behavior on implicitWidth {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/TimeColumn.qml

@@ -0,0 +1,41 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Column {
+    id: root
+    property list<string> clockNumbers: DateTime.time.split(/[: ]/)
+    property bool isEnabled: Config.options.background.clock.cookie.timeIndicators
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    property bool hourMarksEnabled: Config.options.background.clock.cookie.hourMarks
+    spacing: -16
+
+    Repeater {
+        model: root.clockNumbers
+
+        delegate: StyledText {
+            required property string modelData
+            text: modelData.padStart(2, "0")
+            property bool isAmPm: !text.match(/\d{2}/i)
+            property real numberSizeWithoutGlow: isAmPm ? 26 : 68
+            property real numberSizeWithGlow: isAmPm ? 20 : 40
+            property real numberSize: root.hourMarksEnabled ? numberSizeWithGlow : numberSizeWithoutGlow
+
+            anchors.horizontalCenter: root.horizontalCenter
+            color: root.color
+            font {
+                family: Appearance.font.family.expressive
+                weight: Font.Bold
+                pixelSize: numberSize
+            }
+
+            Behavior on numberSize {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/BubbleDate.qml

@@ -0,0 +1,36 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property bool isMonth: false
+    property real targetSize: 0
+    property alias text: bubbleText.text
+
+    text: Qt.locale().toString(DateTime.clock.date, root.isMonth ? "MM" : "d")
+
+    MaterialCookie {
+        z: 5
+        sides: root.isMonth ? 1 : 4
+        anchors.centerIn: parent
+        color: root.isMonth ? Appearance.colors.colPrimaryContainer : Appearance.colors.colTertiaryContainer
+        implicitSize: targetSize
+        constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
+    }
+
+    StyledText {
+        id: bubbleText
+        z: 6
+        anchors.centerIn: parent
+        color: root.isMonth ? Appearance.colors.colPrimary : Appearance.colors.colTertiary
+        font {
+            family: Appearance.font.family.expressive
+            pixelSize: 30
+            weight: Font.Black
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/DateIndicator.qml

@@ -0,0 +1,76 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+
+Item {
+    id: root
+    property string style: "bubble"
+    property color color: Appearance.colors.colOnSecondaryContainer
+    property real dateSquareSize: 64
+
+    // Rotating date
+    FadeLoader {
+        anchors.fill: parent
+        shown: Config.options.background.clock.cookie.dateStyle === "border"
+        sourceComponent: RotatingDate {
+            color: root.color
+        }
+    }
+
+    // Rectangle date (only today's number) in right side of the clock
+    FadeLoader {
+        id: rectLoader
+        shown: root.style === "rect"
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 40 - rectLoader.opacity * 30
+        }
+
+        sourceComponent: RectangleDate {
+            color: ColorUtils.mix(root.color, Appearance.colors.colSecondaryContainerHover, 0.5)
+            radius: Appearance.rounding.small
+            implicitWidth: 45 * rectLoader.opacity
+            implicitHeight: 30 * rectLoader.opacity
+        }
+    }
+
+    // Bubble style: day of month
+    FadeLoader {
+        id: dayBubbleLoader
+        shown: root.style === "bubble"
+        property real targetSize: root.dateSquareSize * opacity
+        anchors {
+            left: parent.left
+            top: parent.top
+        }
+
+        sourceComponent: BubbleDate {
+            implicitWidth: dayBubbleLoader.targetSize
+            implicitHeight: dayBubbleLoader.targetSize
+            isMonth: false
+            targetSize: dayBubbleLoader.targetSize
+        }
+    }
+
+    // Bubble style: month
+    FadeLoader {
+        id: monthBubbleLoader
+        shown: root.style === "bubble"
+        property real targetSize: root.dateSquareSize * opacity
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        sourceComponent: BubbleDate {
+            implicitWidth: monthBubbleLoader.targetSize
+            implicitHeight: monthBubbleLoader.targetSize
+            isMonth: true
+            targetSize: monthBubbleLoader.targetSize
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RectangleDate.qml

@@ -0,0 +1,21 @@
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Rectangle {
+    id: rect
+    readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
+
+    StyledText {
+        anchors.centerIn: parent
+        color: Appearance.colors.colSecondaryHover
+        text: Qt.locale().toString(DateTime.clock.date, "dd")
+        font {
+            family: Appearance.font.family.expressive
+            pixelSize: 20
+            weight: 1000
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml

@@ -0,0 +1,50 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+
+    property string style: Config.options.background.clock.cookie.dateStyle
+    property color color: Appearance.colors.colOnSecondaryContainer
+    property real angleStep: 12 * Math.PI / 180
+    property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
+    
+    readonly property int clockSecond: DateTime.clock.seconds
+    readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
+    readonly property bool timeIndicators: Config.options.background.clock.cookie.timeIndicators
+
+    property real radius: style === "border" ? 90 : 0
+    Behavior on radius {
+        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+    }
+
+    rotation: {
+        if (!Config.options.time.secondPrecision) return 0
+        else return (360 / 60 * clockSecond) + 180 - (angleStep / Math.PI * 180 * dateText.length) / 2
+    }
+
+    Repeater {
+        model: root.dateText.length 
+
+        delegate: Text {
+            required property int index
+            property real angle: index * root.angleStep - Math.PI / 2
+            x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
+            y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
+            rotation: angle * 180 / Math.PI + 90
+
+            color: root.color
+            font {
+                family: Appearance.font.family.title
+                pixelSize: 30
+                weight: Font.DemiBold 
+            }
+
+            text: root.dateText.charAt(index)
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/BigHourNumbers.qml

@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property real numberSize: 80
+    property real margins: 10
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    property int hours: 12
+    property int numbers: 4
+    property int fontSize: 80
+
+    Repeater {
+        model: root.numbers
+
+        Item {
+            id: numberItem
+            required property int index
+            rotation: 360 / root.numbers * (index + 1)
+            anchors.fill: parent
+            
+            Item {
+                implicitWidth: root.numberSize
+                implicitHeight: implicitWidth
+                anchors {
+                    top: parent.top
+                    horizontalCenter: parent.horizontalCenter
+                    topMargin: root.margins
+                }
+                StyledText {
+                    color: root.color
+                    anchors.centerIn: parent
+                    text: root.hours / root.numbers * (numberItem.index + 1)
+                    rotation: -numberItem.rotation
+
+                    font {
+                        family: Appearance.font.family.reading
+                        pixelSize: root.fontSize
+                        weight: Font.Black
+                    }
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Dots.qml

@@ -0,0 +1,34 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property real implicitSize: 12
+    property real margins: 10
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    Repeater {
+        model: 12
+
+        Item {
+            required property int index
+            anchors.fill: parent // Ensures rotation works properly
+            rotation: 360 / 12 * index
+
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: root.margins
+                }
+                implicitWidth: root.implicitSize
+                implicitHeight: implicitWidth
+                radius: implicitWidth / 2
+                color: root.color
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/Lines.qml

@@ -0,0 +1,66 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property real numberSize: 80
+    property real margins: 10
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    property real hourLineSize: 4
+    property real minuteLineSize: 2
+    property real hourLineLength: 18
+    property real minuteLineLength: 7
+
+    property int hours: 12
+    property int minutes: 60
+
+    // Full dial style hour lines
+    Repeater {
+        model: root.hours
+
+        Item {
+            required property int index
+            rotation: 360 / root.hours * index
+            anchors.fill: parent
+
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: root.margins
+                }
+                implicitWidth: root.hourLineLength
+                implicitHeight: root.hourLineSize
+                radius: implicitWidth / 2
+                color: root.color
+            }
+        }
+    }
+
+    // Minute lines
+    Repeater {
+        model: root.minutes
+
+        Item {
+            required property int index
+            rotation: 360 / root.minutes * index 
+            anchors.fill: parent
+
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: root.margins
+                }
+                implicitWidth: root.minuteLineLength
+                implicitHeight: root.minuteLineSize
+                radius: implicitWidth / 2
+                color: root.color
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml

@@ -0,0 +1,48 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+
+    property color color: Appearance.colors.colOnSecondaryContainer
+    property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide"
+    property string dateStyle : Config.options.background.clock.cookie.dateStyle
+
+    // 12 Dots
+    FadeLoader {
+        id: dotsLoader
+        anchors.fill: parent
+        shown: root.style === "dots"
+        sourceComponent: Dots {
+            color: root.color
+            margins: 46 - dotsLoader.opacity * 34
+        }
+    }
+
+    // 3-6-9-12 hour numbers (pls don't realize you can have more than 4 numbers)
+    FadeLoader {
+        id: bigHourNumbersLoader
+        anchors.fill: parent
+        shown: root.style === "numbers"
+        sourceComponent: BigHourNumbers {
+            numberSize: 80
+            color: root.color
+            margins: 20 - 10 * bigHourNumbersLoader.opacity
+        }
+    }
+
+    // Lines
+    FadeLoader {
+        id: linesLoader
+        anchors.fill: parent
+        shown: root.style === "full"
+        sourceComponent: Lines {
+            color: root.color
+            margins: 46 - linesLoader.opacity * 34
+        }
+    }
+    
+}

dots/.config/quickshell/ii/modules/bar/ActiveWindow.qml

@@ -0,0 +1,52 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Item {
+    id: root
+    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.QsWindow.window?.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 ?? 1}`
+        }
+
+    }
+
+}

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

@@ -0,0 +1,253 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+Scope {
+    id: bar
+    property bool showBarBackground: Config.options.bar.showBackground
+
+    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
+
+                Timer {
+                    id: showBarTimer
+                    interval: (Config?.options.bar.autoHide.showWhenPressingSuper.delay ?? 100)
+                    repeat: false
+                    onTriggered: {
+                        barRoot.superShow = true
+                    }
+                }
+                Connections {
+                    target: GlobalStates
+                    function onSuperDownChanged() {
+                        if (!Config?.options.bar.autoHide.showWhenPressingSuper.enable) return;
+                        if (GlobalStates.superDown) showBarTimer.restart();
+                        else {
+                            showBarTimer.stop();
+                            barRoot.superShow = false;
+                        }
+                    }
+                }
+                property bool superShow: false
+                property bool mustShow: hoverRegion.containsMouse || superShow
+                exclusionMode: ExclusionMode.Ignore
+                exclusiveZone: (Config?.options.bar.autoHide.enable && (!mustShow || !Config?.options.bar.autoHide.pushWindows)) ? 0 :
+                    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: hoverMaskRegion
+                }
+                color: "transparent"
+
+                anchors {
+                    top: !Config.options.bar.bottom
+                    bottom: Config.options.bar.bottom
+                    left: true
+                    right: true
+                }
+
+                margins {
+                    right: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.right) * -1
+                    bottom: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.bottom) * -1
+                }
+
+                MouseArea  {
+                    id: hoverRegion
+                    hoverEnabled: true
+                    anchors {
+                        fill: parent
+                        rightMargin: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.right) * 1
+                        bottomMargin: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.bottom) * 1
+                    }
+
+                    Item {
+                        id: hoverMaskRegion
+                        anchors {
+                            fill: barContent
+                            topMargin: -Config.options.bar.autoHide.hoverRegionWidth
+                            bottomMargin: -Config.options.bar.autoHide.hoverRegionWidth
+                        }
+                    }
+
+                    BarContent {
+                        id: barContent
+                        
+                        implicitHeight: Appearance.sizes.barHeight
+                        anchors {
+                            right: parent.right
+                            left: parent.left
+                            top: parent.top
+                            bottom: undefined
+                            topMargin: (Config?.options.bar.autoHide.enable && !mustShow) ? -Appearance.sizes.barHeight : 0
+                            bottomMargin: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.bottom) * -1
+                            rightMargin: (Config.options.interactions.deadPixelWorkaround.enable && barRoot.anchors.right) * -1
+                        }
+                        Behavior on anchors.topMargin {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        Behavior on anchors.bottomMargin {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+
+                        states: State {
+                            name: "bottom"
+                            when: Config.options.bar.bottom
+                            AnchorChanges {
+                                target: barContent
+                                anchors {
+                                    right: parent.right
+                                    left: parent.left
+                                    top: undefined
+                                    bottom: parent.bottom
+                                }
+                            }
+                            PropertyChanges {
+                                target: barContent
+                                anchors.topMargin: 0
+                                anchors.bottomMargin: (Config?.options.bar.autoHide.enable && !mustShow) ? -Appearance.sizes.barHeight : 0
+                            }
+                        }
+                    }
+
+                    // Round decorators
+                    Loader {
+                        id: roundDecorators
+                        anchors {
+                            left: parent.left
+                            right: parent.right
+                            top: barContent.bottom
+                            bottom: undefined
+                        }
+                        height: Appearance.rounding.screenRounding
+                        active: showBarBackground && Config.options.bar.cornerStyle === 0 // Hug
+
+                        states: State {
+                            name: "bottom"
+                            when: Config.options.bar.bottom
+                            AnchorChanges {
+                                target: roundDecorators
+                                anchors {
+                                    right: parent.right
+                                    left: parent.left
+                                    top: undefined
+                                    bottom: barContent.top
+                                }
+                            }
+                        }
+
+                        sourceComponent: Item {
+                            implicitHeight: Appearance.rounding.screenRounding
+                            RoundCorner {
+                                id: leftCorner
+                                anchors {
+                                    top: parent.top
+                                    bottom: parent.bottom
+                                    left: parent.left
+                                }
+
+                                implicitSize: 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
+                                }
+                                implicitSize: 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;
+        }
+    }
+}

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

@@ -0,0 +1,349 @@
+import "./weather"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.UPower
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+Item { // Bar content region
+    id: root
+
+    property var screen: root.QsWindow.window?.screen
+    property var brightnessMonitor: Brightness.getMonitorForScreen(screen)
+    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
+
+    component VerticalBarSeparator: Rectangle {
+        Layout.topMargin: Appearance.sizes.baseBarHeight / 3
+        Layout.bottomMargin: Appearance.sizes.baseBarHeight / 3
+        Layout.fillHeight: true
+        implicitWidth: 1
+        color: Appearance.colors.colOutlineVariant
+    }
+
+    // Background shadow
+    Loader {
+        active: Config.options.bar.showBackground && 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: Config.options.bar.showBackground ? 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
+    }
+
+    FocusedScrollMouseArea { // Left side | scroll to change brightness
+        id: barLeftSideMouseArea
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            right: middleSection.left
+        }
+        implicitWidth: leftSectionRowLayout.implicitWidth
+        implicitHeight: Appearance.sizes.baseBarHeight
+
+        onScrollDown: root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness - 0.05)
+        onScrollUp: root.brightnessMonitor.setBrightness(root.brightnessMonitor.brightness + 0.05)
+        onMovedAway: GlobalStates.osdBrightnessOpen = false
+        onPressed: event => {
+            if (event.button === Qt.LeftButton)
+                GlobalStates.sidebarLeftOpen = !GlobalStates.sidebarLeftOpen;
+        }
+
+        // Visual content
+        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 {
+            id: leftSectionRowLayout
+            anchors.fill: parent
+            spacing: 10
+
+            LeftSidebarButton { // Left sidebar button
+                Layout.alignment: Qt.AlignVCenter
+                Layout.leftMargin: Appearance.rounding.screenRounding
+                colBackground: barLeftSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
+            }
+
+            ActiveWindow {
+                visible: root.useShortenedForm === 0
+                Layout.rightMargin: Appearance.rounding.screenRounding
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+        }
+    }
+
+    Row { // Middle section
+        id: middleSection
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            horizontalCenter: parent.horizontalCenter
+        }
+        spacing: 4
+
+        BarGroup {
+            id: leftCenterGroup
+            anchors.verticalCenter: parent.verticalCenter
+            implicitWidth: root.centerSideModuleWidth
+
+            Resources {
+                alwaysShowAllResources: root.useShortenedForm === 2
+                Layout.fillWidth: root.useShortenedForm === 2
+            }
+
+            Media {
+                visible: root.useShortenedForm < 2
+                Layout.fillWidth: true
+            }
+        }
+
+        VerticalBarSeparator {
+            visible: Config.options?.bar.borderless
+        }
+
+        BarGroup {
+            id: middleCenterGroup
+            anchors.verticalCenter: parent.verticalCenter
+            padding: workspacesWidget.widgetPadding
+
+            Workspaces {
+                id: workspacesWidget
+                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
+            anchors.verticalCenter: parent.verticalCenter
+            implicitWidth: root.centerSideModuleWidth
+            implicitHeight: rightCenterGroupContent.implicitHeight
+
+            onPressed: {
+                GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+            }
+
+            BarGroup {
+                id: rightCenterGroupContent
+                anchors.fill: parent
+
+                ClockWidget {
+                    showDate: (Config.options.bar.verbose && root.useShortenedForm < 2)
+                    Layout.alignment: Qt.AlignVCenter
+                    Layout.fillWidth: true
+                }
+
+                UtilButtons {
+                    visible: (Config.options.bar.verbose && root.useShortenedForm === 0)
+                    Layout.alignment: Qt.AlignVCenter
+                }
+
+                BatteryIndicator {
+                    visible: (root.useShortenedForm < 2 && UPower.displayDevice.isLaptopBattery)
+                    Layout.alignment: Qt.AlignVCenter
+                }
+            }
+        }
+    }
+
+    FocusedScrollMouseArea { // Right side | scroll to change volume
+        id: barRightSideMouseArea
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: middleSection.right
+            right: parent.right
+        }
+        implicitWidth: rightSectionRowLayout.implicitWidth
+        implicitHeight: Appearance.sizes.baseBarHeight
+
+        onScrollDown: {
+            const currentVolume = Audio.value;
+            const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
+            Audio.sink.audio.volume -= step;
+        }
+        onScrollUp: {
+            const currentVolume = Audio.value;
+            const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
+            Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
+        }
+        onMovedAway: GlobalStates.osdVolumeOpen = false;
+        onPressed: event => {
+            if (event.button === Qt.LeftButton) {
+                GlobalStates.sidebarRightOpen = !GlobalStates.sidebarRightOpen;
+            }
+        }
+
+        // Visual content
+        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 {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        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 {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        MaterialSymbol {
+                            text: "mic_off"
+                            iconSize: Appearance.font.pixelSize.larger
+                            color: rightSidebarButton.colText
+                        }
+                    }
+                    HyprlandXkbIndicator {
+                        Layout.alignment: Qt.AlignVCenter
+                        Layout.rightMargin: indicatorsRowLayout.realSpacing
+                        color: rightSidebarButton.colText
+                    }
+                    Revealer {
+                        reveal: Notifications.silent || Notifications.unread > 0
+                        Layout.fillHeight: true
+                        Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
+                        implicitHeight: reveal ? notificationUnreadCount.implicitHeight : 0
+                        implicitWidth: reveal ? notificationUnreadCount.implicitWidth : 0
+                        Behavior on Layout.rightMargin {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        NotificationUnreadCount {
+                            id: notificationUnreadCount
+                        }
+                    }
+                    MaterialSymbol {
+                        Layout.rightMargin: indicatorsRowLayout.realSpacing
+                        text: Network.materialSymbol
+                        iconSize: Appearance.font.pixelSize.larger
+                        color: rightSidebarButton.colText
+                    }
+                    MaterialSymbol {
+                        visible: BluetoothStatus.available
+                        text: BluetoothStatus.connected ? "bluetooth_connected" : BluetoothStatus.enabled ? "bluetooth" : "bluetooth_disabled"
+                        iconSize: Appearance.font.pixelSize.larger
+                        color: rightSidebarButton.colText
+                    }
+                }
+            }
+
+            SysTray {
+                visible: root.useShortenedForm === 0
+                Layout.fillWidth: false
+                Layout.fillHeight: true
+                invertSide: Config?.options.bar.bottom
+            }
+
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+            // Weather
+            Loader {
+                Layout.leftMargin: 4
+                active: Config.options.bar.weather.enable
+
+                sourceComponent: BarGroup {
+                    WeatherBar {}
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/BarGroup.qml

@@ -0,0 +1,41 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property bool vertical: false
+    property real padding: 5
+    implicitWidth: vertical ? Appearance.sizes.baseVerticalBarWidth : (gridLayout.implicitWidth + padding * 2)
+    implicitHeight: vertical ? (gridLayout.implicitHeight + padding * 2) : Appearance.sizes.baseBarHeight
+    default property alias items: gridLayout.children
+
+    Rectangle {
+        id: background
+        anchors {
+            fill: parent
+            topMargin: root.vertical ? 0 : 4
+            bottomMargin: root.vertical ? 0 : 4
+            leftMargin: root.vertical ? 4 : 0
+            rightMargin: root.vertical ? 4 : 0
+        }
+        color: Config.options?.bar.borderless ? "transparent" : Appearance.colors.colLayer1
+        radius: Appearance.rounding.small
+    }
+
+    GridLayout {
+        id: gridLayout
+        columns: root.vertical ? 1 : -1
+        anchors {
+            verticalCenter: root.vertical ? undefined : parent.verticalCenter
+            horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
+            left: root.vertical ? undefined : parent.left
+            right: root.vertical ? undefined : parent.right
+            top: root.vertical ? parent.top : undefined
+            bottom: root.vertical ? parent.bottom : undefined
+            margins: root.padding
+        }
+        columnSpacing: 4
+        rowSpacing: 12
+    }
+}

dots/.config/quickshell/ii/modules/bar/BatteryIndicator.qml

@@ -0,0 +1,59 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+MouseArea {
+    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
+
+    implicitWidth: batteryProgress.implicitWidth
+    implicitHeight: Appearance.sizes.barHeight
+
+    hoverEnabled: true
+
+    ClippedProgressBar {
+        id: batteryProgress
+        anchors.centerIn: parent
+        value: percentage
+        highlightColor: (isLow && !isCharging) ? Appearance.m3colors.m3error : Appearance.colors.colOnSecondaryContainer
+
+        Item {
+            anchors.centerIn: parent
+            width: batteryProgress.valueBarWidth
+            height: batteryProgress.valueBarHeight
+
+            RowLayout {
+                anchors.centerIn: parent
+                spacing: 0
+
+                MaterialSymbol {
+                    id: boltIcon
+                    Layout.alignment: Qt.AlignVCenter
+                    Layout.leftMargin: -2
+                    Layout.rightMargin: -2
+                    fill: 1
+                    text: "bolt"
+                    iconSize: Appearance.font.pixelSize.smaller
+                    visible: isCharging && percentage < 1 // TODO: animation
+                }
+                StyledText {
+                    Layout.alignment: Qt.AlignVCenter
+                    font: batteryProgress.font
+                    text: batteryProgress.text
+                }
+            }
+        }
+    }
+
+    BatteryPopup {
+        id: batteryPopup
+        hoverTarget: root
+    }
+}

dots/.config/quickshell/ii/modules/bar/BatteryPopup.qml

@@ -0,0 +1,133 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+StyledPopup {
+    id: root
+    
+    ColumnLayout {
+        id: columnLayout
+        anchors.centerIn: parent
+        spacing: 4
+
+        // Header
+        Row {
+            id: header
+            spacing: 5
+
+            MaterialSymbol {
+                anchors.verticalCenter: parent.verticalCenter
+                fill: 0
+                font.weight: Font.Medium
+                text: "battery_android_full"
+                iconSize: Appearance.font.pixelSize.large
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+
+            StyledText {
+                anchors.verticalCenter: parent.verticalCenter
+                text: "Battery"
+                font {
+                    weight: Font.Medium
+                    pixelSize: Appearance.font.pixelSize.normal
+                }
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+        }
+
+        // This row is hidden when the battery is full.
+        RowLayout {
+            spacing: 5
+            Layout.fillWidth: true
+            property bool rowVisible: {
+                let timeValue = Battery.isCharging ? Battery.timeToFull : Battery.timeToEmpty;
+                let power = Battery.energyRate;
+                return !(Battery.chargeState == 4 || timeValue <= 0 || power <= 0.01);
+            }
+            visible: rowVisible
+            opacity: rowVisible ? 1 : 0
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 500
+                }
+            }
+
+            MaterialSymbol {
+                text: "schedule"
+                color: Appearance.colors.colOnSurfaceVariant
+                iconSize: Appearance.font.pixelSize.large
+            }
+            StyledText {
+                text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:")
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignRight
+                color: Appearance.colors.colOnSurfaceVariant
+                text: {
+                    function formatTime(seconds) {
+                        var h = Math.floor(seconds / 3600);
+                        var m = Math.floor((seconds % 3600) / 60);
+                        if (h > 0)
+                            return `${h}h, ${m}m`;
+                        else
+                            return `${m}m`;
+                    }
+                    if (Battery.isCharging)
+                        return formatTime(Battery.timeToFull);
+                    else
+                        return formatTime(Battery.timeToEmpty);
+                }
+            }
+        }
+
+        RowLayout {
+            spacing: 5
+            Layout.fillWidth: true
+
+            property bool rowVisible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
+            visible: rowVisible
+            opacity: rowVisible ? 1 : 0
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 500
+                }
+            }
+
+            MaterialSymbol {
+                text: "bolt"
+                color: Appearance.colors.colOnSurfaceVariant
+                iconSize: Appearance.font.pixelSize.large
+            }
+
+            StyledText {
+                text: {
+                    if (Battery.chargeState == 4) {
+                        return Translation.tr("Fully charged");
+                    } else if (Battery.chargeState == 1) {
+                        return Translation.tr("Charging:");
+                    } else {
+                        return Translation.tr("Discharging:");
+                    }
+                }
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignRight
+                color: Appearance.colors.colOnSurfaceVariant
+                text: {
+                    if (Battery.chargeState == 4) {
+                        return "";
+                    } else {
+                        return `${Battery.energyRate.toFixed(2)}W`;
+                    }
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/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
+
+}

dots/.config/quickshell/ii/modules/bar/ClockWidget.qml

@@ -0,0 +1,50 @@
+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: Appearance.sizes.barHeight
+
+    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
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+
+        ClockWidgetTooltip {
+            hoverTarget: mouseArea
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/ClockWidgetTooltip.qml

@@ -0,0 +1,110 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+StyledPopup {
+    id: root
+    property string formattedDate: Qt.locale().toString(DateTime.clock.date, "dddd, MMMM dd, yyyy")
+    property string formattedTime: DateTime.time
+    property string formattedUptime: DateTime.uptime
+    property string todosSection: getUpcomingTodos()
+
+    function getUpcomingTodos() {
+        const unfinishedTodos = Todo.list.filter(function (item) {
+            return !item.done;
+        });
+        if (unfinishedTodos.length === 0) {
+            return Translation.tr("No pending tasks");
+        }
+
+        // Limit to first 5 todos to keep popup manageable
+        const limitedTodos = unfinishedTodos.slice(0, 5);
+        let todoText = limitedTodos.map(function (item, index) {
+            return `${index + 1}. ${item.content}`;
+        }).join('\n');
+
+        if (unfinishedTodos.length > 5) {
+            todoText += `\n${Translation.tr("... and %1 more").arg(unfinishedTodos.length - 5)}`;
+        }
+
+        return todoText;
+    }
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.centerIn: parent
+        spacing: 4
+
+        // Date + Time row
+        Row {
+            spacing: 5
+
+            MaterialSymbol {
+                anchors.verticalCenter: parent.verticalCenter
+                fill: 0
+                font.weight: Font.Medium
+                text: "calendar_month"
+                iconSize: Appearance.font.pixelSize.large
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignLeft
+                color: Appearance.colors.colOnSurfaceVariant
+                text: `${root.formattedDate}`
+                font.weight: Font.Medium
+            }
+        }
+
+        // Uptime row
+        RowLayout {
+            spacing: 5
+            Layout.fillWidth: true
+            MaterialSymbol {
+                text: "timelapse"
+                color: Appearance.colors.colOnSurfaceVariant
+                font.pixelSize: Appearance.font.pixelSize.large
+            }
+            StyledText {
+                text: Translation.tr("System uptime:")
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignRight
+                color: Appearance.colors.colOnSurfaceVariant
+                text: root.formattedUptime
+            }
+        }
+
+        // Tasks
+        Column {
+            spacing: 0
+            Layout.fillWidth: true
+
+            Row {
+                spacing: 4
+                MaterialSymbol {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "checklist"
+                    color: Appearance.colors.colOnSurfaceVariant
+                    font.pixelSize: Appearance.font.pixelSize.large
+                }
+                StyledText {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: Translation.tr("To Do:")
+                    color: Appearance.colors.colOnSurfaceVariant
+                }
+            }
+
+            StyledText {
+                horizontalAlignment: Text.AlignLeft
+                wrapMode: Text.Wrap
+                color: Appearance.colors.colOnSurfaceVariant
+                text: root.todosSection
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/HyprlandXkbIndicator.qml

@@ -0,0 +1,34 @@
+import QtQuick
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+Loader {
+    id: root
+    property bool vertical: false
+    property color color: Appearance.colors.colOnSurfaceVariant
+    active: HyprlandXkb.layoutCodes.length > 1
+    visible: active
+
+    function abbreviateLayoutCode(fullCode) {
+    return fullCode.split(':').map(layout => {
+            const baseLayout = layout.split('-')[0];
+            return baseLayout.slice(0, 4);
+        }).join('\n');
+    }
+
+    sourceComponent: Item {
+        implicitWidth: root.vertical ? null : layoutCodeText.implicitWidth
+        implicitHeight: root.vertical ? layoutCodeText.implicitHeight : null
+
+        StyledText {
+            id: layoutCodeText
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            text: abbreviateLayoutCode(HyprlandXkb.currentLayoutCode)
+            font.pixelSize: text.includes("\n") ? Appearance.font.pixelSize.smallie : Appearance.font.pixelSize.small
+            color: root.color
+            animateChange: true
+        }
+    }
+}

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

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

dots/.config/quickshell/ii/modules/bar/Media.qml

@@ -0,0 +1,89 @@
+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: Config.options.resources.updateInterval
+        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
+
+        ClippedFilledCircularProgress {
+            id: mediaCircProg
+            Layout.alignment: Qt.AlignVCenter
+            lineWidth: Appearance.rounding.unsharpen
+            value: activePlayer?.position / activePlayer?.length
+            implicitSize: 20
+            colPrimary: Appearance.colors.colOnSecondaryContainer
+            enableAnimation: false
+
+            Item {
+                anchors.centerIn: parent
+                width: mediaCircProg.implicitSize
+                height: mediaCircProg.implicitSize
+                
+                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 : ''}`
+        }
+
+    }
+
+}

dots/.config/quickshell/ii/modules/bar/NotificationUnreadCount.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+MaterialSymbol {
+    id: root
+    readonly property bool showUnreadCount: Config.options.bar.indicators.notifications.showUnreadCount
+    text: Notifications.silent ? "notifications_paused" : "notifications"
+    iconSize: Appearance.font.pixelSize.larger
+    color: rightSidebarButton.colText
+
+    Rectangle {
+        id: notifPing
+        visible: !Notifications.silent && Notifications.unread > 0
+        anchors {
+            right: parent.right
+            top: parent.top
+            rightMargin: root.showUnreadCount ? 0 : 1
+            topMargin: root.showUnreadCount ? 0 : 3
+        }
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colOnLayer0
+        z: 1
+
+        implicitHeight: root.showUnreadCount ? Math.max(notificationCounterText.implicitWidth, notificationCounterText.implicitHeight) : 8
+        implicitWidth: implicitHeight
+
+        StyledText {
+            id: notificationCounterText
+            visible: root.showUnreadCount
+            anchors.centerIn: parent
+            font.pixelSize: Appearance.font.pixelSize.smallest
+            color: Appearance.colors.colLayer0
+            text: Notifications.unread
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/Resource.qml

@@ -0,0 +1,92 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    required property string iconName
+    required property double percentage
+    property int warningThreshold: 100
+    property bool shown: true
+    clip: true
+    visible: width > 0 && height > 0
+    implicitWidth: resourceRowLayout.x < 0 ? 0 : resourceRowLayout.implicitWidth
+    implicitHeight: Appearance.sizes.barHeight
+    property bool warning: percentage * 100 >= warningThreshold
+
+    RowLayout {
+        id: resourceRowLayout
+        spacing: 2
+        x: shown ? 0 : -resourceRowLayout.width
+        anchors {
+            verticalCenter: parent.verticalCenter
+        }
+
+        ClippedFilledCircularProgress {
+            id: resourceCircProg
+            Layout.alignment: Qt.AlignVCenter
+            lineWidth: Appearance.rounding.unsharpen
+            value: percentage
+            implicitSize: 20
+            colPrimary: root.warning ? Appearance.colors.colError : Appearance.colors.colOnSecondaryContainer
+            accountForLightBleeding: !root.warning
+            enableAnimation: false
+
+            Item {
+                anchors.centerIn: parent
+                width: resourceCircProg.implicitSize
+                height: resourceCircProg.implicitSize
+                
+                MaterialSymbol {
+                    anchors.centerIn: parent
+                    font.weight: Font.DemiBold
+                    fill: 1
+                    text: iconName
+                    iconSize: Appearance.font.pixelSize.normal
+                    color: Appearance.m3colors.m3onSecondaryContainer
+                }
+            }
+        }
+
+        Item {
+            Layout.alignment: Qt.AlignVCenter
+            implicitWidth: fullPercentageTextMetrics.width
+            implicitHeight: percentageText.implicitHeight
+
+            TextMetrics {
+                id: fullPercentageTextMetrics
+                text: "100"
+                font.pixelSize: Appearance.font.pixelSize.small
+            }
+
+            StyledText {
+                id: percentageText
+                anchors.centerIn: parent
+                color: Appearance.colors.colOnLayer1
+                font.pixelSize: Appearance.font.pixelSize.small
+                text: `${Math.round(percentage * 100).toString()}`
+            }
+        }
+
+        Behavior on x {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+        enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
+    }
+
+    Behavior on implicitWidth {
+        NumberAnimation {
+            duration: Appearance.animation.elementMove.duration
+            easing.type: Appearance.animation.elementMove.type
+            easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/Resources.qml

@@ -0,0 +1,53 @@
+import qs.modules.common
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+MouseArea {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    property bool alwaysShowAllResources: false
+    implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
+    implicitHeight: Appearance.sizes.barHeight
+    hoverEnabled: true
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 0
+        anchors.fill: parent
+        anchors.leftMargin: 4
+        anchors.rightMargin: 4
+
+        Resource {
+            iconName: "memory"
+            percentage: ResourceUsage.memoryUsedPercentage
+            warningThreshold: Config.options.bar.resources.memoryWarningThreshold
+        }
+
+        Resource {
+            iconName: "swap_horiz"
+            percentage: ResourceUsage.swapUsedPercentage
+            shown: (Config.options.bar.resources.alwaysShowSwap && percentage > 0) || 
+                (MprisController.activePlayer?.trackTitle == null) ||
+                root.alwaysShowAllResources
+            Layout.leftMargin: shown ? 6 : 0
+            warningThreshold: Config.options.bar.resources.swapWarningThreshold
+        }
+
+        Resource {
+            iconName: "planner_review"
+            percentage: ResourceUsage.cpuUsage
+            shown: Config.options.bar.resources.alwaysShowCpu || 
+                !(MprisController.activePlayer?.trackTitle?.length > 0) ||
+                root.alwaysShowAllResources
+            Layout.leftMargin: shown ? 6 : 0
+            warningThreshold: Config.options.bar.resources.cpuWarningThreshold
+        }
+
+    }
+
+    ResourcesPopup {
+        hoverTarget: root
+    }
+}

dots/.config/quickshell/ii/modules/bar/ResourcesPopup.qml

@@ -0,0 +1,145 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import QtQuick
+import QtQuick.Layouts
+
+StyledPopup {
+    id: root
+
+    // Helper function to format KB to GB
+    function formatKB(kb) {
+        return (kb / (1024 * 1024)).toFixed(1) + " GB";
+    }
+
+    component ResourceItem: RowLayout {
+        id: resourceItem
+        required property string icon
+        required property string label
+        required property string value
+        spacing: 4
+
+        MaterialSymbol {
+            text: resourceItem.icon
+            color: Appearance.colors.colOnSurfaceVariant
+            iconSize: Appearance.font.pixelSize.large
+        }
+        StyledText {
+            text: resourceItem.label
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+        StyledText {
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignRight
+            visible: resourceItem.value !== ""
+            color: Appearance.colors.colOnSurfaceVariant
+            text: resourceItem.value
+        }
+    }
+
+    component ResourceHeaderItem: Row {
+        id: headerItem
+        required property var icon
+        required property var label
+        spacing: 5
+
+        MaterialSymbol {
+            anchors.verticalCenter: parent.verticalCenter
+            fill: 0
+            font.weight: Font.Medium
+            text: headerItem.icon
+            iconSize: Appearance.font.pixelSize.large
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+
+        StyledText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: headerItem.label
+            font {
+                weight: Font.Medium
+                pixelSize: Appearance.font.pixelSize.normal
+            }
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+    }
+
+    Row {
+        anchors.centerIn: parent
+        spacing: 12
+
+        Column {
+            anchors.top: parent.top
+            spacing: 8
+
+            ResourceHeaderItem {
+                icon: "memory"
+                label: "RAM"
+            }
+            Column {
+                spacing: 4
+                ResourceItem {
+                    icon: "clock_loader_60"
+                    label: Translation.tr("Used:")
+                    value: formatKB(ResourceUsage.memoryUsed)
+                }
+                ResourceItem {
+                    icon: "check_circle"
+                    label: Translation.tr("Free:")
+                    value: formatKB(ResourceUsage.memoryFree)
+                }
+                ResourceItem {
+                    icon: "empty_dashboard"
+                    label: Translation.tr("Total:")
+                    value: formatKB(ResourceUsage.memoryTotal)
+                }
+            }
+        }
+
+        Column {
+            visible: ResourceUsage.swapTotal > 0
+            anchors.top: parent.top
+            spacing: 8
+
+            ResourceHeaderItem {
+                icon: "swap_horiz"
+                label: "Swap"
+            }
+            Column {
+                spacing: 4
+                ResourceItem {
+                    icon: "clock_loader_60"
+                    label: Translation.tr("Used:")
+                    value: formatKB(ResourceUsage.swapUsed)
+                }
+                ResourceItem {
+                    icon: "check_circle"
+                    label: Translation.tr("Free:")
+                    value: formatKB(ResourceUsage.swapFree)
+                }
+                ResourceItem {
+                    icon: "empty_dashboard"
+                    label: Translation.tr("Total:")
+                    value: formatKB(ResourceUsage.swapTotal)
+                }
+            }
+        }
+
+        Column {
+            anchors.top: parent.top
+            spacing: 8
+
+            ResourceHeaderItem {
+                icon: "planner_review"
+                label: "CPU"
+            }
+            Column {
+                spacing: 4
+                ResourceItem {
+                    icon: "bolt"
+                    label: Translation.tr("Load:")
+                    value: (ResourceUsage.cpuUsage > 0.8 ? Translation.tr("High") : ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low")) + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,60 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Revealer { // Scroll hint
+    id: root
+    property string icon
+    property string side: "left"
+    property string tooltipText: ""
+    
+    MouseArea {
+        id: mouseArea
+        anchors.right: root.side === "left" ? parent.right : undefined
+        anchors.left: root.side === "right" ? parent.left : undefined
+        implicitWidth: contentColumn.implicitWidth
+        implicitHeight: contentColumn.implicitHeight
+        property bool hovered: false
+
+        hoverEnabled: true
+        onEntered: hovered = true
+        onExited: hovered = false
+        acceptedButtons: Qt.NoButton
+
+        property bool showHintTimedOut: false
+        onHoveredChanged: showHintTimedOut = false
+        Timer {
+            running: mouseArea.hovered
+            interval: 500
+            onTriggered: mouseArea.showHintTimedOut = true
+        }
+
+        PopupToolTip {
+            extraVisibleCondition: (tooltipText.length > 0 && mouseArea.showHintTimedOut)
+            text: tooltipText
+        }
+
+        Column {
+            id: contentColumn
+            anchors {
+                fill: parent
+            }
+            spacing: -5
+            MaterialSymbol {
+                text: "keyboard_arrow_up"
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+            MaterialSymbol {
+                text: root.icon
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+            MaterialSymbol {
+                text: "keyboard_arrow_down"
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/StyledPopup.qml

@@ -0,0 +1,81 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Wayland
+
+LazyLoader {
+    id: root
+
+    property Item hoverTarget
+    default property Item contentItem
+    property real popupBackgroundMargin: 0
+
+    active: hoverTarget && hoverTarget.containsMouse
+
+    component: PanelWindow {
+        id: popupWindow
+        color: "transparent"
+
+        anchors.left: !Config.options.bar.vertical || (Config.options.bar.vertical && !Config.options.bar.bottom)
+        anchors.right: Config.options.bar.vertical && Config.options.bar.bottom
+        anchors.top: Config.options.bar.vertical || (!Config.options.bar.vertical && !Config.options.bar.bottom)
+        anchors.bottom: !Config.options.bar.vertical && Config.options.bar.bottom
+
+        implicitWidth: popupBackground.implicitWidth + Appearance.sizes.elevationMargin * 2 + root.popupBackgroundMargin
+        implicitHeight: popupBackground.implicitHeight + Appearance.sizes.elevationMargin * 2 + root.popupBackgroundMargin
+
+        mask: Region {
+            item: popupBackground
+        }
+
+        exclusionMode: ExclusionMode.Ignore
+        exclusiveZone: 0
+        margins {
+            left: {
+                if (!Config.options.bar.vertical) return root.QsWindow?.mapFromItem(
+                    root.hoverTarget, 
+                    (root.hoverTarget.width - popupBackground.implicitWidth) / 2, 0
+                ).x;
+                return Appearance.sizes.verticalBarWidth
+            }
+            top: {
+                if (!Config.options.bar.vertical) return Appearance.sizes.barHeight;
+                return root.QsWindow?.mapFromItem(
+                    root.hoverTarget, 
+                    (root.hoverTarget.height - popupBackground.implicitHeight) / 2, 0
+                ).y;
+            }
+            right: Appearance.sizes.verticalBarWidth
+            bottom: Appearance.sizes.barHeight
+        }
+        WlrLayershell.namespace: "quickshell:popup"
+        WlrLayershell.layer: WlrLayer.Overlay
+
+        StyledRectangularShadow {
+            target: popupBackground
+        }
+
+        Rectangle {
+            id: popupBackground
+            readonly property real margin: 10
+            anchors {
+                fill: parent
+                leftMargin: Appearance.sizes.elevationMargin + root.popupBackgroundMargin * (!popupWindow.anchors.left)
+                rightMargin: Appearance.sizes.elevationMargin + root.popupBackgroundMargin * (!popupWindow.anchors.right)
+                topMargin: Appearance.sizes.elevationMargin + root.popupBackgroundMargin * (!popupWindow.anchors.top)
+                bottomMargin: Appearance.sizes.elevationMargin + root.popupBackgroundMargin * (!popupWindow.anchors.bottom)
+            }
+            implicitWidth: root.contentItem.implicitWidth + margin * 2
+            implicitHeight: root.contentItem.implicitHeight + margin * 2
+            color: ColorUtils.applyAlpha(Appearance.colors.colSurfaceContainer, 1 - Appearance.backgroundTransparency)
+            radius: Appearance.rounding.small
+            children: [root.contentItem]
+
+            border.width: 1
+            border.color: Appearance.colors.colLayer0Border
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/SysTray.qml

@@ -0,0 +1,155 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.SystemTray
+
+Item {
+    id: root
+    implicitWidth: gridLayout.implicitWidth
+    implicitHeight: gridLayout.implicitHeight
+    property bool vertical: false
+    property bool invertSide: false
+    property bool trayOverflowOpen: false
+    property bool showSeparator: true
+    property bool showOverflowMenu: true
+    property var activeMenu: null
+
+    property list<var> itemsInUserList: SystemTray.items.values.filter(i => (Config.options.bar.tray.pinnedItems.includes(i.id) && i.status !== Status.Passive))
+    property list<var> itemsNotInUserList: SystemTray.items.values.filter(i => (!Config.options.bar.tray.pinnedItems.includes(i.id) && i.status !== Status.Passive))
+    property bool invertPins: Config.options.bar.tray.invertPinnedItems
+    property list<var> pinnedItems: invertPins ? itemsNotInUserList : itemsInUserList
+    property list<var> unpinnedItems: invertPins ? itemsInUserList : itemsNotInUserList
+    onUnpinnedItemsChanged: {
+        if (unpinnedItems.length == 0) root.closeOverflowMenu();
+    }
+
+    function grabFocus() {
+        focusGrab.active = true;
+    }
+
+    function setExtraWindowAndGrabFocus(window) {
+        root.activeMenu = window;
+        root.grabFocus();
+    }
+
+    function releaseFocus() {
+        focusGrab.active = false;
+    }
+
+    function closeOverflowMenu() {
+        focusGrab.active = false;
+    }
+
+    onTrayOverflowOpenChanged: {
+        if (root.trayOverflowOpen) {
+            root.grabFocus();
+        }
+    }
+
+    HyprlandFocusGrab {
+        id: focusGrab
+        active: false
+        windows: [trayOverflowLayout.QsWindow?.window, root.activeMenu]
+        onCleared: {
+            root.trayOverflowOpen = false;
+            if (root.activeMenu) {
+                root.activeMenu.close();
+                root.activeMenu = null;
+            }
+        }
+    }
+
+    GridLayout {
+        id: gridLayout
+        columns: root.vertical ? 1 : -1
+        anchors.fill: parent
+        rowSpacing: 8
+        columnSpacing: 15
+
+        RippleButton {
+            id: trayOverflowButton
+            visible: root.showOverflowMenu && root.unpinnedItems.length > 0
+            toggled: root.trayOverflowOpen
+            property bool containsMouse: hovered
+
+            downAction: () => root.trayOverflowOpen = !root.trayOverflowOpen
+
+            Layout.fillHeight: !root.vertical
+            Layout.fillWidth: root.vertical
+            background.implicitWidth: 24
+            background.implicitHeight: 24
+            background.anchors.centerIn: this
+            colBackgroundToggled: Appearance.colors.colSecondaryContainer
+            colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
+            colRippleToggled: Appearance.colors.colSecondaryContainerActive
+
+            contentItem: MaterialSymbol {
+                anchors.centerIn: parent
+                iconSize: Appearance.font.pixelSize.larger
+                text: "expand_more"
+                horizontalAlignment: Text.AlignHCenter
+                color: root.trayOverflowOpen ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnLayer2
+                rotation: (root.trayOverflowOpen ? 180 : 0) - (90 * root.vertical) + (180 * root.invertSide)
+                Behavior on rotation {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+            }
+
+            StyledPopup {
+                id: overflowPopup
+                hoverTarget: trayOverflowButton
+                active: root.trayOverflowOpen && root.unpinnedItems.length > 0
+                popupBackgroundMargin: 300 // This should be plenty... makes sure tooltips don't get cutoff (easily)
+
+                GridLayout {
+                    id: trayOverflowLayout
+                    anchors.centerIn: parent
+                    columns: Math.ceil(Math.sqrt(root.unpinnedItems.length))
+                    columnSpacing: 10
+                    rowSpacing: 10
+
+                    Repeater {
+                        model: root.unpinnedItems
+
+                        delegate: SysTrayItem {
+                            required property SystemTrayItem modelData
+                            item: modelData
+                            Layout.fillHeight: !root.vertical
+                            Layout.fillWidth: root.vertical
+                            onMenuClosed: root.releaseFocus();
+                            onMenuOpened: (qsWindow) => root.setExtraWindowAndGrabFocus(qsWindow);
+                        }
+                    }
+                }
+            }
+        }
+
+        Repeater {
+            model: ScriptModel {
+                values: root.pinnedItems
+            }
+
+            delegate: SysTrayItem {
+                required property SystemTrayItem modelData
+                item: modelData
+                Layout.fillHeight: !root.vertical
+                Layout.fillWidth: root.vertical
+                onMenuClosed: root.releaseFocus();
+                onMenuOpened: (qsWindow) => {
+                    root.setExtraWindowAndGrabFocus(qsWindow);
+                }
+            }
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+            font.pixelSize: Appearance.font.pixelSize.larger
+            color: Appearance.colors.colSubtext
+            text: "•"
+            visible: root.showSeparator && SystemTray.items.values.length > 0
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/SysTrayItem.qml

@@ -0,0 +1,101 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+MouseArea {
+    id: root
+    required property SystemTrayItem item
+    property bool targetMenuOpen: false
+
+    signal menuOpened(qsWindow: var)
+    signal menuClosed()
+
+    hoverEnabled: true
+    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    implicitWidth: 20
+    implicitHeight: 20
+    onPressed: (event) => {
+        switch (event.button) {
+        case Qt.LeftButton:
+            item.activate();
+            break;
+        case Qt.RightButton:
+            if (item.hasMenu) menu.open();
+            break;
+        }
+        event.accepted = true;
+    }
+    onEntered: {
+        tooltip.text = item.tooltipTitle.length > 0 ? item.tooltipTitle
+                : (item.title.length > 0 ? item.title : item.id);
+        if (item.tooltipDescription.length > 0) tooltip.text += " • " + item.tooltipDescription;
+        if (Config.options.bar.tray.showItemId) tooltip.text += "\n[" + item.id + "]";
+    }
+
+    Loader {
+        id: menu
+        function open() {
+            menu.active = true;
+        }
+        active: false
+        sourceComponent: SysTrayMenu {
+            Component.onCompleted: this.open();
+            trayItemMenuHandle: root.item.menu
+            anchor {
+                window: root.QsWindow.window
+                rect.x: root.x + (Config.options.bar.vertical ? 0 : QsWindow.window?.width)
+                rect.y: root.y + (Config.options.bar.vertical ? QsWindow.window?.height : 0)
+                rect.height: root.height
+                rect.width: root.width
+                edges: Config.options.bar.bottom ? (Edges.Top | Edges.Left) : (Edges.Bottom | Edges.Right)
+                gravity: Config.options.bar.bottom ? (Edges.Top | Edges.Left) : (Edges.Bottom | Edges.Right)
+            }
+            onMenuOpened: (window) => root.menuOpened(window);
+            onMenuClosed: {
+                root.menuClosed();
+                menu.active = false;
+            }
+        }
+    }
+
+    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)
+            }
+        }
+    }
+
+    PopupToolTip {
+        id: tooltip
+        extraVisibleCondition: root.containsMouse
+        alternativeVisibleCondition: extraVisibleCondition
+        anchorEdges: (!Config.options.bar.bottom && !Config.options.bar.vertical) ? Edges.Bottom : Edges.Top
+    }
+
+}

dots/.config/quickshell/ii/modules/bar/SysTrayMenu.qml

@@ -0,0 +1,217 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+
+PopupWindow {
+    id: root
+    required property QsMenuHandle trayItemMenuHandle
+    property real popupBackgroundMargin: 0
+
+    signal menuClosed
+    signal menuOpened(qsWindow: var) // Correct type is QsWindow, but QML does not like that
+
+    color: "transparent"
+    property real padding: Appearance.sizes.elevationMargin
+
+    implicitHeight: {
+        let result = 0;
+        for (let child of stackView.children) {
+            result = Math.max(child.implicitHeight, result);
+        }
+        return result + popupBackground.padding * 2 + root.padding * 2;
+    }
+    implicitWidth: {
+        let result = 0;
+        for (let child of stackView.children) {
+            result = Math.max(child.implicitWidth, result);
+        }
+        return result + popupBackground.padding * 2 + root.padding * 2;
+    }
+
+    function open() {
+        root.visible = true;
+        root.menuOpened(root);
+    }
+
+    function close() {
+        root.visible = false;
+        while (stackView.depth > 1)
+            stackView.pop();
+        root.menuClosed();
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.BackButton | Qt.RightButton
+        onPressed: event => {
+            if ((event.button === Qt.BackButton || event.button === Qt.RightButton) && stackView.depth > 1)
+                stackView.pop();
+        }
+
+        StyledRectangularShadow {
+            target: popupBackground
+            opacity: popupBackground.opacity
+        }
+
+        Rectangle {
+            id: popupBackground
+            readonly property real padding: 4
+            anchors {
+                left: parent.left
+                right: parent.right
+                verticalCenter: Config.options.bar.vertical ? parent.verticalCenter : undefined
+                top: Config.options.bar.vertical ? undefined : Config.options.bar.bottom ? undefined : parent.top
+                bottom: Config.options.bar.vertical ? undefined : Config.options.bar.bottom ? parent.bottom : undefined
+                margins: root.padding
+            }
+
+            color: Appearance.colors.colLayer0
+            radius: Appearance.rounding.windowRounding
+            border.width: 1
+            border.color: Appearance.colors.colLayer0Border
+            clip: true
+
+            opacity: 0
+            Component.onCompleted: opacity = 1
+            implicitWidth: stackView.implicitWidth + popupBackground.padding * 2
+            implicitHeight: stackView.implicitHeight + popupBackground.padding * 2
+
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+            Behavior on implicitHeight {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+            Behavior on implicitWidth {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+
+            StackView {
+                id: stackView
+                anchors {
+                    fill: parent
+                    margins: popupBackground.padding
+                }
+                pushEnter: NoAnim {}
+                pushExit: NoAnim {}
+                popEnter: NoAnim {}
+                popExit: NoAnim {}
+
+                implicitWidth: currentItem.implicitWidth
+                implicitHeight: currentItem.implicitHeight
+
+                initialItem: SubMenu {
+                    handle: root.trayItemMenuHandle
+                }
+            }
+        }
+    }
+
+    component NoAnim: Transition {
+        NumberAnimation {
+            duration: 0
+        }
+    }
+
+    component SubMenu: ColumnLayout {
+        id: submenu
+        required property QsMenuHandle handle
+        property bool isSubMenu: false
+        property bool shown: false
+        opacity: shown ? 1 : 0
+
+        Behavior on opacity {
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+
+        Component.onCompleted: shown = true
+        StackView.onActivating: shown = true
+        StackView.onDeactivating: shown = false
+        StackView.onRemoved: destroy()
+
+        QsMenuOpener {
+            id: menuOpener
+            menu: submenu.handle
+        }
+
+        spacing: 0
+
+        Loader {
+            Layout.fillWidth: true
+            visible: submenu.isSubMenu
+            active: visible
+            sourceComponent: RippleButton {
+                id: backButton
+                buttonRadius: popupBackground.radius - popupBackground.padding
+                horizontalPadding: 12
+                implicitWidth: contentItem.implicitWidth + horizontalPadding * 2
+                implicitHeight: 36
+
+                downAction: () => stackView.pop()
+
+                contentItem: RowLayout {
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                        right: parent.right
+                        leftMargin: backButton.horizontalPadding
+                        rightMargin: backButton.horizontalPadding
+                    }
+                    spacing: 8
+                    MaterialSymbol {
+                        iconSize: 20
+                        text: "chevron_left"
+                    }
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: Translation.tr("Back")
+                    }
+                }
+            }
+        }
+
+        Repeater {
+            id: menuEntriesRepeater
+            property bool iconColumnNeeded: {
+                for (let i = 0; i < menuOpener.children.values.length; i++) {
+                    if (menuOpener.children.values[i].icon.length > 0)
+                        return true;
+                }
+                return false;
+            }
+            property bool specialInteractionColumnNeeded: {
+                for (let i = 0; i < menuOpener.children.values.length; i++) {
+                    if (menuOpener.children.values[i].buttonType !== QsMenuButtonType.None)
+                        return true;
+                }
+                return false;
+            }
+            model: menuOpener.children
+            delegate: SysTrayMenuEntry {
+                required property QsMenuEntry modelData
+                forceIconColumn: menuEntriesRepeater.iconColumnNeeded
+                forceSpecialInteractionColumn: menuEntriesRepeater.specialInteractionColumnNeeded
+                menuEntry: modelData
+
+                buttonRadius: popupBackground.radius - popupBackground.padding
+
+                onDismiss: root.close()
+                onOpenSubmenu: handle => {
+                    stackView.push(subMenuComponent.createObject(null, {
+                        handle: handle,
+                        isSubMenu: true
+                    }));
+                }
+            }
+        }
+    }
+
+    Component {
+        id: subMenuComponent
+        SubMenu {}
+    }
+}

dots/.config/quickshell/ii/modules/bar/SysTrayMenuEntry.qml

@@ -0,0 +1,126 @@
+pragma ComponentBehavior: Bound
+
+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.Widgets
+
+RippleButton {
+    id: root
+    required property QsMenuEntry menuEntry
+    property bool forceIconColumn: false
+    property bool forceSpecialInteractionColumn: false
+    readonly property bool hasIcon: menuEntry.icon.length > 0
+    readonly property bool hasSpecialInteraction: menuEntry.buttonType !== QsMenuButtonType.None
+
+    signal dismiss()
+    signal openSubmenu(handle: QsMenuHandle)
+
+    colBackground: menuEntry.isSeparator ? Appearance.m3colors.m3outlineVariant : ColorUtils.transparentize(Appearance.colors.colLayer0)
+    enabled: !menuEntry.isSeparator
+    opacity: 1
+
+    horizontalPadding: 12
+    implicitWidth: contentItem.implicitWidth + horizontalPadding * 2
+    implicitHeight: menuEntry.isSeparator ? 1 : 36
+    Layout.topMargin: menuEntry.isSeparator ? 4 : 0
+    Layout.bottomMargin: menuEntry.isSeparator ? 4 : 0
+    Layout.fillWidth: true
+
+    Component.onCompleted: {
+        if (menuEntry.isSeparator) {
+            root.buttonColor = root.colBackground;
+        }
+    }
+
+    releaseAction: () => { 
+        if (menuEntry.hasChildren) {
+            root.openSubmenu(root.menuEntry);
+            return;
+        }
+        menuEntry.triggered();
+        root.dismiss(); 
+    }
+    altAction: (event) => { // Not hog right-click
+        event.accepted = false;
+    }
+
+    contentItem: RowLayout {
+        id: contentItem
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            right: parent.right
+            leftMargin: root.horizontalPadding
+            rightMargin: root.horizontalPadding
+        }
+        spacing: 8
+        visible: !root.menuEntry.isSeparator
+
+        // Interaction: checkbox or radio button
+        Item {
+            visible: root.hasSpecialInteraction || root.forceSpecialInteractionColumn
+            implicitWidth: 20
+            implicitHeight: 20
+
+            Loader {
+                anchors.fill: parent
+                active: root.menuEntry.buttonType === QsMenuButtonType.RadioButton
+
+                sourceComponent: StyledRadioButton {
+                    enabled: false
+                    padding: 0
+                    checked: root.menuEntry.checkState === Qt.Checked
+                }
+            }
+
+            Loader {
+                anchors.fill: parent
+                active: root.menuEntry.buttonType === QsMenuButtonType.CheckBox && root.menuEntry.checkState !== Qt.Unchecked
+
+                sourceComponent: MaterialSymbol {
+                    text: root.menuEntry.checkState === Qt.PartiallyChecked ? "check_indeterminate_small" : "check"
+                    iconSize: 20
+                }
+            }
+        }
+
+        // Button icon
+        Item {
+            visible: root.hasIcon || root.forceIconColumn
+            implicitWidth: 20
+            implicitHeight: 20
+
+            Loader {
+                anchors.centerIn: parent
+                active: root.menuEntry.icon.length > 0
+                sourceComponent: IconImage {
+                    asynchronous: true
+                    source: root.menuEntry.icon
+                    implicitSize: 20
+                    mipmap: true
+                }
+            }
+        }
+
+        StyledText {
+            id: label
+            text: root.menuEntry.text
+            font.pixelSize: Appearance.font.pixelSize.smallie
+            Layout.fillWidth: true
+        }
+
+        Loader {
+            active: root.menuEntry.hasChildren
+
+            sourceComponent: MaterialSymbol {
+                text: "chevron_right"
+                iconSize: 20
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/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 "energy_savings_leaf"
+                        case PowerProfile.Balanced: return "settings_slow_motion"
+                        case PowerProfile.Performance: return "local_fire_department"
+                    }
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnLayer2
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/bar/Workspaces.qml

@@ -0,0 +1,330 @@
+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 Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+    property bool vertical: false
+    property bool borderless: Config.options.bar.borderless
+    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.QsWindow.window?.screen)
+    readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
+    
+    readonly property int workspacesShown: Config.options.bar.workspaces.shown
+    readonly property int workspaceGroup: Math.floor((monitor?.activeWorkspace?.id - 1) / root.workspacesShown)
+    property list<bool> workspaceOccupied: []
+    property int widgetPadding: 4
+    property int workspaceButtonWidth: 26
+    property real activeWorkspaceMargin: 2
+    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) % root.workspacesShown
+
+    property bool showNumbers: false
+    Timer {
+        id: showNumbersTimer
+        interval: (Config?.options.bar.autoHide.showWhenPressingSuper.delay ?? 100)
+        repeat: false
+        onTriggered: {
+            root.showNumbers = true
+        }
+    }
+    Connections {
+        target: GlobalStates
+        function onSuperDownChanged() {
+            if (!Config?.options.bar.autoHide.showWhenPressingSuper.enable) return;
+            if (GlobalStates.superDown) showNumbersTimer.restart();
+            else {
+                showNumbersTimer.stop();
+                root.showNumbers = false;
+            }
+        }
+        function onSuperReleaseMightTriggerChanged() { 
+            showNumbersTimer.stop()
+        }
+    }
+
+    // Function to update workspaceOccupied
+    function updateWorkspaceOccupied() {
+        workspaceOccupied = Array.from({ length: root.workspacesShown }, (_, i) => {
+            return Hyprland.workspaces.values.some(ws => ws.id === workspaceGroup * root.workspacesShown + i + 1);
+        })
+    }
+
+    // Occupied workspace updates
+    Component.onCompleted: updateWorkspaceOccupied()
+    Connections {
+        target: Hyprland.workspaces
+        function onValuesChanged() {
+            updateWorkspaceOccupied();
+        }
+    }
+    Connections {
+        target: Hyprland
+        function onFocusedWorkspaceChanged() {
+            updateWorkspaceOccupied();
+        }
+    }
+    onWorkspaceGroupChanged: {
+        updateWorkspaceOccupied();
+    }
+
+    implicitWidth: root.vertical ? Appearance.sizes.verticalBarWidth : (root.workspaceButtonWidth * root.workspacesShown)
+    implicitHeight: root.vertical ? (root.workspaceButtonWidth * root.workspacesShown) : 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
+    Grid {
+        z: 1
+        anchors.centerIn: parent
+
+        rowSpacing: 0
+        columnSpacing: 0
+        columns: root.vertical ? 1 : root.workspacesShown
+        rows: root.vertical ? root.workspacesShown : 1
+
+        Repeater {
+            model: root.workspacesShown
+
+            Rectangle {
+                z: 1
+                implicitWidth: workspaceButtonWidth
+                implicitHeight: workspaceButtonWidth
+                radius: (width / 2)
+                property var previousOccupied: (workspaceOccupied[index-1] && !(!activeWindow?.activated && monitor?.activeWorkspace?.id === index))
+                property var rightOccupied: (workspaceOccupied[index+1] && !(!activeWindow?.activated && monitor?.activeWorkspace?.id === index+2))
+                property var radiusPrev: previousOccupied ? 0 : (width / 2)
+                property var radiusNext: rightOccupied ? 0 : (width / 2)
+
+                topLeftRadius: radiusPrev
+                bottomLeftRadius: root.vertical ? radiusNext : radiusPrev
+                topRightRadius: root.vertical ? radiusPrev : radiusNext
+                bottomRightRadius: radiusNext
+                
+                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 radiusPrev {
+                    animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                }
+
+                Behavior on radiusNext {
+                    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
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colPrimary
+
+        anchors {
+            verticalCenter: vertical ? undefined : parent.verticalCenter
+            horizontalCenter: vertical ? parent.horizontalCenter : undefined
+        }
+
+        // idx1 is the "leading" indicator position, idx2 is the "following" one
+        // The former animates faster than the latter, see the NumberAnimations below
+        property real idx1: workspaceIndexInGroup
+        property real idx2: workspaceIndexInGroup
+        property real indicatorPosition: Math.min(idx1, idx2) * workspaceButtonWidth + root.activeWorkspaceMargin
+        property real indicatorLength: Math.abs(idx1 - idx2) * workspaceButtonWidth + workspaceButtonWidth - root.activeWorkspaceMargin * 2
+        property real indicatorThickness: workspaceButtonWidth - root.activeWorkspaceMargin * 2
+
+        x: root.vertical ? null : indicatorPosition
+        implicitWidth: root.vertical ? indicatorThickness : indicatorLength
+        y: root.vertical ? indicatorPosition : null
+        implicitHeight: root.vertical ? indicatorLength : indicatorThickness
+
+        Behavior on idx1 {
+            NumberAnimation {
+                duration: 100
+                easing.type: Easing.OutSine
+            }
+        }
+        Behavior on idx2 {
+            NumberAnimation {
+                duration: 300
+                easing.type: Easing.OutSine
+            }
+        }
+    }
+
+    // Workspaces - numbers
+    Grid {
+        z: 3
+
+        columns: root.vertical ? 1 : root.workspacesShown
+        rows: root.vertical ? root.workspacesShown : 1
+        columnSpacing: 0
+        rowSpacing: 0
+
+        anchors.fill: parent
+
+        Repeater {
+            model: root.workspacesShown
+
+            Button {
+                id: button
+                property int workspaceValue: workspaceGroup * root.workspacesShown + index + 1
+                implicitHeight: vertical ? Appearance.sizes.verticalBarWidth : Appearance.sizes.barHeight
+                implicitWidth: vertical ? Appearance.sizes.verticalBarWidth : Appearance.sizes.verticalBarWidth
+                onPressed: Hyprland.dispatch(`workspace ${workspaceValue}`)
+                width: vertical ? undefined : workspaceButtonWidth
+                height: vertical ? workspaceButtonWidth : undefined
+
+                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: root.showNumbers
+                            || ((Config.options?.bar.workspaces.alwaysShowNumbers && (!Config.options?.bar.workspaces.showAppIcons || !workspaceButtonBackground.biggestWindow || root.showNumbers))
+                            || (root.showNumbers && !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)
+                            family: Config.options?.bar.workspaces.useNerdFont ? Appearance.font.family.iconNerd : Appearance.font.family.main
+                        }
+                        text: Config.options?.bar.workspaces.numberMap[button.workspaceValue - 1] || 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
+                            || root.showNumbers
+                            || (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 && !root.showNumbers && 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: (!root.showNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
+                                (workspaceButtonWidth - workspaceIconSize) / 2 : workspaceIconMarginShrinked
+                            anchors.rightMargin: (!root.showNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
+                                (workspaceButtonWidth - workspaceIconSize) / 2 : workspaceIconMarginShrinked
+
+                            source: workspaceButtonBackground.mainAppIconSource
+                            implicitSize: (!root.showNumbers && 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)
+                                }
+                            }
+                        }
+                    }
+                }
+                
+
+            }
+
+        }
+
+    }
+
+}

dots/.config/quickshell/ii/modules/bar/weather/WeatherBar.qml

@@ -0,0 +1,52 @@
+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 bool hovered: false
+    implicitWidth: rowLayout.implicitWidth + 10 * 2
+    implicitHeight: Appearance.sizes.barHeight
+
+    hoverEnabled: true
+
+    onPressed: {
+        Weather.getData();
+        Quickshell.execDetached(["notify-send", 
+            Translation.tr("Weather"), 
+            Translation.tr("Refreshing (manually triggered)")
+            , "-a", "Shell"
+        ])
+    }
+
+    RowLayout {
+        id: rowLayout
+        anchors.centerIn: parent
+
+        MaterialSymbol {
+            fill: 0
+            text: WeatherIcons.codeToName[Weather.data.wCode] ?? "cloud"
+            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
+        }
+    }
+
+    WeatherPopup {
+        id: weatherPopup
+        hoverTarget: root
+    }
+}

dots/.config/quickshell/ii/modules/bar/weather/WeatherCard.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Layouts
+
+import qs.modules.common
+import qs.modules.common.widgets
+
+Rectangle {
+    id: root
+    radius: Appearance.rounding.small
+    color: Appearance.colors.colSurfaceContainerHigh
+    implicitWidth: columnLayout.implicitWidth + 14 * 2
+    implicitHeight: columnLayout.implicitHeight + 14 * 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
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+            StyledText {
+                id: title
+                font.pixelSize: Appearance.font.pixelSize.smaller
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+        }
+        StyledText {
+            id: value
+            Layout.alignment: Qt.AlignHCenter
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnSurfaceVariant
+        }
+    }
+}

dots/.config/quickshell/ii/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"
+        })
+}

dots/.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml

@@ -0,0 +1,104 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+import QtQuick
+import QtQuick.Layouts
+import "../"
+
+StyledPopup {
+    id: root
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.centerIn: parent
+        implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
+        implicitHeight: gridLayout.implicitHeight
+        spacing: 5
+
+        // Header
+        ColumnLayout {
+            id: header
+            Layout.alignment: Qt.AlignHCenter
+            spacing: 2
+
+            RowLayout {
+                Layout.alignment: Qt.AlignHCenter
+                spacing: 6
+
+                MaterialSymbol {
+                    fill: 0
+                    font.weight: Font.Medium
+                    text: "location_on"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnSurfaceVariant
+                }
+
+                StyledText {
+                    text: Weather.data.city
+                    font {
+                        weight: Font.Medium
+                        pixelSize: Appearance.font.pixelSize.normal
+                    }
+                    color: Appearance.colors.colOnSurfaceVariant
+                }
+            }
+            StyledText {
+                id: temp
+                font.pixelSize: Appearance.font.pixelSize.smaller
+                color: Appearance.colors.colOnSurfaceVariant
+                text: Weather.data.temp + " • " + Translation.tr("Feels like %1").arg(Weather.data.tempFeelsLike)
+            }
+        }
+
+        // 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
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/cheatsheet/Cheatsheet.qml

@@ -0,0 +1,235 @@
+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;
+        }
+    }
+}

dots/.config/quickshell/ii/modules/cheatsheet/CheatsheetKeybinds.qml

@@ -0,0 +1,152 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    readonly property var keybinds: HyprlandKeybinds.keybinds
+    property real spacing: 20
+    property real titleSpacing: 7
+    property real padding: 4
+    implicitWidth: row.implicitWidth + padding * 2
+    implicitHeight: row.implicitHeight + padding * 2
+
+    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": "",
+    })
+
+    Row { // Keybind columns
+        id: row
+        spacing: root.spacing
+        
+        Repeater {
+            model: keybinds.children
+            
+            delegate: Column { // Keybind sections
+                spacing: root.spacing
+                required property var modelData
+                anchors.top: row.top
+
+                Repeater {
+                    model: modelData.children
+
+                    delegate: Item { // Section with real keybinds
+                        id: keybindSection
+                        required property var modelData
+                        implicitWidth: sectionColumn.implicitWidth
+                        implicitHeight: sectionColumn.implicitHeight
+
+                        Column {
+                            id: sectionColumn
+                            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: keybindSection.modelData.name
+                            }
+
+                            GridLayout {
+                                id: keybindGrid
+                                columns: 2
+                                columnSpacing: 4
+                                rowSpacing: 4
+
+                                Repeater {
+                                    model: {
+                                        var result = [];
+                                        for (var i = 0; i < keybindSection.modelData.keybinds.length; i++) {
+                                            const keybind = keybindSection.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
+                                            Row {
+                                                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
+                                                    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
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                }
+                            }
+                        }
+                    }
+
+                }
+            }
+            
+        }
+    }
+    
+}

dots/.config/quickshell/ii/modules/cheatsheet/CheatsheetPeriodicTable.qml

@@ -0,0 +1,62 @@
+import "periodic_table.js" as PTable
+import QtQuick
+
+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
+
+    Column {
+        id: mainLayout
+        spacing: root.spacing
+
+        Repeater { // Main table rows
+            model: root.elements
+            
+            delegate: Row { // 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: Row { // Table cells
+                id: seriesTableRow
+                spacing: root.spacing
+                required property var modelData
+                
+                Repeater {
+                    model: seriesTableRow.modelData
+                    delegate: ElementTile {
+                        required property var modelData
+                        element: modelData
+                    }
+
+                }
+            }
+            
+        }
+    }
+    
+}

dots/.config/quickshell/ii/modules/cheatsheet/ElementTile.qml

@@ -0,0 +1,78 @@
+import qs.modules.common
+import qs.modules.common.functions
+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: ColorUtils.transparentize(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.left: parent.left
+            color: Appearance.colors.colOnLayer2
+            text: root.element.number
+            font.pixelSize: Appearance.font.pixelSize.smallest
+        }
+    }
+
+    Rectangle {
+        anchors {
+            top: parent.top
+            right: parent.right
+            topMargin: 4
+            rightMargin: 4
+        }
+        color: ColorUtils.transparentize(Appearance.colors.colLayer2)
+        radius: Appearance.rounding.full
+        implicitWidth: Math.max(20, elementWeight.implicitWidth)
+        implicitHeight: Math.max(20, elementWeight.implicitHeight)
+        width: height
+
+        StyledText {
+            id: elementWeight
+            anchors.right: parent.right
+            color: Appearance.colors.colOnLayer2
+            text: root.element.weight
+            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
+    }
+}

dots/.config/quickshell/ii/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"
+}

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

@@ -0,0 +1,376 @@
+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
+
+    // Transparency. The quadratic functions were derived from analysis of hand-picked transparency values.
+    ColorQuantizer {
+        id: wallColorQuant
+        property string wallpaperPath: Config.options.background.wallpaperPath
+        property bool wallpaperIsVideo: wallpaperPath.endsWith(".mp4") || wallpaperPath.endsWith(".webm") || wallpaperPath.endsWith(".mkv") || wallpaperPath.endsWith(".avi") || wallpaperPath.endsWith(".mov")
+        source: Qt.resolvedUrl(wallpaperIsVideo ? Config.options.background.thumbnailPath : Config.options.background.wallpaperPath)
+        depth: 0 // 2^0 = 1 color
+        rescaleSize: 10
+    }
+    property real wallpaperVibrancy: (wallColorQuant.colors[0]?.hslSaturation + wallColorQuant.colors[0]?.hslLightness) / 2
+    property real autoBackgroundTransparency: { // y = 0.5768x^2 - 0.759x + 0.2896
+        let x = wallpaperVibrancy
+        let y = 0.5768 * (x * x) - 0.759 * (x) + 0.2896
+        return Math.max(0, Math.min(0.22, y))
+    }
+    property real autoContentTransparency: { // y = -10.1734x^2 + 3.4457x + 0.1872
+        let x = autoBackgroundTransparency
+        let y = -10.1734 * (x * x) + 3.4457 * (x) + 0.1872
+        return Math.max(0, Math.min(0.6, y))
+    }
+    property real backgroundTransparency: Config?.options.appearance.transparency.enable ? Config?.options.appearance.transparency.automatic ? autoBackgroundTransparency : Config?.options.appearance.transparency.backgroundTransparency : 0
+    property real contentTransparency: Config?.options.appearance.transparency.enable ? Config?.options.appearance.transparency.automatic ? autoContentTransparency : Config?.options.appearance.transparency.contentTransparency : 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.backgroundTransparency), 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(m3colors.m3surfaceContainerLow, root.contentTransparency);
+        property color colOnLayer1: m3colors.m3onSurfaceVariant;
+        property color colOnLayer1Inactive: ColorUtils.mix(colOnLayer1, colLayer1, 0.45);
+        property color colLayer2: ColorUtils.transparentize(m3colors.m3surfaceContainer, root.contentTransparency)
+        property color colOnLayer2: m3colors.m3onSurface;
+        property color colOnLayer2Disabled: ColorUtils.mix(colOnLayer2, m3colors.m3background, 0.4);
+        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 colLayer3: ColorUtils.transparentize(m3colors.m3surfaceContainerHigh, root.contentTransparency)
+        property color colOnLayer3: m3colors.m3onSurface;
+        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 colLayer4: ColorUtils.transparentize(m3colors.m3surfaceContainerHighest, root.contentTransparency)
+        property color colOnLayer4: m3colors.m3onSurface;
+        property color colLayer4Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer4, colOnLayer4, 0.90), root.contentTransparency)
+        property color colLayer4Active: ColorUtils.transparentize(ColorUtils.mix(colLayer4, colOnLayer4, 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, colors.colOnPrimaryContainer, 0.9)
+        property color colPrimaryContainerActive: ColorUtils.mix(colors.colPrimaryContainer, colors.colOnPrimaryContainer, 0.8)
+        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, m3colors.m3onSecondaryContainer, 0.54)
+        property color colTertiary: m3colors.m3tertiary
+        property color colTertiaryHover: ColorUtils.mix(m3colors.m3tertiary, colLayer1Hover, 0.85)
+        property color colTertiaryActive: ColorUtils.mix(m3colors.m3tertiary, colLayer1Active, 0.4)
+        property color colTertiaryContainer: m3colors.m3tertiaryContainer
+        property color colTertiaryContainerHover: ColorUtils.mix(m3colors.m3tertiaryContainer, m3colors.m3onTertiaryContainer, 0.90)
+        property color colTertiaryContainerActive: ColorUtils.mix(m3colors.m3tertiaryContainer, colLayer1Active, 0.54)
+        property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer
+        property color colSurfaceContainerLow: ColorUtils.transparentize(m3colors.m3surfaceContainerLow, root.contentTransparency)
+        property color colSurfaceContainer: ColorUtils.transparentize(m3colors.m3surfaceContainer, root.contentTransparency)
+        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 colOnSurface: m3colors.m3onSurface
+        property color colOnSurfaceVariant: m3colors.m3onSurfaceVariant
+        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 colOutline: m3colors.m3outline
+        property color colOutlineVariant: m3colors.m3outlineVariant
+        property color colError: m3colors.m3error
+        property color colErrorHover: ColorUtils.mix(m3colors.m3error, colLayer1Hover, 0.85)
+        property color colErrorActive: ColorUtils.mix(m3colors.m3error, colLayer1Active, 0.7)
+        property color colOnError: m3colors.m3onError
+        property color colErrorContainer: m3colors.m3errorContainer
+        property color colErrorContainerHover: ColorUtils.mix(m3colors.m3errorContainer, m3colors.m3onErrorContainer, 0.90)
+        property color colErrorContainerActive: ColorUtils.mix(m3colors.m3errorContainer, m3colors.m3onErrorContainer, 0.70)
+        property color colOnErrorContainer: m3colors.m3onErrorContainer
+    }
+
+    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: "JetBrains Mono 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 smallie: 13
+            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 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 elementResize: QtObject {
+            property int duration: 300
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: animationCurves.emphasized
+            property int velocity: 650
+            property Component numberAnimation: Component {
+                NumberAnimation {
+                    duration: root.animation.elementResize.duration
+                    easing.type: root.animation.elementResize.type
+                    easing.bezierCurve: root.animation.elementResize.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: 200
+            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 + root.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 elevationMargin: 10
+        property real fabShadowRadius: 5
+        property real fabHoveredShadowRadius: 7
+        property real hyprlandGapsOut: 5
+        property real mediaControlsWidth: 440
+        property real mediaControlsHeight: 160
+        property real notificationPopupWidth: 410
+        property real osdWidth: 180
+        property real searchWidthCollapsed: 260
+        property real searchWidth: 450
+        property real sidebarWidth: 460
+        property real sidebarWidthExtended: 750
+        property real baseVerticalBarWidth: 46
+        property real verticalBarWidth: Config.options.bar.cornerStyle === 1 ? 
+            (baseVerticalBarWidth + root.sizes.hyprlandGapsOut * 2) : baseVerticalBarWidth
+        property real wallpaperSelectorWidth: 1200
+        property real wallpaperSelectorHeight: 690
+        property real wallpaperSelectorItemMargins: 8
+        property real wallpaperSelectorItemPadding: 6
+    }
+
+    syntaxHighlightingTheme: root.m3colors.darkmode ? "Monokai" : "ayu Light"
+}

dots/.config/quickshell/ii/modules/common/Config.qml

@@ -0,0 +1,442 @@
+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
+    property int readWriteDelay: 50 // milliseconds
+
+    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;
+    }
+
+    Timer {
+        id: fileReloadTimer
+        interval: root.readWriteDelay
+        repeat: false
+        onTriggered: {
+            configFileView.reload()
+        }
+    }
+
+    Timer {
+        id: fileWriteTimer
+        interval: root.readWriteDelay
+        repeat: false
+        onTriggered: {
+            configFileView.writeAdapter()
+        }
+    }
+
+    FileView {
+        id: configFileView
+        path: root.filePath
+        watchChanges: true
+        onFileChanged: fileReloadTimer.restart()
+        onAdapterUpdated: fileWriteTimer.restart()
+        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 JsonObject transparency: JsonObject {
+                    property bool enable: false
+                    property bool automatic: true
+                    property real backgroundTransparency: 0.11
+                    property real contentTransparency: 0.57
+                }
+                property JsonObject wallpaperTheming: JsonObject {
+                    property bool enableAppsAndShell: true
+                    property bool enableQtApps: true
+                    property bool enableTerminal: true
+                    property JsonObject terminalGenerationProps: JsonObject {
+                        property real harmony: 0.6
+                        property real harmonizeThreshold: 100
+                        property real termFgBoost: 0.35
+                        property bool forceDarkMode: false
+                    }
+                }
+                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: false
+                    property real maxAllowedIncrease: 10
+                    property real maxAllowed: 99
+                }
+            }
+
+            property JsonObject apps: JsonObject {
+                property string bluetooth: "kcmshell6 kcm_bluetooth"
+                property string network: "kitty -1 fish -c nmtui"
+                property string networkEthernet: "kcmshell6 kcm_networkmanagement"
+                property string taskManager: "plasma-systemmonitor --page-name Processes"
+                property string terminal: "kitty -1" // This is only for shell actions
+            }
+
+            property JsonObject background: JsonObject {
+                property JsonObject clock: JsonObject {
+                    property bool fixedPosition: false
+                    property real x: -500
+                    property real y: -500
+                    property bool show: true
+                    property string style: "cookie" // Options: "cookie", "digital"
+                    property real scale: 1
+                    property JsonObject cookie: JsonObject {
+                        property bool aiStyling: false
+                        property int sides: 14
+                        property string dialNumberStyle: "full"   // Options: "dots" , "numbers", "full" , "none"
+                        property string hourHandStyle: "fill"     // Options: "classic", "fill", "hollow", "hide"
+                        property string minuteHandStyle: "medium" // Options "classic", "thin", "medium", "bold", "hide"
+                        property string secondHandStyle: "dot"    // Options: "dot", "line", "classic", "hide"
+                        property string dateStyle: "bubble"       // Options: "border", "rect", "bubble" , "hide"
+                        property bool timeIndicators: true
+                        property bool hourMarks: false
+                        property bool dateInClock: true
+                        property bool constantlyRotate: false
+                    }
+                    
+                }
+                property string wallpaperPath: ""
+                property string thumbnailPath: ""
+                property string quote: ""
+                property bool showQuote: false
+                property bool hideWhenFullscreen: true
+                property JsonObject parallax: JsonObject {
+                    property bool vertical: false
+                    property bool autoVertical: false
+                    property bool enableWorkspace: true
+                    property real workspaceZoom: 1.07 // Relative to your screen, not wallpaper size
+                    property bool enableSidebar: true
+                    property real clockFactor: 0.8
+                }
+            }
+
+            property JsonObject bar: JsonObject {
+                property JsonObject autoHide: JsonObject {
+                    property bool enable: false
+                    property int hoverRegionWidth: 2
+                    property bool pushWindows: false
+                    property JsonObject showWhenPressingSuper: JsonObject {
+                        property bool enable: true
+                        property int delay: 140
+                    }
+                }
+                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" or any icon name in ~/.config/quickshell/ii/assets/icons
+                property bool showBackground: true
+                property bool verbose: true
+                property bool vertical: false
+                property JsonObject resources: JsonObject {
+                    property bool alwaysShowSwap: true
+                    property bool alwaysShowCpu: true
+                    property int memoryWarningThreshold: 95
+                    property int swapWarningThreshold: 85
+                    property int cpuWarningThreshold: 90
+                }
+                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 bool showItemId: false
+                    property bool invertPinnedItems: true // Makes the below a whitelist for the tray and blacklist for the pinned area
+                    property list<string> pinnedItems: [ ]
+                }
+                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 list<string> numberMap: ["1", "2"] // Characters to show instead of numbers on workspace indicator
+                    property bool useNerdFont: false
+                }
+                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 indicators: JsonObject {
+                    property JsonObject notifications: JsonObject {
+                        property bool showUnreadCount: false
+                    }
+                }
+            }
+
+            property JsonObject battery: JsonObject {
+                property int low: 20
+                property int critical: 5
+                property bool automaticSuspend: true
+                property int suspend: 3
+            }
+
+            property JsonObject conflictKiller: JsonObject {
+                property bool autoKillNotificationDaemons: false
+                property bool autoKillTrays: false
+            }
+
+            property JsonObject crosshair: JsonObject {
+                // Valorant crosshair format. Use https://www.vcrdb.net/builder
+                property string code: "0;P;d;1;0l;10;0o;2;1b;0"
+            }
+
+            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 interactions: JsonObject {
+                property JsonObject scrolling: JsonObject {
+                    property bool fasterTouchpadScroll: false // Enable faster scrolling with touchpad
+                    property int mouseScrollDeltaThreshold: 120 // delta >= this then it gets detected as mouse scroll rather than touchpad
+                    property int mouseScrollFactor: 120
+                    property int touchpadScrollFactor: 450
+                }
+                property JsonObject deadPixelWorkaround: JsonObject { // Hyprland leaves out 1 pixel on the right for interactions
+                    property bool enable: false
+                }
+            }
+
+            property JsonObject language: JsonObject {
+                property string ui: "auto" // UI language. "auto" for system locale, or specific language code like "zh_CN", "en_US"
+                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 lock: JsonObject {
+                property bool useHyprlock: false
+                property bool launchOnStartup: false
+                property JsonObject blur: JsonObject {
+                    property bool enable: false
+                    property real radius: 100
+                    property real extraZoom: 1.1
+                }
+                property bool centerClock: true
+                property bool showLockedText: true
+                property JsonObject security: JsonObject {
+                    property bool unlockKeyring: true
+                    property bool requirePasswordToPower: false
+                }
+            }
+
+            property JsonObject media: JsonObject {
+                // Attempt to remove dupes (the aggregator playerctl one and browsers' native ones when there's plasma browser integration)
+                property bool filterDuplicatePlayers: true
+            }
+
+            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 notifications: JsonObject {
+                property int timeout: 7000
+            }
+
+            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 bool showDefaultActionsWithoutPrefix: true
+                    property string action: "/"
+                    property string app: ">"
+                    property string clipboard: ";"
+                    property string emojis: ":"
+                    property string math: "="
+                    property string shellCommand: "$"
+                    property string webSearch: "?"
+                }
+            }
+
+            property JsonObject sidebar: JsonObject {
+                property bool keepRightSidebarLoaded: true
+                property JsonObject translator: JsonObject {
+                    property bool enable: false
+                    property int delay: 300 // Delay before sending request. Reduces (potential) rate limits and lag.
+                }
+                property JsonObject ai: JsonObject {
+                    property bool textFadeIn: true
+                }
+                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 cornerOpen: JsonObject {
+                    property bool enable: true
+                    property bool bottom: false
+                    property bool valueScroll: true
+                    property bool clickless: false
+                    property real cornerRegionWidth: 60
+                    property real cornerRegionHeight: 2
+                    property bool visualize: false
+                }
+            }
+
+            property JsonObject time: JsonObject {
+                // https://doc.qt.io/qt-6/qtime.html#toString
+                property string format: "hh:mm"
+                property string shortDateFormat: "dd/MM"
+                property string dateFormat: "ddd, dd/MM"
+                property JsonObject pomodoro: JsonObject {
+                    property string alertSound: ""
+                    property int breakTime: 300
+                    property int cyclesBeforeLongBreak: 4
+                    property int focus: 1500
+                    property int longBreak: 900
+                }
+                property bool secondPrecision: false
+            }
+            
+            property JsonObject wallpaperSelector: JsonObject {
+                property bool useSystemFileDialog: false
+            }
+            
+            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
+            }
+
+            property JsonObject workSafety: JsonObject {
+                property JsonObject enable: JsonObject {
+                    property bool wallpaper: true
+                    property bool clipboard: true
+                }
+                property JsonObject triggerCondition: JsonObject {
+                    property list<string> networkNameKeywords: ["airport", "cafe", "college", "company", "eduroam", "free", "guest", "public", "school", "university"]
+                    property list<string> fileKeywords: ["anime", "booru", "ecchi", "hentai", "yande.re", "konachan", "breast", "nipples", "pussy", "nsfw", "spoiler", "girl"]
+                    property list<string> linkKeywords: ["hentai", "porn", "sukebei", "hitomi.la", "rule34", "gelbooru", "fanbox", "dlsite"]
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/Directories.qml

@@ -0,0 +1,55 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+import qs.modules.common.functions
+import Qt.labs.platform
+import QtQuick
+import Quickshell
+
+Singleton {
+    // XDG Dirs, with "file://"
+    readonly property string home: StandardPaths.standardLocations(StandardPaths.HomeLocation)[0]
+    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 genericCache: StandardPaths.standardLocations(StandardPaths.GenericCacheLocation)[0]
+    readonly property string documents: StandardPaths.standardLocations(StandardPaths.DocumentsLocation)[0]
+    readonly property string downloads: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
+    readonly property string pictures: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
+    readonly property string music: StandardPaths.standardLocations(StandardPaths.MusicLocation)[0]
+    readonly property string videos: StandardPaths.standardLocations(StandardPaths.MoviesLocation)[0]
+
+    // Other dirs used by the shell, without "file://"
+    property string assetsPath: Quickshell.shellPath("assets")
+    property string scriptPath: Quickshell.shellPath("scripts")
+    property string favicons: FileUtils.trimFileProtocol(`${Directories.cache}/media/favicons`)
+    property string coverArt: FileUtils.trimFileProtocol(`${Directories.cache}/media/coverart`)
+    property string booruPreviews: FileUtils.trimFileProtocol(`${Directories.cache}/media/boorus`)
+    property string booruDownloads: FileUtils.trimFileProtocol(Directories.pictures  + "/homework")
+    property string booruDownloadsNsfw: FileUtils.trimFileProtocol(Directories.pictures + "/homework/🌶️")
+    property string latexOutput: FileUtils.trimFileProtocol(`${Directories.cache}/media/latex`)
+    property string shellConfig: FileUtils.trimFileProtocol(`${Directories.config}/illogical-impulse`)
+    property string shellConfigName: "config.json"
+    property string shellConfigPath: `${Directories.shellConfig}/${Directories.shellConfigName}`
+    property string todoPath: FileUtils.trimFileProtocol(`${Directories.state}/user/todo.json`)
+    property string notificationsPath: FileUtils.trimFileProtocol(`${Directories.cache}/notifications/notifications.json`)
+    property string generatedMaterialThemePath: FileUtils.trimFileProtocol(`${Directories.state}/user/generated/colors.json`)
+    property string generatedWallpaperCategoryPath: FileUtils.trimFileProtocol(`${Directories.state}/user/generated/wallpaper/category.txt`)
+    property string cliphistDecode: FileUtils.trimFileProtocol(`/tmp/quickshell/media/cliphist`)
+    property string screenshotTemp: "/tmp/quickshell/media/screenshot"
+    property string wallpaperSwitchScriptPath: FileUtils.trimFileProtocol(`${Directories.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`)
+    property string aiTranslationScriptPath: FileUtils.trimFileProtocol(`${Directories.scriptPath}/ai/gemini-translate.sh`)
+    // 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", `rm -rf '${latexOutput}'; mkdir -p '${latexOutput}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${cliphistDecode}'; mkdir -p '${cliphistDecode}'`])
+        Quickshell.execDetached(["mkdir", "-p", `${aiChats}`])
+    }
+}

dots/.config/quickshell/ii/modules/common/Icons.qml

@@ -0,0 +1,23 @@
+pragma Singleton
+
+// From https://github.com/caelestia-dots/shell (GPLv3)
+
+import Quickshell
+
+Singleton {
+    id: root
+
+    function getBluetoothDeviceMaterialSymbol(systemIconName: string): string {
+        if (systemIconName.includes("headset") || systemIconName.includes("headphones"))
+            return "headphones";
+        if (systemIconName.includes("audio"))
+            return "speaker";
+        if (systemIconName.includes("phone"))
+            return "smartphone";
+        if (systemIconName.includes("mouse"))
+            return "mouse";
+        if (systemIconName.includes("keyboard"))
+            return "keyboard";
+        return "bluetooth";
+    }
+}

dots/.config/quickshell/ii/modules/common/Images.qml

@@ -0,0 +1,31 @@
+pragma Singleton
+
+import Quickshell
+
+Singleton {
+    // Formats
+    readonly property list<string> validImageTypes: ["jpeg", "png", "webp", "tiff", "svg"]
+    readonly property list<string> validImageExtensions: ["jpg", "jpeg", "png", "webp", "tif", "tiff", "svg"]
+
+    function isValidImageByName(name: string): bool {
+        return validImageExtensions.some(t => name.endsWith(`.${t}`));
+    }
+
+    // Thumbnails
+    // https://specifications.freedesktop.org/thumbnail-spec/latest/directory.html
+    readonly property var thumbnailSizes: ({
+        "normal": 128,
+        "large": 256,
+        "x-large": 512,
+        "xx-large": 1024
+    })
+    function thumbnailSizeNameForDimensions(width: int, height: int): string {
+        const sizeNames = Object.keys(thumbnailSizes);
+        for(let i = 0; i < sizeNames.length; i++) {
+            const sizeName = sizeNames[i];
+            const maxSize = thumbnailSizes[sizeName];
+            if (width <= maxSize && height <= maxSize) return sizeName;
+        }
+        return "xx-large";
+    }
+}

dots/.config/quickshell/ii/modules/common/Persistent.qml

@@ -0,0 +1,97 @@
+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}`
+
+    property bool ready: false
+    property string previousHyprlandInstanceSignature: ""
+    property bool isNewHyprlandInstance: previousHyprlandInstanceSignature !== states.hyprlandInstanceSignature
+
+    onReadyChanged: {
+        root.previousHyprlandInstanceSignature = root.states.hyprlandInstanceSignature
+        root.states.hyprlandInstanceSignature = Quickshell.env("HYPRLAND_INSTANCE_SIGNATURE") || ""
+    }
+
+    Timer {
+        id: fileReloadTimer
+        interval: 100
+        repeat: false
+        onTriggered: {
+            persistentStatesFileView.reload()
+        }
+    }
+
+    Timer {
+        id: fileWriteTimer
+        interval: 100
+        repeat: false
+        onTriggered: {
+            persistentStatesFileView.writeAdapter()
+        }
+    }
+
+    FileView {
+        id: persistentStatesFileView
+        path: root.filePath
+
+        watchChanges: true
+        onFileChanged: fileReloadTimer.restart()
+        onAdapterUpdated: fileWriteTimer.restart()
+        onLoaded: root.ready = true
+        onLoadFailed: error => {
+            console.log("Failed to load persistent states file:", error);
+            if (error == FileViewError.FileNotFound) {
+                fileWriteTimer.restart();
+            }
+        }
+
+        adapter: JsonAdapter {
+            id: persistentStatesJsonAdapter
+
+            property string hyprlandInstanceSignature: ""
+
+            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"
+            }
+
+            property JsonObject idle: JsonObject {
+                property bool inhibit: false
+            }
+
+            property JsonObject timer: JsonObject {
+                property JsonObject pomodoro: JsonObject {
+                    property bool running: false
+                    property int start: 0
+                    property bool isBreak: false
+                    property int cycle: 0
+                }
+                property JsonObject stopwatch: JsonObject {
+                    property bool running: false
+                    property int start: 0
+                    property list<var> laps: []
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/functions/ColorUtils.qml

@@ -0,0 +1,127 @@
+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));
+    }
+
+    /**
+     * Sets the alpha channel of a color.
+     *
+     * @param {string} color - The base color (any Qt.color-compatible string).
+     * @param {number} alpha - The desired alpha (0-1).
+     * @returns {Qt.rgba} The resulting color with applied alpha.
+     */
+    function applyAlpha(color, alpha) {
+        var c = Qt.color(color);
+        var a = Math.max(0, Math.min(1, alpha));
+        return Qt.rgba(c.r, c.g, c.b, a);
+    }
+}

dots/.config/quickshell/ii/modules/common/functions/FileUtils.qml

@@ -0,0 +1,71 @@
+pragma Singleton
+import Quickshell
+
+Singleton {
+    id: root
+
+    /**
+     * Trims the File protocol off the input string
+     * @param {string} str
+     * @returns {string}
+     */
+    function trimFileProtocol(str) {
+        let s = str;
+        if (typeof s !== "string") s = str.toString(); // Convert to string if it's an url or whatever
+        return s.startsWith("file://") ? s.slice(7) : s;
+    }
+
+    /**
+     * 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();
+    }
+
+    /**
+     * Extracts the folder name from a directory path
+     * @param {string} str
+     * @returns {string}
+     */
+    function folderNameForPath(str) {
+        if (typeof str !== "string") return "";
+        const trimmed = trimFileProtocol(str);
+        // Remove trailing slash if present
+        const noTrailing = trimmed.endsWith("/") ? trimmed.slice(0, -1) : trimmed;
+        if (!noTrailing) return "";
+        return noTrailing.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;
+    }
+
+    /**
+     * Returns the parent directory of a given file path
+     * @param {string} str
+     * @returns {string}
+     */
+    function parentDirectory(str) {
+        if (typeof str !== "string") return "";
+        const trimmed = trimFileProtocol(str);
+        const parts = trimmed.split(/[\\/]/);
+        if (parts.length <= 1) return "";
+        parts.pop();
+        return parts.join("/");
+    }
+}

dots/.config/quickshell/ii/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)
+    }
+}
+

dots/.config/quickshell/ii/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)
+    }
+}
+

dots/.config/quickshell/ii/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;
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/functions/Session.qml

@@ -0,0 +1,50 @@
+pragma Singleton
+import Quickshell
+import qs.services
+import qs.modules.common
+
+Singleton {
+    id: root
+
+    function closeAllWindows() {
+        HyprlandData.windowList.map(w => w.pid).forEach(pid => {
+            Quickshell.execDetached(["kill", pid]);
+        });
+    }
+
+    function lock() {
+        Quickshell.execDetached(["loginctl", "lock-session"]);
+    }
+
+    function suspend() {
+        Quickshell.execDetached(["bash", "-c", "systemctl suspend || loginctl suspend"]);
+    }
+
+    function logout() {
+        closeAllWindows();
+        Quickshell.execDetached(["pkill", "-i", "Hyprland"]);
+    }
+
+    function launchTaskManager() {
+        Quickshell.execDetached(["bash", "-c", `${Config.options.apps.taskManager}`]);
+    }
+
+    function hibernate() {
+        Quickshell.execDetached(["bash", "-c", `systemctl hibernate || loginctl hibernate`]);
+    }
+
+    function poweroff() {
+        closeAllWindows();
+        Quickshell.execDetached(["bash", "-c", `systemctl poweroff || loginctl poweroff`]);
+    }
+
+    function reboot() {
+        closeAllWindows();
+        Quickshell.execDetached(["bash", "-c", `reboot || loginctl reboot`]);
+    }
+
+    function rebootToFirmware() {
+        closeAllWindows();
+        Quickshell.execDetached(["bash", "-c", `systemctl reboot --firmware-setup || loginctl reboot --firmware-setup`]);
+    }
+}

dots/.config/quickshell/ii/modules/common/functions/StringUtils.qml

@@ -0,0 +1,288 @@
+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 { string }
+     */
+    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) {
+        return String(str)
+        // .replace(/\\/g, '\\\\')
+        .replace(/'/g, "'\\''");
+    }
+
+    /**
+     * Splits markdown blocks into three different types: text, think, and code.
+     * @param { string } markdown
+     * @returns {Array<{type: "text" | "think" | "code", content: string, lang?: string, completed?: boolean}>}
+     */
+    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");
+    }
+
+    /**
+     * Cleans up a music title by removing bracketed and special characters.
+     * @param { string } title
+     * @returns { string }
+     */
+    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();
+    }
+
+    /**
+     * Converts seconds to a friendly time string (e.g. 1:23 or 1:02:03).
+     * @param { number } seconds
+     * @returns { string }
+     */
+    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')}`;
+        }
+    }
+
+    /**
+     * Escapes HTML special characters in a string.
+     * @param { string } str
+     * @returns { string }
+     */
+    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;');
+    }
+
+    /**
+     * Cleans a cliphist entry by removing leading digits and tab.
+     * @param { string } str
+     * @returns { string }
+     */
+    function cleanCliphistEntry(str: string): string {
+        return str.replace(/^\d+\t/, "");
+    }
+
+    /**
+     * Checks if any substring in the list is contained in the string.
+     * @param { string } str
+     * @param { string[] } substrings
+     * @returns { boolean }
+     */
+    function stringListContainsSubstring(str, substrings) {
+        for (let i = 0; i < substrings.length; ++i) {
+            if (str.includes(substrings[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Removes the given prefix from the string if present.
+     * @param { string } str
+     * @param { string } prefix
+     * @returns { string }
+     */
+    function cleanPrefix(str, prefix) {
+        if (str.startsWith(prefix)) {
+            return str.slice(prefix.length);
+        }
+        return str;
+    }
+
+    /**
+     * Removes the first matching prefix from the string if present.
+     * @param { string } str
+     * @param { string[] } prefixes
+     * @returns { string }
+     */
+    function cleanOnePrefix(str, prefixes) {
+        for (let i = 0; i < prefixes.length; ++i) {
+            if (str.startsWith(prefixes[i])) {
+                return str.slice(prefixes[i].length);
+            }
+        }
+        return str;
+    }
+}

dots/.config/quickshell/ii/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

dots/.config/quickshell/ii/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));
+}

dots/.config/quickshell/ii/modules/common/models/AdaptedMaterialScheme.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import qs.modules.common
+import qs.modules.common.functions
+
+/**
+ * Material color scheme adapted to a given color. It's incomplete but enough for what we need...
+ */
+QtObject {
+    id: root
+    required property color color
+    readonly property bool colorIsDark: color.hslLightness < 0.5
+
+    property color colLayer0: ColorUtils.mix(Appearance.colors.colLayer0, root.color, (colorIsDark && Appearance.m3colors.darkmode) ? 0.6 : 0.5)
+    property color colLayer1: ColorUtils.mix(Appearance.colors.colLayer1, root.color, 0.5)
+    property color colOnLayer0: ColorUtils.mix(Appearance.colors.colOnLayer0, root.color, 0.5)
+    property color colOnLayer1: ColorUtils.mix(Appearance.colors.colOnLayer1, root.color, 0.5)
+    property color colSubtext: ColorUtils.mix(Appearance.colors.colOnLayer1, root.color, 0.5)
+    property color colPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimary, root.color), root.color, 0.5)
+    property color colPrimaryHover: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryHover, root.color), root.color, 0.3)
+    property color colPrimaryActive: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryActive, root.color), root.color, 0.3)
+    property color colSecondary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colSecondary, root.color), root.color, 0.5)
+    property color colSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3secondaryContainer, root.color, 0.15)
+    property color colSecondaryContainerHover: ColorUtils.mix(Appearance.colors.colSecondaryContainerHover, root.color, 0.3)
+    property color colSecondaryContainerActive: ColorUtils.mix(Appearance.colors.colSecondaryContainerActive, root.color, 0.5)
+    property color colOnPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.m3colors.m3onPrimary, root.color), root.color, 0.5)
+    property color colOnSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3onSecondaryContainer, root.color, 0.5)
+}

dots/.config/quickshell/ii/modules/common/models/FolderListModelWithHistory.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import Qt.labs.folderlistmodel
+
+FolderListModel {
+    id: root
+    property list<url> folderHistory: []
+    property int currentFolderHistoryIndex: -1
+    property bool historyNavigationLock: false
+
+    function lockNextNavigation() {
+        historyNavigationLock = true;
+    }
+
+    function pushToHistory(path) {
+        if (folderHistory[currentFolderHistoryIndex] === path)
+            return;
+        folderHistory = folderHistory.slice(0, currentFolderHistoryIndex + 1);
+        folderHistory.push(path);
+        currentFolderHistoryIndex = folderHistory.length - 1;
+    }
+
+    function navigateUp() {
+        root.folder = root.parentFolder;
+    }
+
+    function navigateBack() {
+        if (currentFolderHistoryIndex === 0)
+            return;
+        currentFolderHistoryIndex--;
+        lockNextNavigation();
+        root.folder = folderHistory[currentFolderHistoryIndex];
+    }
+
+    function navigateForward() {
+        if (currentFolderHistoryIndex >= folderHistory.length - 1) return;
+        currentFolderHistoryIndex++;
+        lockNextNavigation();
+        root.folder = folderHistory[currentFolderHistoryIndex];
+    }
+
+    onFolderChanged: {
+        if (historyNavigationLock) {
+            historyNavigationLock = false;
+            return;
+        }
+        pushToHistory(folder);
+    }
+
+    Component.onCompleted: {
+        root.folderHistory = [root.folder]
+        root.currentFolderHistoryIndex = 0
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/AddressBar.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+Rectangle {
+    id: root
+    required property var directory
+    property bool showBreadcrumb: true
+    onShowBreadcrumbChanged: {
+        addressInput.text = root.directory;
+    }
+
+    signal navigateToDirectory(string path)
+
+    property real padding: 6
+    implicitWidth: mainLayout.implicitWidth + padding * 2
+    implicitHeight: mainLayout.implicitHeight + padding * 2
+    color: Appearance.colors.colLayer2
+
+    function focusBreadcrumb() {
+        root.showBreadcrumb = false;
+        addressInput.forceActiveFocus();
+    }
+
+    RowLayout {
+        id: mainLayout
+        anchors {
+            fill: parent
+            margins: root.padding
+        }
+        spacing: 8
+
+        RippleButton {
+            id: parentDirButton
+            downAction: () => root.navigateToDirectory(FileUtils.parentDirectory(root.directory))
+            contentItem: MaterialSymbol {
+                text: "drive_folder_upload"
+                iconSize: Appearance.font.pixelSize.larger
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Rectangle {
+                id: directoryEntry
+                visible: !root.showBreadcrumb
+                anchors.fill: parent
+                color: Appearance.colors.colLayer1
+                radius: Appearance.rounding.full
+                implicitWidth: addressInput.implicitWidth
+                implicitHeight: addressInput.implicitHeight
+
+                Keys.onPressed: event => {
+                    if (directoryEntry.visible && event.key === Qt.Key_Escape) {
+                        root.showBreadcrumb = true;
+                        event.accepted = true;
+                        return;
+                    }
+                    event.accepted = false;
+                }
+
+                StyledTextInput {
+                    id: addressInput
+                    anchors.fill: parent
+                    padding: 10
+                    text: root.directory
+
+                    Keys.onPressed: event => {
+                        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                            root.navigateToDirectory(text);
+                            root.showBreadcrumb = true;
+                            event.accepted = true;
+                        }
+                    }
+
+                    MouseArea {
+                        // I-beam cursor
+                        anchors.fill: parent
+                        acceptedButtons: Qt.NoButton
+                        hoverEnabled: true
+                        cursorShape: Qt.IBeamCursor
+                    }
+                }
+            }
+
+            Loader {
+                id: breadcrumbLoader
+                active: root.showBreadcrumb
+                visible: root.showBreadcrumb
+                anchors.fill: parent
+                sourceComponent: AddressBreadcrumb {
+                    directory: root.directory
+                    onNavigateToDirectory: dir => {
+                        root.navigateToDirectory(dir);
+                    }
+                }
+            }
+        }
+
+        RippleButton {
+            id: dirEditButton
+            toggled: !root.showBreadcrumb
+            downAction: () => root.showBreadcrumb = !root.showBreadcrumb
+            contentItem: MaterialSymbol {
+                text: "edit"
+                iconSize: Appearance.font.pixelSize.larger
+                color: dirEditButton.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnLayer2
+            }
+
+            StyledToolTip {
+                text: Translation.tr("Edit directory")
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/AddressBreadcrumb.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+ListView {
+    id: root
+    required property var directory
+    property var breadcrumbDirectory: ""
+    Component.onCompleted: breadcrumbDirectory = directory;
+    onDirectoryChanged: {
+        if (breadcrumbDirectory.startsWith(directory)) return;
+        breadcrumbDirectory = directory
+    }
+
+    signal navigateToDirectory(string path)
+
+    orientation: ListView.Horizontal
+    clip: true
+    spacing: 2
+
+    model: breadcrumbDirectory.split("/")
+    delegate: SelectionGroupButton {
+        id: folderButton
+        required property var modelData
+        required property int index
+        buttonText: index === 0 ? "/" : modelData
+        toggled: {
+            if (directory.trim() === "/") return index === 0;
+            return index === directory.split("/").length - 1
+        }
+        leftmost: index === 0
+        rightmost: index === breadcrumbDirectory.split("/").length - 1
+
+        onClicked: {
+            root.navigateToDirectory(breadcrumbDirectory.split("/").slice(0, index + 1).join("/"))
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/ButtonGroup.qml

@@ -0,0 +1,47 @@
+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 alias uniformCellSizes: rowLayout.uniformCellSizes
+    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
+    }]
+}

dots/.config/quickshell/ii/modules/common/widgets/CircularProgress.qml

@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.modules.common
+
+/**
+ * Material 3 circular progress. See https://m3.material.io/components/progress-indicators/specs
+ */
+Item {
+    id: root
+
+    property int implicitSize: 30
+    property int lineWidth: 2
+    property real value: 0
+    property color colPrimary: Appearance.m3colors.m3onSecondaryContainer
+    property color colSecondary: Appearance.colors.colSecondaryContainer
+    property real gapAngle: 360 / 18
+    property bool fill: false
+    property int fillOverflow: 2
+    property bool enableAnimation: true
+    property int animationDuration: 800
+    property var easingType: Easing.OutCubic
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    property real degree: value * 360
+    property real centerX: root.width / 2
+    property real centerY: root.height / 2
+    property real arcRadius: root.implicitSize / 2 - root.lineWidth
+    property real startAngle: -90
+
+    Behavior on degree {
+        enabled: root.enableAnimation
+        NumberAnimation {
+            duration: root.animationDuration
+            easing.type: root.easingType
+        }
+
+    }
+
+    Loader {
+        active: root.fill
+        anchors.fill: parent
+        
+        sourceComponent: Rectangle {
+            radius: 9999
+            color: root.colSecondary
+        }
+    }
+
+    Shape {
+        anchors.fill: parent
+        layer.enabled: true
+        layer.smooth: true
+        preferredRendererType: Shape.CurveRenderer
+        ShapePath {
+            id: secondaryPath
+            strokeColor: root.colSecondary
+            strokeWidth: root.lineWidth
+            capStyle: ShapePath.RoundCap
+            fillColor: "transparent"
+            PathAngleArc {
+                centerX: root.centerX
+                centerY: root.centerY
+                radiusX: root.arcRadius
+                radiusY: root.arcRadius
+                startAngle: root.startAngle - root.gapAngle
+                sweepAngle: -(360 - root.degree - 2 * root.gapAngle)
+            }
+        }
+        ShapePath {
+            id: primaryPath
+            strokeColor: root.colPrimary
+            strokeWidth: root.lineWidth
+            capStyle: ShapePath.RoundCap
+            fillColor: "transparent"
+            PathAngleArc {
+                centerX: root.centerX
+                centerY: root.centerY
+                radiusX: root.arcRadius
+                radiusY: root.arcRadius
+                startAngle: root.startAngle
+                sweepAngle: root.degree
+            }
+        }
+    }
+
+}

dots/.config/quickshell/ii/modules/common/widgets/CliphistImage.qml

@@ -0,0 +1,131 @@
+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 bool blur: false
+    property string blurText: "Image hidden"
+
+    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.cliphistBinary} 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}'`]);
+    }
+
+    layer.enabled: true
+    layer.effect: OpacityMask {
+        maskSource: Rectangle {
+            width: image.width
+            height: image.height
+            radius: root.radius
+        }
+    }
+
+    StyledImage {
+        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
+    }
+
+    Loader {
+        id: blurLoader
+        active: root.blur
+        anchors.fill: image
+        sourceComponent: GaussianBlur {
+            source: image
+            radius: 35
+            samples: radius * 2 + 1
+
+            Rectangle {
+                anchors.fill: parent
+                color: ColorUtils.transparentize(Appearance.colors.colLayer0, 0.5)
+
+                Column {
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        verticalCenter: parent.verticalCenter
+                    }
+                    MaterialSymbol {
+                        visible: width <= image.width
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        text: "visibility_off"
+                        font.pixelSize: 28
+                    }
+                    StyledText {
+                        visible: width <= image.width
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        text: root.blurText
+                        color: Appearance.colors.colOnSurface
+                        font.pixelSize: Appearance.font.pixelSize.smallie
+                    }
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/ClippedFilledCircularProgress.qml

@@ -0,0 +1,98 @@
+import qs.modules.common
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Shapes
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    property int implicitSize: 18
+    property int lineWidth: 2
+    property real value: 0
+    property color colPrimary: Appearance?.colors.colOnSecondaryContainer ?? "#685496"
+    property color colSecondary: ColorUtils.transparentize(colPrimary, 0.5) ?? "#F1D3F9"
+    property real gapAngle: 360 / 18
+    property bool fill: true
+    property int fillOverflow: 2
+    property bool enableAnimation: true
+    property int animationDuration: 800
+    property var easingType: Easing.OutCubic
+    property bool accountForLightBleeding: true
+    default property Item textMask: Item {
+        width: implicitSize
+        height: implicitSize
+        StyledText {
+            anchors.centerIn: parent
+            text: Math.round(root.value * 100)
+            font.pixelSize: 12
+            font.weight: Font.Medium
+        }
+    }
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    property real degree: value * 360
+    property real centerX: root.width / 2
+    property real centerY: root.height / 2
+    property real arcRadius: root.implicitSize / 2 - root.lineWidth / 2 - (0.5 * root.accountForLightBleeding)
+    property real startAngle: -90
+
+    Behavior on degree {
+        enabled: root.enableAnimation
+        NumberAnimation {
+            duration: root.animationDuration
+            easing.type: root.easingType
+        }
+
+    }
+
+    Rectangle {
+        id: contentItem
+        anchors.fill: parent
+        radius: implicitSize / 2
+        color: root.colSecondary
+        visible: false
+        layer.enabled: true
+        layer.smooth: true
+
+        Shape {
+            anchors.fill: parent
+            preferredRendererType: Shape.CurveRenderer
+
+            ShapePath {
+                id: primaryPath
+                pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting
+                strokeColor: root.colPrimary
+                strokeWidth: root.lineWidth
+                capStyle: ShapePath.RoundCap
+                fillColor: root.colPrimary
+
+                startX: root.centerX
+                startY: root.centerY
+
+                PathAngleArc {
+                    moveToStart: false
+                    centerX: root.centerX
+                    centerY: root.centerY
+                    radiusX: root.arcRadius
+                    radiusY: root.arcRadius
+                    startAngle: root.startAngle
+                    sweepAngle: root.degree
+                }
+                PathLine {
+                    x: primaryPath.startX
+                    y: primaryPath.startY
+                }
+            }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: contentItem
+        invert: true
+        maskSource: root.textMask
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/ClippedProgressBar.qml

@@ -0,0 +1,101 @@
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+
+/**
+ * A progress bar with both ends rounded and text acts as clipping like OneUI 7's battery indicator.
+ */
+ProgressBar {
+    id: root
+    property bool vertical: false
+    property real valueBarWidth: 30
+    property real valueBarHeight: 18
+    property color highlightColor: Appearance?.colors.colOnSecondaryContainer ?? "#685496"
+    property color trackColor: ColorUtils.transparentize(highlightColor, 0.5) ?? "#F1D3F9"
+    property alias radius: contentItem.radius
+    property string text
+    default property Item textMask: Item {
+        width: valueBarWidth
+        height: valueBarHeight
+        StyledText {
+            anchors.centerIn: parent
+            font: root.font
+            text: root.text
+        }
+    }
+
+    text: Math.round(value * 100)
+    font {
+        pixelSize: 13
+        weight: text.length > 2 ? Font.Medium : Font.DemiBold
+    }
+
+    background: Item {
+        implicitHeight: valueBarHeight
+        implicitWidth: valueBarWidth
+    }
+
+    contentItem: Rectangle {
+        id: contentItem
+        anchors.fill: parent
+        radius: 9999
+        color: root.trackColor
+        visible: false
+
+        Rectangle {
+            id: progressFill
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                left: parent.left
+                right: undefined
+            }
+            width: parent.width * root.visualPosition
+            height: parent.height
+
+            states: State {
+                name: "vertical"
+                when: root.vertical
+                AnchorChanges {
+                    target: progressFill
+                    anchors {
+                        top: undefined
+                        bottom: parent.bottom
+                        left: parent.left
+                        right: parent.right
+                    }
+                }
+                PropertyChanges {
+                    target: progressFill
+                    width: parent.width
+                    height: parent.height * root.visualPosition
+                }
+            }
+
+            radius: Appearance.rounding.unsharpen
+            color: root.highlightColor
+        }
+    }
+
+    OpacityMask {
+        id: roundingMask
+        visible: false
+        anchors.fill: parent
+        source: contentItem
+        maskSource: Rectangle {
+            width: contentItem.width
+            height: contentItem.height
+            radius: contentItem.radius
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: roundingMask
+        invert: true
+        maskSource: root.textMask
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/ConfigRow.qml

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

dots/.config/quickshell/ii/modules/common/widgets/ConfigSelectionArray.qml

@@ -0,0 +1,54 @@
+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: [
+        {
+            "displayName": "Option 1",
+            "icon": "check",
+            "value": 1
+        },
+        {
+            "displayName": "Option 2",
+            "icon": "close",
+            "value": 2
+        },
+    ]
+    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
+            buttonIcon: modelData.icon || ""
+            buttonText: modelData.displayName
+            toggled: root.currentValue === modelData.value
+            onClicked: {
+                root.selected(modelData.value);
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/ConfigSpinBox.qml

@@ -0,0 +1,38 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+    property string text: ""
+    property string icon
+    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
+
+    RowLayout {
+        spacing: 10
+        OptionalMaterialSymbol {
+            icon: root.icon
+            opacity: root.enabled ? 1 : 0.4
+        }
+        StyledText {
+            id: labelWidget
+            Layout.fillWidth: true
+            text: root.text
+            color: Appearance.colors.colOnSecondaryContainer
+            opacity: root.enabled ? 1 : 0.4
+        }
+    }
+
+    StyledSpinBox {
+        id: spinBoxWidget
+        Layout.fillWidth: false
+        value: root.value
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/ConfigSwitch.qml

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

dots/.config/quickshell/ii/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: 600
+    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: 20
+        }
+        spacing: 30
+    }
+
+}

dots/.config/quickshell/ii/modules/common/widgets/ContentSection.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+ColumnLayout {
+    id: root
+    property string title
+    property string icon: ""
+    default property alias data: sectionContent.data
+
+    Layout.fillWidth: true
+    spacing: 6
+
+    RowLayout {
+        spacing: 6
+        OptionalMaterialSymbol {
+            icon: root.icon
+            iconSize: Appearance.font.pixelSize.hugeass
+        }
+        StyledText {
+            text: root.title
+            font.pixelSize: Appearance.font.pixelSize.larger
+            font.weight: Font.Medium
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+
+    ColumnLayout {
+        id: sectionContent
+        Layout.fillWidth: true
+        spacing: 4
+
+    }
+}

dots/.config/quickshell/ii/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
+                    text: root.tooltip
+                }
+            }
+        }
+        Item { Layout.fillWidth: true }
+    }
+    ColumnLayout {
+        id: sectionContent
+        Layout.fillWidth: true
+        spacing: 2
+    }
+}

dots/.config/quickshell/ii/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: 2
+}

dots/.config/quickshell/ii/modules/common/widgets/CookieWrappedMaterialSymbol.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import qs.modules.common
+import qs.modules.common.widgets
+
+MaterialCookie {
+    id: root
+    property alias text: symbol.text
+    property alias iconSize: symbol.iconSize
+    property alias font: symbol.font
+    property alias colSymbol: symbol.color
+    property real padding: 6
+
+    color: Appearance.colors.colSecondaryContainer
+    colSymbol: Appearance.colors.colOnSecondaryContainer
+
+    sides: 5
+
+    implicitSize: Math.max(symbol.implicitWidth, symbol.implicitHeight) + padding * 2
+
+    MaterialSymbol {
+        id: symbol
+        anchors.centerIn: parent
+    }
+
+}

dots/.config/quickshell/ii/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
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/DialogButton.qml

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

dots/.config/quickshell/ii/modules/common/widgets/DialogListItem.qml

@@ -0,0 +1,25 @@
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import QtQuick
+
+RippleButton {
+    id: root
+    property bool active: false
+
+    horizontalPadding: Appearance.rounding.large
+    verticalPadding: 12
+
+    clip: true
+    pointingHandCursor: !active    
+    implicitWidth: contentItem.implicitWidth + horizontalPadding * 2
+    implicitHeight: contentItem.implicitHeight + verticalPadding * 2
+    Behavior on implicitHeight {
+        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+    }
+
+    colBackground: ColorUtils.transparentize(Appearance.colors.colLayer3)
+    colBackgroundHover: active ? colBackground : Appearance.colors.colLayer3Hover
+    colRipple: Appearance.colors.colLayer3Active
+    buttonRadius: 0
+}

dots/.config/quickshell/ii/modules/common/widgets/DirectoryIcon.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.modules.common
+import qs.modules.common.functions
+
+// From https://github.com/caelestia-dots/shell with modifications.
+// License: GPLv3
+
+Image {
+    id: root
+    required property var fileModelData
+    asynchronous: true
+    fillMode: Image.PreserveAspectFit
+
+    source: {
+        if (!fileModelData.fileIsDir)
+            return Quickshell.iconPath("application-x-zerosize");
+
+        if ([Directories.documents, Directories.downloads, Directories.music, Directories.pictures, Directories.videos].some(dir => FileUtils.trimFileProtocol(dir) === fileModelData.filePath))
+            return Quickshell.iconPath(`folder-${fileModelData.fileName.toLowerCase()}`);
+
+        return Quickshell.iconPath("inode-directory");
+    }
+
+    onStatusChanged: {
+        if (status === Image.Error)
+            source = Quickshell.iconPath("error");
+    }
+
+    Process {
+        running: !fileModelData.fileIsDir
+        command: ["file", "--mime", "-b", fileModelData.filePath]
+        stdout: StdioCollector {
+            onStreamFinished: {
+                const mime = text.split(";")[0].replace("/", "-");
+                root.source = Images.validImageTypes.some(t => mime === `image-${t}`) ? fileModelData.fileUrl : Quickshell.iconPath(mime, "image-missing");
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/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);
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/FadeLoader.qml

@@ -0,0 +1,16 @@
+import QtQuick
+
+import qs.modules.common
+import qs.modules.common.widgets
+
+Loader {
+    id: root
+    property bool shown: true
+    opacity: shown ? 1 : 0
+    visible: opacity > 0
+    active: opacity > 0
+
+    Behavior on opacity {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+}

dots/.config/quickshell/ii/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
+        }
+    }
+}

dots/.config/quickshell/ii/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
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/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
+}

dots/.config/quickshell/ii/modules/common/widgets/FocusedScrollMouseArea.qml

@@ -0,0 +1,56 @@
+import QtQuick
+
+MouseArea { // Right side | scroll to change volume
+    id: root
+
+    signal scrollUp(delta: int)
+    signal scrollDown(delta: int)
+    signal movedAway()
+
+    property bool hovered: false
+    property real lastScrollX: 0
+    property real lastScrollY: 0
+    property bool trackingScroll: false
+    property real moveThreshold: 20
+
+    acceptedButtons: Qt.LeftButton
+    hoverEnabled: true
+
+    onEntered: {
+        root.hovered = true;
+    }
+
+    onExited: {
+        root.hovered = false;
+        root.trackingScroll = false;
+    }
+
+    onWheel: event => {
+        if (event.angleDelta.y < 0)
+            root.scrollDown(event.angleDelta.y);
+        else if (event.angleDelta.y > 0)
+            root.scrollUp(event.angleDelta.y);
+        // Store the mouse position and start tracking
+        root.lastScrollX = event.x;
+        root.lastScrollY = event.y;
+        root.trackingScroll = true;
+    }
+
+    onPositionChanged: mouse => {
+        if (root.trackingScroll) {
+            const dx = mouse.x - root.lastScrollX;
+            const dy = mouse.y - root.lastScrollY;
+            if (Math.sqrt(dx * dx + dy * dy) > root.moveThreshold) {
+                root.movedAway();
+                root.trackingScroll = false;
+            }
+        }
+    }
+
+    onContainsMouseChanged: {
+        if (!root.containsMouse && root.trackingScroll) {
+            root.movedAway();
+            root.trackingScroll = false;
+        }
+    }
+}

dots/.config/quickshell/ii/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(colBackgroundHover, 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
+    }
+}

dots/.config/quickshell/ii/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
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/LightDarkPreferenceButton.qml

@@ -0,0 +1,122 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+RippleButton {
+    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
+                        wavy: true
+                        animateWave: 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
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml

@@ -0,0 +1,71 @@
+import QtQuick
+import QtQuick.Shapes
+import Quickshell
+import qs.modules.common
+
+
+Item {
+    id: root
+    
+    property real sides: 12  
+    property int implicitSize: 100
+    property real amplitude: implicitSize / 50
+    property int renderPoints: 360
+    property color color: "#605790"
+    property alias strokeWidth: shapePath.strokeWidth
+    property bool constantlyRotate: false
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    property real shapeRotation: 0
+
+    Loader {
+        active: constantlyRotate
+        sourceComponent: FrameAnimation {
+            running: true
+            onTriggered: {
+                shapeRotation += 0.05
+            }
+        }
+    }
+
+    Behavior on sides {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
+    Shape {
+        id: shape
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+
+        ShapePath {
+            id: shapePath
+            strokeWidth: 0
+            fillColor: root.color
+            pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting
+
+            PathPolyline {
+                property var pointsList: {
+                    var points = []
+                    var cx = shape.width / 2   // center x
+                    var cy = shape.height / 2  // center y
+                    var steps = root.renderPoints
+                    var radius = root.implicitSize / 2 - root.amplitude
+                    for (var i = 0; i <= steps; i++) {
+                        var angle = (i / steps) * 2 * Math.PI
+                        var rotatedAngle = angle * root.sides + Math.PI/2 + (root.shapeRotation * root.constantlyRotate)
+                        var wave = Math.sin(rotatedAngle) * root.amplitude
+                        var x = Math.cos(angle) * (radius + wave) + cx
+                        var y = Math.sin(angle) * (radius + wave) + cy
+                        points.push(Qt.point(x, y))
+                    }
+                    return points
+                }
+
+                path: pointsList
+            }
+            
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/MaterialSymbol.qml

@@ -0,0 +1,30 @@
+import qs.modules.common
+import QtQuick
+
+StyledText {
+    id: root
+    property real iconSize: Appearance?.font.pixelSize.small ?? 16
+    property real fill: 0
+    property real truncatedFill: fill.toFixed(1) // Reduce memory consumption spikes from constant font remapping
+    renderType: fill !== 0 ? Text.CurveRendering : Text.NativeRendering
+    font {
+        hintingPreference: Font.PreferFullHinting
+        family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
+        pixelSize: iconSize
+        weight: Font.Normal + (Font.DemiBold - Font.Normal) * truncatedFill
+        variableAxes: { 
+            "FILL": truncatedFill,
+            // "wght": font.weight,
+            // "GRAD": 0,
+            "opsz": iconSize,
+        }
+    }
+
+    Behavior on fill { // Leaky leaky, no good
+        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]
+        }
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/MaterialTextArea.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
+}

dots/.config/quickshell/ii/modules/common/widgets/MaterialTextField.qml

@@ -0,0 +1,39 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls
+
+/**
+ * Material 3 styled TextField (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
+ */
+TextField {
+    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.Outlined
+    renderType: Text.QtRendering
+
+    selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+    placeholderTextColor: Appearance.m3colors.m3outline
+    clip: true
+
+    font {
+        family: Appearance?.font.family.main ?? "sans-serif"
+        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        hintingPreference: Font.PreferFullHinting
+    }
+    wrapMode: TextEdit.Wrap
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.NoButton
+        hoverEnabled: true
+        cursorShape: Qt.IBeamCursor
+    }
+}

dots/.config/quickshell/ii/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)
+        }
+    }
+
+}