fixes

Modules/ConfigLoader.qml

@@ -1,131 +1,82 @@
+pragma Singleton
+
 import QtCore
 import QtQuick
 import Quickshell.Io
+import Quickshell
 
-QtObject {
-    id: configLoader
-    property string gifFolder: ""
-    property bool loaded: false
-    property string configDir: StandardPaths.homeLocation + "/.config/QTPet"
-    property string configPath: configDir + "/config.json"
+Singleton {
+	id: root
 
-    signal folderChanged()
+	property alias gifFolder: adapter.gifFolder
+	property alias ready: root.loaded
 
-    // Process to check/create directory
-    property var dirCheckProcess: Process {
-        id: dirCheck
-        running: false
-        command: ["test", "-d", configLoader.configDir]
+	property bool loaded: false
+	property string configDir: Quickshell.env("HOME") + "/.config/QtDesktopPet"
+	property string configPath: configDir + "/config.json"
 
-        onExited: {
-            if (exitCode !== 0) {
-                // Directory doesn't exist, create it
-                dirCreateProcess.running = true
-            } else {
-                // Directory exists, check for config file
-                fileCheckProcess.running = true
-            }
-        }
-    }
+	signal folderChanged()
 
-    // Process to create directory
-    property var dirCreateProcess: Process {
-        id: dirCreate
-        running: false
-        command: ["mkdir", "-p", configLoader.configDir]
+	Process {
+		id: dirCheck
+		running: true
+		command: ["test", "-d", root.configDir]
 
-        onExited: {
-            console.log("Created config directory:", configLoader.configDir)
-            // After creating directory, create default config
-            fileCreateProcess.running = true
-        }
-    }
+		onExited: function( exitCode ) {
+			if (exitCode !== 0) {
+				dirCreate.running = true
+			} else {
+				fileCheck.running = true
+			}
+		}
+	}
 
-    // Process to check if config file exists
-    property var fileCheckProcess: Process {
-        id: fileCheck
-        running: false
-        command: ["test", "-f", configLoader.configPath]
+	Process {
+		id: dirCreate
+		running: false
+		command: ["mkdir", "-p", root.configDir]
 
-        onExited: {
-            if (exitCode !== 0) {
-                // File doesn't exist, create default config
-                fileCreateProcess.running = true
-            } else {
-                // File exists, load it
-                loadConfig()
-            }
-        }
-    }
+		onExited: function(): void {
+			console.log("Created config directory:", root.configDir)
+			fileCreate.running = true
+		}
+	}
 
-    // Process to create default config file
-    property var fileCreateProcess: Process {
-        id: fileCreate
-        running: false
-        command: ["sh", "-c", "echo '{\"gifFolder\": \"$HOME/.config/quickshell/QtDesktopPet/Gifs\"}' > " + configLoader.configPath]
+	Process {
+		id: fileCheck
+		running: false
+		command: ["test", "-f", root.configPath]
 
-        onExited: {
-            console.log("Created default config file:", configLoader.configPath)
-            loadConfig()
-        }
-    }
+		onExited: function( exitCode ): void {
+			if (exitCode !== 0) {
+				fileCreate.running = true
+			}
+		}
+	}
 
-    // Timer to watch for config file changes
-    property var configWatcher: Timer {
-        id: watcher
-        interval: 2000  // Check every 2 seconds
-        running: configLoader.loaded
-        repeat: true
+	Process {
+		id: fileCreate
 
-        property string lastContent: ""
+		property string homeDir: Quickshell.env("HOME")
 
-        onTriggered: {
-            try {
-                let currentContent = Qt.readFile(configLoader.configPath)
-                if (lastContent !== "" && currentContent !== lastContent) {
-                    console.log("Config file changed, reloading...")
-                    loadConfig()
-                    configLoader.folderChanged()
-                }
-                lastContent = currentContent
-            } catch (e) {
-                // File might have been deleted, ignore
-            }
-        }
-    }
+		running: false
+		command: ["sh", "-c", `echo '{\"gifFolder\": \"${homeDir}/.config/quickshell/QtDesktopPet/Gifs\"}' > ` + root.configPath]
+	}
 
-    function loadConfig() {
-        try {
-            let configText = Qt.readFile(configPath)
-            let configData = JSON.parse(configText)
+	FileView {
+		id: watcher
+		path: root.configPath
 
-            // Replace $HOME with actual home directory
-            let newFolder = configData.gifFolder.replace("$HOME", StandardPaths.homeLocation)
+		watchChanges: true
 
-            if (gifFolder !== newFolder && loaded) {
-                // Folder changed, emit signal
-                gifFolder = newFolder
-                folderChanged()
-            } else {
-                gifFolder = newFolder
-            }
+		onFileChanged: reload()
 
-            loaded = true
+		onLoaded: root.loaded = true
 
-            // Initialize watcher's lastContent on first load
-            if (watcher.lastContent === "") {
-                watcher.lastContent = configText
-            }
-        } catch (e) {
-            console.error("Failed to load config:", e)
-            // Fallback to default path
-            gifFolder = StandardPaths.homeLocation + "/.config/quickshell/QtDesktopPet/Gifs"
-            loaded = true
-        }
-    }
+		JsonAdapter {
+			id: adapter
 
-    Component.onCompleted: {
-        // Start the check/create chain
-        dirCheckProcess.running = true
-    }
+			property string gifFolder: ""
+		}
+	}
 }

Modules/GetGifs.qml

@@ -19,7 +19,6 @@ Process {
     }
 
     function reload() {
-        // Clear current list and restart the process
         gifsList = []
         running = false
         running = true

Modules/GifsLoader.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import qs.Modules
 
@@ -8,14 +10,28 @@ Repeater {
     property int lastWidth
     model: gifsList
     Item {
-        x: index === 0 ? 0 : gifRepeater.itemAt(index - 1).x + gifRepeater.itemAt(index - 1).width
+		id: gifItem
+
+		required property int index
+		required property string modelData
+
+		function xPos(): void {
+			let xPos = 0;
+			const item = gifRepeater.itemAt(index - 1);
+			if ( item ) xPos += item.x + item.width;
+			return xPos;
+		}
+
+		Component.onCompleted: x = xPos()
+
+		x: 0
         y: Screen.height - height
         width: gif.width
         height: gif.height
 
         AnimatedImage {
             id: gif
-            source: modelData
+            source: gifItem.modelData
             fillMode: Image.PreserveAspectFit
         }
 

shell.qml

@@ -1,4 +1,5 @@
 pragma ComponentBehavior: Bound
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
@@ -10,14 +11,15 @@ PanelWindow {
     color: "transparent"
     WlrLayershell.layer: WlrLayer.Top
     surfaceFormat.opaque: false
-    implicitWidth: Screen.width
-    implicitHeight: Screen.height
 
     property bool onTop: true
+	property list<Item> repeaterItems: []
 
     anchors {
         left: true
         bottom: true
+		right: true
+		top: true
     }
 
     margins {
@@ -27,32 +29,43 @@ PanelWindow {
         bottom: 9
     }
 
-    ConfigLoader {
-        id: configLoader
-        onFolderChanged: {
-            console.log("Folder changed to:", gifFolder)
-            getGifs.reload()
-        }
-    }
-
     GetGifs {
         id: getGifs
-        gifFolder: configLoader.gifFolder
-        running: configLoader.loaded
+        gifFolder: ConfigLoader.gifFolder
+        running: ConfigLoader.ready
     }
 
     GifsLoader {
-        id: gifloader
+        id: gifLoader
         gifsList: getGifs.gifsList
-        onItemAdded: {
-            mainWindow.petRegion( item )
-        }
+		onItemAdded: function( index, item ) {
+			mainWindow.repeaterItems.push( item )
+		}
     }
 
+	Variants {
+		id: maskVariants
+
+		model: [ ...mainWindow.repeaterItems ]
+
+		Region {
+			required property Item modelData
+
+			Component.onCompleted: {
+				console.log(modelData)
+			}
+
+			x: modelData.x
+			y: modelData.y
+			width: modelData.width
+			height: modelData.height
+			intersection: Intersection.Subtract
+		}
+	}
+
     IpcHandler {
         target: "command"
 
-        // Keybind swap layer
         function toggleLayer(): void {
             if ( !mainWindow.onTop ) {
                 mainWindow.WlrLayershell.layer = WlrLayer.Top
@@ -63,7 +76,6 @@ PanelWindow {
             }
         }
 
-        // Keybind swap overlay
         function toggleOverlay(): void {
             if (!mainWindow.onTop) {
                 mainWindow.WlrLayershell.layer = WlrLayer.Overlay
@@ -85,7 +97,12 @@ PanelWindow {
         Region { }
     }
 
-    mask: Region {}
+	mask: Region {
+		width: Screen.width
+		height: Screen.height
+		intersection: Intersection.Xor
+		regions: maskVariants.instances
+	}
 
     property var petMove: Region { id: pets }
 
@@ -98,10 +115,10 @@ PanelWindow {
 
         function edmask(): void {
             if ( !mainWindow.setMask ) {
-                mainWindow.mask = petMove
+                mainWindow.mask = mainWindow.petMove
                 mainWindow.setMask = true
             } else {
-                mainWindow.mask = noMove
+                mainWindow.mask = mainWindow.noMove
                 mainWindow.setMask = false
             }
         }