From bdd61f6269733a3f01876857da3c706472e7b2a5 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 2 Jul 2024 15:17:10 +0200
Subject: [PATCH 01/31] wallpaperpicker first version

---
 .config/ags/config.js                         |  3 +
 .../modules/.configuration/user_options.js    |  3 +
 .config/ags/modules/wallpaperpicker/main.js   | 72 +++++++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 .config/ags/modules/wallpaperpicker/main.js

diff --git a/.config/ags/config.js b/.config/ags/config.js
index bf89b6c81..fa0d1c5a7 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -22,6 +22,7 @@ import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
 import { COMPILED_STYLE_DIR } from './init.js';
+import { Wallpaperpicker } from './modules/wallpaperpicker/main.js';
 
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
 function forMonitors(widget) {
@@ -47,6 +48,8 @@ const Windows = () => [
     forMonitors(Cheatsheet),
     SideLeft(),
     SideRight(),
+    forMonitors((id) => Wallpaperpicker(id)),
+    // forMonitors(Dock),
     forMonitors(Osk),
     forMonitors(Session),
     ...(userOptions.dock.enabled ? [forMonitors(Dock)] : []),
diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js
index 686b9cbd7..15428068d 100644
--- a/.config/ags/modules/.configuration/user_options.js
+++ b/.config/ags/modules/.configuration/user_options.js
@@ -131,6 +131,9 @@ let configOptions = {
         'dateInterval': 5000,
         'dateFormat': "%d/%m", // On notif time
     },
+    'wallpaper': {
+        'path': "$HOME/Pictures/wallpapers",
+    },
     'weather': {
         'city': "",
         'preferredUnit': "C", // Either C or F
diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaperpicker/main.js
new file mode 100644
index 000000000..09600aad2
--- /dev/null
+++ b/.config/ags/modules/wallpaperpicker/main.js
@@ -0,0 +1,72 @@
+//const b = Variable(false);
+const dir = userOptions.wallpaper.path;
+const scriptDir = `${App.configDir}/scripts/switchwall.sh`;
+
+/*
+function updateFiles() {
+    files.value = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
+}
+*/
+
+function setWallpaper(path) {
+    Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
+}
+
+function closeWindow() {
+    App.closeWindow('wallpaper')
+    files.value = ""
+}
+
+//function OpenWallpaper() {
+//    return Widget.Button({
+//        child: Widget.Icon({ icon: "starred" }),
+//        onClicked: () => {
+//            updateFiles()
+//            b.value = !b.value
+//            App.toggleWindow('wallpaper')
+//        }
+//    })
+//}
+
+export const Wallpaperpicker = (monitor = 0) => {
+    let files = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
+    return Widget.Window({
+        name: 'wallpaper',
+        class_name: "wallpapers",
+        monitor,
+        anchor: ["bottom", "top", "left"],
+        exclusivity: "exclusive",
+        layer: "overlay",
+        margins: [12, 0, 12, 12],
+        visible: false,
+        child: Widget.Scrollable({
+            vscroll: "never",
+            hscroll: "always",
+            child: Widget.Box({
+                class_name: 'wallpaperContainer',
+                vertical: false,
+                children: files.bind().as(x => x.split("\n")
+                    .filter(x => x !== "")
+                    .map(path => ImagesList(path)))
+            }),
+        }),
+    })
+}
+
+function ImagesList(path) {
+    return Widget.Button({
+        class_name: 'wallpaperButton',
+        onPrimaryClick: () => {
+            closeWindow();
+            Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
+        },
+        child: Widget.Icon({
+            class_name: 'wallpaperImage',
+            size: 100,
+            icon: `${path}`
+        })
+    })
+}
+
+export { Wallpaperpicker  }
+//export { OpenWallpaper, Wallpaper }

From 50460bed223b58347553634468503f74fe403379 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 2 Jul 2024 17:46:40 +0200
Subject: [PATCH 02/31] wallpaperpicker looking normal

---
 .config/ags/config.js                       |  4 +--
 .config/ags/modules/wallpaperpicker/main.js | 26 +++++++++---------
 .config/ags/scss/_wallpaperpicker.scss      | 29 +++++++++++++++++++++
 .config/ags/scss/main.scss                  |  1 +
 4 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 .config/ags/scss/_wallpaperpicker.scss

diff --git a/.config/ags/config.js b/.config/ags/config.js
index fa0d1c5a7..80549b938 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -21,8 +21,8 @@ import Overview from './modules/overview/main.js';
 import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
-import { COMPILED_STYLE_DIR } from './init.js';
 import { Wallpaperpicker } from './modules/wallpaperpicker/main.js';
+import { COMPILED_STYLE_DIR } from './init.js';
 
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
 function forMonitors(widget) {
@@ -48,7 +48,7 @@ const Windows = () => [
     forMonitors(Cheatsheet),
     SideLeft(),
     SideRight(),
-    forMonitors((id) => Wallpaperpicker(id)),
+    Wallpaperpicker(),
     // forMonitors(Dock),
     forMonitors(Osk),
     forMonitors(Session),
diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaperpicker/main.js
index 09600aad2..9ec472316 100644
--- a/.config/ags/modules/wallpaperpicker/main.js
+++ b/.config/ags/modules/wallpaperpicker/main.js
@@ -14,7 +14,6 @@ function setWallpaper(path) {
 
 function closeWindow() {
     App.closeWindow('wallpaper')
-    files.value = ""
 }
 
 //function OpenWallpaper() {
@@ -29,25 +28,27 @@ function closeWindow() {
 //}
 
 export const Wallpaperpicker = (monitor = 0) => {
-    let files = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
+    let files = Utils.exec(`bash -c "find $HOME/Pictures/wallpapers -type f | head -n 20 | grep -E '.jpg$|.jpeg$|.png$|.gif$'"`);
     return Widget.Window({
-        name: 'wallpaper',
+        name: 'wallpaperpicker',
         class_name: "wallpapers",
         monitor,
-        anchor: ["bottom", "top", "left"],
-        exclusivity: "exclusive",
+        anchor: ["top", "left", "right"],
+        // anchor: ["left", "top", "bottom"],
+        exclusivity: "normal",
         layer: "overlay",
-        margins: [12, 0, 12, 12],
-        visible: false,
+        margins: [2],
+        visible: true,
         child: Widget.Scrollable({
+            // vscroll: "always",
+            // hscroll: "never",
             vscroll: "never",
             hscroll: "always",
             child: Widget.Box({
+                // vertical: true,
                 class_name: 'wallpaperContainer',
-                vertical: false,
-                children: files.bind().as(x => x.split("\n")
-                    .filter(x => x !== "")
-                    .map(path => ImagesList(path)))
+                children: files.split("\n").filter(x => x !== "")
+                    .map(path => ImagesList(path))
             }),
         }),
     })
@@ -62,11 +63,10 @@ function ImagesList(path) {
         },
         child: Widget.Icon({
             class_name: 'wallpaperImage',
-            size: 100,
+            size: 180,
             icon: `${path}`
         })
     })
 }
 
-export { Wallpaperpicker  }
 //export { OpenWallpaper, Wallpaper }
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
new file mode 100644
index 000000000..a170a2d0d
--- /dev/null
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -0,0 +1,29 @@
+
+.wallpapers {
+    background-color: transparent;
+    border-radius: 6px;
+}
+
+.wallpaperContainer {
+	margin: 2px 2px;
+	background-color: $background;
+	border-radius: 1rem;
+}
+
+.wallpaperButton {
+	margin: 10px 20px;
+    padding: 0.3rem 2rem;
+    border: 0.2rem;
+	border-radius: 5rem;
+    border-style: solid;
+    border-color: transparent;
+    transition: all 0.3s ease;
+}
+
+.wallpaperButton:hover {
+    border-color: $onBackground;
+}
+
+.wallpaperImage {
+    font-size: 14px;
+}
diff --git a/.config/ags/scss/main.scss b/.config/ags/scss/main.scss
index 57938e81a..46925e28e 100644
--- a/.config/ags/scss/main.scss
+++ b/.config/ags/scss/main.scss
@@ -23,6 +23,7 @@
 @import './sidebars';
 @import './session';
 @import './notifications';
+@import './wallpaperpicker';
 
 // Music is put last as it might mess stuff up with pywal
 @import './music'; // Everything related to music is here

From b99b0f02a0b410873ad4970ffeb3b8f2c8d6b85c Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 2 Jul 2024 21:07:09 +0200
Subject: [PATCH 03/31] wallpaper selection working

---
 .config/ags/modules/wallpaperpicker/main.js   | 42 +++++++++----------
 .../scripts/color_generation/switchwall.sh    |  1 +
 .config/ags/scss/_wallpaperpicker.scss        | 20 +++++----
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaperpicker/main.js
index 9ec472316..99c8db8d8 100644
--- a/.config/ags/modules/wallpaperpicker/main.js
+++ b/.config/ags/modules/wallpaperpicker/main.js
@@ -1,32 +1,32 @@
 //const b = Variable(false);
 const dir = userOptions.wallpaper.path;
-const scriptDir = `${App.configDir}/scripts/switchwall.sh`;
+const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
 /*
 function updateFiles() {
     files.value = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
 }
-*/
-
-function setWallpaper(path) {
-    Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
-}
-
-function closeWindow() {
-    App.closeWindow('wallpaper')
-}
 
+*/
 //function OpenWallpaper() {
-//    return Widget.Button({
+    //    return Widget.Button({
 //        child: Widget.Icon({ icon: "starred" }),
 //        onClicked: () => {
-//            updateFiles()
-//            b.value = !b.value
+    //            updateFiles()
+    //            b.value = !b.value
 //            App.toggleWindow('wallpaper')
 //        }
 //    })
 //}
 
+function setWallpaper(path) {
+    Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
+}
+
+function closeWindow() {
+    App.closeWindow('wallpaperpicker')
+}
+
 export const Wallpaperpicker = (monitor = 0) => {
     let files = Utils.exec(`bash -c "find $HOME/Pictures/wallpapers -type f | head -n 20 | grep -E '.jpg$|.jpeg$|.png$|.gif$'"`);
     return Widget.Window({
@@ -34,23 +34,23 @@ export const Wallpaperpicker = (monitor = 0) => {
         class_name: "wallpapers",
         monitor,
         anchor: ["top", "left", "right"],
-        // anchor: ["left", "top", "bottom"],
         exclusivity: "normal",
         layer: "overlay",
-        margins: [2],
-        visible: true,
+        margins: [7],
+        visible: false,
         child: Widget.Scrollable({
-            // vscroll: "always",
-            // hscroll: "never",
             vscroll: "never",
-            hscroll: "always",
+            hscroll: "alyways",
+            class_name: 'wallpaperScroll',
             child: Widget.Box({
-                // vertical: true,
                 class_name: 'wallpaperContainer',
                 children: files.split("\n").filter(x => x !== "")
                     .map(path => ImagesList(path))
             }),
         }),
+        setup: (self) => {
+            self.keybind("Escape", () => closeWindow());
+        },
     })
 }
 
@@ -68,5 +68,3 @@ function ImagesList(path) {
         })
     })
 }
-
-//export { OpenWallpaper, Wallpaper }
diff --git a/.config/ags/scripts/color_generation/switchwall.sh b/.config/ags/scripts/color_generation/switchwall.sh
index e2d68cab0..3b69c8f9b 100755
--- a/.config/ags/scripts/color_generation/switchwall.sh
+++ b/.config/ags/scripts/color_generation/switchwall.sh
@@ -17,6 +17,7 @@ switch() {
 		exit 0
 	fi
 
+	#notify-send -t 2000 "cursorposx: $cursorposx"
 	# ags run-js "wallpaper.set('')"
 	# sleep 0.1 && ags run-js "wallpaper.set('${imgpath}')" &
 	swww img "$imgpath" --transition-step 100 --transition-fps 120 \
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index a170a2d0d..6e0cb67b4 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -1,27 +1,29 @@
 
 .wallpapers {
-    background-color: transparent;
-    border-radius: 6px;
+    background-color: $background;
+    border-radius: 1.5rem;
+}
+
+.wallpaperScroll {
+	margin: 0rem 1rem;
 }
 
 .wallpaperContainer {
-	margin: 2px 2px;
-	background-color: $background;
-	border-radius: 1rem;
+	padding: 0.3rem;
 }
 
 .wallpaperButton {
-	margin: 10px 20px;
-    padding: 0.3rem 2rem;
+	margin: 0rem 0rem;
+	padding: 0rem 0.7rem;
     border: 0.2rem;
-	border-radius: 5rem;
+	border-radius: 0.4rem;
     border-style: solid;
     border-color: transparent;
     transition: all 0.3s ease;
 }
 
 .wallpaperButton:hover {
-    border-color: $onBackground;
+    border-color: $primary;
 }
 
 .wallpaperImage {

From b3c0cb8e943ec00b1e407015ae9c24e7add78142 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 2 Jul 2024 23:30:38 +0200
Subject: [PATCH 04/31] some more improvements

---
 .config/ags/config.js                       |  4 ++--
 .config/ags/modules/wallpaperpicker/main.js | 23 +++++++--------------
 .config/ags/variables.js                    |  3 ++-
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/.config/ags/config.js b/.config/ags/config.js
index 80549b938..a1dc53046 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -21,7 +21,7 @@ import Overview from './modules/overview/main.js';
 import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
-import { Wallpaperpicker } from './modules/wallpaperpicker/main.js';
+import Wallpaperpicker from './modules/wallpaperpicker/main.js';
 import { COMPILED_STYLE_DIR } from './init.js';
 
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
@@ -48,7 +48,7 @@ const Windows = () => [
     forMonitors(Cheatsheet),
     SideLeft(),
     SideRight(),
-    Wallpaperpicker(),
+    forMonitors(Wallpaperpicker),
     // forMonitors(Dock),
     forMonitors(Osk),
     forMonitors(Session),
diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaperpicker/main.js
index 99c8db8d8..e5c9d512d 100644
--- a/.config/ags/modules/wallpaperpicker/main.js
+++ b/.config/ags/modules/wallpaperpicker/main.js
@@ -19,23 +19,16 @@ function updateFiles() {
 //    })
 //}
 
-function setWallpaper(path) {
-    Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
-}
-
-function closeWindow() {
-    App.closeWindow('wallpaperpicker')
-}
-
-export const Wallpaperpicker = (monitor = 0) => {
+export default (id) => {
     let files = Utils.exec(`bash -c "find $HOME/Pictures/wallpapers -type f | head -n 20 | grep -E '.jpg$|.jpeg$|.png$|.gif$'"`);
     return Widget.Window({
-        name: 'wallpaperpicker',
+        name: `wallpaperpicker${id}`,
         class_name: "wallpapers",
-        monitor,
+        monitor: id,
         anchor: ["top", "left", "right"],
         exclusivity: "normal",
         layer: "overlay",
+        keymode: "on-demand",
         margins: [7],
         visible: false,
         child: Widget.Scrollable({
@@ -45,20 +38,20 @@ export const Wallpaperpicker = (monitor = 0) => {
             child: Widget.Box({
                 class_name: 'wallpaperContainer',
                 children: files.split("\n").filter(x => x !== "")
-                    .map(path => ImagesList(path))
+                    .map(path => ImagesList(path, id))
             }),
         }),
         setup: (self) => {
-            self.keybind("Escape", () => closeWindow());
+            self.keybind("Escape", () => closeEverything());
         },
     })
 }
 
-function ImagesList(path) {
+function ImagesList(path, id) {
     return Widget.Button({
         class_name: 'wallpaperButton',
         onPrimaryClick: () => {
-            closeWindow();
+            App.closeWindow(`wallpaperpicker${id}`);
             Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
         },
         child: Widget.Icon({
diff --git a/.config/ags/variables.js b/.config/ags/variables.js
index c9aa243dd..e07faa8c2 100644
--- a/.config/ags/variables.js
+++ b/.config/ags/variables.js
@@ -21,7 +21,7 @@ globalThis['currentMode'] = currentShellMode;
 globalThis['cycleMode'] = () => {
     if (currentShellMode.value === 'normal') {
         currentShellMode.value = 'focus';
-    } 
+    }
     else if (currentShellMode.value === 'focus') {
         currentShellMode.value = 'nothing';
     }
@@ -53,6 +53,7 @@ globalThis['closeEverything'] = () => {
     for (let i = 0; i < numMonitors; i++) {
         App.closeWindow(`cheatsheet${i}`);
         App.closeWindow(`session${i}`);
+        App.closeWindow(`wallpaperpicker${i}`);
     }
     App.closeWindow('sideleft');
     App.closeWindow('sideright');

From c9726b095e2eba8b6ab176012f421347fdba5c30 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 2 Jul 2024 23:37:30 +0200
Subject: [PATCH 05/31] gifs now work without preview

---
 .config/ags/modules/wallpaperpicker/main.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaperpicker/main.js
index e5c9d512d..8baaca11e 100644
--- a/.config/ags/modules/wallpaperpicker/main.js
+++ b/.config/ags/modules/wallpaperpicker/main.js
@@ -20,7 +20,7 @@ function updateFiles() {
 //}
 
 export default (id) => {
-    let files = Utils.exec(`bash -c "find $HOME/Pictures/wallpapers -type f | head -n 20 | grep -E '.jpg$|.jpeg$|.png$|.gif$'"`);
+    let files = Utils.exec(`bash -c "find $HOME/Pictures/wallpapers -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$'"`);
     return Widget.Window({
         name: `wallpaperpicker${id}`,
         class_name: "wallpapers",
@@ -33,7 +33,7 @@ export default (id) => {
         visible: false,
         child: Widget.Scrollable({
             vscroll: "never",
-            hscroll: "alyways",
+            hscroll: "always",
             class_name: 'wallpaperScroll',
             child: Widget.Box({
                 class_name: 'wallpaperContainer',
@@ -48,6 +48,12 @@ export default (id) => {
 }
 
 function ImagesList(path, id) {
+    let gif = path.endsWith(".gif");
+    let thumbnail = `${path.substr(path.lastIndexOf(".") + 1, path.length)}`;
+    // thumbnail = thumbnail.substr(0, thumbnail.lastIndexOf(".") - 1);
+    // console.log(thumbnail);
+    // thumbnail += `\x00icon\x1f${path}`;
+    // console.log(thumbnail);
     return Widget.Button({
         class_name: 'wallpaperButton',
         onPrimaryClick: () => {
@@ -57,7 +63,7 @@ function ImagesList(path, id) {
         child: Widget.Icon({
             class_name: 'wallpaperImage',
             size: 180,
-            icon: `${path}`
+            icon: (gif ? thumbnail : path),
         })
     })
 }

From 650da529938174e2319a8dcb3150148a49759413 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Wed, 3 Jul 2024 12:22:13 +0200
Subject: [PATCH 06/31] added --no-popup flag

---
 .../scripts/color_generation/applycolor.sh    | 10 ++++++-
 .../ags/scripts/color_generation/colorgen.sh  | 29 ++++++++++++-------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/.config/ags/scripts/color_generation/applycolor.sh b/.config/ags/scripts/color_generation/applycolor.sh
index db056d436..b0c33d442 100755
--- a/.config/ags/scripts/color_generation/applycolor.sh
+++ b/.config/ags/scripts/color_generation/applycolor.sh
@@ -163,7 +163,9 @@ apply_gtk() { # Using gradience-cli
 
 apply_ags() {
     ags run-js "handleStyles(false);"
-    ags run-js 'openColorScheme.value = true; Utils.timeout(2000, () => openColorScheme.value = false);'
+    if [ "$popup" = true ]; then
+        ags run-js 'openColorScheme.value = true; Utils.timeout(2000, () => openColorScheme.value = false);'
+    fi
 }
 
 
@@ -173,6 +175,12 @@ IFS=$'\n'
 colorlist=( $colornames ) # Array of color names
 colorvalues=( $colorstrings ) # Array of color values
 
+popup=true
+for arg in "$@"; do
+    if [ "$arg" = "--no-popup" ]; then
+        popup=false
+    fi
+done
 apply_ags &
 apply_hyprland &
 apply_hyprlock &
diff --git a/.config/ags/scripts/color_generation/colorgen.sh b/.config/ags/scripts/color_generation/colorgen.sh
index 9a19d8eb2..eff2f1bd4 100755
--- a/.config/ags/scripts/color_generation/colorgen.sh
+++ b/.config/ags/scripts/color_generation/colorgen.sh
@@ -9,10 +9,23 @@ STATE_DIR="$XDG_STATE_HOME/ags"
 
 # check if no arguments
 if [ $# -eq 0 ]; then
-    echo "Usage: colorgen.sh /path/to/image (--apply)"
+    echo "Usage: colorgen.sh /path/to/image (--apply) (--smart) (--no-popup)"
     exit 1
 fi
 
+apply=false
+popupflag=''
+smartflag=''
+for arg in "$@"; do
+    if [ "$arg" = "--apply" ]; then
+        apply=true
+    elif [ "$arg" = "--smart" ]; then
+        smartflag="--smart"
+    elif [ "$arg" = "--no-popup" ]; then
+        popupflag="--no-popup"
+    fi
+done
+
 # check if the file $STATE_DIR/user/colormode.txt exists. if not, create it. else, read it to $lightdark
 colormodefile="$STATE_DIR/user/colormode.txt"
 lightdark="dark"
@@ -52,21 +65,17 @@ if [[ "$1" = "#"* ]]; then # this is a color
     > "$CACHE_DIR"/user/generated/material_colors.scss
     if [ "$2" = "--apply" ]; then
         cp "$CACHE_DIR"/user/generated/material_colors.scss "$STATE_DIR/scss/_material.scss"
-        color_generation/applycolor.sh
+        color_generation/applycolor.sh $popupflag
     fi
 elif [ "$backend" = "material" ]; then
-    smartflag=''
-    if [ "$3" = "--smart" ]; then
-        smartflag='--smart'
-    fi
     color_generation/generate_colors_material.py --path "$1" \
     --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" \
     --termscheme $terminalscheme --blend_bg_fg \
     --cache "$STATE_DIR/user/color.txt" $smartflag \
     > "$CACHE_DIR"/user/generated/material_colors.scss
-    if [ "$2" = "--apply" ]; then
+    if [ "$apply" = true ]; then
         cp "$CACHE_DIR"/user/generated/material_colors.scss "$STATE_DIR/scss/_material.scss"
-        color_generation/applycolor.sh
+        color_generation/applycolor.sh $popupflag
     fi
 elif [ "$backend" = "pywal" ]; then
     # clear and generate
@@ -76,7 +85,7 @@ elif [ "$backend" = "pywal" ]; then
     cp "$XDG_CACHE_HOME/wal/colors.scss" "$CACHE_DIR"/user/generated/material_colors.scss
 
     cat color_generation/pywal_to_material.scss >> "$CACHE_DIR"/user/generated/material_colors.scss
-    if [ "$2" = "--apply" ]; then
+    if [ "$apply" = true]; then
         sass -I "$STATE_DIR/scss" -I "$CONFIG_DIR/scss/fallback" "$CACHE_DIR"/user/generated/material_colors.scss "$CACHE_DIR"/user/generated/colors_classes.scss --style compressed
         sed -i "s/ { color//g" "$CACHE_DIR"/user/generated/colors_classes.scss
         sed -i "s/\./$/g" "$CACHE_DIR"/user/generated/colors_classes.scss
@@ -89,6 +98,6 @@ elif [ "$backend" = "pywal" ]; then
 
         cp "$CACHE_DIR"/user/generated/colors_classes.scss "$STATE_DIR/scss/_material.scss"
 
-        color_generation/applycolor.sh
+        color_generation/applycolor.sh $popupflag
     fi
 fi

From ef5e6746649ec44fc11b534293ed01f5ab259ebe Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 4 Jul 2024 22:23:34 +0200
Subject: [PATCH 07/31] smart and popup options in config

---
 .../modules/.configuration/user_options.js    |  4 ++++
 .config/ags/modules/wallpaperpicker/main.js   | 16 +++++++++++++--
 .../scripts/color_generation/switchwall.sh    | 20 +++++++++++++++++--
 .vscode/settings.json                         |  2 ++
 4 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js
index 15428068d..0e782bb61 100644
--- a/.config/ags/modules/.configuration/user_options.js
+++ b/.config/ags/modules/.configuration/user_options.js
@@ -133,6 +133,10 @@ let configOptions = {
     },
     'wallpaper': {
         'path': "$HOME/Pictures/wallpapers",
+        'autoChange': true,
+        'interval': 1800, // In seconds
+        'smart': true, // messes up dark mode
+        'popup': true,
     },
     'weather': {
         'city': "",
diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaperpicker/main.js
index 8baaca11e..51296671d 100644
--- a/.config/ags/modules/wallpaperpicker/main.js
+++ b/.config/ags/modules/wallpaperpicker/main.js
@@ -20,7 +20,7 @@ function updateFiles() {
 //}
 
 export default (id) => {
-    let files = Utils.exec(`bash -c "find $HOME/Pictures/wallpapers -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$'"`);
+    let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$'"`);
     return Widget.Window({
         name: `wallpaperpicker${id}`,
         class_name: "wallpapers",
@@ -58,7 +58,7 @@ function ImagesList(path, id) {
         class_name: 'wallpaperButton',
         onPrimaryClick: () => {
             App.closeWindow(`wallpaperpicker${id}`);
-            Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path}`]).catch(print);
+            setWallpaper(path);
         },
         child: Widget.Icon({
             class_name: 'wallpaperImage',
@@ -67,3 +67,15 @@ function ImagesList(path, id) {
         })
     })
 }
+
+function setWallpaper(path) {
+    let smartflag = userOptions.wallpaper.smart ? '--smart' : '';
+    let popupflag = userOptions.wallpaper.popup ? '' : '--no-popup';
+    console.log(`sh ${scriptDir} ${path} ${smartflag} ${popupflag}`);
+    Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path} ${smartflag} ${popupflag}`]).catch(print);
+}
+
+globalThis['randomWallpaper'] = () => {
+    let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$' | shuf -n 1"`);
+    setWallpaper(path);
+}
diff --git a/.config/ags/scripts/color_generation/switchwall.sh b/.config/ags/scripts/color_generation/switchwall.sh
index 3b69c8f9b..52657d8ff 100755
--- a/.config/ags/scripts/color_generation/switchwall.sh
+++ b/.config/ags/scripts/color_generation/switchwall.sh
@@ -25,7 +25,23 @@ switch() {
 		--transition-pos "$cursorposx, $cursorposy_inverted"
 }
 
-if [ "$1" == "--noswitch" ]; then
+noswitch=false
+smartflag=''
+popupflag=''
+
+for arg in "$@"; do
+	if [ "$arg" == "--noswitch" ]; then
+		noswitch=true
+	fi
+	if [ "$arg" == "--no-popup" ]; then
+		popupflag='--no-popup'
+	fi
+	if [ "$arg" == "--smart" ]; then
+		smartflag='--smart'
+	fi
+done
+
+if [ "$noswitch" == true ]; then
 	imgpath=$(swww query | awk -F 'image: ' '{print $2}')
 	# imgpath=$(ags run-js 'wallpaper.get(0)')
 elif [[ "$1" ]]; then
@@ -38,4 +54,4 @@ else
 fi
 
 # Generate colors for ags n stuff
-"$CONFIG_DIR"/scripts/color_generation/colorgen.sh "${imgpath}" --apply --smart
+"$CONFIG_DIR"/scripts/color_generation/colorgen.sh "${imgpath}" --apply $smartflag $popupflag
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..2c63c0851
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}

From 0bf0f5a9cebafbf2ec48a5586043f53bc2ea40a7 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 4 Jul 2024 22:34:29 +0200
Subject: [PATCH 08/31] sanitizing some commands

---
 .config/ags/config.js                                      | 2 +-
 .config/ags/modules/{wallpaperpicker => wallpaper}/main.js | 4 ++--
 .config/ags/scripts/color_generation/switchwall.sh         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename .config/ags/modules/{wallpaperpicker => wallpaper}/main.js (93%)

diff --git a/.config/ags/config.js b/.config/ags/config.js
index a1dc53046..40e2ba1fd 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -21,7 +21,7 @@ import Overview from './modules/overview/main.js';
 import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
-import Wallpaperpicker from './modules/wallpaperpicker/main.js';
+import Wallpaperpicker from './modules/wallpaper/main.js';
 import { COMPILED_STYLE_DIR } from './init.js';
 
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
diff --git a/.config/ags/modules/wallpaperpicker/main.js b/.config/ags/modules/wallpaper/main.js
similarity index 93%
rename from .config/ags/modules/wallpaperpicker/main.js
rename to .config/ags/modules/wallpaper/main.js
index 51296671d..f434b04f3 100644
--- a/.config/ags/modules/wallpaperpicker/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -72,10 +72,10 @@ function setWallpaper(path) {
     let smartflag = userOptions.wallpaper.smart ? '--smart' : '';
     let popupflag = userOptions.wallpaper.popup ? '' : '--no-popup';
     console.log(`sh ${scriptDir} ${path} ${smartflag} ${popupflag}`);
-    Utils.execAsync(['bash', '-c', `sh ${scriptDir} ${path} ${smartflag} ${popupflag}`]).catch(print);
+    Utils.execAsync(['bash', '-c', `sh "${scriptDir}" "${path}" "${smartflag}" "${popupflag}"`]).catch(print);
 }
 
 globalThis['randomWallpaper'] = () => {
-    let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$' | shuf -n 1"`);
+    let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$|.svg' | shuf -n 1"`);
     setWallpaper(path);
 }
diff --git a/.config/ags/scripts/color_generation/switchwall.sh b/.config/ags/scripts/color_generation/switchwall.sh
index 52657d8ff..c92bede5e 100755
--- a/.config/ags/scripts/color_generation/switchwall.sh
+++ b/.config/ags/scripts/color_generation/switchwall.sh
@@ -54,4 +54,4 @@ else
 fi
 
 # Generate colors for ags n stuff
-"$CONFIG_DIR"/scripts/color_generation/colorgen.sh "${imgpath}" --apply $smartflag $popupflag
+"$CONFIG_DIR"/scripts/color_generation/colorgen.sh "${imgpath}" --apply "$smartflag" "$popupflag"

From 1d48162971756fc886330b3c07ea76a5890af02a Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 4 Jul 2024 23:14:59 +0200
Subject: [PATCH 09/31] removed .vscode

---
 .gitignore            | 2 ++
 .vscode/settings.json | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.gitignore b/.gitignore
index 340da66f3..2e5d3477a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,5 @@
 # Ignore Python cache files
 __pycache__/
 *.py[cod]
+
+.vscode/
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 2c63c0851..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,2 +0,0 @@
-{
-}

From 51358ca676c38d6bdd419778a7af05d88f129f2e Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 4 Jul 2024 23:36:50 +0200
Subject: [PATCH 10/31] better option descriptions

---
 .config/ags/modules/.configuration/user_options.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js
index 0e782bb61..df5370ccb 100644
--- a/.config/ags/modules/.configuration/user_options.js
+++ b/.config/ags/modules/.configuration/user_options.js
@@ -132,11 +132,11 @@ let configOptions = {
         'dateFormat': "%d/%m", // On notif time
     },
     'wallpaper': {
-        'path': "$HOME/Pictures/wallpapers",
-        'autoChange': true,
+        'path': "$HOME/Pictures/wallpapers", // wallpaper folder
+        'autoChange': true, // Changes wallpaper regularly
         'interval': 1800, // In seconds
-        'smart': true, // messes up dark mode
-        'popup': true,
+        'smart': true, // sets dark / light mode based on wallpaper
+        'popup': true, // Shows a color preview when changing wallpaper
     },
     'weather': {
         'city': "",

From 23ce73e6dd04cbcf19cde866b398a048e5b690b2 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 6 Jul 2024 20:35:36 +0200
Subject: [PATCH 11/31] wallpaperpicker shows stuff again

---
 .config/ags/modules/wallpaper/main.js  | 68 ++++++++++++++++++++------
 .config/ags/scss/_wallpaperpicker.scss | 26 +++++-----
 2 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index f434b04f3..1213eb481 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -1,3 +1,8 @@
+import PopupWindow from '../.widgethacks/popupwindow.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+const { Box, Window } = Widget;
+
 //const b = Variable(false);
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
@@ -19,31 +24,62 @@ function updateFiles() {
 //    })
 //}
 
+// const PopupWindow = ({
+//     name,
+//     child,
+//     showClassName = "",
+//     hideClassName = "",
+//     ...props
+// }) => {
+//     return Window({
+//         name,
+//         visible: false,
+//         layer: 'overlay',
+//         ...props,
+
+//         // child: child,
+//         child: Box({
+//             setup: (self) => {
+//                 self.keybind("Escape", () => closeEverything());
+//                 if (showClassName != "" && hideClassName !== "") {
+//                     self.hook(App, (self, currentName, visible) => {
+//                         if (currentName === name) {
+//                             self.toggleClassName(hideClassName, !visible);
+//                         }
+//                     });
+
+//                     if (showClassName !== "" && hideClassName !== "")
+//                         self.className = `${showClassName} ${hideClassName}`;
+//                 }
+//             },
+//             child: child,
+//         }),
+//     });
+// }
+
 export default (id) => {
-    let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$'"`);
-    return Widget.Window({
+    let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$'"`);//|.jpg$|.jpeg$|.png$'"`);
+    return PopupWindow({
         name: `wallpaperpicker${id}`,
-        class_name: "wallpapers",
+        class_name: "wallpaper",
         monitor: id,
         anchor: ["top", "left", "right"],
-        exclusivity: "normal",
+        // anchor: ["left", "top", "bottom"],
         layer: "overlay",
         keymode: "on-demand",
         margins: [7],
-        visible: false,
         child: Widget.Scrollable({
-            vscroll: "never",
-            hscroll: "always",
             class_name: 'wallpaperScroll',
+            hscroll: "never",
+            vscroll: "always",
             child: Widget.Box({
                 class_name: 'wallpaperContainer',
-                children: files.split("\n").filter(x => x !== "")
-                    .map(path => ImagesList(path, id))
+                children: files.split("\n").map(path => ImagesList(path, id))
             }),
         }),
-        setup: (self) => {
+        /* setup: (self) => {
             self.keybind("Escape", () => closeEverything());
-        },
+        }, */
     })
 }
 
@@ -60,11 +96,11 @@ function ImagesList(path, id) {
             App.closeWindow(`wallpaperpicker${id}`);
             setWallpaper(path);
         },
-        child: Widget.Icon({
-            class_name: 'wallpaperImage',
-            size: 180,
-            icon: (gif ? thumbnail : path),
-        })
+        setup : (self) => {
+            Utils.idle(() => {
+                self.css = `background-image: url("${path}");`;
+            });
+        },
     })
 }
 
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 6e0cb67b4..699d6d189 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -1,7 +1,6 @@
-
-.wallpapers {
-    background-color: $background;
-    border-radius: 1.5rem;
+.wallpaper {
+    @include large-rounding;
+    background-color: $layer0;
 }
 
 .wallpaperScroll {
@@ -13,19 +12,22 @@
 }
 
 .wallpaperButton {
-	margin: 0rem 0rem;
-	padding: 0rem 0.7rem;
+    background-color: $primaryContainer;
+	margin: 0.5rem;
+	// padding: 0.2rem;
     border: 0.2rem;
-	border-radius: 0.4rem;
+	border-radius: 2rem;
     border-style: solid;
-    border-color: transparent;
+    border-color: $primaryContainer;
     transition: all 0.3s ease;
+
+    min-height: 9rem;
+    min-width: 16rem;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
 .wallpaperButton:hover {
     border-color: $primary;
 }
-
-.wallpaperImage {
-    font-size: 14px;
-}

From 546f6d2b9b728cf55e3a76e161a1e4fb86e773ff Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 7 Jul 2024 01:40:04 +0200
Subject: [PATCH 12/31] autoWallpaper implemented

---
 .config/ags/modules/wallpaper/main.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 1213eb481..e951250cf 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -80,9 +80,20 @@ export default (id) => {
         /* setup: (self) => {
             self.keybind("Escape", () => closeEverything());
         }, */
+        setup: (self) => {
+            autoWallpaper();
+        },
     })
 }
 
+export function autoWallpaper() {
+    if (userOptions.wallpaper.autoChange) {
+        Utils.interval(userOptions.wallpaper.interval * 1000, () => {
+            randomWallpaper();
+        })
+    }
+}
+
 function ImagesList(path, id) {
     let gif = path.endsWith(".gif");
     let thumbnail = `${path.substr(path.lastIndexOf(".") + 1, path.length)}`;

From 13c3c3e6108575b365886fb1e1170e870cb067cb Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 7 Jul 2024 20:33:00 +0200
Subject: [PATCH 13/31] it works???

---
 .config/ags/config.js                 |  8 +++++---
 .config/ags/modules/wallpaper/main.js | 26 ++++++++++++--------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/.config/ags/config.js b/.config/ags/config.js
index 40e2ba1fd..afdf6a331 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -21,7 +21,7 @@ import Overview from './modules/overview/main.js';
 import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
-import Wallpaperpicker from './modules/wallpaper/main.js';
+import { WallpaperPicker, autoWallpaper } from './modules/wallpaper/main.js';
 import { COMPILED_STYLE_DIR } from './init.js';
 
 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
@@ -36,9 +36,11 @@ function forMonitorsAsync(widget) {
 
 // Start stuff
 handleStyles(true);
+autoWallpaper();
 startAutoDarkModeService().catch(print);
 firstRunWelcome().catch(print);
-startBatteryWarningService().catch(print)
+startBatteryWarningService().catch(print);
+
 
 const Windows = () => [
     // forMonitors(DesktopBackground),
@@ -48,7 +50,7 @@ const Windows = () => [
     forMonitors(Cheatsheet),
     SideLeft(),
     SideRight(),
-    forMonitors(Wallpaperpicker),
+    forMonitors(WallpaperPicker),
     // forMonitors(Dock),
     forMonitors(Osk),
     forMonitors(Session),
diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index e951250cf..94970bd60 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -57,7 +57,7 @@ function updateFiles() {
 //     });
 // }
 
-export default (id) => {
+export const WallpaperPicker = (id) => {
     let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$'"`);//|.jpg$|.jpeg$|.png$'"`);
     return PopupWindow({
         name: `wallpaperpicker${id}`,
@@ -70,8 +70,9 @@ export default (id) => {
         margins: [7],
         child: Widget.Scrollable({
             class_name: 'wallpaperScroll',
-            hscroll: "never",
-            vscroll: "always",
+            hexpand: true,
+            hscroll: "always",
+            vscroll: "never",
             child: Widget.Box({
                 class_name: 'wallpaperContainer',
                 children: files.split("\n").map(path => ImagesList(path, id))
@@ -80,20 +81,9 @@ export default (id) => {
         /* setup: (self) => {
             self.keybind("Escape", () => closeEverything());
         }, */
-        setup: (self) => {
-            autoWallpaper();
-        },
     })
 }
 
-export function autoWallpaper() {
-    if (userOptions.wallpaper.autoChange) {
-        Utils.interval(userOptions.wallpaper.interval * 1000, () => {
-            randomWallpaper();
-        })
-    }
-}
-
 function ImagesList(path, id) {
     let gif = path.endsWith(".gif");
     let thumbnail = `${path.substr(path.lastIndexOf(".") + 1, path.length)}`;
@@ -115,6 +105,14 @@ function ImagesList(path, id) {
     })
 }
 
+export function autoWallpaper() {
+    if (userOptions.wallpaper.autoChange) {
+        Utils.interval(userOptions.wallpaper.interval * 1000, () => {
+            randomWallpaper();
+        })
+    }
+}
+
 function setWallpaper(path) {
     let smartflag = userOptions.wallpaper.smart ? '--smart' : '';
     let popupflag = userOptions.wallpaper.popup ? '' : '--no-popup';

From a0e029de8da9c642ddcc4780e96c2cd805697c1e Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 7 Jul 2024 20:45:16 +0200
Subject: [PATCH 14/31] removing unnecessary stuff

---
 .config/ags/modules/wallpaper/main.js | 62 +--------------------------
 1 file changed, 2 insertions(+), 60 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 94970bd60..65ca4e8b6 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -1,60 +1,12 @@
 import PopupWindow from '../.widgethacks/popupwindow.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-const { Box, Window } = Widget;
 
-//const b = Variable(false);
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
-/*
-function updateFiles() {
-    files.value = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
-}
-
-*/
-//function OpenWallpaper() {
-    //    return Widget.Button({
-//        child: Widget.Icon({ icon: "starred" }),
-//        onClicked: () => {
-    //            updateFiles()
-    //            b.value = !b.value
-//            App.toggleWindow('wallpaper')
-//        }
-//    })
-//}
-
-// const PopupWindow = ({
-//     name,
-//     child,
-//     showClassName = "",
-//     hideClassName = "",
-//     ...props
-// }) => {
-//     return Window({
-//         name,
-//         visible: false,
-//         layer: 'overlay',
-//         ...props,
-
-//         // child: child,
-//         child: Box({
-//             setup: (self) => {
-//                 self.keybind("Escape", () => closeEverything());
-//                 if (showClassName != "" && hideClassName !== "") {
-//                     self.hook(App, (self, currentName, visible) => {
-//                         if (currentName === name) {
-//                             self.toggleClassName(hideClassName, !visible);
-//                         }
-//                     });
-
-//                     if (showClassName !== "" && hideClassName !== "")
-//                         self.className = `${showClassName} ${hideClassName}`;
-//                 }
-//             },
-//             child: child,
-//         }),
-//     });
+// function updateFiles() {
+//     files.value = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
 // }
 
 export const WallpaperPicker = (id) => {
@@ -64,7 +16,6 @@ export const WallpaperPicker = (id) => {
         class_name: "wallpaper",
         monitor: id,
         anchor: ["top", "left", "right"],
-        // anchor: ["left", "top", "bottom"],
         layer: "overlay",
         keymode: "on-demand",
         margins: [7],
@@ -78,19 +29,10 @@ export const WallpaperPicker = (id) => {
                 children: files.split("\n").map(path => ImagesList(path, id))
             }),
         }),
-        /* setup: (self) => {
-            self.keybind("Escape", () => closeEverything());
-        }, */
     })
 }
 
 function ImagesList(path, id) {
-    let gif = path.endsWith(".gif");
-    let thumbnail = `${path.substr(path.lastIndexOf(".") + 1, path.length)}`;
-    // thumbnail = thumbnail.substr(0, thumbnail.lastIndexOf(".") - 1);
-    // console.log(thumbnail);
-    // thumbnail += `\x00icon\x1f${path}`;
-    // console.log(thumbnail);
     return Widget.Button({
         class_name: 'wallpaperButton',
         onPrimaryClick: () => {

From 95d249db0e8fb3b43e346a3d340ccba2e25bc1ab Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 7 Jul 2024 21:25:45 +0200
Subject: [PATCH 15/31] added filename below thumbnails

---
 .config/ags/modules/wallpaper/main.js | 32 ++++++++++++++++++---------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 65ca4e8b6..475796e10 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -33,17 +33,27 @@ export const WallpaperPicker = (id) => {
 }
 
 function ImagesList(path, id) {
-    return Widget.Button({
-        class_name: 'wallpaperButton',
-        onPrimaryClick: () => {
-            App.closeWindow(`wallpaperpicker${id}`);
-            setWallpaper(path);
-        },
-        setup : (self) => {
-            Utils.idle(() => {
-                self.css = `background-image: url("${path}");`;
-            });
-        },
+    let basename = path.split("/").pop();
+    return Widget.Box({
+        vertical: true,
+        children: [
+            Widget.Button({
+                class_name: 'wallpaperButton',
+                onPrimaryClick: () => {
+                    App.closeWindow(`wallpaperpicker${id}`);
+                    setWallpaper(path);
+                },
+                setup : (self) => {
+                    Utils.idle(() => {
+                        self.css = `background-image: url("${path}");`;
+                    });
+                },
+            }),
+            Widget.Label({
+                label: `${basename.length < 30 ? basename : basename.substr(0, 25) +
+                    " (...) " + basename.substr(basename.lastIndexOf("."), basename.length)}`,
+            }),
+        ],
     })
 }
 

From 68a48833bcf26133067583abc0b1dd9d060911c0 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Mon, 8 Jul 2024 00:05:55 +0200
Subject: [PATCH 16/31] images zoom in on hover

---
 .config/ags/scss/_wallpaperpicker.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 699d6d189..d5516c66d 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -8,7 +8,7 @@
 }
 
 .wallpaperContainer {
-	padding: 0.3rem;
+	padding: 0.3rem 0.3rem 0.6rem 0.3rem;
 }
 
 .wallpaperButton {
@@ -23,11 +23,13 @@
 
     min-height: 9rem;
     min-width: 16rem;
-    background-size: cover;
+    background-size: 100%;
+    // background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 .wallpaperButton:hover {
-    border-color: $primary;
+	border-color: $primary;
+    background-size: 115%;
 }

From 27d22f9c107c436b58c7d354aab3bf50bc07402e Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 18 Jul 2024 02:40:17 +0200
Subject: [PATCH 17/31] more efficient, but tons of stuff to fix

---
 .../modules/.configuration/user_options.js    |  2 +-
 .config/ags/modules/wallpaper/main.js         | 29 +++++++++++++++----
 .config/ags/scss/_wallpaperpicker.scss        | 12 ++++----
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js
index df5370ccb..3a039aa02 100644
--- a/.config/ags/modules/.configuration/user_options.js
+++ b/.config/ags/modules/.configuration/user_options.js
@@ -133,7 +133,7 @@ let configOptions = {
     },
     'wallpaper': {
         'path': "$HOME/Pictures/wallpapers", // wallpaper folder
-        'autoChange': true, // Changes wallpaper regularly
+        'autoChange': false, // Changes wallpaper regularly
         'interval': 1800, // In seconds
         'smart': true, // sets dark / light mode based on wallpaper
         'popup': true, // Shows a color preview when changing wallpaper
diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 475796e10..57e9475b9 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -1,6 +1,7 @@
 import PopupWindow from '../.widgethacks/popupwindow.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
@@ -10,7 +11,7 @@ const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 // }
 
 export const WallpaperPicker = (id) => {
-    let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$'"`);//|.jpg$|.jpeg$|.png$'"`);
+    let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$ '"`);
     return PopupWindow({
         name: `wallpaperpicker${id}`,
         class_name: "wallpaper",
@@ -33,21 +34,37 @@ export const WallpaperPicker = (id) => {
 }
 
 function ImagesList(path, id) {
+    // console.log(Object.keys(Gdk));
     let basename = path.split("/").pop();
+    let image;
+    if (basename.lastIndexOf(".") + 1 == "gif") {
+        let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
+        image = Gtk.Image.new_from_animation(animation);
+    } else {
+        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+        image = Gtk.Image.new_from_pixbuf(pixbuf);
+    }
+    console.log("Image: ", image);
     return Widget.Box({
         vertical: true,
         children: [
             Widget.Button({
                 class_name: 'wallpaperButton',
+                child: Widget.Box({
+                    child: image,
+                     //Widget.Label({label: "No Image",}),
+                    // css: 'max-width: 16rem, max-height: 9rem;',
+                }),
                 onPrimaryClick: () => {
                     App.closeWindow(`wallpaperpicker${id}`);
                     setWallpaper(path);
                 },
-                setup : (self) => {
-                    Utils.idle(() => {
-                        self.css = `background-image: url("${path}");`;
-                    });
-                },
+                // setup : (self) => {
+                //     let image = gtk_image_new_from_file(path);
+                //     // Utils.idle(() => {
+                //     //     self.css = `background-image: url("${path}");`;
+                //     // });
+                // },
             }),
             Widget.Label({
                 label: `${basename.length < 30 ? basename : basename.substr(0, 25) +
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index d5516c66d..6c906125c 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -21,12 +21,12 @@
     border-color: $primaryContainer;
     transition: all 0.3s ease;
 
-    min-height: 9rem;
-    min-width: 16rem;
-    background-size: 100%;
-    // background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    // min-height: 9rem;
+    // min-width: 16rem;
+    // background-size: 100%;
+    // // background-size: cover;
+    // background-position: center;
+    // background-repeat: no-repeat;
 }
 
 .wallpaperButton:hover {

From 47ecf4412ea3d466e1fa7a2ae91cf2f015f6fab9 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 18 Jul 2024 17:59:03 +0200
Subject: [PATCH 18/31] some more testing

---
 .config/ags/modules/wallpaper/main.js  | 50 ++++++++++++++++++--------
 .config/ags/scss/_wallpaperpicker.scss |  6 ++++
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 57e9475b9..f1e10522b 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -12,6 +12,7 @@ const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
 export const WallpaperPicker = (id) => {
     let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$ '"`);
+    console.log(Object.keys(Gdk));
     return PopupWindow({
         name: `wallpaperpicker${id}`,
         class_name: "wallpaper",
@@ -34,33 +35,52 @@ export const WallpaperPicker = (id) => {
 }
 
 function ImagesList(path, id) {
-    // console.log(Object.keys(Gdk));
     let basename = path.split("/").pop();
-    let image;
-    if (basename.lastIndexOf(".") + 1 == "gif") {
-        let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
-        image = Gtk.Image.new_from_animation(animation);
-    } else {
-        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-        image = Gtk.Image.new_from_pixbuf(pixbuf);
-    }
-    console.log("Image: ", image);
+    let image;// = Gtk.Image.new();
+    let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 150, 150, false);
+    // image = Utils.idle(() => {
+        // if (basename.lastIndexOf(".") + 1 == "gif") {
+        //     let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
+        //     image = Gtk.Image.new_from_animation(animation);
+        // } else {
+            // image = Gtk.Image.new_from_pixbuf(pixbuf);
+        // }
+    // });
+    // Gtk.Widget.set_name(image, 'wallpaperImage');
+    // console.log("Image: ", image);
     return Widget.Box({
         vertical: true,
         children: [
             Widget.Button({
                 class_name: 'wallpaperButton',
-                child: Widget.Box({
-                    child: image,
-                     //Widget.Label({label: "No Image",}),
-                    // css: 'max-width: 16rem, max-height: 9rem;',
+                child: Widget.Icon({
+                    class_name: 'wallpaperIcon',
+                    icon: pixbuf,
+                    size: 150,
                 }),
+                // child: Widget.Box({
+                //     child: image,
+                //      //Widget.Label({label: "No Image",}),
+                //     // css: 'max-width: 16rem, max-height: 9rem;',
+                // }),
                 onPrimaryClick: () => {
                     App.closeWindow(`wallpaperpicker${id}`);
                     setWallpaper(path);
                 },
                 // setup : (self) => {
-                //     let image = gtk_image_new_from_file(path);
+                //     let test = self;
+                //     Utils.idle((test) => {
+                //         if (basename.lastIndexOf(".") + 1 == "gif") {
+                //             let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
+                //             let image = Gtk.Image.new_from_animation(animation);
+                //         } else {
+                //             let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+                //             // Gtk.Image.set_from_pixbuf(image, pixbuf);
+                //             let image = Gtk.Image.new_from_pixbuf(pixbuf);
+                //         }
+                //         self.child = image;
+                //     });
+                //     // let image = gtk_image_new_from_file(path);
                 //     // Utils.idle(() => {
                 //     //     self.css = `background-image: url("${path}");`;
                 //     // });
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 6c906125c..b687e2e4c 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -33,3 +33,9 @@
 	border-color: $primary;
     background-size: 115%;
 }
+
+.wallpaperIcon {
+    border-radius: 2rem;
+    // min-height: 9rem;
+    // min-width: 16rem;
+}

From 52c5d6aedc301af2050f15a6c878f301d9d3e672 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Thu, 18 Jul 2024 20:29:21 +0200
Subject: [PATCH 19/31] pictures working

---
 .config/ags/modules/wallpaper/main.js  | 48 ++++++++++++++------------
 .config/ags/scss/_wallpaperpicker.scss | 31 ++++++-----------
 2 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index f1e10522b..6ffc5a4e3 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -12,7 +12,7 @@ const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
 export const WallpaperPicker = (id) => {
     let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$ '"`);
-    console.log(Object.keys(Gdk));
+    // console.log(Object.keys(Gdk));
     return PopupWindow({
         name: `wallpaperpicker${id}`,
         class_name: "wallpaper",
@@ -36,33 +36,34 @@ export const WallpaperPicker = (id) => {
 
 function ImagesList(path, id) {
     let basename = path.split("/").pop();
-    let image;// = Gtk.Image.new();
-    let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 150, 150, false);
-    // image = Utils.idle(() => {
-        // if (basename.lastIndexOf(".") + 1 == "gif") {
-        //     let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
-        //     image = Gtk.Image.new_from_animation(animation);
-        // } else {
-            // image = Gtk.Image.new_from_pixbuf(pixbuf);
-        // }
-    // });
-    // Gtk.Widget.set_name(image, 'wallpaperImage');
+    // let image = Gtk.Image.new_from_file(path);
+    // let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(path, 160, 90);
+    // let image = Gtk.Image.new_from_pixbuf(pixbuf);
+    let image;
+    if (basename.lastIndexOf(".") + 1 == "gif") {
+        let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
+        image = Gtk.Image.new_from_animation(animation);
+    } else {
+        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+        image = Gtk.Image.new_from_pixbuf(pixbuf);
+    }
     // console.log("Image: ", image);
     return Widget.Box({
+        class_name: 'wallpaperBox',
         vertical: true,
         children: [
             Widget.Button({
                 class_name: 'wallpaperButton',
-                child: Widget.Icon({
-                    class_name: 'wallpaperIcon',
-                    icon: pixbuf,
-                    size: 150,
-                }),
-                // child: Widget.Box({
-                //     child: image,
-                //      //Widget.Label({label: "No Image",}),
-                //     // css: 'max-width: 16rem, max-height: 9rem;',
+                // child: Widget.Icon({
+                //     class_name: 'wallpaperIcon',
+                //     icon: pixbuf,
+                //     size: 150,
                 // }),
+                child: Widget.Box({
+                    hpack: 'center',
+                    child: image,
+                     //Widget.Label({label: "No Image",}),
+                }),
                 onPrimaryClick: () => {
                     App.closeWindow(`wallpaperpicker${id}`);
                     setWallpaper(path);
@@ -87,8 +88,9 @@ function ImagesList(path, id) {
                 // },
             }),
             Widget.Label({
-                label: `${basename.length < 30 ? basename : basename.substr(0, 25) +
-                    " (...) " + basename.substr(basename.lastIndexOf("."), basename.length)}`,
+                label: basename,
+                truncate: `middle`,
+                justification: 'center',
             }),
         ],
     })
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index b687e2e4c..9225f9d88 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -7,35 +7,26 @@
 	margin: 0rem 1rem;
 }
 
-.wallpaperContainer {
-	padding: 0.3rem 0.3rem 0.6rem 0.3rem;
+// .wallpaperContainer {
+// 	padding: 0rem 1rem;
+// }
+
+.wallpaperBox {
+    margin: 0.6rem 0.4rem;
 }
 
 .wallpaperButton {
     background-color: $primaryContainer;
-	margin: 0.5rem;
-	// padding: 0.2rem;
-    border: 0.2rem;
-	border-radius: 2rem;
+	margin: 0.2rem;
+	padding: 0.3rem;
+    border: 0.12rem;
+	border-radius: 0.6rem;
     border-style: solid;
     border-color: $primaryContainer;
     transition: all 0.3s ease;
-
-    // min-height: 9rem;
-    // min-width: 16rem;
-    // background-size: 100%;
-    // // background-size: cover;
-    // background-position: center;
-    // background-repeat: no-repeat;
 }
 
 .wallpaperButton:hover {
 	border-color: $primary;
-    background-size: 115%;
-}
-
-.wallpaperIcon {
-    border-radius: 2rem;
-    // min-height: 9rem;
-    // min-width: 16rem;
+    background-color: $primary;
 }

From 8a958bda27cbc5c44d13e66b97fa2bcfa364eca8 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 20 Jul 2024 19:24:34 +0200
Subject: [PATCH 20/31] clickcloseregion added,

---
 .config/ags/modules/wallpaper/main.js  | 37 +++++++++++++++++---------
 .config/ags/scss/_wallpaperpicker.scss |  9 +++----
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 6ffc5a4e3..3bc00a359 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -1,6 +1,7 @@
 import PopupWindow from '../.widgethacks/popupwindow.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import clickCloseRegion from '../.commonwidgets/clickcloseregion.js';
 const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 
 const dir = userOptions.wallpaper.path;
@@ -10,26 +11,36 @@ const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 //     files.value = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
 // }
 
+const wallpaperScrollable = (id, files) => {
+    return Widget.Box({
+        class_name: 'wallpaperContainer',
+        child: Widget.Scrollable({
+            class_name: 'wallpaperScroll',
+            hexpand: true,
+            hscroll: "always",
+            vscroll: "never",
+            child: Widget.Box({
+                children: files.split("\n").map(path => ImagesList(path, id))
+            }),
+        }),
+    });
+};
+
 export const WallpaperPicker = (id) => {
     let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$ '"`);
     // console.log(Object.keys(Gdk));
     return PopupWindow({
         name: `wallpaperpicker${id}`,
-        class_name: "wallpaper",
         monitor: id,
         anchor: ["top", "left", "right"],
         layer: "overlay",
         keymode: "on-demand",
-        margins: [7],
-        child: Widget.Scrollable({
-            class_name: 'wallpaperScroll',
-            hexpand: true,
-            hscroll: "always",
-            vscroll: "never",
-            child: Widget.Box({
-                class_name: 'wallpaperContainer',
-                children: files.split("\n").map(path => ImagesList(path, id))
-            }),
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                wallpaperScrollable(id, files),
+                clickCloseRegion({ name: `wallpaperpicker` , fillMonitor: `vertical`}),
+            ],
         }),
     })
 }
@@ -68,7 +79,7 @@ function ImagesList(path, id) {
                     App.closeWindow(`wallpaperpicker${id}`);
                     setWallpaper(path);
                 },
-                // setup : (self) => {
+                // setup: (self) => {
                 //     let test = self;
                 //     Utils.idle((test) => {
                 //         if (basename.lastIndexOf(".") + 1 == "gif") {
@@ -107,7 +118,7 @@ export function autoWallpaper() {
 function setWallpaper(path) {
     let smartflag = userOptions.wallpaper.smart ? '--smart' : '';
     let popupflag = userOptions.wallpaper.popup ? '' : '--no-popup';
-    console.log(`sh ${scriptDir} ${path} ${smartflag} ${popupflag}`);
+    // console.log(`sh ${scriptDir} ${path} ${smartflag} ${popupflag}`);
     Utils.execAsync(['bash', '-c', `sh "${scriptDir}" "${path}" "${smartflag}" "${popupflag}"`]).catch(print);
 }
 
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 9225f9d88..5a63975df 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -1,5 +1,6 @@
-.wallpaper {
-    @include large-rounding;
+.wallpaperContainer {
+    @include normal-rounding;
+    margin: 0.8rem;
     background-color: $layer0;
 }
 
@@ -7,10 +8,6 @@
 	margin: 0rem 1rem;
 }
 
-// .wallpaperContainer {
-// 	padding: 0rem 1rem;
-// }
-
 .wallpaperBox {
     margin: 0.6rem 0.4rem;
 }

From 360cc5c724e8d872be33786d6e07ce7cdfb4fe9b Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 20 Jul 2024 19:24:52 +0200
Subject: [PATCH 21/31] adjusted design

---
 .config/ags/modules/wallpaper/main.js  |  1 +
 .config/ags/scss/_wallpaperpicker.scss | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 3bc00a359..746da741f 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -99,6 +99,7 @@ function ImagesList(path, id) {
                 // },
             }),
             Widget.Label({
+                class_name: 'wallpaperLabel',
                 label: basename,
                 truncate: `middle`,
                 justification: 'center',
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 5a63975df..e42642ee0 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -10,20 +10,30 @@
 
 .wallpaperBox {
     margin: 0.6rem 0.4rem;
+    border-radius: 0.6rem;
+    background-color: $secondaryContainer;
 }
 
 .wallpaperButton {
-    background-color: $primaryContainer;
-	margin: 0.2rem;
-	padding: 0.3rem;
-    border: 0.12rem;
+    background-color: $secondaryContainer;
+    margin: 0.2rem 0rem;
+	padding: 0.4rem;
 	border-radius: 0.6rem;
-    border-style: solid;
-    border-color: $primaryContainer;
+    // border: 0.12rem;
+    // border-style: solid;
+    // border-color: $secondaryContainer;
     transition: all 0.3s ease;
 }
 
 .wallpaperButton:hover {
-	border-color: $primary;
-    background-color: $primary;
+    // border-color: $secondary;
+    background-color: $secondary;
+}
+
+.wallpaperLabel {
+    color: $secondary;
+    background-color: $secondaryContainer;
+    border-radius: 0.4rem;
+    margin: 0.2rem 0rem;
+    padding: 0rem 1rem;
 }

From 5a976f94a898a31d6a06c394a838a460ede65f50 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 23 Jul 2024 00:32:43 +0200
Subject: [PATCH 22/31] still needs better performance

---
 .config/ags/config.js                  |  2 +-
 .config/ags/modules/wallpaper/main.js  | 36 +++++++++++++++++++-------
 .config/ags/scss/_wallpaperpicker.scss |  4 +--
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/.config/ags/config.js b/.config/ags/config.js
index afdf6a331..48e5c1df5 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -50,7 +50,6 @@ const Windows = () => [
     forMonitors(Cheatsheet),
     SideLeft(),
     SideRight(),
-    forMonitors(WallpaperPicker),
     // forMonitors(Dock),
     forMonitors(Osk),
     forMonitors(Session),
@@ -63,6 +62,7 @@ const Windows = () => [
     forMonitors((id) => Corner(id, 'bottom right', userOptions.appearance.fakeScreenRounding !== 0)),
     forMonitors(BarCornerTopleft),
     forMonitors(BarCornerTopright),
+    forMonitors(WallpaperPicker),
 ];
 
 const CLOSE_ANIM_TIME = 210; // Longer than actual anim time to make sure widgets animate fully
diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 746da741f..a979ecd7f 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -6,12 +6,17 @@ const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
+const files = Variable("");
+// const children = Variable([ Widget.Label({ label: `Files still loading` }), Widget.Label({ label: 'test' }) ]);
 
-// function updateFiles() {
-//     files.value = Utils.exec(`find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$|.gif$'`);
-// }
+function updateFiles(id) {
+    files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
+    // children.value = files.split("\n").map(path => ImagesList(path, id));
+}
 
-const wallpaperScrollable = (id, files) => {
+const wallpaperScrollable = (id) => {
+    Utils.idle(updateFiles(id));
+    let children = files.bind().as(n => n.split("\n").map(path => ImagesList(path, id)));
     return Widget.Box({
         class_name: 'wallpaperContainer',
         child: Widget.Scrollable({
@@ -20,14 +25,14 @@ const wallpaperScrollable = (id, files) => {
             hscroll: "always",
             vscroll: "never",
             child: Widget.Box({
-                children: files.split("\n").map(path => ImagesList(path, id))
+                children: children,
             }),
         }),
     });
 };
 
 export const WallpaperPicker = (id) => {
-    let files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$ '"`);
+    Utils.idle(updateFiles(id));
     // console.log(Object.keys(Gdk));
     return PopupWindow({
         name: `wallpaperpicker${id}`,
@@ -38,7 +43,7 @@ export const WallpaperPicker = (id) => {
         child: Widget.Box({
             vertical: true,
             children: [
-                wallpaperScrollable(id, files),
+                wallpaperScrollable(id),
                 clickCloseRegion({ name: `wallpaperpicker` , fillMonitor: `vertical`}),
             ],
         }),
@@ -46,6 +51,9 @@ export const WallpaperPicker = (id) => {
 }
 
 function ImagesList(path, id) {
+    if (!path) return Widget.Label({
+        label: "Folder empty",
+    });
     let basename = path.split("/").pop();
     // let image = Gtk.Image.new_from_file(path);
     // let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(path, 160, 90);
@@ -102,7 +110,7 @@ function ImagesList(path, id) {
                 class_name: 'wallpaperLabel',
                 label: basename,
                 truncate: `middle`,
-                justification: 'center',
+                // justification: 'center',
             }),
         ],
     })
@@ -119,11 +127,19 @@ export function autoWallpaper() {
 function setWallpaper(path) {
     let smartflag = userOptions.wallpaper.smart ? '--smart' : '';
     let popupflag = userOptions.wallpaper.popup ? '' : '--no-popup';
-    // console.log(`sh ${scriptDir} ${path} ${smartflag} ${popupflag}`);
     Utils.execAsync(['bash', '-c', `sh "${scriptDir}" "${path}" "${smartflag}" "${popupflag}"`]).catch(print);
 }
 
+// globalThis['test'] = () => {
+//     console.log("value" + files.value);
+//     return "value" + files.value;
+// }
+
+globalThis['updateFiles'] = () => {
+    files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
+}
+
 globalThis['randomWallpaper'] = () => {
-    let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$|.svg' | shuf -n 1"`);
+    let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$' | shuf -n 1"`);
     setWallpaper(path);
 }
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index e42642ee0..fb2da4874 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -34,6 +34,6 @@
     color: $secondary;
     background-color: $secondaryContainer;
     border-radius: 0.4rem;
-    margin: 0.2rem 0rem;
-    padding: 0rem 1rem;
+    margin: 0rem 0rem;
+    padding: 0.2rem 1rem ;0.4rem 1rem;
 }

From 2da37cddec82305cf0224445b244594c3cd4f861 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Tue, 23 Jul 2024 06:15:03 +0200
Subject: [PATCH 23/31] actual working version

---
 .config/ags/config.js                 | 1 -
 .config/ags/modules/wallpaper/main.js | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.config/ags/config.js b/.config/ags/config.js
index 48e5c1df5..4341214f5 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -41,7 +41,6 @@ startAutoDarkModeService().catch(print);
 firstRunWelcome().catch(print);
 startBatteryWarningService().catch(print);
 
-
 const Windows = () => [
     // forMonitors(DesktopBackground),
     forMonitors(Crosshair),
diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index a979ecd7f..474475f24 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -15,7 +15,7 @@ function updateFiles(id) {
 }
 
 const wallpaperScrollable = (id) => {
-    Utils.idle(updateFiles(id));
+    // Utils.idle(updateFiles(id));
     let children = files.bind().as(n => n.split("\n").map(path => ImagesList(path, id)));
     return Widget.Box({
         class_name: 'wallpaperContainer',
@@ -32,7 +32,7 @@ const wallpaperScrollable = (id) => {
 };
 
 export const WallpaperPicker = (id) => {
-    Utils.idle(updateFiles(id));
+    // Utils.idle(updateFiles(id));
     // console.log(Object.keys(Gdk));
     return PopupWindow({
         name: `wallpaperpicker${id}`,

From 1610f8673666593200b552d95d54dd131b63be08 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 27 Jul 2024 03:38:28 +0200
Subject: [PATCH 24/31] no wallpaperchange on ags startup

---
 .config/ags/modules/wallpaper/main.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 474475f24..23fbc45f5 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -117,9 +117,12 @@ function ImagesList(path, id) {
 }
 
 export function autoWallpaper() {
+    let interval = userOptions.wallpaper.interval * 1000;
     if (userOptions.wallpaper.autoChange) {
-        Utils.interval(userOptions.wallpaper.interval * 1000, () => {
-            randomWallpaper();
+        Utils.timeout(interval, () => {
+            Utils.interval(interval, () => {
+                randomWallpaper();
+            })
         })
     }
 }

From 49140ad02afcd94bbc2c4d541cefdd31905f947a Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 27 Jul 2024 08:35:11 +0200
Subject: [PATCH 25/31] finally loading pictures one at a time

---
 .config/ags/modules/wallpaper/main.js  | 167 ++++++++++++++-----------
 .config/ags/scss/_wallpaperpicker.scss |  11 +-
 2 files changed, 107 insertions(+), 71 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 23fbc45f5..fd3ea1b60 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -6,17 +6,110 @@ const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
-const files = Variable("");
+// const files = Variable("");
 // const children = Variable([ Widget.Label({ label: `Files still loading` }), Widget.Label({ label: 'test' }) ]);
+const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
+// let children = [ Widget.Label({ label: `Files still loading` }), Widget.Label({ label: 'test' }) ];
+// children = await files.split("\n").map(path => ImagesList(path, 0));
 
 function updateFiles(id) {
-    files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
+    // files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
     // children.value = files.split("\n").map(path => ImagesList(path, id));
 }
 
+function ImagesList(path, monitor, timeout) {
+    if (!path) return Widget.Label({
+        label: "Folder empty",
+    });
+    let basename = path.split("/").pop();
+    // let image;
+    // if (basename.lastIndexOf(".") + 1 == "gif") {
+    //     let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
+    //     image = Gtk.Image.new_from_animation(animation);
+    // } else {
+    //     let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+    //     image = Gtk.Image.new_from_pixbuf(pixbuf);
+    // }
+    let variable = Variable(Widget.Label({
+        //TODO find better way
+        class_name: 'wallpaperPlaceholder',
+        label: "Image still loading",
+    }));
+    let child = variable.bind();
+    // Utils.execAsync((child, path) => {
+    //     let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+    //     let image = Gtk.Image.new_from_pixbuf(pixbuf);
+    //     // child.value = Widget.Box({
+    //     //     hpack: 'center',
+    //     //     child: image,
+    //     // });
+    // });
+    return Widget.Box({
+        class_name: 'wallpaperBox',
+        vertical: true,
+        children: [
+            Widget.Button({
+                class_name: 'wallpaperButton',
+                child: Widget.Box({
+                    class_name: 'wallpaperImageBox',
+                    child: child,
+                }),
+                // child: Widget.Box({
+                //     hpack: 'center',
+                //     child: image,
+                //      //Widget.Label({label: "No Image",}),
+                // }),
+                onPrimaryClick: () => {
+                    App.closeWindow(`wallpaperpicker${monitor}`);
+                    setWallpaper(path);
+                },
+                setup: (self) => {
+                    // Utils.idle(() => {
+                    Utils.timeout(timeout * 500, () => {
+                        console.log(path);
+                        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+                        let image = Gtk.Image.new_from_pixbuf(pixbuf);
+                        variable.value = Widget.Box({
+                            hpack: 'center',
+                            child: image,
+                        });
+                        // child.value = Widget.Label({label: "WOOrking yay",});
+                    });
+                    // });
+                    // let test = self;
+                    // Utils.idle((test) => {
+                    //     if (basename.lastIndexOf(".") + 1 == "gif") {
+                    //         let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
+                    //         let image = Gtk.Image.new_from_animation(animation);
+                    //     } else {
+                    //         let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+                    //         // Gtk.Image.set_from_pixbuf(image, pixbuf);
+                    //         let image = Gtk.Image.new_from_pixbuf(pixbuf);
+                    //     }
+                    //     self.child = image;
+                    // });
+                    // let image = gtk_image_new_from_file(path);
+                    // Utils.idle(() => {
+                    //     self.css = `background-image: url("${path}");`;
+                    // });
+                },
+            }),
+            Widget.Label({
+                class_name: 'wallpaperLabel',
+                label: basename,
+                truncate: `middle`,
+            }),
+        ],
+    })
+}
+
 const wallpaperScrollable = (id) => {
+    let i = 0;
     // Utils.idle(updateFiles(id));
-    let children = files.bind().as(n => n.split("\n").map(path => ImagesList(path, id)));
+    // arr = files.split("\n");
+    // children = (arr, i) => {
+
+    // }
     return Widget.Box({
         class_name: 'wallpaperContainer',
         child: Widget.Scrollable({
@@ -25,7 +118,7 @@ const wallpaperScrollable = (id) => {
             hscroll: "always",
             vscroll: "never",
             child: Widget.Box({
-                children: children,
+                children: files.split("\n").map(path =>ImagesList(path, id, i++)),
             }),
         }),
     });
@@ -50,72 +143,6 @@ export const WallpaperPicker = (id) => {
     })
 }
 
-function ImagesList(path, id) {
-    if (!path) return Widget.Label({
-        label: "Folder empty",
-    });
-    let basename = path.split("/").pop();
-    // let image = Gtk.Image.new_from_file(path);
-    // let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(path, 160, 90);
-    // let image = Gtk.Image.new_from_pixbuf(pixbuf);
-    let image;
-    if (basename.lastIndexOf(".") + 1 == "gif") {
-        let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
-        image = Gtk.Image.new_from_animation(animation);
-    } else {
-        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-        image = Gtk.Image.new_from_pixbuf(pixbuf);
-    }
-    // console.log("Image: ", image);
-    return Widget.Box({
-        class_name: 'wallpaperBox',
-        vertical: true,
-        children: [
-            Widget.Button({
-                class_name: 'wallpaperButton',
-                // child: Widget.Icon({
-                //     class_name: 'wallpaperIcon',
-                //     icon: pixbuf,
-                //     size: 150,
-                // }),
-                child: Widget.Box({
-                    hpack: 'center',
-                    child: image,
-                     //Widget.Label({label: "No Image",}),
-                }),
-                onPrimaryClick: () => {
-                    App.closeWindow(`wallpaperpicker${id}`);
-                    setWallpaper(path);
-                },
-                // setup: (self) => {
-                //     let test = self;
-                //     Utils.idle((test) => {
-                //         if (basename.lastIndexOf(".") + 1 == "gif") {
-                //             let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
-                //             let image = Gtk.Image.new_from_animation(animation);
-                //         } else {
-                //             let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-                //             // Gtk.Image.set_from_pixbuf(image, pixbuf);
-                //             let image = Gtk.Image.new_from_pixbuf(pixbuf);
-                //         }
-                //         self.child = image;
-                //     });
-                //     // let image = gtk_image_new_from_file(path);
-                //     // Utils.idle(() => {
-                //     //     self.css = `background-image: url("${path}");`;
-                //     // });
-                // },
-            }),
-            Widget.Label({
-                class_name: 'wallpaperLabel',
-                label: basename,
-                truncate: `middle`,
-                // justification: 'center',
-            }),
-        ],
-    })
-}
-
 export function autoWallpaper() {
     let interval = userOptions.wallpaper.interval * 1000;
     if (userOptions.wallpaper.autoChange) {
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index fb2da4874..f20d382b0 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -30,10 +30,19 @@
     background-color: $secondary;
 }
 
+.wallpaperImageBox {
+    min-width: 160px;
+    min-height: 90px;
+}
+
+.wallpaperPlaceholder {
+    min-width: 160px;
+}
+
 .wallpaperLabel {
     color: $secondary;
     background-color: $secondaryContainer;
     border-radius: 0.4rem;
     margin: 0rem 0rem;
-    padding: 0.2rem 1rem ;0.4rem 1rem;
+    padding: 0.2rem 1rem ;
 }

From c4dba71f999e5efe37ff89bbe30a2bda14e090ee Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 27 Jul 2024 08:38:22 +0200
Subject: [PATCH 26/31] removing experimental code

---
 .config/ags/modules/wallpaper/main.js | 61 ++-------------------------
 1 file changed, 3 insertions(+), 58 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index fd3ea1b60..c1ecdee0f 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -6,11 +6,7 @@ const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
-// const files = Variable("");
-// const children = Variable([ Widget.Label({ label: `Files still loading` }), Widget.Label({ label: 'test' }) ]);
 const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
-// let children = [ Widget.Label({ label: `Files still loading` }), Widget.Label({ label: 'test' }) ];
-// children = await files.split("\n").map(path => ImagesList(path, 0));
 
 function updateFiles(id) {
     // files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
@@ -22,28 +18,12 @@ function ImagesList(path, monitor, timeout) {
         label: "Folder empty",
     });
     let basename = path.split("/").pop();
-    // let image;
-    // if (basename.lastIndexOf(".") + 1 == "gif") {
-    //     let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
-    //     image = Gtk.Image.new_from_animation(animation);
-    // } else {
-    //     let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-    //     image = Gtk.Image.new_from_pixbuf(pixbuf);
-    // }
     let variable = Variable(Widget.Label({
         //TODO find better way
         class_name: 'wallpaperPlaceholder',
         label: "Image still loading",
     }));
     let child = variable.bind();
-    // Utils.execAsync((child, path) => {
-    //     let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-    //     let image = Gtk.Image.new_from_pixbuf(pixbuf);
-    //     // child.value = Widget.Box({
-    //     //     hpack: 'center',
-    //     //     child: image,
-    //     // });
-    // });
     return Widget.Box({
         class_name: 'wallpaperBox',
         vertical: true,
@@ -54,16 +34,11 @@ function ImagesList(path, monitor, timeout) {
                     class_name: 'wallpaperImageBox',
                     child: child,
                 }),
-                // child: Widget.Box({
-                //     hpack: 'center',
-                //     child: image,
-                //      //Widget.Label({label: "No Image",}),
-                // }),
                 onPrimaryClick: () => {
                     App.closeWindow(`wallpaperpicker${monitor}`);
                     setWallpaper(path);
                 },
-                setup: (self) => {
+                setup: () => {
                     // Utils.idle(() => {
                     Utils.timeout(timeout * 500, () => {
                         console.log(path);
@@ -73,25 +48,7 @@ function ImagesList(path, monitor, timeout) {
                             hpack: 'center',
                             child: image,
                         });
-                        // child.value = Widget.Label({label: "WOOrking yay",});
                     });
-                    // });
-                    // let test = self;
-                    // Utils.idle((test) => {
-                    //     if (basename.lastIndexOf(".") + 1 == "gif") {
-                    //         let animation = GdkPixbuf.PixbufAnimation.new_from_file(path);
-                    //         let image = Gtk.Image.new_from_animation(animation);
-                    //     } else {
-                    //         let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-                    //         // Gtk.Image.set_from_pixbuf(image, pixbuf);
-                    //         let image = Gtk.Image.new_from_pixbuf(pixbuf);
-                    //     }
-                    //     self.child = image;
-                    // });
-                    // let image = gtk_image_new_from_file(path);
-                    // Utils.idle(() => {
-                    //     self.css = `background-image: url("${path}");`;
-                    // });
                 },
             }),
             Widget.Label({
@@ -105,11 +62,6 @@ function ImagesList(path, monitor, timeout) {
 
 const wallpaperScrollable = (id) => {
     let i = 0;
-    // Utils.idle(updateFiles(id));
-    // arr = files.split("\n");
-    // children = (arr, i) => {
-
-    // }
     return Widget.Box({
         class_name: 'wallpaperContainer',
         child: Widget.Scrollable({
@@ -125,8 +77,6 @@ const wallpaperScrollable = (id) => {
 };
 
 export const WallpaperPicker = (id) => {
-    // Utils.idle(updateFiles(id));
-    // console.log(Object.keys(Gdk));
     return PopupWindow({
         name: `wallpaperpicker${id}`,
         monitor: id,
@@ -160,15 +110,10 @@ function setWallpaper(path) {
     Utils.execAsync(['bash', '-c', `sh "${scriptDir}" "${path}" "${smartflag}" "${popupflag}"`]).catch(print);
 }
 
-// globalThis['test'] = () => {
-//     console.log("value" + files.value);
-//     return "value" + files.value;
+// globalThis['updateFiles'] = () => {
+//     files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
 // }
 
-globalThis['updateFiles'] = () => {
-    files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
-}
-
 globalThis['randomWallpaper'] = () => {
     let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$' | shuf -n 1"`);
     setWallpaper(path);

From 441e97d3ce5ffbb4e1633d9a33691608c012d270 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sat, 27 Jul 2024 09:06:40 +0200
Subject: [PATCH 27/31] better error detection

---
 .config/ags/modules/wallpaper/main.js  | 9 +++++----
 .config/ags/scss/_wallpaperpicker.scss | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index c1ecdee0f..4fce92255 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -6,7 +6,6 @@ const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
-const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
 
 function updateFiles(id) {
     // files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
@@ -14,13 +13,14 @@ function updateFiles(id) {
 }
 
 function ImagesList(path, monitor, timeout) {
-    if (!path) return Widget.Label({
-        label: "Folder empty",
+    if (!path || path.search("No such file or directory") != -1) return Widget.Label({
+        class_name: 'wallpaperPlaceholder',
+        label: "Wallpaper folder empty or nonexistent. Please add files of type .png/.jpg/.jpeg or change the path in `~/.config/ags/user_options.js`.",
     });
     let basename = path.split("/").pop();
     let variable = Variable(Widget.Label({
         //TODO find better way
-        class_name: 'wallpaperPlaceholder',
+        class_name: 'wallpaperPlacerholder',
         label: "Image still loading",
     }));
     let child = variable.bind();
@@ -61,6 +61,7 @@ function ImagesList(path, monitor, timeout) {
 }
 
 const wallpaperScrollable = (id) => {
+    const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
     let i = 0;
     return Widget.Box({
         class_name: 'wallpaperContainer',
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index f20d382b0..8f6bd97b4 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -37,6 +37,7 @@
 
 .wallpaperPlaceholder {
     min-width: 160px;
+    min-height:90px;
 }
 
 .wallpaperLabel {

From a9b83994d85fa7a9528a2f4c1f02f32d976a0eba Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 28 Jul 2024 00:37:42 +0200
Subject: [PATCH 28/31] gifs now have a placeholder icon

---
 .config/ags/modules/wallpaper/main.js  | 29 ++++++++++++++------------
 .config/ags/scss/_wallpaperpicker.scss |  4 ++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 4fce92255..945fb8c46 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -15,13 +15,15 @@ function updateFiles(id) {
 function ImagesList(path, monitor, timeout) {
     if (!path || path.search("No such file or directory") != -1) return Widget.Label({
         class_name: 'wallpaperPlaceholder',
-        label: "Wallpaper folder empty or nonexistent. Please add files of type .png/.jpg/.jpeg or change the path in `~/.config/ags/user_options.js`.",
+        label: "Wallpaper folder empty or nonexistent. Please add files of type .png/.jpg/.jpeg/.gif or change the path in `~/.config/ags/user_options.js`.",
     });
     let basename = path.split("/").pop();
+    // let variable = Variable("");
+    let gif = basename.substr(basename.lastIndexOf(".") + 1, basename.length) == "gif";
     let variable = Variable(Widget.Label({
         //TODO find better way
-        class_name: 'wallpaperPlacerholder',
-        label: "Image still loading",
+        class_name: gif ? "wallpaperPlaceholder icon-material txt-gigantic" : "wallpaperPlaceholder",
+        label: gif ? "gif_box" : "Image still loading",
     }));
     let child = variable.bind();
     return Widget.Box({
@@ -39,16 +41,17 @@ function ImagesList(path, monitor, timeout) {
                     setWallpaper(path);
                 },
                 setup: () => {
-                    // Utils.idle(() => {
-                    Utils.timeout(timeout * 500, () => {
-                        console.log(path);
-                        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-                        let image = Gtk.Image.new_from_pixbuf(pixbuf);
-                        variable.value = Widget.Box({
-                            hpack: 'center',
-                            child: image,
+                    if (!gif) {
+                        // Utils.idle(() => {
+                        Utils.timeout(timeout * 500, () => {
+                            let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
+                            let image = Gtk.Image.new_from_pixbuf(pixbuf);
+                            variable.value = Widget.Box({
+                                hpack: 'center',
+                                child: image,
+                            });
                         });
-                    });
+                    }
                 },
             }),
             Widget.Label({
@@ -61,7 +64,7 @@ function ImagesList(path, monitor, timeout) {
 }
 
 const wallpaperScrollable = (id) => {
-    const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
+    const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$'"`);
     let i = 0;
     return Widget.Box({
         class_name: 'wallpaperContainer',
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 8f6bd97b4..5daad136f 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -47,3 +47,7 @@
     margin: 0rem 0rem;
     padding: 0.2rem 1rem ;
 }
+
+.icon-material {
+    @include icon-material;
+}

From db49c487075d5ce9e529340b23b71d1e05bcc42f Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 28 Jul 2024 00:52:52 +0200
Subject: [PATCH 29/31] reworking scss

---
 .config/ags/modules/wallpaper/main.js  | 15 +++------------
 .config/ags/scss/_wallpaperpicker.scss | 12 +++++++-----
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 945fb8c46..b82722970 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -7,11 +7,6 @@ const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
-function updateFiles(id) {
-    // files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
-    // children.value = files.split("\n").map(path => ImagesList(path, id));
-}
-
 function ImagesList(path, monitor, timeout) {
     if (!path || path.search("No such file or directory") != -1) return Widget.Label({
         class_name: 'wallpaperPlaceholder',
@@ -27,7 +22,7 @@ function ImagesList(path, monitor, timeout) {
     }));
     let child = variable.bind();
     return Widget.Box({
-        class_name: 'wallpaperBox',
+        class_name: 'wallpaperpicker-boxW',
         vertical: true,
         children: [
             Widget.Button({
@@ -67,9 +62,9 @@ const wallpaperScrollable = (id) => {
     const files = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$'"`);
     let i = 0;
     return Widget.Box({
-        class_name: 'wallpaperContainer',
+        class_name: 'wallpaperpicker-bg',
         child: Widget.Scrollable({
-            class_name: 'wallpaperScroll',
+            class_name: 'wallpaperpicker-scroll',
             hexpand: true,
             hscroll: "always",
             vscroll: "never",
@@ -114,10 +109,6 @@ function setWallpaper(path) {
     Utils.execAsync(['bash', '-c', `sh "${scriptDir}" "${path}" "${smartflag}" "${popupflag}"`]).catch(print);
 }
 
-// globalThis['updateFiles'] = () => {
-//     files.value = Utils.exec(`bash -c "find ${dir} -type f | grep -E '.jpg$|.jpeg$|.png$'"`);
-// }
-
 globalThis['randomWallpaper'] = () => {
     let path= Utils.exec(`bash -c "find ${dir} -type f | grep -E '.gif$|.jpg$|.jpeg$|.png$' | shuf -n 1"`);
     setWallpaper(path);
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 5daad136f..200105601 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -1,14 +1,16 @@
-.wallpaperContainer {
+.wallpaperpicker-bg {
     @include normal-rounding;
+    @include elevation-border;
+    @include elevation2;
     margin: 0.8rem;
     background-color: $layer0;
 }
 
-.wallpaperScroll {
-	margin: 0rem 1rem;
-}
+// .wallpaperpicker-scroll {
+// 	margin: 0rem 1rem;
+// }
 
-.wallpaperBox {
+.wallpaperpicker-box {
     margin: 0.6rem 0.4rem;
     border-radius: 0.6rem;
     background-color: $secondaryContainer;

From 825dc8ba5ebb3cfa6a48f1dfe82e9931d82cb791 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Sun, 28 Jul 2024 02:46:24 +0200
Subject: [PATCH 30/31] improved look

---
 .config/ags/modules/wallpaper/main.js  | 12 +++----
 .config/ags/scss/_wallpaperpicker.scss | 43 ++++++++++----------------
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index b82722970..25af4b3ef 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -9,7 +9,7 @@ const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
 function ImagesList(path, monitor, timeout) {
     if (!path || path.search("No such file or directory") != -1) return Widget.Label({
-        class_name: 'wallpaperPlaceholder',
+        class_name: 'wallpaperpicker-min',
         label: "Wallpaper folder empty or nonexistent. Please add files of type .png/.jpg/.jpeg/.gif or change the path in `~/.config/ags/user_options.js`.",
     });
     let basename = path.split("/").pop();
@@ -17,18 +17,18 @@ function ImagesList(path, monitor, timeout) {
     let gif = basename.substr(basename.lastIndexOf(".") + 1, basename.length) == "gif";
     let variable = Variable(Widget.Label({
         //TODO find better way
-        class_name: gif ? "wallpaperPlaceholder icon-material txt-gigantic" : "wallpaperPlaceholder",
+        class_name: gif ? "wallpaperpicker-min icon-material txt-gigantic" : "wallpaperpicker-min",
         label: gif ? "gif_box" : "Image still loading",
     }));
     let child = variable.bind();
     return Widget.Box({
-        class_name: 'wallpaperpicker-boxW',
+        class_name: 'wallpaperpicker-box',
         vertical: true,
         children: [
             Widget.Button({
-                class_name: 'wallpaperButton',
+                class_name: 'wallpaperpicker-button',
                 child: Widget.Box({
-                    class_name: 'wallpaperImageBox',
+                    class_name: 'wallpaperpicker-min',
                     child: child,
                 }),
                 onPrimaryClick: () => {
@@ -50,7 +50,7 @@ function ImagesList(path, monitor, timeout) {
                 },
             }),
             Widget.Label({
-                class_name: 'wallpaperLabel',
+                class_name: "wallpaperpicker-label",
                 label: basename,
                 truncate: `middle`,
             }),
diff --git a/.config/ags/scss/_wallpaperpicker.scss b/.config/ags/scss/_wallpaperpicker.scss
index 200105601..c6682937e 100644
--- a/.config/ags/scss/_wallpaperpicker.scss
+++ b/.config/ags/scss/_wallpaperpicker.scss
@@ -3,51 +3,40 @@
     @include elevation-border;
     @include elevation2;
     margin: 0.8rem;
-    background-color: $layer0;
+    background-color: $background;
 }
 
-// .wallpaperpicker-scroll {
-// 	margin: 0rem 1rem;
-// }
+.wallpaperpicker-scroll {
+	margin: 0rem 1rem;
+}
 
 .wallpaperpicker-box {
-    margin: 0.6rem 0.4rem;
+    margin: 0.8rem 0.4rem;
     border-radius: 0.6rem;
-    background-color: $secondaryContainer;
+    background-color: $layer1;
 }
 
-.wallpaperButton {
-    background-color: $secondaryContainer;
+.wallpaperpicker-button {
     margin: 0.2rem 0rem;
 	padding: 0.4rem;
 	border-radius: 0.6rem;
-    // border: 0.12rem;
-    // border-style: solid;
-    // border-color: $secondaryContainer;
     transition: all 0.3s ease;
 }
 
-.wallpaperButton:hover {
-    // border-color: $secondary;
-    background-color: $secondary;
+.wallpaperpicker-button:hover {
+    background-color: mix($primary, $layer1Hover, 40%);
 }
 
-.wallpaperImageBox {
-    min-width: 160px;
-    min-height: 90px;
+.wallpaperpicker-label {
+    color: $onLayer1;
+    border-radius: 0.4rem;
+    margin: 0rem 0rem;
+    padding: 0.2rem 1rem;
 }
 
-.wallpaperPlaceholder {
+.wallpaperpicker-min {
     min-width: 160px;
-    min-height:90px;
-}
-
-.wallpaperLabel {
-    color: $secondary;
-    background-color: $secondaryContainer;
-    border-radius: 0.4rem;
-    margin: 0rem 0rem;
-    padding: 0.2rem 1rem ;
+    min-height: 90px;
 }
 
 .icon-material {

From ceffa3dd34209202b3a7be92e72b81cb8b66ec76 Mon Sep 17 00:00:00 2001
From: Myryk <myryk@posteo.de>
Date: Wed, 31 Jul 2024 20:13:59 +0200
Subject: [PATCH 31/31] slight perfomance improvement

---
 .config/ags/modules/wallpaper/main.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/.config/ags/modules/wallpaper/main.js b/.config/ags/modules/wallpaper/main.js
index 25af4b3ef..b54660416 100644
--- a/.config/ags/modules/wallpaper/main.js
+++ b/.config/ags/modules/wallpaper/main.js
@@ -7,7 +7,7 @@ const { Gio, GLib, Gtk, GdkPixbuf, Gdk } = imports.gi;
 const dir = userOptions.wallpaper.path;
 const scriptDir = `${App.configDir}/scripts/color_generation/switchwall.sh`;
 
-function ImagesList(path, monitor, timeout) {
+function ImagesList(path, monitor, nb) {
     if (!path || path.search("No such file or directory") != -1) return Widget.Label({
         class_name: 'wallpaperpicker-min',
         label: "Wallpaper folder empty or nonexistent. Please add files of type .png/.jpg/.jpeg/.gif or change the path in `~/.config/ags/user_options.js`.",
@@ -38,12 +38,15 @@ function ImagesList(path, monitor, timeout) {
                 setup: () => {
                     if (!gif) {
                         // Utils.idle(() => {
-                        Utils.timeout(timeout * 500, () => {
+                        let timeout = 500;
+                        Utils.timeout(nb * timeout, () => {
                             let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 160, 90, false);
-                            let image = Gtk.Image.new_from_pixbuf(pixbuf);
-                            variable.value = Widget.Box({
-                                hpack: 'center',
-                                child: image,
+                            Utils.timeout(timeout / 2, () => {
+                                let image = Gtk.Image.new_from_pixbuf(pixbuf);
+                                variable.value = Widget.Box({
+                                    hpack: 'center',
+                                    child: image,
+                                });
                             });
                         });
                     }