From 653961ada1347567aa9ce02de400e9849183ece1 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Mon, 28 Oct 2024 14:45:10 -0400
Subject: [PATCH] feat(agsV2): migrate screenshot window

---
 nixosModules/ags/v2/app.ts                    |   2 +
 nixosModules/ags/v2/default.nix               |   2 +-
 nixosModules/ags/v2/lib.ts                    |  17 +-
 nixosModules/ags/v2/package-lock.json         | Bin 74915 -> 74915 bytes
 nixosModules/ags/v2/package.json              |   4 +-
 .../ags/v2/services/monitor-clicks.ts         |  41 +++--
 nixosModules/ags/v2/style.scss                |   1 +
 .../ags/v2/widgets/applauncher/app-item.tsx   |  21 +--
 .../ags/v2/widgets/applauncher/main.tsx       |  25 +--
 nixosModules/ags/v2/widgets/bar/style.scss    |   2 +
 nixosModules/ags/v2/widgets/date/style.scss   |   5 -
 nixosModules/ags/v2/widgets/notifs/style.scss |   2 -
 .../ags/v2/widgets/powermenu/main.tsx         |   3 +
 .../ags/v2/widgets/screenshot/main.tsx        | 163 ++++++++++++++++++
 .../ags/v2/widgets/screenshot/style.scss      |  25 +++
 15 files changed, 259 insertions(+), 54 deletions(-)
 create mode 100644 nixosModules/ags/v2/widgets/screenshot/main.tsx
 create mode 100644 nixosModules/ags/v2/widgets/screenshot/style.scss

diff --git a/nixosModules/ags/v2/app.ts b/nixosModules/ags/v2/app.ts
index 89a525e5..828e52e3 100644
--- a/nixosModules/ags/v2/app.ts
+++ b/nixosModules/ags/v2/app.ts
@@ -12,6 +12,7 @@ import Corners from './widgets/corners/main';
 import IconBrowser from './widgets/icon-browser/main';
 import { NotifPopups, NotifCenter } from './widgets/notifs/main';
 import PowerMenu from './widgets/powermenu/main';
+import Screenshot from './widgets/screenshot/main';
 
 import MonitorClicks from './services/monitor-clicks';
 
@@ -48,6 +49,7 @@ switch (CONF) {
                 NotifPopups();
                 NotifCenter();
                 PowerMenu();
+                Screenshot();
 
                 new MonitorClicks();
             },
diff --git a/nixosModules/ags/v2/default.nix b/nixosModules/ags/v2/default.nix
index 9eea8d5f..89d69ec9 100644
--- a/nixosModules/ags/v2/default.nix
+++ b/nixosModules/ags/v2/default.nix
@@ -51,7 +51,7 @@ self: {
         })
         // {
           "${configDir}/node_modules".source =
-            buildNodeModules ./. "sha256-f0hbPvHTqeFM7mfmV+sN4EEuE0F91f5kjJ/EHy0oU+Y=";
+            buildNodeModules ./. "sha256-pK9S6qUjTIL0JDegYJlHSY5XEpLFKfA98MfZ59Q3IL4=";
 
           "${configDir}/tsconfig.json".source = pkgs.writers.writeJSON "tsconfig.json" {
             "$schema" = "https://json.schemastore.org/tsconfig";
diff --git a/nixosModules/ags/v2/lib.ts b/nixosModules/ags/v2/lib.ts
index c5a54c71..e058d889 100644
--- a/nixosModules/ags/v2/lib.ts
+++ b/nixosModules/ags/v2/lib.ts
@@ -1,4 +1,6 @@
-import { Gdk } from 'astal/gtk3';
+import { App, Gdk, Widget } from 'astal/gtk3';
+
+import AstalApps from 'gi://AstalApps';
 
 import AstalHyprland from 'gi://AstalHyprland';
 const Hyprland = AstalHyprland.get_default();
@@ -109,3 +111,16 @@ export const centerCursor = async(): Promise<void> => {
 
     await hyprMessage(`dispatch movecursor ${x} ${y}`);
 };
+
+export const get_app_icon = (app: AstalApps.Application): string => {
+    if (app.get_icon_name() && Widget.Icon.lookup_icon(app.get_icon_name())) {
+        return app.get_icon_name();
+    }
+    else {
+        const iconString = app.get_key('Icon');
+
+        App.add_icons(iconString);
+
+        return iconString;
+    }
+};
diff --git a/nixosModules/ags/v2/package-lock.json b/nixosModules/ags/v2/package-lock.json
index 048cc24b97efad49387fe2d8ef66dd008d90d77c..84fc13557c33a0ea9d446aeeac2d5ffe4c6b55ad 100644
GIT binary patch
delta 1604
zcmZvcO>Em_7{`^h9b>GlgRQVJ7#(O53!T4e$LScuj+59)o%kbmoJdHE6FZLM*h%bs
z`Lt@>hBUNSqL*n@ngkbwhAQATvEzh<hBU+#P8^WNj+_uqw{Gpk$@1fm_ov_Uf1X?S
zW^dh_y?r${L!LuGEOr!JQxAf#V?V_Z(0hs4`exruB1VGVpGk0&d||=$8V0lsO)twR
zdX5CY_-EBNk!_KciASb`ej#YH+8|H{Xx;0ZjG6QYNnEX{0s_~v6`q%hJRwtDP;J2@
zMDs(6kb-iFmDMg@G%}uvB}Oop?xn;gxH}_(2dj%<={FSoP3#Ak3-bUvzZ`*yZ>)kZ
z$T@IxZCaTJ-=9AkRjHY?O5V!4=$c(dgj@-wpsdMsTa%(GuhhsfD-O}lM5#4PJRT2y
zuiq(lXs6=4BGL8q9I1_S9gDDBc2q-o-M~zt&*VJD(l@@1MZdpvc?I0Rd>GvM;KS%{
zon8hXvoFq_j<g{g;)xi(U3?EbR1ZHcMz1Vx-Mw&TCVH?Nc=O_Zuu9EG)d*O1Iza*}
z7;IyLh!8q(&?GKSuz}lh<z9;zi5x;|Be~llM{rdaHKl8(sIq{l&JgnSLBpe4oSjo`
zCk$*c-hlW<lB|rU?%o8qZ=Bq?e>{eRLVDpT(zyetSKr=-j`*nmV+I$lyu9^ps=V(x
z?m~JV{F>eotyrEDCW5l1b*Pm-VRXItux6-<iQULga50lgOT6tPZC>@)q&(M`8$98m
zNEu~~q#1N^K_F`7qS|HfaM&LX*lG&ad9c1Jg9YK#GpyMuDp;S*fX&aU;F0Kn-w(e7
z9uad<8jeH_II{=x2zbE07FDKVxuC_HIhp8+3S8jwRBfWu`Sw5!J%VevlqF=U6cqKj
z1`TL?Ac%qyKx90$@NBTgjyi*kBwN*SoOCSCPe7u<u%=UNf~ArSZkJxUuFQdj;-RN9
zpCw>%+aHrVvDe>QkFk`%CHw-<nnaqWD*Uh`D7Ab|H7Y|(@%w3F9M?6mG`2;lixIGe
zG+R_jfy=|Dk)HU7-_?gYF2&Vup;(P;xsJ_{qoTrsKmI9zOR1lC$(d$!Cw2c8h$m7e
zYzp&{5Rp=>mkRL!CYol#X3>>?9~-(pOlq2Crh8$f+aOrS!9oaYqF7F9!8T7)D+wi&
zFVwLCG{N&6KPD@#ZhO|=v|U#YMTf1^&rQPA3Se@_w!Rc@>@_nFuE|H9@TDp(jVM>^
zx>m@k38g@<2x|;S2XaH|NF3zqaE71sSfL~`NT0VU*z|<8nxLpyG6nJDcBui0dD+n7
zSshyu1fNk;7(Q*<ciT*R!@nz5R{{L#5^$MQy9~}pqx^pK*^b5OvU#W;0)F|`$Fxei
zW{fn#8OyembL;VBGT!KgCBtK?iaF_1INCrVR_eDo5`)`KZ&>y_T&rYu`f#D@^}}AP
zo@mzMh%OVbBhgAz!d!?3OQW3`So-93aOcY6)>qoGAGbl08-Fdv4t{<-Hl2{^x~tPt
z)-7Wh*%{X=BZbVHlrb7-^7tS$ic}YN(7d5@j=&U4xaX)X0?#v9XkyczC(v2Aoh?J`
wTH6beI@B7_8N;f}7`MIdrkjI{PMJ1x^WwqTr)zG<+Sa3J>HYB0$yoise}bSAHUIzs

delta 1595
zcmZvcON`T26ozFOMiep3@R|ZbP-umU+!@D@#LiHlekO6^*h%czW2q8OoH!3Bah$hT
zgXoS*wA{9{L1++CyJ#0wBegr!vO|?B7IfdPktoY9s;YU=nL+Bxy4Sw)cfa$W^YH21
z!>4nPZbSRYRT4nZ32-NW2z&?q0v<dew!hssPflN0sjJ74X3H)iE7QjchOJHxJXm^P
z%VmeG?>kX8g^a?4Rh8HnUb2;>?fH(Bk8wtg#vO*z8VyDdt3@NoYU^}`;`Kmn=0t(E
zQQt{46h0MLFpU>PxIGN0&CicPDDW09g6C_?;K|<@_%kvOHqr|Kxv~P<FV?_)Y98EA
zP1XzGhbt#GQ3!%HuhL`iN=qRHAz8>8!<q|oSvSM=#CFA#n~kv4=w@YOq*w7?4lx|e
zG}_fnxfsJ3F<wm*ndB(2WwDB<`6kj<n>Ed?H)bq1HVE)+V-Y<5@EQ~XH<=aiar~_V
z7pYY=w3#^rg{PaB!OQ&OY;*j{^7hYHFYSMWcI)~)Sfdwav^++*(NJ#K6Dy;xE`~fc
zGqMGhh@|Tw6E1X8$rh5L{B9<fisF7IQW)829?29qFRrO}N|B`w!xq;Kb5NqWG+UP0
zhD?K-Yv;hDduKPForc07%`ffXtRB3$_RbV|%trqoFSvT^$o6}zzV8j@G`|3T<6j%5
z9oFJ&m2%sSN?fugX+ymqC*!qLiD^qLQ%+b+AqWyhrjSugo@A8@+K31OoFc<%O%equ
zwO(OI1JOuuyky}Bg3=)yTo~lQl5&2RX>P*#B?<{(>oXI)%DCY7#dpE0$boSNj*iV=
z+Cz90JdeLUGpewjCVQhy&KojK3=fSG#Uz|6u^G$g4Sk1gU}hc7!HSy5iXFbJMVewr
z?G8q9%1aECB+?gKG)$^yHyF`kF2)3K2eHRSCv>O4l6-ha;cm^Br`9;}%wB8fW;}I-
zC#YV~DT{12TZpAB&o&+32xG-gLl-f>*cuF!zHCzNK+*d6P>--hp(N6VGbDOq1CEsl
z*dn@uT({Tz<4aYt6$b@>{FMeb*kAW3xwfO@pLAsQYh30-O}8k=EvcWOj9%EG%My<x
zT|Liv1tdP~dYXyqC7G^wOr(N11D^@lx@*OPfvHAG#AOPFp@>FoiH=gD#5WzC7#C_c
zTz9p@y9L`x*;EJM#FN`!EBE#)Spau(M`vtuo9LOODELtuHG54S8TVbd<P^EAp(28x
z!vdt~4g;lUVfnbwZAg6~&Go%D+CVDpkZ-|i7_+oeP%hSD*#txO)1nZahUoFeF>vI-
zBKSgOrfhF!eovrogV3iJK$APa$Kt}cdq3DQIT<c5^M^r4KmNLyRI^lf+5?{yEL*RK
z2`W|gDv><yN9BCG7SM@&r_PftUox{8UW|z~TFzTR$IOX3%)6snS(S*v5J4S^lB#5g
z<GQiv=JybUPJ4Bx^TH>mz~fuX+us-`f103dzF3A1eRUc-KVw)=^v1DPN@+5P23`;0
zyKOen%jV-shp6V<wjNRWeyuR#Xdai$PR_-$2GfGWmIJ#5nqgy9N03lGpX7~-o1r9^
nqH$qj?yh)zJW6+m#bvN{{m|Ubbo<ZT_N(!%`|+c*Q1RfuP~8`0

diff --git a/nixosModules/ags/v2/package.json b/nixosModules/ags/v2/package.json
index 64ba3347..b42f2c9e 100644
--- a/nixosModules/ags/v2/package.json
+++ b/nixosModules/ags/v2/package.json
@@ -6,12 +6,12 @@
         "@eslint/js": "9.13.0",
         "@stylistic/eslint-plugin": "2.9.0",
         "@types/eslint__js": "8.42.3",
-        "@types/node": "22.7.7",
+        "@types/node": "22.8.1",
         "eslint": "9.13.0",
         "eslint-plugin-jsdoc": "50.4.3",
         "fzf": "0.5.2",
         "jiti": "2.3.3",
         "typescript": "5.6.3",
-        "typescript-eslint": "8.10.0"
+        "typescript-eslint": "8.11.0"
     }
 }
diff --git a/nixosModules/ags/v2/services/monitor-clicks.ts b/nixosModules/ags/v2/services/monitor-clicks.ts
index f4b2850f..c207b9f1 100644
--- a/nixosModules/ags/v2/services/monitor-clicks.ts
+++ b/nixosModules/ags/v2/services/monitor-clicks.ts
@@ -134,23 +134,25 @@ export default class MonitorClicks extends GObject.Object {
                                 overlayLayer.find(
                                     (n) => n.namespace.startsWith(name),
                                 ) ||
-                            // Return an empty Layer if widget doesn't exist
-                            {
-                                address: '',
-                                x: 0,
-                                y: 0,
-                                w: 0,
-                                h: 0,
-                                namespace: '',
-                            },
+                                // Return an empty Layer if widget doesn't exist
+                                {
+                                    address: '',
+                                    x: 0,
+                                    y: 0,
+                                    w: 0,
+                                    h: 0,
+                                    namespace: '',
+                                },
                             );
                         });
 
                         return arr;
                     };
                     const clickIsOnWidget = (w: Layer) => {
-                        return pos.x > w.x && pos.x < w.x + w.w &&
-                        pos.y > w.y && pos.y < w.y + w.h;
+                        return (
+                            pos.x > w.x && pos.x < w.x + w.w &&
+                            pos.y > w.y && pos.y < w.y + w.h
+                        );
                     };
 
                     const noCloseWidgets = getNoCloseWidgets(noCloseWidgetsNames);
@@ -158,24 +160,25 @@ export default class MonitorClicks extends GObject.Object {
                     const widgets = overlayLayer.filter((n) => {
                         let window = null as null | PopupWindow;
 
-                        if (App.get_windows().some((win) =>
-                            win.name === n.namespace)) {
+                        if (App.get_windows().some((win) => win.name === n.namespace)) {
                             window = (App.get_window(n.namespace) as PopupWindow);
                         }
 
                         return window &&
-                        window.close_on_unfocus &&
-                        window.close_on_unfocus ===
-                        clickStage;
+                            window.close_on_unfocus &&
+                            window.close_on_unfocus ===
+                            clickStage;
                     });
 
                     if (noCloseWidgets.some(clickIsOnWidget)) {
-                    // Don't handle clicks when on certain widgets
+                        // Don't handle clicks when on certain widgets
                     }
                     else {
                         widgets.forEach((w) => {
-                            if (!(pos.x > w.x && pos.x < w.x + w.w &&
-                            pos.y > w.y && pos.y < w.y + w.h)) {
+                            if (!(
+                                pos.x > w.x && pos.x < w.x + w.w &&
+                                pos.y > w.y && pos.y < w.y + w.h
+                            )) {
                                 App.get_window(w.namespace)?.set_visible(false);
                             }
                         });
diff --git a/nixosModules/ags/v2/style.scss b/nixosModules/ags/v2/style.scss
index e8dc409f..fbbbb6e0 100644
--- a/nixosModules/ags/v2/style.scss
+++ b/nixosModules/ags/v2/style.scss
@@ -19,3 +19,4 @@ window, viewport {
 @import 'widgets/lockscreen/style.scss';
 @import 'widgets/notifs/style.scss';
 @import 'widgets/powermenu/style.scss';
+@import 'widgets/screenshot/style.scss';
diff --git a/nixosModules/ags/v2/widgets/applauncher/app-item.tsx b/nixosModules/ags/v2/widgets/applauncher/app-item.tsx
index e21141e3..9677ef35 100644
--- a/nixosModules/ags/v2/widgets/applauncher/app-item.tsx
+++ b/nixosModules/ags/v2/widgets/applauncher/app-item.tsx
@@ -1,6 +1,8 @@
-import { App, Gtk, Widget } from 'astal/gtk3';
+import { Gtk, Widget } from 'astal/gtk3';
 import { register } from 'astal/gobject';
 
+import { get_app_icon } from '../../lib';
+
 /* Types */
 import AstalApps from 'gi://AstalApps';
 type AppItemProps = Widget.BoxProps & {
@@ -26,18 +28,11 @@ export class AppItem extends Widget.Box {
         this.app = app;
 
         const icon = (
-            <icon css="font-size: 42px; margin-right: 25px;" />
-        ) as Widget.Icon;
-
-        if (app.get_icon_name() && Widget.Icon.lookup_icon(app.get_icon_name())) {
-            icon.icon = this.app.get_icon_name();
-        }
-        else {
-            const iconString = this.app.get_key('Icon');
-
-            App.add_icons(iconString);
-            icon.icon = iconString;
-        }
+            <icon
+                icon={get_app_icon(this.app)}
+                css="font-size: 42px; margin-right: 25px;"
+            />
+        );
 
         const textBox = (
             <box
diff --git a/nixosModules/ags/v2/widgets/applauncher/main.tsx b/nixosModules/ags/v2/widgets/applauncher/main.tsx
index 60027951..89e7c812 100644
--- a/nixosModules/ags/v2/widgets/applauncher/main.tsx
+++ b/nixosModules/ags/v2/widgets/applauncher/main.tsx
@@ -122,6 +122,7 @@ export default () => {
 
                     <button
                         css="margin-left: 5px;"
+                        cursor="pointer"
                         onButtonReleaseEvent={refreshApplications}
                     >
                         <icon icon="view-refresh-symbolic" css="font-size: 26px;" />
@@ -129,18 +130,20 @@ export default () => {
 
                 </box>
 
-                <scrollable
-                    className="widget app-list"
+                <eventbox cursor="pointer">
+                    <scrollable
+                        className="widget app-list"
 
-                    css="min-height: 600px; min-width: 600px;"
-                    hscroll={Gtk.PolicyType.NEVER}
-                    vscroll={Gtk.PolicyType.AUTOMATIC}
-                >
-                    <box vertical>
-                        {list}
-                        {placeholder}
-                    </box>
-                </scrollable>
+                        css="min-height: 600px; min-width: 600px;"
+                        hscroll={Gtk.PolicyType.NEVER}
+                        vscroll={Gtk.PolicyType.AUTOMATIC}
+                    >
+                        <box vertical>
+                            {list}
+                            {placeholder}
+                        </box>
+                    </scrollable>
+                </eventbox>
             </box>
         </PopupWindow>
     );
diff --git a/nixosModules/ags/v2/widgets/bar/style.scss b/nixosModules/ags/v2/widgets/bar/style.scss
index d9029bb1..7fe7a600 100644
--- a/nixosModules/ags/v2/widgets/bar/style.scss
+++ b/nixosModules/ags/v2/widgets/bar/style.scss
@@ -1,4 +1,6 @@
 .bar {
+    margin-left: 5px;
+    margin-right: 15px;
     margin-bottom: 13px;
 
     .bar-item {
diff --git a/nixosModules/ags/v2/widgets/date/style.scss b/nixosModules/ags/v2/widgets/date/style.scss
index 893dffcf..3003419d 100644
--- a/nixosModules/ags/v2/widgets/date/style.scss
+++ b/nixosModules/ags/v2/widgets/date/style.scss
@@ -24,11 +24,7 @@
 }
 
 .cal-box {
-    border-radius: 30px;
     padding: 0 1rem .2rem;
-    background-color: $window_bg_color;
-    border-bottom: 2px solid $accent_color;
-    border-top: 2px solid $accent_color;
     margin: 0 12px 18px;
 
     calendar {
@@ -36,7 +32,6 @@
         background-color: inherit;
         padding: .5rem .10rem 0;
         margin-left: 10px;
-        border-radius: 30px;
 
         &>* {
             border: solid 0 transparent;
diff --git a/nixosModules/ags/v2/widgets/notifs/style.scss b/nixosModules/ags/v2/widgets/notifs/style.scss
index 16efc182..acb22816 100644
--- a/nixosModules/ags/v2/widgets/notifs/style.scss
+++ b/nixosModules/ags/v2/widgets/notifs/style.scss
@@ -67,8 +67,6 @@
 
     .notification-list-box {
         padding: 0 12px;
-        border-radius: 30px;
-        border-top: 2px solid $accent-color;
 
         .notification {
             box-shadow: none;
diff --git a/nixosModules/ags/v2/widgets/powermenu/main.tsx b/nixosModules/ags/v2/widgets/powermenu/main.tsx
index 8f4d10bf..fd4a10a5 100644
--- a/nixosModules/ags/v2/widgets/powermenu/main.tsx
+++ b/nixosModules/ags/v2/widgets/powermenu/main.tsx
@@ -10,6 +10,7 @@ const PowermenuWidget = () => (
     <centerbox className="powermenu widget">
         <button
             className="shutdown button"
+            cursor="pointer"
             onButtonReleaseEvent={() => execAsync(['systemctl', 'poweroff']).catch(print)}
         >
             <icon icon="system-shutdown-symbolic" />
@@ -17,6 +18,7 @@ const PowermenuWidget = () => (
 
         <button
             className="reboot button"
+            cursor="pointer"
             onButtonReleaseEvent={() => execAsync(['systemctl', 'reboot']).catch(print)}
         >
             <icon icon="system-restart-symbolic" />
@@ -24,6 +26,7 @@ const PowermenuWidget = () => (
 
         <button
             className="logout button"
+            cursor="pointer"
             onButtonReleaseEvent={() => hyprMessage('dispatch exit').catch(print)}
         >
             <icon icon="system-log-out-symbolic" />
diff --git a/nixosModules/ags/v2/widgets/screenshot/main.tsx b/nixosModules/ags/v2/widgets/screenshot/main.tsx
new file mode 100644
index 00000000..816e176b
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/screenshot/main.tsx
@@ -0,0 +1,163 @@
+import { bind, execAsync, Variable } from 'astal';
+import { App, Gtk, Widget } from 'astal/gtk3';
+
+import AstalApps from 'gi://AstalApps';
+const Applications = AstalApps.Apps.new();
+
+import AstalHyprland from 'gi://AstalHyprland';
+const Hyprland = AstalHyprland.get_default();
+
+import PopupWindow from '../misc/popup-window';
+import Separator from '../misc/separator';
+
+import { get_app_icon, hyprMessage } from '../../lib';
+
+
+const ICON_SEP = 6;
+const takeScreenshot = (selector: string, delay = 1000): void => {
+    App.get_window('win-screenshot')?.set_visible(false);
+
+    setTimeout(() => {
+        execAsync([
+            'bash',
+            '-c',
+            `grim ${selector} - | satty -f - || true`,
+        ]).catch(console.error);
+    }, delay);
+};
+
+export default () => {
+    const windowList = <box vertical /> as Widget.Box;
+
+    const updateWindows = async() => {
+        if (!App.get_window('win-screenshot')?.visible) {
+            return;
+        }
+
+        windowList.children = (JSON.parse(await hyprMessage('j/clients')) as AstalHyprland.Client[])
+            .filter((client) => client.workspace.id === Hyprland.get_focused_workspace().get_id())
+            .map((client) => (
+                <button
+                    className="item-btn"
+                    cursor="pointer"
+
+                    onButtonReleaseEvent={() => {
+                        takeScreenshot(`-w ${client.address}`);
+                    }}
+                >
+                    <box halign={Gtk.Align.CENTER}>
+                        <icon icon={get_app_icon(Applications.fuzzy_query(client.class)[0])} />
+
+                        <Separator size={ICON_SEP} />
+
+                        <label
+                            label={client.title}
+                            truncate
+                            max_width_chars={50}
+                        />
+                    </box>
+                </button>
+            ));
+    };
+
+    Hyprland.connect('notify::clients', updateWindows);
+    Hyprland.connect('notify::focused-workspace', updateWindows);
+
+    const Shown = Variable<string>('monitors');
+
+    const stack = (
+        <stack
+            shown={bind(Shown)}
+            transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}
+        >
+            <scrollable name="monitors">
+                <box vertical>
+                    {bind(Hyprland, 'monitors').as((monitors) => monitors.map((monitor) => (
+                        <button
+                            className="item-btn"
+                            cursor="pointer"
+
+                            onButtonReleaseEvent={() => {
+                                takeScreenshot(`-o ${monitor.name}`);
+                            }}
+                        >
+                            <label
+                                label={`${monitor.name}: ${monitor.description}`}
+                                truncate
+                                maxWidthChars={50}
+                            />
+                        </button>
+                    )))}
+                </box>
+            </scrollable>
+
+            <scrollable name="windows">
+                {windowList}
+            </scrollable>
+        </stack>
+    ) as Widget.Stack;
+
+    const StackButton = ({ label = '', iconName = '' }) => (
+        <button
+            cursor="pointer"
+            className={bind(Shown).as((shown) =>
+                `header-btn${shown === label ? ' active' : ''}`)}
+
+            onButtonReleaseEvent={() => {
+                Shown.set(label);
+            }}
+        >
+            <box halign={Gtk.Align.CENTER}>
+                <icon icon={iconName} />
+
+                <Separator size={ICON_SEP} />
+
+                {label}
+            </box>
+        </button>
+    ) as Widget.Button;
+
+    const regionButton = (
+        <button
+            cursor="pointer"
+            className="header-btn"
+
+            onButtonReleaseEvent={() => {
+                takeScreenshot('-g "$(slurp)"', 0);
+            }}
+        >
+            <box halign={Gtk.Align.CENTER}>
+                <icon icon="tool-pencil-symbolic" />
+
+                <Separator size={ICON_SEP} />
+
+                region
+            </box>
+        </button>
+    ) as Widget.Button;
+
+    return (
+        <PopupWindow
+            name="screenshot"
+            on_open={() => {
+                updateWindows();
+            }}
+        >
+            <box
+                className="screenshot widget"
+                vertical
+            >
+                <box
+                    className="header"
+                    homogeneous
+                >
+                    <StackButton label="monitors" iconName="display-symbolic" />
+                    <StackButton label="windows" iconName="window-symbolic" />
+                    {regionButton}
+                </box>
+
+                {stack}
+            </box>
+        </PopupWindow>
+    );
+};
diff --git a/nixosModules/ags/v2/widgets/screenshot/style.scss b/nixosModules/ags/v2/widgets/screenshot/style.scss
new file mode 100644
index 00000000..735dcfab
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/screenshot/style.scss
@@ -0,0 +1,25 @@
+.screenshot {
+    font-size: 30px;
+
+    .header {
+        .header-btn {
+            margin: 5px;
+            transition: background 400ms;
+
+            &.active {
+                background: $window_bg_color;
+            }
+        }
+    }
+
+    scrollable {
+        margin: 5px;
+        min-height: 400px;
+
+        box {
+            .item-btn {
+                margin: 3px;
+            }
+        }
+    }
+}