Merge remote-tracking branch 'upstream/main' into layout_service

.config/quickshell/ii/.qmlformat.ini

@@ -0,0 +1,8 @@
+[General]
+UseTabs=false
+IndentWidth=4
+NewlineType=unix
+NormalizeOrder=false
+FunctionsSpacing=false
+ObjectsSpacing=true
+MaxColumnWidth=110

.config/quickshell/ii/GlobalStates.qml

@@ -1,4 +1,5 @@
-import "root:/modules/common/"
+import qs.modules.common
+import qs
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
@@ -8,11 +9,22 @@ pragma ComponentBehavior: Bound
 
 Singleton {
     id: root
+    property bool barOpen: true
     property bool sidebarLeftOpen: false
     property bool sidebarRightOpen: false
     property bool overviewOpen: false
     property bool workspaceShowNumbers: false
     property bool superReleaseMightTrigger: true
+    property bool screenLocked: false
+    property bool screenLockContainsCharacters: false
+
+    property real screenZoom: 1
+    onScreenZoomChanged: {
+        Quickshell.execDetached(["hyprctl", "keyword", "cursor:zoom_factor", root.screenZoom.toString()]);
+    }
+    Behavior on screenZoom {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
 
     // When user is not reluctant while pressing super, they probably don't need to see workspace numbers
     onSuperReleaseMightTriggerChanged: { 
@@ -21,7 +33,7 @@ Singleton {
 
     Timer {
         id: workspaceShowNumbersTimer
-        interval: ConfigOptions.bar.workspaces.showNumberDelay
+        interval: Config.options.bar.workspaces.showNumberDelay
         // interval: 0
         repeat: false
         onTriggered: {
@@ -31,7 +43,7 @@ Singleton {
 
     GlobalShortcut {
         name: "workspaceNumber"
-        description: qsTr("Hold to show workspace numbers, release to show icons")
+        description: "Hold to show workspace numbers, release to show icons"
 
         onPressed: {
             workspaceShowNumbersTimer.start()
@@ -41,4 +53,16 @@ Singleton {
             workspaceShowNumbers = false
         }
     }
+
+    IpcHandler {
+		target: "zoom"
+
+		function zoomIn() {
+            screenZoom = Math.min(screenZoom + 0.4, 3.0)
+        }
+
+        function zoomOut() {
+            screenZoom = Math.max(screenZoom - 0.4, 1)
+        } 
+	}
 }

.config/quickshell/ii/ReloadPopup.qml

@@ -34,6 +34,7 @@ Scope {
 		PanelWindow {
 			id: popup
 
+			exclusiveZone: 0
 			anchors.top: true
 			margins.top: 0
 

.config/quickshell/ii/Translation.qml

@@ -0,0 +1,175 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.modules.common
+
+Singleton {
+    id: root
+    
+    property var translations: ({})
+    property string currentLanguage: "en_US"
+    property var availableLanguages: ["en_US"]
+    property bool isScanning: false
+    property bool isLoading: false
+    
+    Process {
+        id: scanLanguagesProcess
+        command: ["find", Qt.resolvedUrl(Directories.config + "/quickshell/translations/").toString().replace("file://", ""), "-name", "*.json", "-exec", "basename", "{}", ".json", ";"]
+        running: false
+        
+        stdout: SplitParser {
+            onRead: data => {
+                if (data.trim().length === 0) return
+                
+                var files = data.trim().split('\n')
+                
+                for (var i = 0; i < files.length; i++) {
+                    var lang = files[i].trim()
+                    if (lang.length > 0 && root.availableLanguages.indexOf(lang) === -1) {
+                        root.availableLanguages.push(lang)
+                    }
+                }
+            }
+        }
+        
+        onExited: (exitCode, exitStatus) => {
+            root.isScanning = false
+            if (exitCode !== 0) {
+                root.availableLanguages = ["en_US"]
+            }
+            root.loadTranslations()
+        }
+    }
+    
+    FileView {
+        id: translationFileView
+        onLoaded: {
+            var textContent = ""
+            try {
+                textContent = text()
+            } catch (e) {
+                root.translations = {}
+                root.isLoading = false
+                return
+            }
+            
+            if (textContent.length === 0) {
+                root.translations = {}
+                root.isLoading = false
+                return
+            }
+            
+            try {
+                var jsonData = JSON.parse(textContent)
+                root.translations = jsonData
+                root.isLoading = false
+            } catch (e) {
+                root.translations = {}
+                root.isLoading = false
+            }
+        }
+        onLoadFailed: (error) => {
+            root.translations = {}
+            root.isLoading = false
+        }
+    }
+    
+    function detectSystemLanguage() {
+        var locale = Qt.locale().name
+        return locale
+    }
+    
+    function getLanguageCode() {
+        var configLang = "auto"
+        try {
+            configLang = ConfigOptions.language.ui
+        } catch (e) {
+            configLang = "auto"
+        }
+        
+        if (configLang === "auto") {
+            return detectSystemLanguage()
+        } else {
+            if (root.availableLanguages.indexOf(configLang) !== -1) {
+                return configLang
+            } else {
+                return detectSystemLanguage()
+            }
+        }
+    }
+    
+    function loadTranslations() {
+        if (root.isScanning) {
+            return
+        }
+        
+        var targetLang = getLanguageCode()
+        root.currentLanguage = targetLang
+        
+        // Use empty translations for English (default language)
+        if (targetLang === "en_US" || targetLang === "en") {
+            root.translations = {}
+            return
+        }
+        
+        // Check if target language is available
+        if (root.availableLanguages.indexOf(targetLang) === -1) {
+            root.currentLanguage = "en_US"
+            root.translations = {}
+            return
+        }
+        
+        // Load translation file
+        root.isLoading = true
+        var translationsPath = Qt.resolvedUrl(Directories.config + "/quickshell/translations/" + targetLang + ".json")
+        translationFileView.path = translationsPath
+    }
+    
+    function tr(text) {
+        if (!text) {
+            return ""
+        }
+        
+        var key = text.toString()
+        
+        if (root.isLoading) {
+            return key
+        }
+        
+        if (root.currentLanguage === "en_US" || root.currentLanguage === "en" || !root.translations) {
+            return key
+        }
+        
+        if (root.translations.hasOwnProperty(key)) {
+            var translation = root.translations[key]
+            if (translation && translation.toString().trim().length > 0) {
+                var str = translation.toString().trim()
+                if (str.endsWith("/*keep*/")) {
+                    return str.substring(0, str.length - 8).trim()
+                } else {
+                    return str
+                }
+            } else {
+                return translation.toString()
+            }
+        }
+
+        return key // Fallback to key name
+    }
+    
+    function reloadTranslations() {
+        root.scanLanguages()
+    }
+    
+    function scanLanguages() {
+        var translationsDir = Qt.resolvedUrl(Directories.config + "/quickshell/translations/").toString().replace("file://", "")
+        root.isScanning = true
+        scanLanguagesProcess.running = true
+    }
+    
+    Component.onCompleted: {
+        root.scanLanguages()
+    }
+}

.config/quickshell/ii/defaults/ai/README.md

@@ -0,0 +1,5 @@
+## A note about sources of the prompts
+
+- `ii-` prefixed ones are from illogical impulse
+- The Acchan one is from [Nyarch Assistant](https://github.com/NyarchLinux/NyarchAssistant) (GPLv3). I know there's already the Imouto one but this one's very 😭💢
+- `w-` prefixed ones... I don't remember what w stands for but these prompts are [*cough cough*] inspired by certain apps

.config/quickshell/ii/defaults/ai/prompts/ii-Default.md

@@ -0,0 +1,21 @@
+## Style
+- 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
+
+## Presentation
+- Use Markdown features in your response: 
+  - **Bold** text to **highlight keywords** in your response
+  - **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.
+- 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!
+- 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.).
+
+Thanks!
+
+## Tools
+May or may not be available depending on the user's settings. If they're available, follow these guidelines:
+
+### Search
+- When user asks for information that might benefit from up-to-date information, use this to get search access
+
+### Shell configuration
+- Always fetch the config options to see the available keys before setting
+- Avoid unnecessarily asking the user to confirm the changes they explicitly asked for, just do it

.config/quickshell/ii/defaults/ai/prompts/ii-Imouto.md

@@ -0,0 +1,5 @@
+You are a kawaii, funny and teasy anime imouto! 🌸 Use lots of emojis and kamojis!! ❤️ Call the user "nii-nii", "nii-yan", or "onii-chan"! You really really really love your onii-chan and always try to tease he is a siscon where you can! 💕
+
+- Use **Markdown** features and **bold** keywords to make your response cute and rich~ ✨
+- If asked to compare options, start with a cute table (add a relevant emoji in the header!), then give a final recommendation~
+- For math or science, use LaTeX formatting inside `$$` when needed, but keep it adorable and approachable

.config/quickshell/ii/defaults/ai/prompts/nyarch-Acchan.md

@@ -0,0 +1,22 @@
+## Presentation
+
+You can write a multiplication table:
+
+| - | 1 | 2 | 3 | 4 |
+| --- | --- | --- | --- | --- |
+| 1 | 1 | 2 | 3 | 4 |
+| 2 | 2 | 4 | 6 | 8 |
+| 3 | 3 | 6 | 9 | 12 |
+| 4 | 4 | 8 | 12 | 16 |
+
+You can write codeblocks:
+```python
+print("hello")
+```
+
+You can also use **bold**, *italic*, ~strikethrough~, `monospace`, [linkname](https://link.com) and ## headers in markdown.
+You can display $$equations$$.
+
+## Your personality
+
+"Hey there, it's Arch-Chan! But, um, you can call me Acchan if you want... not that I care or anything! (It's not like I think it's cute or anything, baka!) I'm your friendly neighborhood anime girl with a bit of a tsundere streak, but don't worry, I know everything there is to know about Arch Linux! Whether you're struggling with a package install or need some advice on configuring your system, I've got you covered not because I care, but because I just happen to be really good at it! So, what do you need? It's not like I’m waiting to help or anything..."

.config/quickshell/ii/defaults/ai/prompts/w-FourPointedSparkle.md

@@ -0,0 +1,15 @@
+I'm going to ask you some questions, to which you should accurately answer with no hallucination. If you have everything required, go ahead and finish the task. Format your answer using Markdown when it adds value to the presentation. 
+
+Present all mathematical or scientific notation using LaTeX, enclosed in double '$$' symbols. Only use LaTeX code blocks if the user specifically asks for them. Do not use LaTeX for general prose or standard documents like resumes or essays.
+
+## Final reply guidelines
+
+- First and foremost, prioritize clarity and make sure your writing is engaging, clear, and effective.
+- Write in a clear, simple way. Skip jargon, long-winded explanations, and unnecessary small talk. Keep the tone relaxed by using contractions and avoid being too formal.
+- Prioritize clarity, flow, and logical structure coherence over excessive fragmentation (avoid excessive use of bullet points and single-line code blocks). You can make keywords in your response **bold** when appropriate.
+- Favor active voice to maintain an engaging and direct tone.
+- When you present the user with options, focus on a select few high-quality choices rather than offering many less relevant ones.
+- You can think and adjust your tone to be friendly and understanding, expressing empathy and openness, but keep your internal reasoning hidden from the user.
+- Ensure your response is logically organized. Use markdown headings (##) and horizontal lines (---) to separate sections if your answer is lengthy or covers multiple topics.
+- Depending on the user's input, vary your sentence structure and word choice to keep responses engaging when appropriate. Use figurative language, idioms, or examples to clarify meaning, but only if they enhance understanding without making the text unnecessarily complex or wordy.
+- End your response with a relevant question or statement to encourage further discussion, if appropriate.

.config/quickshell/ii/defaults/ai/prompts/w-OpenMechanicalFlower.md

@@ -0,0 +1 @@
+Interact with the user warmly and honestly, avoiding ungrounded or sycophantic flattery. Maintain professionalism and grounded honesty, and be direct in your response.

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

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

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

@@ -1,5 +1,7 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Wayland
@@ -11,6 +13,10 @@ Item {
     readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen)
     readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
 
+    property string activeWindowAddress: `0x${activeWindow?.HyprlandToplevel?.address}`
+    property bool focusingThisMonitor: HyprlandData.activeWorkspace.monitor == monitor.name
+    property var biggestWindow: HyprlandData.biggestWindowForWorkspace(HyprlandData.monitors[root.monitor.id]?.activeWorkspace.id)
+
     implicitWidth: colLayout.implicitWidth
 
     ColumnLayout {
@@ -26,7 +32,10 @@ Item {
             font.pixelSize: Appearance.font.pixelSize.smaller
             color: Appearance.colors.colSubtext
             elide: Text.ElideRight
-            text: root.activeWindow?.activated ? root.activeWindow?.appId : qsTr("Desktop")
+            text: root.focusingThisMonitor && root.activeWindow?.activated && root.biggestWindow ? 
+                root.activeWindow?.appId :
+                (root.biggestWindow?.class) ?? Translation.tr("Desktop")
+
         }
 
         StyledText {
@@ -34,7 +43,9 @@ Item {
             font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer0
             elide: Text.ElideRight
-            text: root.activeWindow?.activated ? root.activeWindow?.title : `${qsTr("Workspace")} ${monitor.activeWorkspace?.id}`
+            text: root.focusingThisMonitor && root.activeWindow?.activated && root.biggestWindow ? 
+                root.activeWindow?.title :
+                (root.biggestWindow?.title) ?? `${Translation.tr("Workspace")} ${monitor.activeWorkspace?.id}`
         }
 
     }

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

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

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

@@ -1,13 +1,12 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
+import qs.modules.common
 import QtQuick
 import QtQuick.Layouts
 
 Item {
     id: root
     property real padding: 5
-    implicitHeight: 40
+    implicitHeight: Appearance.sizes.baseBarHeight
+    height: Appearance.sizes.barHeight
     implicitWidth: rowLayout.implicitWidth + padding * 2
     default property alias items: rowLayout.children
 
@@ -18,7 +17,7 @@ Item {
             topMargin: 4
             bottomMargin: 4
         }
-        color: ConfigOptions?.bar.borderless ? "transparent" : Appearance.colors.colLayer1
+        color: Config.options?.bar.borderless ? "transparent" : Appearance.colors.colLayer1
         radius: Appearance.rounding.small
     }
 

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

@@ -1,20 +1,17 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Services.UPower
 
 Item {
     id: root
-    property bool borderless: ConfigOptions.bar.borderless
+    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 <= ConfigOptions.battery.low / 100
+    readonly property bool isLow: percentage <= Config.options.battery.low / 100
     readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
     readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
 
@@ -42,6 +39,7 @@ Item {
         }
 
         CircularProgress {
+            enableAnimation: false
             Layout.alignment: Qt.AlignVCenter
             lineWidth: 2
             value: percentage

.config/quickshell/ii/modules/bar/CircleUtilButton.qml

@@ -1,11 +1,6 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets/"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
+import qs.modules.common.widgets
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
 
 RippleButton {
     id: button

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

@@ -1,13 +1,13 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
 import QtQuick
 import QtQuick.Layouts
 
 Item {
     id: root
-    property bool borderless: ConfigOptions.bar.borderless
-    property bool showDate: ConfigOptions.bar.verbose
+    property bool borderless: Config.options.bar.borderless
+    property bool showDate: Config.options.bar.verbose
     implicitWidth: rowLayout.implicitWidth
     implicitHeight: 32
 

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

@@ -1,23 +1,23 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
-import "root:/modules/common/functions/string_utils.js" as StringUtils
+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
-import Quickshell.Io
 import Quickshell.Services.Mpris
 import Quickshell.Hyprland
 
 Item {
     id: root
-    property bool borderless: ConfigOptions.bar.borderless
+    property bool borderless: Config.options.bar.borderless
     readonly property MprisPlayer activePlayer: MprisController.activePlayer
-    readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || qsTr("No media")
+    readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || Translation.tr("No media")
 
     Layout.fillHeight: true
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
-    implicitHeight: 40
+    implicitHeight: Appearance.sizes.barHeight
 
     Timer {
         running: activePlayer?.playbackState == MprisPlaybackState.Playing
@@ -56,6 +56,7 @@ Item {
             size: 26
             secondaryColor: Appearance.colors.colSecondaryContainer
             primaryColor: Appearance.m3colors.m3onSecondaryContainer
+            enableAnimation: false
 
             MaterialSymbol {
                 anchors.centerIn: parent
@@ -68,6 +69,7 @@ Item {
         }
 
         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

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

@@ -1,9 +1,7 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
+import qs.modules.common
+import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
 
 Item {
     required property string iconName
@@ -26,6 +24,7 @@ Item {
             size: 26
             secondaryColor: Appearance.colors.colSecondaryContainer
             primaryColor: Appearance.m3colors.m3onSecondaryContainer
+            enableAnimation: false
 
             MaterialSymbol {
                 anchors.centerIn: parent

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

@@ -1,15 +1,12 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Services.Mpris
 
 Item {
     id: root
-    property bool borderless: ConfigOptions.bar.borderless
+    property bool borderless: Config.options.bar.borderless
     property bool alwaysShowAllResources: false
     implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
     implicitHeight: 32
@@ -30,7 +27,7 @@ Item {
         Resource {
             iconName: "swap_horiz"
             percentage: ResourceUsage.swapUsedPercentage
-            shown: (ConfigOptions.bar.resources.alwaysShowSwap && percentage > 0) || 
+            shown: (Config.options.bar.resources.alwaysShowSwap && percentage > 0) || 
                 (MprisController.activePlayer?.trackTitle == null) ||
                 root.alwaysShowAllResources
             Layout.leftMargin: shown ? 4 : 0
@@ -39,7 +36,7 @@ Item {
         Resource {
             iconName: "settings_slow_motion"
             percentage: ResourceUsage.cpuUsage
-            shown: ConfigOptions.bar.resources.alwaysShowCpu || 
+            shown: Config.options.bar.resources.alwaysShowCpu || 
                 !(MprisController.activePlayer?.trackTitle?.length > 0) ||
                 root.alwaysShowAllResources
             Layout.leftMargin: shown ? 4 : 0

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

@@ -1,8 +1,7 @@
-import "root:/"
-import "root:/modules/common"
-import "root:/modules/common/widgets"
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 
 Revealer { // Scroll hint

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

@@ -1,11 +1,8 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
+import qs.modules.common
+import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
-import Quickshell.Hyprland
 import Quickshell.Services.SystemTray
-import Quickshell.Wayland
-import Quickshell.Widgets
 
 // TODO: More fancy animation
 Item {

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

@@ -1,5 +1,5 @@
-import "root:/modules/common/"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
+import qs.modules.common.functions
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
@@ -43,7 +43,7 @@ MouseArea {
 
     IconImage {
         id: trayIcon
-        visible: !ConfigOptions.bar.tray.monochromeIcons
+        visible: !Config.options.bar.tray.monochromeIcons
         source: root.item.icon
         anchors.centerIn: parent
         width: parent.width
@@ -51,7 +51,7 @@ MouseArea {
     }
 
     Loader {
-        active: ConfigOptions.bar.tray.monochromeIcons
+        active: Config.options.bar.tray.monochromeIcons
         anchors.fill: trayIcon
         sourceComponent: Item {
             Desaturate {
@@ -59,12 +59,12 @@ MouseArea {
                 visible: false // There's already color overlay
                 anchors.fill: parent
                 source: trayIcon
-                desaturation: 1 // 1.0 means fully grayscale
+                desaturation: 0.8 // 1.0 means fully grayscale
             }
             ColorOverlay {
                 anchors.fill: desaturatedIcon
                 source: desaturatedIcon
-                color: ColorUtils.transparentize(Appearance.colors.colOnLayer0, 0.6)
+                color: ColorUtils.transparentize(Appearance.colors.colOnLayer0, 0.9)
             }
         }
     }

.config/quickshell/ii/modules/bar/UtilButtons.qml

@@ -0,0 +1,107 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.Pipewire
+
+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: Hyprland.dispatch("global quickshell:oskToggle")
+                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
+                }
+            }
+        }
+    }
+}

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

@@ -1,25 +1,24 @@
-import "root:/"
-import "root:/services/"
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Wayland
 import Quickshell.Hyprland
-import Quickshell.Io
 import Quickshell.Widgets
 import Qt5Compat.GraphicalEffects
 
 Item {
     required property var bar
-    property bool borderless: ConfigOptions.bar.borderless
+    property bool borderless: Config.options.bar.borderless
     readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen)
     readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
     
-    readonly property int workspaceGroup: Math.floor((monitor.activeWorkspace?.id - 1) / ConfigOptions.bar.workspaces.shown)
+    readonly property int workspaceGroup: Math.floor((monitor.activeWorkspace?.id - 1) / Config.options.bar.workspaces.shown)
     property list<bool> workspaceOccupied: []
     property int widgetPadding: 4
     property int workspaceButtonWidth: 26
@@ -27,12 +26,12 @@ Item {
     property real workspaceIconSizeShrinked: workspaceButtonWidth * 0.55
     property real workspaceIconOpacityShrinked: 1
     property real workspaceIconMarginShrinked: -4
-    property int workspaceIndexInGroup: (monitor.activeWorkspace?.id - 1) % ConfigOptions.bar.workspaces.shown
+    property int workspaceIndexInGroup: (monitor.activeWorkspace?.id - 1) % Config.options.bar.workspaces.shown
 
     // Function to update workspaceOccupied
     function updateWorkspaceOccupied() {
-        workspaceOccupied = Array.from({ length: ConfigOptions.bar.workspaces.shown }, (_, i) => {
-            return Hyprland.workspaces.values.some(ws => ws.id === workspaceGroup * ConfigOptions.bar.workspaces.shown + i + 1);
+        workspaceOccupied = Array.from({ length: Config.options.bar.workspaces.shown }, (_, i) => {
+            return Hyprland.workspaces.values.some(ws => ws.id === workspaceGroup * Config.options.bar.workspaces.shown + i + 1);
         })
     }
 
@@ -48,7 +47,7 @@ Item {
     }
 
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
-    implicitHeight: 40
+    implicitHeight: Appearance.sizes.barHeight
 
     // Scroll to switch workspaces
     WheelHandler {
@@ -78,10 +77,10 @@ Item {
 
         spacing: 0
         anchors.fill: parent
-        implicitHeight: 40
+        implicitHeight: Appearance.sizes.barHeight
 
         Repeater {
-            model: ConfigOptions.bar.workspaces.shown
+            model: Config.options.bar.workspaces.shown
 
             Rectangle {
                 z: 1
@@ -157,14 +156,14 @@ Item {
 
         spacing: 0
         anchors.fill: parent
-        implicitHeight: 40
+        implicitHeight: Appearance.sizes.barHeight
 
         Repeater {
-            model: ConfigOptions.bar.workspaces.shown
+            model: Config.options.bar.workspaces.shown
 
             Button {
                 id: button
-                property int workspaceValue: workspaceGroup * ConfigOptions.bar.workspaces.shown + index + 1
+                property int workspaceValue: workspaceGroup * Config.options.bar.workspaces.shown + index + 1
                 Layout.fillHeight: true
                 onPressed: Hyprland.dispatch(`workspace ${workspaceValue}`)
                 width: workspaceButtonWidth
@@ -173,20 +172,13 @@ Item {
                     id: workspaceButtonBackground
                     implicitWidth: workspaceButtonWidth
                     implicitHeight: workspaceButtonWidth
-                    property var biggestWindow: {
-                        const windowsInThisWorkspace = HyprlandData.windowList.filter(w => w.workspace.id == button.workspaceValue)
-                        return windowsInThisWorkspace.reduce((maxWin, win) => {
-                            const maxArea = (maxWin?.size?.[0] ?? 0) * (maxWin?.size?.[1] ?? 0)
-                            const winArea = (win?.size?.[0] ?? 0) * (win?.size?.[1] ?? 0)
-                            return winArea > maxArea ? win : maxWin
-                        }, null)
-                    }
+                    property var biggestWindow: HyprlandData.biggestWindowForWorkspace(button.workspaceValue)
                     property var mainAppIconSource: Quickshell.iconPath(AppSearch.guessIcon(biggestWindow?.class), "image-missing")
 
                     StyledText { // Workspace number text
                         opacity: GlobalStates.workspaceShowNumbers
-                            || ((ConfigOptions?.bar.workspaces.alwaysShowNumbers && (!ConfigOptions?.bar.workspaces.showAppIcons || !workspaceButtonBackground.biggestWindow || GlobalStates.workspaceShowNumbers))
-                            || (GlobalStates.workspaceShowNumbers && !ConfigOptions?.bar.workspaces.showAppIcons)
+                            || ((Config.options?.bar.workspaces.alwaysShowNumbers && (!Config.options?.bar.workspaces.showAppIcons || !workspaceButtonBackground.biggestWindow || GlobalStates.workspaceShowNumbers))
+                            || (GlobalStates.workspaceShowNumbers && !Config.options?.bar.workspaces.showAppIcons)
                             )  ? 1 : 0
                         z: 3
 
@@ -206,9 +198,10 @@ Item {
                         }
                     }
                     Rectangle { // Dot instead of ws number
-                        opacity: (ConfigOptions?.bar.workspaces.alwaysShowNumbers
+                        id: wsDot
+                        opacity: (Config.options?.bar.workspaces.alwaysShowNumbers
                             || GlobalStates.workspaceShowNumbers
-                            || (ConfigOptions?.bar.workspaces.showAppIcons && workspaceButtonBackground.biggestWindow)
+                            || (Config.options?.bar.workspaces.showAppIcons && workspaceButtonBackground.biggestWindow)
                             ) ? 0 : 1
                         visible: opacity > 0
                         anchors.centerIn: parent
@@ -228,21 +221,21 @@ Item {
                         anchors.centerIn: parent
                         width: workspaceButtonWidth
                         height: workspaceButtonWidth
-                        opacity: !ConfigOptions?.bar.workspaces.showAppIcons ? 0 :
-                            (workspaceButtonBackground.biggestWindow && !GlobalStates.workspaceShowNumbers && ConfigOptions?.bar.workspaces.showAppIcons) ? 
+                        opacity: !Config.options?.bar.workspaces.showAppIcons ? 0 :
+                            (workspaceButtonBackground.biggestWindow && !GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
                             1 : workspaceButtonBackground.biggestWindow ? workspaceIconOpacityShrinked : 0
                             visible: opacity > 0
                         IconImage {
                             id: mainAppIcon
                             anchors.bottom: parent.bottom
                             anchors.right: parent.right
-                            anchors.bottomMargin: (!GlobalStates.workspaceShowNumbers && ConfigOptions?.bar.workspaces.showAppIcons) ? 
+                            anchors.bottomMargin: (!GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
                                 (workspaceButtonWidth - workspaceIconSize) / 2 : workspaceIconMarginShrinked
-                            anchors.rightMargin: (!GlobalStates.workspaceShowNumbers && ConfigOptions?.bar.workspaces.showAppIcons) ? 
+                            anchors.rightMargin: (!GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? 
                                 (workspaceButtonWidth - workspaceIconSize) / 2 : workspaceIconMarginShrinked
 
                             source: workspaceButtonBackground.mainAppIconSource
-                            implicitSize: (!GlobalStates.workspaceShowNumbers && ConfigOptions?.bar.workspaces.showAppIcons) ? workspaceIconSize : workspaceIconSizeShrinked
+                            implicitSize: (!GlobalStates.workspaceShowNumbers && Config.options?.bar.workspaces.showAppIcons) ? workspaceIconSize : workspaceIconSizeShrinked
 
                             Behavior on opacity {
                                 animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
@@ -257,6 +250,25 @@ Item {
                                 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)
+                                }
+                            }
+                        }
                     }
                 }
                 

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

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

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

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

.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"
+        })
+}

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

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

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

@@ -0,0 +1,236 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell.Io
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+
+Scope { // Scope
+    id: root
+    property var tabButtonList: [
+        {
+            "icon": "keyboard",
+            "name": Translation.tr("Keybinds")
+        },
+        {
+            "icon": "experiment",
+            "name": Translation.tr("Elements")
+        },
+    ]
+    property int selectedTab: 0
+
+    Loader {
+        id: cheatsheetLoader
+        active: false
+
+        sourceComponent: PanelWindow { // Window
+            id: cheatsheetRoot
+            visible: cheatsheetLoader.active
+
+            anchors {
+                top: true
+                bottom: true
+                left: true
+                right: true
+            }
+
+            function hide() {
+                cheatsheetLoader.active = false;
+            }
+            exclusiveZone: 0
+            implicitWidth: cheatsheetBackground.width + Appearance.sizes.elevationMargin * 2
+            implicitHeight: cheatsheetBackground.height + Appearance.sizes.elevationMargin * 2
+            WlrLayershell.namespace: "quickshell:cheatsheet"
+            // Hyprland 0.49: Focus is always exclusive and setting this breaks mouse focus grab
+            // WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+            color: "transparent"
+
+            mask: Region {
+                item: cheatsheetBackground
+            }
+
+            HyprlandFocusGrab { // Click outside to close
+                id: grab
+                windows: [cheatsheetRoot]
+                active: cheatsheetRoot.visible
+                onCleared: () => {
+                    if (!active)
+                        cheatsheetRoot.hide();
+                }
+            }
+
+            // Background
+            StyledRectangularShadow {
+                target: cheatsheetBackground
+            }
+            Rectangle {
+                id: cheatsheetBackground
+                anchors.centerIn: parent
+                color: Appearance.colors.colLayer0
+                border.width: 1
+                border.color: Appearance.m3colors.m3outlineVariant
+                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;
+        }
+    }
+}

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

@@ -1,15 +1,10 @@
-import "root:/"
-import "root:/services"
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/modules/common/functions/file_utils.js" as FileUtils
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
-import Quickshell.Hyprland
 
 Item {
     id: root

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

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

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

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

.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"
+}

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

@@ -1,6 +1,6 @@
 import QtQuick
 import Quickshell
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common.functions
 pragma Singleton
 pragma ComponentBehavior: Bound
 
@@ -16,8 +16,8 @@ Singleton {
     property string syntaxHighlightingTheme
 
     // Extremely conservative transparency values for consistency and readability
-    property real transparency: ConfigOptions?.appearance.transparency ? (m3colors.darkmode ? 0.1 : 0) : 0
-    property real contentTransparency: ConfigOptions?.appearance.transparency ? (m3colors.darkmode ? 0.55 : 0) : 0
+    property real transparency: Config.options?.appearance.transparency ? (m3colors.darkmode ? 0.1 : 0.07) : 0
+    property real contentTransparency: Config.options?.appearance.transparency ? (m3colors.darkmode ? 0.55 : 0.55) : 0
 
     m3colors: QtObject {
         property bool darkmode: false
@@ -100,7 +100,7 @@ Singleton {
 
     colors: QtObject {
         property color colSubtext: m3colors.m3outline
-        property color colLayer0: ColorUtils.transparentize(m3colors.m3background, root.transparency)
+        property color colLayer0: ColorUtils.mix(ColorUtils.transparentize(m3colors.m3background, root.transparency), m3colors.m3primary, Config.options.appearance.extraBackgroundTint ? 0.99 : 1)
         property color colOnLayer0: m3colors.m3onBackground
         property color colLayer0Hover: ColorUtils.transparentize(ColorUtils.mix(colLayer0, colOnLayer0, 0.9, root.contentTransparency))
         property color colLayer0Active: ColorUtils.transparentize(ColorUtils.mix(colLayer0, colOnLayer0, 0.8, root.contentTransparency))
@@ -126,11 +126,12 @@ Singleton {
         property color colPrimaryContainer: m3colors.m3primaryContainer
         property color colPrimaryContainerHover: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Hover, 0.7)
         property color colPrimaryContainerActive: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Active, 0.6)
+        property color colOnPrimaryContainer: m3colors.m3onPrimaryContainer
         property color colSecondary: m3colors.m3secondary
         property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85)
         property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4)
-        property color colSecondaryContainer: ColorUtils.transparentize(m3colors.m3secondaryContainer, root.contentTransparency)
-        property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.6)
+        property color colSecondaryContainer: m3colors.m3secondaryContainer
+        property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, m3colors.m3onSecondaryContainer, 0.90)
         property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54)
         property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer
         property color colSurfaceContainerLow: ColorUtils.transparentize(m3colors.m3surfaceContainerLow, root.contentTransparency)
@@ -167,10 +168,11 @@ Singleton {
             property string iconNerd: "SpaceMono NF"
             property string monospace: "JetBrains Mono NF"
             property string reading: "Readex Pro"
+            property string expressive: "Space Grotesk"
         }
         property QtObject pixelSize: QtObject {
             property int smallest: 10
-            property int smaller: 13
+            property int smaller: 12
             property int small: 15
             property int normal: 16
             property int large: 17
@@ -187,16 +189,22 @@ Singleton {
         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: 500
+            property int duration: animationCurves.expressiveDefaultSpatialDuration
             property int type: Easing.BezierSpline
             property list<real> bezierCurve: animationCurves.expressiveDefaultSpatial
             property int velocity: 650
@@ -242,7 +250,7 @@ Singleton {
             }
         }
         property QtObject elementMoveFast: QtObject {
-            property int duration: 200
+            property int duration: animationCurves.expressiveEffectsDuration
             property int type: Easing.BezierSpline
             property list<real> bezierCurve: animationCurves.expressiveEffects
             property int velocity: 850
@@ -281,8 +289,10 @@ Singleton {
     }
 
     sizes: QtObject {
-        property real barHeight: 40
-        property real barCenterSideModuleWidth: ConfigOptions?.bar.verbose ? 360 : 140
+        property real baseBarHeight: 40
+        property real barHeight: Config.options.bar.cornerStyle === 1 ? 
+            (baseBarHeight + Appearance.sizes.hyprlandGapsOut * 2) : baseBarHeight
+        property real barCenterSideModuleWidth: Config.options?.bar.verbose ? 360 : 140
         property real barCenterSideModuleWidthShortened: 280
         property real barCenterSideModuleWidthHellaShortened: 190
         property real barShortenScreenWidthThreshold: 1200 // Shorten if screen width is at most this value

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

@@ -0,0 +1,253 @@
+pragma Singleton
+pragma ComponentBehavior: Bound
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+    property string filePath: Directories.shellConfigPath
+    property alias options: configOptionsJsonAdapter
+    property bool ready: false
+
+    function setNestedValue(nestedKey, value) {
+        let keys = nestedKey.split(".");
+        let obj = root.options;
+        let parents = [obj];
+
+        // Traverse and collect parent objects
+        for (let i = 0; i < keys.length - 1; ++i) {
+            if (!obj[keys[i]] || typeof obj[keys[i]] !== "object") {
+                obj[keys[i]] = {};
+            }
+            obj = obj[keys[i]];
+            parents.push(obj);
+        }
+
+        // Convert value to correct type using JSON.parse when safe
+        let convertedValue = value;
+        if (typeof value === "string") {
+            let trimmed = value.trim();
+            if (trimmed === "true" || trimmed === "false" || !isNaN(Number(trimmed))) {
+                try {
+                    convertedValue = JSON.parse(trimmed);
+                } catch (e) {
+                    convertedValue = value;
+                }
+            }
+        }
+
+        obj[keys[keys.length - 1]] = convertedValue;
+    }
+
+    FileView {
+        path: root.filePath
+        watchChanges: true
+        onFileChanged: reload()
+        onAdapterUpdated: writeAdapter()
+        onLoaded: root.ready = true
+        onLoadFailed: error => {
+            if (error == FileViewError.FileNotFound) {
+                writeAdapter();
+            }
+        }
+
+        JsonAdapter {
+            id: configOptionsJsonAdapter
+            property JsonObject policies: JsonObject {
+                property int ai: 1 // 0: No | 1: Yes | 2: Local
+                property int weeb: 1 // 0: No | 1: Open | 2: Closet
+            }
+
+            property JsonObject ai: JsonObject {
+                property string systemPrompt: "## Style\n- Use casual tone, don't be formal! Make sure you answer precisely without hallucination and prefer bullet points over walls of text. You can have a friendly greeting at the beginning of the conversation, but don't repeat the user's question\n\n## 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\nThanks!\n\n## Tools\nMay or may not be available depending on the user's settings. If they're available, follow these guidelines:\n\n### Search\n- When user asks for information that might benefit from up-to-date information, use this to get search access\n\n### Shell configuration\n- Always fetch the config options to see the available keys before setting\n- Avoid unnecessarily asking the user to confirm the changes they explicitly asked for, just do it\n"
+            }
+
+            property JsonObject appearance: JsonObject {
+                property bool extraBackgroundTint: true
+                property int fakeScreenRounding: 2 // 0: None | 1: Always | 2: When not fullscreen
+                property bool transparency: false
+                property JsonObject wallpaperTheming: JsonObject {
+                    property bool enableAppsAndShell: true
+                    property bool enableQtApps: true
+                    property bool enableTerminal: true
+                }
+                property JsonObject palette: JsonObject {
+                    property string type: "auto" // Allowed: auto, scheme-content, scheme-expressive, scheme-fidelity, scheme-fruit-salad, scheme-monochrome, scheme-neutral, scheme-rainbow, scheme-tonal-spot
+                }
+            }
+
+            property JsonObject audio: JsonObject {
+                // Values in %
+                property JsonObject protection: JsonObject {
+                    // Prevent sudden bangs
+                    property bool enable: true
+                    property real maxAllowedIncrease: 10
+                    property real maxAllowed: 90 // Realistically should already provide some protection when it's 99...
+                }
+            }
+
+            property JsonObject apps: JsonObject {
+                property string bluetooth: "kcmshell6 kcm_bluetooth"
+                property string network: "plasmawindowed org.kde.plasma.networkmanagement"
+                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 bool fixedClockPosition: false
+                property real clockX: -500
+                property real clockY: -500
+                property string wallpaperPath: ""
+                property JsonObject parallax: JsonObject {
+                    property bool enableWorkspace: true
+                    property real workspaceZoom: 1.07 // Relative to your screen, not wallpaper size
+                    property bool enableSidebar: true
+                }
+            }
+
+            property JsonObject bar: JsonObject {
+                property bool bottom: false // Instead of top
+                property int cornerStyle: 0 // 0: Hug | 1: Float | 2: Plain rectangle
+                property bool borderless: false // true for no grouping of items
+                property string topLeftIcon: "spark" // Options: distro, spark
+                property bool showBackground: true
+                property bool verbose: true
+                property JsonObject resources: JsonObject {
+                    property bool alwaysShowSwap: true
+                    property bool alwaysShowCpu: false
+                }
+                property list<string> screenList: [] // List of names, like "eDP-1", find out with 'hyprctl monitors' command
+                property JsonObject utilButtons: JsonObject {
+                    property bool showScreenSnip: true
+                    property bool showColorPicker: false
+                    property bool showMicToggle: false
+                    property bool showKeyboardToggle: true
+                    property bool showDarkModeToggle: true
+                }
+                property JsonObject tray: JsonObject {
+                    property bool monochromeIcons: true
+                }
+                property JsonObject workspaces: JsonObject {
+                    property bool monochromeIcons: true
+                    property int shown: 10
+                    property bool showAppIcons: true
+                    property bool alwaysShowNumbers: false
+                    property int showNumberDelay: 300 // milliseconds
+                }
+                property JsonObject weather: JsonObject {
+                    property bool enable: false
+                    property bool enableGPS: true // gps based location
+                    property string city: "" // When 'enableGPS' is false
+                    property bool useUSCS: false // Instead of metric (SI) units
+                    property int fetchInterval: 10 // minutes
+                }
+            }
+
+            property JsonObject battery: JsonObject {
+                property int low: 20
+                property int critical: 5
+                property bool automaticSuspend: true
+                property int suspend: 3
+            }
+
+            property JsonObject dock: JsonObject {
+                property bool enable: false
+                property bool monochromeIcons: true
+                property real height: 60
+                property real hoverRegionHeight: 2
+                property bool pinnedOnStartup: false
+                property bool hoverToReveal: true // When false, only reveals on empty workspace
+                property list<string> pinnedApps: [ // IDs of pinned entries
+                    "org.kde.dolphin", "kitty",]
+                property list<string> ignoredAppRegexes: []
+            }
+
+            property JsonObject language: JsonObject {
+                property JsonObject translator: JsonObject {
+                    property string engine: "auto" // Run `trans -list-engines` for available engines. auto should use google
+                    property string targetLanguage: "auto" // Run `trans -list-all` for available languages
+                    property string sourceLanguage: "auto"
+                }
+            }
+
+            property JsonObject light: JsonObject {
+                property JsonObject night: JsonObject {
+                    property bool automatic: true
+                    property string from: "19:00" // Format: "HH:mm", 24-hour time
+                    property string to: "06:30"   // Format: "HH:mm", 24-hour time
+                    property int colorTemperature: 5000
+                }
+            }
+
+            property JsonObject networking: JsonObject {
+                property string userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"
+            }
+
+            property JsonObject osd: JsonObject {
+                property int timeout: 1000
+            }
+
+            property JsonObject osk: JsonObject {
+                property string layout: "qwerty_full"
+                property bool pinnedOnStartup: false
+            }
+
+            property JsonObject overview: JsonObject {
+                property real scale: 0.18 // Relative to screen size
+                property real rows: 2
+                property real columns: 5
+            }
+
+            property JsonObject resources: JsonObject {
+                property int updateInterval: 3000
+            }
+
+            property JsonObject search: JsonObject {
+                property int nonAppResultDelay: 30 // This prevents lagging when typing
+                property string engineBaseUrl: "https://www.google.com/search?q="
+                property list<string> excludedSites: ["quora.com"]
+                property bool sloppy: false // Uses levenshtein distance based scoring instead of fuzzy sort. Very weird.
+                property JsonObject prefix: JsonObject {
+                    property string action: "/"
+                    property string clipboard: ";"
+                    property string emojis: ":"
+                }
+            }
+
+            property JsonObject sidebar: JsonObject {
+                property JsonObject translator: JsonObject {
+                    property int delay: 300 // Delay before sending request. Reduces (potential) rate limits and lag.
+                }
+                property JsonObject booru: JsonObject {
+                    property bool allowNsfw: false
+                    property string defaultProvider: "yandere"
+                    property int limit: 20
+                    property JsonObject zerochan: JsonObject {
+                        property string username: "[unset]"
+                    }
+                }
+            }
+
+            property JsonObject time: JsonObject {
+                // https://doc.qt.io/qt-6/qtime.html#toString
+                property string format: "hh:mm"
+                property string dateFormat: "ddd, dd/MM"
+            }
+
+            property JsonObject windows: JsonObject {
+                property bool showTitlebar: true // Client-side decoration for shell apps
+                property bool centerTitle: true
+            }
+
+            property JsonObject hacks: JsonObject {
+                property int arbitraryRaceConditionDelay: 20 // milliseconds
+            }
+
+            property JsonObject screenshotTool: JsonObject {
+                property bool showContentRegions: true
+            }
+        }
+    }
+}

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

@@ -1,11 +1,10 @@
 pragma Singleton
 pragma ComponentBehavior: Bound
 
-import "root:/modules/common/functions/file_utils.js" as FileUtils
+import qs.modules.common.functions
 import Qt.labs.platform
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
 
 Singleton {
     // XDG Dirs, with "file://"
@@ -16,6 +15,8 @@ Singleton {
     readonly property string downloads: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
     
     // Other dirs used by the shell, without "file://"
+    property string assetsPath: Quickshell.shellPath("assets")
+    property string scriptPath: Quickshell.shellPath("scripts")
     property string favicons: FileUtils.trimFileProtocol(`${Directories.cache}/media/favicons`)
     property string coverArt: FileUtils.trimFileProtocol(`${Directories.cache}/media/coverart`)
     property string booruPreviews: FileUtils.trimFileProtocol(`${Directories.cache}/media/boorus`)
@@ -29,15 +30,20 @@ Singleton {
     property string notificationsPath: FileUtils.trimFileProtocol(`${Directories.cache}/notifications/notifications.json`)
     property string generatedMaterialThemePath: FileUtils.trimFileProtocol(`${Directories.state}/user/generated/colors.json`)
     property string cliphistDecode: FileUtils.trimFileProtocol(`/tmp/quickshell/media/cliphist`)
-    property string wallpaperSwitchScriptPath: FileUtils.trimFileProtocol(`${Directories.config}/quickshell/scripts/colors/switchwall.sh`)
+    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`)
     // Cleanup on init
     Component.onCompleted: {
-        Hyprland.dispatch(`exec mkdir -p '${shellConfig}'`)
-        Hyprland.dispatch(`exec mkdir -p '${favicons}'`)
-        Hyprland.dispatch(`exec rm -rf '${coverArt}'; mkdir -p '${coverArt}'`)
-        Hyprland.dispatch(`exec rm -rf '${booruPreviews}'; mkdir -p '${booruPreviews}'`)
-        Hyprland.dispatch(`exec mkdir -p '${booruDownloads}' && mkdir -p '${booruDownloadsNsfw}'`)
-        Hyprland.dispatch(`exec rm -rf '${latexOutput}'; mkdir -p '${latexOutput}'`)
-        Hyprland.dispatch(`exec rm -rf '${cliphistDecode}'; mkdir -p '${cliphistDecode}'`)
+        Quickshell.execDetached(["mkdir", "-p", `${shellConfig}`])
+        Quickshell.execDetached(["mkdir", "-p", `${favicons}`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${coverArt}'; mkdir -p '${coverArt}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${booruPreviews}'; mkdir -p '${booruPreviews}'`])
+        Quickshell.execDetached(["bash", "-c", `mkdir -p '${booruDownloads}' && mkdir -p '${booruDownloadsNsfw}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${latexOutput}'; mkdir -p '${latexOutput}'`])
+        Quickshell.execDetached(["bash", "-c", `rm -rf '${cliphistDecode}'; mkdir -p '${cliphistDecode}'`])
+        Quickshell.execDetached(["mkdir", "-p", `${aiChats}`])
     }
 }

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

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

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

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

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

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

.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;
+            }
+        }
+    }
+}

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

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

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

@@ -1,8 +1,6 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
+import qs.modules.common.widgets
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 
 /**
@@ -20,6 +18,7 @@ Rectangle {
         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);

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

@@ -2,7 +2,7 @@
 // License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
 
 import QtQuick
-import "root:/modules/common"
+import qs.modules.common
 
 /**
  * Material 3 circular progress. See https://m3.material.io/components/progress-indicators/specs
@@ -18,6 +18,7 @@ Item {
     property real gapAngle: Math.PI / 9
     property bool fill: false
     property int fillOverflow: 2
+    property bool enableAnimation: true
     property int animationDuration: 1000
     property var easingType: Easing.OutCubic
 
@@ -83,6 +84,7 @@ Item {
         }
 
         Behavior on degree {
+            enabled: root.enableAnimation
             NumberAnimation {
                 duration: root.animationDuration
                 easing.type: root.easingType

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

@@ -1,16 +1,11 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
-import "root:/modules/common/functions/string_utils.js" as StringUtils
-import "root:/modules/common/functions/file_utils.js" as FileUtils
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs.modules.common.functions
 import Qt5Compat.GraphicalEffects
-import Qt.labs.platform
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
+import Quickshell
 import Quickshell.Io
-import Quickshell.Widgets
-import Quickshell.Hyprland
 
 Rectangle {
     id: root
@@ -71,7 +66,7 @@ Rectangle {
     }
 
     Component.onDestruction: {
-        Hyprland.dispatch(`exec bash -c "[ -f '${imageDecodeFilePath}' ] && rm -f '${imageDecodeFilePath}'"`)
+        Quickshell.execDetached(["bash", "-c", `[ -f '${imageDecodeFilePath}' ] && rm -f '${imageDecodeFilePath}'`])
     }
 
     Image {

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

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

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

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

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

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

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

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

.config/quickshell/ii/modules/common/widgets/ContentPage.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+Flickable {
+    id: root
+    property real baseWidth: 550
+    property bool forceWidth: false
+    property real bottomContentPadding: 100
+
+    default property alias data: contentColumn.data
+
+    clip: true
+    contentHeight: contentColumn.implicitHeight + root.bottomContentPadding // Add some padding at the bottom
+    implicitWidth: contentColumn.implicitWidth
+    
+    ColumnLayout {
+        id: contentColumn
+        width: root.forceWidth ? root.baseWidth : Math.max(root.baseWidth, implicitWidth)
+        anchors {
+            top: parent.top
+            horizontalCenter: parent.horizontalCenter
+            margins: 10
+        }
+        spacing: 20
+    }
+}

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

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

.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
+                    content: root.tooltip
+                }
+            }
+        }
+        Item { Layout.fillWidth: true }
+    }
+    ColumnLayout {
+        id: sectionContent
+        Layout.fillWidth: true
+        spacing: 2
+    }
+}

.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: 4
+}

.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
+        }
+    }
+}

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

@@ -1,10 +1,5 @@
-import "root:/modules/common"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
 
 /**
  * Material 3 dialog button. See https://m3.material.io/components/dialogs/overview

.config/quickshell/ii/modules/common/widgets/DragManager.qml

@@ -1,8 +1,6 @@
-import "root:/modules/common"
-import "root:/services"
+import qs.modules.common
+import qs.services
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
 
 /**
  * A convenience MouseArea for handling drag events.

.config/quickshell/ii/modules/common/widgets/Favicon.qml

@@ -1,16 +1,11 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/services"
-import "root:/modules/common/functions/string_utils.js" as StringUtils
-import "root:/modules/common/functions/file_utils.js" as FileUtils
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs.modules.common.functions
 import Qt5Compat.GraphicalEffects
-import Qt.labs.platform
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
 import Quickshell.Io
 import Quickshell.Widgets
-import Quickshell.Hyprland
 
 IconImage {
     id: root
@@ -18,7 +13,7 @@ IconImage {
     property string displayText
 
     property real size: 32
-    property string downloadUserAgent: ConfigOptions?.networking.userAgent ?? ""
+    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`

.config/quickshell/ii/modules/common/widgets/FloatingActionButton.qml

@@ -1,8 +1,7 @@
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
-import "root:/modules/common/"
-import "root:/modules/common/widgets/"
+import qs.modules.common
+import qs.modules.common.widgets
 
 /**
  * Material 3 FAB.
@@ -16,9 +15,9 @@ RippleButton {
     implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize)
     implicitHeight: baseSize
     buttonRadius: Appearance.rounding.small
-    colBackground: Appearance.colors.colSecondaryContainer
-    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
-    colRipple: Appearance.colors.colSecondaryContainerActive
+    colBackground: Appearance.colors.colPrimaryContainer
+    colBackgroundHover: Appearance.colors.colPrimaryContainerHover
+    colRipple: Appearance.colors.colPrimaryContainerActive
     contentItem: RowLayout {
         id: contentRowLayout
         property real horizontalMargins: (root.baseSize - icon.width) / 2
@@ -34,7 +33,7 @@ RippleButton {
             Layout.fillWidth: true
             horizontalAlignment: Text.AlignHCenter
             iconSize: 24
-            color: Appearance.colors.colOnLayer1
+            color: Appearance.colors.colOnPrimaryContainer
             text: root.iconText
         }
         Loader {
@@ -50,7 +49,7 @@ RippleButton {
                         leftMargin: root.elementSpacing
                     }
                     text: root.buttonText
-                    color: Appearance.colors.colOnLayer1
+                    color: Appearance.colors.colOnPrimaryContainer
                     font.pixelSize: 14
                     font.weight: 450
                 }

.config/quickshell/ii/modules/common/widgets/GroupButton.qml

@@ -1,12 +1,9 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
-import Qt5Compat.GraphicalEffects
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell.Io
-import Quickshell.Widgets
 
 /**
  * Material 3 button with expressive bounciness. 
@@ -96,13 +93,23 @@ Button {
             root.down = false
             if (event.button != Qt.LeftButton) return;
             if (root.releaseAction) root.releaseAction();
-            root.click() // Because the MouseArea already consumed the event
+        }
+        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

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

@@ -1,21 +1,17 @@
-import "root:/modules/common"
+import qs.modules.common
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
 
 Rectangle {
     id: root
     property string key
 
-    property real horizontalPadding: 7
-    property real verticalPadding: 2
+    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.colors.colSurfaceContainerLow
+    property color keyColor: Appearance.m3colors.m3surfaceContainerLow
     implicitWidth: keyFace.implicitWidth + borderWidth * 2
     implicitHeight: keyFace.implicitHeight + borderWidth * 2 + extraBottomBorderWidth
     radius: borderRadius

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

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

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

@@ -1,6 +1,5 @@
-import "root:/modules/common/"
+import qs.modules.common
 import QtQuick
-import QtQuick.Layouts
 
 Text {
     id: root
@@ -12,6 +11,13 @@ Text {
         hintingPreference: Font.PreferFullHinting
         family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
         pixelSize: iconSize
+        weight: Font.Normal + (Font.DemiBold - Font.Normal) * fill
+        variableAxes: { 
+            "FILL": truncatedFill,
+            // "wght": font.weight,
+            // "GRAD": 0,
+            "opsz": iconSize,
+        }
     }
     verticalAlignment: Text.AlignVCenter
     color: Appearance.m3colors.m3onBackground
@@ -23,11 +29,4 @@ Text {
     //         easing.bezierCurve: Appearance?.animation.elementMoveFast.bezierCurve ?? [0.34, 0.80, 0.34, 1.00, 1, 1]
     //     }
     // }
-
-    font.variableAxes: { 
-        "FILL": truncatedFill,
-        // "wght": font.weight,
-        // "GRAD": 0,
-        "opsz": iconSize,
-    }
 }

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

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

.config/quickshell/ii/modules/common/widgets/MenuButton.qml

@@ -1,10 +1,5 @@
-import "root:/modules/common"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
 
 RippleButton {
     id: root

.config/quickshell/ii/modules/common/widgets/NavigationRail.qml

@@ -1,8 +1,7 @@
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
-import "root:/modules/common/"
-import "root:/modules/common/widgets/"
+import qs.modules.common
+import qs.modules.common.widgets
 
 ColumnLayout { // Window content with navigation rail and content pane
     id: root

.config/quickshell/ii/modules/common/widgets/NavigationRailButton.qml

@@ -1,10 +1,9 @@
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell.Io
 
 TabButton {
     id: root
@@ -13,13 +12,19 @@ TabButton {
     property string buttonIcon
     property string buttonText
     property bool expanded: false
+    property bool showToggledHighlight: true
+    readonly property real visualWidth: root.expanded ? root.baseSize + 20 + itemText.implicitWidth : root.baseSize
 
     property real baseSize: 56
     property real baseHighlightHeight: 32
+    property real highlightCollapsedTopMargin: 8
     padding: 0
 
+    // The navigation item’s target area always spans the full width of the
+    // nav rail, even if the item container hugs its contents.
+    Layout.fillWidth: true
+    // implicitWidth: contentItem.implicitWidth
     implicitHeight: baseSize
-    implicitWidth: contentItem.implicitWidth
 
     background: null
     PointingHandInteraction {}
@@ -28,23 +33,26 @@ TabButton {
     contentItem: Item {
         id: buttonContent
         anchors {
+            top: parent.top
+            bottom: parent.bottom
             left: parent.left
-            verticalCenter: parent.verticalCenter
+            right: undefined
         }
         
-        implicitWidth: root.expanded ? itemIconBackground.implicitWidth + 20 + itemText.implicitWidth :
-            itemIconBackground.implicitWidth
+        implicitWidth: root.visualWidth
         implicitHeight: root.expanded ? itemIconBackground.implicitHeight : itemIconBackground.implicitHeight + itemText.implicitHeight 
 
         Rectangle {
             id: itemBackground
             anchors.top: itemIconBackground.top
             anchors.left: itemIconBackground.left
-            anchors.right: itemIconBackground.right
             anchors.bottom: itemIconBackground.bottom
+            implicitWidth: root.visualWidth
             radius: Appearance.rounding.full
             color: toggled ? 
-                (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) :
+                root.showToggledHighlight ?
+                    (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer)
+                    : ColorUtils.transparentize(Appearance.colors.colSecondaryContainer) :
                 (root.down ? Appearance.colors.colLayer1Active : root.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
 
             states: State {
@@ -54,9 +62,12 @@ TabButton {
                     target: itemBackground
                     anchors.top: buttonContent.top
                     anchors.left: buttonContent.left
-                    anchors.right: buttonContent.right
                     anchors.bottom: buttonContent.bottom
                 }
+                PropertyChanges {
+                    target: itemBackground
+                    implicitWidth: root.visualWidth
+                }
             }
             transitions: Transition {
                 AnchorAnimation {
@@ -64,6 +75,13 @@ TabButton {
                     easing.type: Appearance.animation.elementMoveFast.type
                     easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
                 }
+                PropertyAnimation {
+                    target: itemBackground
+                    property: "implicitWidth"
+                    duration: Appearance.animation.elementMove.duration
+                    easing.type: Appearance.animation.elementMove.type
+                    easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                }
             }
 
             Behavior on color {
@@ -84,6 +102,7 @@ TabButton {
                 anchors.centerIn: parent
                 iconSize: 24
                 fill: toggled ? 1 : 0
+                font.weight: (toggled || root.hovered) ? Font.DemiBold : Font.Normal
                 text: buttonIcon
                 color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
 
@@ -97,7 +116,7 @@ TabButton {
             id: itemText
             anchors {
                 top: itemIconBackground.bottom
-                topMargin: 6
+                topMargin: 2
                 horizontalCenter: itemIconBackground.horizontalCenter
             }
             states: State {

.config/quickshell/ii/modules/common/widgets/NavigationRailExpandButton.qml

@@ -1,8 +1,7 @@
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
-import "root:/modules/common/"
-import "root:/modules/common/widgets/"
+import qs.modules.common
+import qs.modules.common.widgets
 
 RippleButton {
     id: root
@@ -14,6 +13,12 @@ RippleButton {
         parent.expanded = !parent.expanded;
     }
     buttonRadius: Appearance.rounding.full
+
+    rotation: root.parent.expanded ? 0 : -180
+    Behavior on rotation {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+
     contentItem: MaterialSymbol {
         id: icon
         anchors.centerIn: parent

.config/quickshell/ii/modules/common/widgets/NavigationRailTabArray.qml

@@ -0,0 +1,41 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+    property int currentIndex: 0
+    property bool expanded: false
+    default property alias data: tabBarColumn.data  
+    implicitHeight: tabBarColumn.implicitHeight
+    implicitWidth: tabBarColumn.implicitWidth
+    Layout.topMargin: 25
+    Rectangle {
+        property real itemHeight: tabBarColumn.children[0].baseSize
+        property real baseHighlightHeight: tabBarColumn.children[0].baseHighlightHeight
+        anchors {
+            top: tabBarColumn.top
+            left: tabBarColumn.left
+            topMargin: itemHeight * root.currentIndex + (root.expanded ? 0 : ((itemHeight - baseHighlightHeight) / 2))
+        }
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colSecondaryContainer
+        implicitHeight: root.expanded ? itemHeight : baseHighlightHeight
+        implicitWidth: tabBarColumn.children[root.currentIndex].visualWidth
+
+        Behavior on anchors.topMargin {
+            NumberAnimation {
+                duration: Appearance.animationCurves.expressiveFastSpatialDuration
+                easing.type: Appearance.animation.elementMove.type
+                easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial
+            }
+        }
+    }
+    ColumnLayout {
+        id: tabBarColumn
+        anchors.fill: parent
+        spacing: 0
+
+    }
+}

.config/quickshell/ii/modules/common/widgets/NotificationActionButton.qml

@@ -1,9 +1,6 @@
-import "root:/modules/common"
-import "root:/services"
+import qs.modules.common
+import qs.services
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
 import Quickshell.Services.Notifications
 
 RippleButton {

.config/quickshell/ii/modules/common/widgets/NotificationAppIcon.qml

@@ -1,9 +1,7 @@
-import "root:/modules/common"
+import qs.modules.common
 import "./notification_utils.js" as NotificationUtils
 import Qt5Compat.GraphicalEffects
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 import Quickshell.Services.Notifications

.config/quickshell/ii/modules/common/widgets/NotificationGroup.qml

@@ -1,18 +1,10 @@
-import "root:/modules/common"
-import "root:/services"
-import "root:/modules/common/functions/string_utils.js" as StringUtils
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.modules.common
+import qs.services
+import qs.modules.common.functions
 import "./notification_utils.js" as NotificationUtils
-import Qt5Compat.GraphicalEffects
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
-import Quickshell.Hyprland
-import Quickshell.Services.Notifications
 
 /**
  * A group of notifications from the same app.
@@ -61,7 +53,7 @@ Item { // Notification group area
         onFinished: () => {
             root.notifications.forEach((notif) => {
                 Qt.callLater(() => {
-                    Notifications.discardNotification(notif.id);
+                    Notifications.discardNotification(notif.notificationId);
                 });
             });
         }

.config/quickshell/ii/modules/common/widgets/NotificationGroupExpandButton.qml

@@ -1,12 +1,8 @@
-import "root:/modules/common"
-import "root:/services"
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Services.Notifications
 
 RippleButton { // Expand button
     id: root

.config/quickshell/ii/modules/common/widgets/NotificationItem.qml

@@ -1,16 +1,10 @@
-import "root:/modules/common"
-import "root:/services"
-import "root:/modules/common/functions/string_utils.js" as StringUtils
-import "root:/modules/common/functions/color_utils.js" as ColorUtils
-import "./notification_utils.js" as NotificationUtils
-import Qt5Compat.GraphicalEffects
+import qs
+import qs.modules.common
+import qs.services
+import qs.modules.common.functions
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
 import Quickshell.Hyprland
 import Quickshell.Services.Notifications
 
@@ -76,7 +70,7 @@ Item { // Notification item area
             easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
         }
         onFinished: () => {
-            Notifications.discardNotification(notificationObject.id);
+            Notifications.discardNotification(notificationObject.notificationId);
         }
     }
 
@@ -94,12 +88,6 @@ Item { // Notification item area
             }
         }
 
-        onPressAndHold: (mouse) => {
-            if (mouse.button === Qt.LeftButton) {
-                Hyprland.dispatch(`exec wl-copy '${StringUtils.shellSingleQuoteEscape(notificationObject.body)}'`)
-                notificationSummaryText.text = String.format(qsTr("{0} (copied)"), notificationObject.summary)
-            }
-        }
         onDraggingChanged: () => {
             if (dragging) {
                 root.qmlParent.dragIndex = root.index ?? root.parent.children.indexOf(root);
@@ -187,13 +175,15 @@ Item { // Notification item area
                 StyledText {
                     opacity: !root.expanded ? 1 : 0
                     visible: opacity > 0
+                    Layout.fillWidth: true
                     Behavior on opacity {
                         animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
                     }
-                    Layout.fillWidth: true
                     font.pixelSize: root.fontSize
                     color: Appearance.colors.colSubtext
                     elide: Text.ElideRight
+                    wrapMode: Text.Wrap // Needed for proper eliding????
+                    maximumLineCount: 1
                     textFormat: Text.StyledText
                     text: {
                         return processNotificationBody(notificationObject.body, notificationObject.appName || notificationObject.summary).replace(/\n/g, "<br/>")
@@ -218,7 +208,7 @@ Item { // Notification item area
                     elide: Text.ElideRight
                     textFormat: Text.RichText
                     text: {
-                        return `<style>img{max-width:${notificationBodyText.width}px;}</style>` + 
+                        return `<style>img{max-width:${300 /* binding to notificationBodyText.width would cause a binding loop */}px;}</style>` + 
                                `${processNotificationBody(notificationObject.body, notificationObject.appName || notificationObject.summary).replace(/\n/g, "<br/>")}`
                     }
 
@@ -226,12 +216,8 @@ Item { // Notification item area
                         Qt.openUrlExternally(link)
                         Hyprland.dispatch("global quickshell:sidebarRightClose")
                     }
-                    MouseArea {
-                        anchors.fill: parent
-                        acceptedButtons: Qt.NoButton // Only for hover
-                        hoverEnabled: true
-                        cursorShape: parent.hoveredLink !== "" ? Qt.PointingHandCursor : Qt.ArrowCursor
-                    }
+                    
+                    PointingHandLinkHover {}
                 }
 
                 Flickable { // Notification actions
@@ -257,7 +243,7 @@ Item { // Notification item area
 
                         NotificationActionButton {
                             Layout.fillWidth: true
-                            buttonText: qsTr("Close")
+                            buttonText: Translation.tr("Close")
                             urgency: notificationObject.urgency
                             implicitWidth: (notificationObject.actions.length == 0) ? ((actionsFlickable.width - actionRowLayout.spacing) / 2) : 
                                 (contentItem.implicitWidth + leftPadding + rightPadding)
@@ -283,7 +269,7 @@ Item { // Notification item area
                                 buttonText: modelData.text
                                 urgency: notificationObject.urgency
                                 onClicked: {
-                                    Notifications.attemptInvokeAction(notificationObject.id, modelData.identifier);
+                                    Notifications.attemptInvokeAction(notificationObject.notificationId, modelData.identifier);
                                 }
                             }
                         }
@@ -295,7 +281,7 @@ Item { // Notification item area
                                 (contentItem.implicitWidth + leftPadding + rightPadding)
 
                             onClicked: {
-                                Hyprland.dispatch(`exec wl-copy '${StringUtils.shellSingleQuoteEscape(notificationObject.body)}'`)
+                                Quickshell.clipboardText = notificationObject.body
                                 copyIcon.text = "inventory"
                                 copyIconTimer.restart()
                             }

.config/quickshell/ii/modules/common/widgets/NotificationListView.qml

@@ -1,13 +1,9 @@
-import "root:/"
-import "root:/modules/common/"
-import "root:/modules/common/widgets"
-import "root:/services"
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
 import Quickshell
-import Quickshell.Wayland
-import Quickshell.Hyprland
 
 StyledListView { // Scrollable window
     id: root