2 files changed, 30 insertions, 2 deletions

diff --git a/app.tsx b/app.tsx
index 32a74ec..f6ed759 100644
--- a/app.tsx
+++ b/app.tsx
@@ -6,6 +6,7 @@ import Popdowns from "@/modules/popdowns";
 import Session from "@/modules/session";
 import Monitors from "@/services/monitors";
 import Players from "@/services/players";
+import type PopupWindow from "@/widgets/popupwindow";
 import { execAsync, GLib, monitorFile, readFileAsync, writeFileAsync } from "astal";
 import { App } from "astal/gtk3";
 
@@ -40,7 +41,19 @@ App.start({
         if (request === "quit") App.quit();
         else if (request === "reload-css") loadStyleAsync().catch(console.error);
         else if (request.startsWith("show")) App.get_window(request.split(" ")[1])?.show();
-        else if (request === "media play-pause") Players.get_default().lastPlayer?.play_pause();
+        else if (request === "toggle sideleft") {
+            const window = App.get_window("sideleft") as PopupWindow | null;
+            if (window) {
+                if (window.visible) window.hide();
+                else window.popup_at_corner("top left");
+            }
+        } else if (request === "toggle sideright") {
+            const window = App.get_window("sideright") as PopupWindow | null;
+            if (window) {
+                if (window.visible) window.hide();
+                else window.popup_at_corner("top right");
+            }
+        } else if (request === "media play-pause") Players.get_default().lastPlayer?.play_pause();
         else if (request === "media next") Players.get_default().lastPlayer?.next();
         else if (request === "media previous") Players.get_default().lastPlayer?.previous();
         else if (request === "media stop") Players.get_default().lastPlayer?.stop();
diff --git a/src/widgets/popupwindow.ts b/src/widgets/popupwindow.ts
index 39fff5e..ffed396 100644
--- a/src/widgets/popupwindow.ts
+++ b/src/widgets/popupwindow.ts
@@ -12,7 +12,6 @@ export default class PopupWindow extends Widget.Window {
     constructor(props: Widget.WindowProps) {
         super({
             keymode: Astal.Keymode.ON_DEMAND,
-            exclusivity: Astal.Exclusivity.IGNORE,
             borderWidth: 20, // To allow shadow, cause if not it gets cut off
             ...props,
             visible: false,
@@ -40,9 +39,25 @@ export default class PopupWindow extends Widget.Window {
         else if (marginLeft + pWidth > mWidth) marginLeft = mWidth - pWidth;
 
         this.anchor = Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT;
+        this.exclusivity = Astal.Exclusivity.IGNORE;
         this.marginLeft = marginLeft;
         this.marginTop = cy + (height - y);
 
         this.show();
     }
+
+    popup_at_corner(corner: `${"top" | "bottom"} ${"left" | "right"}`) {
+        let anchor = 0;
+        if (corner.includes("top")) anchor |= Astal.WindowAnchor.TOP;
+        else anchor |= Astal.WindowAnchor.BOTTOM;
+        if (corner.includes("left")) anchor |= Astal.WindowAnchor.LEFT;
+        else anchor |= Astal.WindowAnchor.RIGHT;
+
+        this.anchor = anchor;
+        this.exclusivity = Astal.Exclusivity.NORMAL;
+        this.marginLeft = 0;
+        this.marginTop = 0;
+
+        this.show();
+    }
 }