✨ ags(scripts/stylesheet): better shell stylesheet manager

ags/app.ts

@@ -3,7 +3,6 @@ import AstalNotifd from "gi://AstalNotifd";
 import { App } from "astal/gtk3"
 import { Wireplumber } from "./scripts/volume";
 
-import { runStyleHandler } from "./scripts/style-handler";
 import { handleArguments } from "./scripts/arg-handler";
 import { Time, timeout } from "astal/time";
 
@@ -18,6 +17,10 @@ import { Windows } from "./windows";
 import { Notifications } from "./scripts/notifications";
 import { GObject } from "astal";
 import { PluginWallpapers } from "./runner/plugins/wallpapers";
+import { Wallpaper } from "./scripts/wallpaper";
+import { Stylesheet } from "./scripts/stylesheet";
+import { Clipboard } from "./scripts/clipboard";
+import { PluginClipboard } from "./runner/plugins/clipboard";
 
 
 let osdTimer: (Time|undefined);
@@ -29,7 +32,8 @@ const runnerPlugins: Array<Runner.Plugin> = [
     PluginShell,
     PluginWebSearch,
     PluginMedia,
-    new PluginWallpapers()
+    new PluginWallpapers(),
+    PluginClipboard
 ];
 
 App.start({
@@ -38,26 +42,23 @@ App.start({
         response(handleArguments(request));
     },
     main: (..._args: Array<string>) => {
-        console.log(`[LOG] Initialized astal instance as: ${ App.instanceName || "astal" }`);
+        console.log(`Initialized astal instance as: ${ App.instanceName || "astal" }`);
+
+        Stylesheet.getDefault().compileApply();
 
         App.vfunc_dispose = () => {
-            console.log("[LOG] Disconnecting stuff");
+            console.log("Disconnecting stuff");
             connections.forEach((v, k) => Array.isArray(v) ? 
                 v.map(id => k.disconnect(id))
             : k.disconnect(v));
         };
 
-
+        // Init clipboard module
-        console.log("[LOG] Running Stylesheet handler");
+        Clipboard.getDefault();
-
-        runStyleHandler();
-
-        //console.log(`[LOG] Starting to monitor scripts to automatically reload instance`);
-        //monitorPaths(); // Only for debugging purposes(testing new widgets and stuff)
 
         connections.set(Wireplumber.getDefault(), [
             Wireplumber.getDefault().getDefaultSink().connect("notify::volume", () => 
-                !Windows.isVisible("control-center") && triggerOSD(OSDModes.SINK))
+                triggerOSD(OSDModes.SINK))
         ]);
 
         connections.set(Notifications.getDefault(), [
@@ -69,10 +70,13 @@ App.start({
             })
         ]);
 
-        console.log(`[LOG] Adding runner plugins`);
+        console.log("Initializing wallpaper handler");
+        Wallpaper.getDefault();
+
+        console.log("Adding runner plugins");
         runnerPlugins.map(plugin => Runner.addPlugin(plugin));
 
-        console.log("[LOG] Opening default windows");
+        console.log("Opening default windows");
         // Open openOnStart windows
         defaultWindows.map(name => {
             if(Windows.isVisible(name)) return;
@@ -82,6 +86,8 @@ App.start({
 });
 
 function triggerOSD(osdModeParam: OSDModes) {
+    if(Windows.isVisible("control-center")) return;
+
     Windows.open("osd");
 
     if(!osdTimer) {

ags/scripts/style-handler.ts

@@ -1,63 +0,0 @@
-// handles reloading stylesheet and pywal colors
-
-import { readFile, monitorFile, AstalIO, exec, timeout } from "astal";
-import { App } from "astal/gtk3";
-import { getUserDirs } from "./utils";
-
-let watchDelay: (AstalIO.Time|null);
-
-const stylePath = `${getUserDirs().state}/ags/style`
-const watchPaths = [
-    "./style",
-    "./style.scss"
-];
-
-export function runStyleHandler(): void {
-    reloadStyle();
-    watch();
-}
-
-export function reloadStyle(): void {
-    compileStyle();
-    applyStyle();
-}
-
-export function compileStyle(): void {
-    console.log("[LOG] Compiling sass (stylesheet)");
-    exec(`mkdir -p ${stylePath}`);
-    exec(`sh -c "sass -I ./style ./style.scss ${stylePath}/style.css"`);
-}
-
-export function applyStyle(): void {
-    console.log("[LOG] Applying stylesheet");
-    App.reset_css();
-    App.apply_css(
-        readFile(`${stylePath}/style.css`)!
-    );
-}
-
-/** Monitor changes on stylesheet at runtime */
-function watch(): void {
-    watchPaths.map((path: string) =>
-        monitorFile(
-            `${path}`,
-            (file: string) => {
-                // Ignore tmp files
-                if(!watchDelay && !file.endsWith('~') && !Number.isNaN(file)) {
-                    watchDelay = timeout(250, () => watchDelay = null);
-                    console.log(`[LOG] Stylesheet ${file} file updated`)
-                    compileStyle();
-                    applyStyle();
-                }
-            }
-        )
-    )
-
-    // Monitor PyWal colorscheme file
-    monitorFile(
-        `${getUserDirs().cache}/wal/colors.scss`,
-        (file: string) => {
-            exec(`bash -c "cp -f ${file} ./style/_wal.scss"`)
-        }
-    );
-}

ags/scripts/stylesheet.ts

@@ -0,0 +1,81 @@
+// handles stylesheet compiling and reloading
+
+import { monitorFile, AstalIO, timeout, GLib, Gio, execAsync, exec, readFile } from "astal";
+import { App } from "astal/gtk3";
+
+export class Stylesheet {
+    private static instance: Stylesheet;
+    #watchDelay: (AstalIO.Time|undefined);
+    #outputPath = Gio.File.new_for_path(`${GLib.get_user_state_dir()}/ags/style`);
+    #styles = [
+        "./style",
+        "./style.scss"
+    ];
+
+    public compileSass(): void {
+        console.log("Stylesheet: Compiling Sass");
+
+        exec(`bash -c "sass ${this.#styles.map(style => `-I ${style}`).join('\s')
+            } ${this.#outputPath.get_path()!}/style.css"`);
+    }
+
+    public async reapply(cssFilePath: string): Promise<void> {
+        console.log("Stylesheet: Applying stylesheet");
+
+        const content = readFile(cssFilePath);
+
+        if(content) {
+            App.reset_css();
+            App.apply_css(content);
+
+            console.log("Stylesheet: done applying stylesheet to shell");
+            return;
+        }
+
+        console.error(`Stylesheet: An error occurred while trying to read the css file: ${
+            cssFilePath}`);
+    }
+
+    public async compileApply(): Promise<void> {
+        this.compileSass();
+        this.reapply(this.#outputPath.get_path()! + "/style.css");
+    }
+
+    public static getDefault(): Stylesheet {
+        if(!this.instance)
+            this.instance = new Stylesheet();
+
+        return this.instance;
+    }
+
+    constructor() {
+        (async () => !this.#outputPath.query_exists(null) && 
+            this.#outputPath.make_directory_with_parents(null))();
+
+        this.#styles.map((path: string) =>
+            monitorFile(
+                `${path}`,
+                (file: string) => {
+                    if(this.#watchDelay || file.endsWith('~') || Number.isNaN(file)) 
+                        return;
+
+                    this.#watchDelay = timeout(250, () => this.#watchDelay = undefined);
+                    console.log(`Stylesheet: \`${file.startsWith(GLib.get_home_dir()) ? 
+                            file.replace(GLib.get_home_dir(), '~')
+                        : file}\` changed`)
+
+                    this.compileApply();
+                }
+            )
+        )
+
+        monitorFile(
+            `${GLib.get_user_cache_dir()}/wal/colors.scss`,
+            (file: string) => {
+                execAsync(`bash -c "cp -f ${file} ./style/_wal.scss"`).catch(r => {
+                    console.error(`Stylesheet: Failed to copy pywal stylesheet to style dir. Stderr: ${r}`);
+                });
+            }
+        );
+    }
+}