feat(agsV2): add powermenu and icon-browser

nixosModules/ags/v2/app.ts

@@ -6,7 +6,9 @@ import AppLauncher from './widgets/applauncher/main';
 import Bar from './widgets/bar/wim';
 import BgFade from './widgets/bg-fade/main';
 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 MonitorClicks from './services/monitor-clicks';
 
@@ -19,8 +21,10 @@ App.start({
         Bar();
         BgFade();
         Corners();
+        IconBrowser();
         NotifPopups();
         NotifCenter();
+        PowerMenu();
 
         new MonitorClicks();
     },

nixosModules/ags/v2/colors.scss

@@ -0,0 +1,79 @@
+// Vars from my Gradient theme
+$accent_color: #bd93f9;
+$accent_bg_color: #bd93f9;
+$accent_fg_color: #f8f8f2;
+$destructive_color: #ff5555;
+$destructive_bg_color: #ff5555;
+$destructive_fg_color: #f8f8f2;
+$success_color: #50fa7b;
+$success_bg_color: #50fa7b;
+$success_fg_color: #f8f8f2;
+$warning_color: #f1fa8c;
+$warning_bg_color: #f1fa8c;
+$warning_fg_color: rgba(0, 0, 0, 0.8);
+$error_color: #ff5555;
+$error_bg_color: #ff5555;
+$error_fg_color: #f8f8f2;
+$window_bg_color: #282a36;
+$window_fg_color: #f8f8f2;
+$view_bg_color: #282a36;
+$view_fg_color: #f8f8f2;
+$headerbar_bg_color: #282a36;
+$headerbar_fg_color: #f8f8f2;
+$headerbar_border_color: #ffffff;
+$headerbar_backdrop_color: $window_bg_color;
+$headerbar_shade_color: rgba(0, 0, 0, 0.36);
+$card_bg_color: rgba(255, 255, 255, 0.08);
+$card_fg_color: #f8f8f2;
+$card_shade_color: rgba(0, 0, 0, 0.36);
+$dialog_bg_color: #282a36;
+$dialog_fg_color: #f8f8f2;
+$popover_bg_color: #282a36;
+$popover_fg_color: #f8f8f2;
+$shade_color: #383838;
+$scrollbar_outline_color: rgba(0, 0, 0, 0.5);
+$green_1: #8ff0a4;
+$green_2: #57e389;
+$green_3: #33d17a;
+$green_4: #2ec27e;
+$green_5: #26a269;
+$yellow_1: #f9f06b;
+$yellow_2: #f8e45c;
+$yellow_3: #f6d32d;
+$yellow_4: #f5c211;
+$yellow_5: #e5a50a;
+$orange_1: #ffbe6f;
+$orange_2: #ffa348;
+$orange_3: #ff7800;
+$orange_4: #e66100;
+$orange_5: #c64600;
+$red_1: #f66151;
+$red_2: #ed333b;
+$red_3: #e01b24;
+$red_4: #c01c28;
+$red_5: #a51d2d;
+$purple_1: #dc8add;
+$purple_2: #c061cb;
+$purple_3: #9141ac;
+$purple_4: #813d9c;
+$purple_5: #613583;
+$brown_1: #cdab8f;
+$brown_2: #b5835a;
+$brown_3: #986a44;
+$brown_4: #865e3c;
+$brown_5: #63452c;
+$light_1: #ffffff;
+$light_2: #f6f5f4;
+$light_3: #deddda;
+$light_4: #c0bfbc;
+$light_5: #9a9996;
+$dark_1: #77767b;
+$dark_2: #5e5c64;
+$dark_3: #3d3846;
+$dark_4: #241f31;
+$dark_5: #000000;
+$blue_1: #99c1f1;
+$blue_2: #62a0ea;
+$blue_3: #3584e4;
+$blue_4: #1c71d8;
+$blue_5: #1a5fb4;

nixosModules/ags/v2/style.scss

@@ -1,36 +1,4 @@
-$accent_color: #bd93f9;
-$accent_bg_color: #bd93f9;
-$accent_fg_color: #f8f8f2;
-$destructive_color: #ff5555;
-$destructive_bg_color: #ff5555;
-$destructive_fg_color: #f8f8f2;
-$success_color: #50fa7b;
-$success_bg_color: #50fa7b;
-$success_fg_color: #f8f8f2;
-$warning_color: #f1fa8c;
-$warning_bg_color: #f1fa8c;
-$warning_fg_color: rgba(0, 0, 0, 0.8);
-$error_color: #ff5555;
-$error_bg_color: #ff5555;
-$error_fg_color: #f8f8f2;
-$window_bg_color: #282a36;
-$window_fg_color: #f8f8f2;
-$view_bg_color: #282a36;
-$view_fg_color: #f8f8f2;
-$headerbar_bg_color: #282a36;
-$headerbar_fg_color: #f8f8f2;
-$headerbar_border_color: #ffffff;
-$headerbar_backdrop_color: $window_bg_color;
-$headerbar_shade_color: rgba(0, 0, 0, 0.36);
-$card_bg_color: rgba(255, 255, 255, 0.08);
-$card_fg_color: #f8f8f2;
-$card_shade_color: rgba(0, 0, 0, 0.36);
-$dialog_bg_color: #282a36;
-$dialog_fg_color: #f8f8f2;
-$popover_bg_color: #282a36;
-$popover_fg_color: #f8f8f2;
-$shade_color: #383838;
-$scrollbar_outline_color: rgba(0, 0, 0, 0.5);
+@import 'colors.scss';
 
 window, viewport {
     all: unset;
@@ -46,4 +14,6 @@ window, viewport {
 
 @import 'widgets/applauncher/style.scss';
 @import 'widgets/bar/style.scss';
+@import 'widgets/icon-browser/style.scss';
 @import 'widgets/notifs/style.scss';
+@import 'widgets/powermenu/style.scss';

nixosModules/ags/v2/widgets/icon-browser/main.tsx

@@ -0,0 +1,142 @@
+import { Astal, Gtk, Widget } from 'astal/gtk3';
+import { idle } from 'astal';
+
+import { Fzf, FzfResultItem } from 'fzf';
+
+import PopupWindow from '../misc/popup-window';
+import { centerCursor } from '../../lib';
+
+
+export default () => {
+    let Icons: string[] = [];
+    let fzfResults = [] as FzfResultItem<string>[];
+
+    const list = new Gtk.ListBox({
+        selectionMode: Gtk.SelectionMode.SINGLE,
+    });
+
+    list.connect('row-activated', (_, row) => {
+        const icon = ((row.get_children()[0] as Widget.Box).get_children()[0] as Widget.Icon).icon;
+
+        console.log(icon);
+    });
+
+    const placeholder = (
+        <revealer>
+            <label
+                label="   Couldn't find a match"
+                className="placeholder"
+            />
+        </revealer>
+    ) as Widget.Revealer;
+
+    const on_text_change = (text: string) => {
+        const fzf = new Fzf(Icons);
+
+        fzfResults = fzf.find(text);
+        list.invalidate_sort();
+
+        const visibleIcons = list.get_children().filter((row) => row.visible).length;
+
+        placeholder.reveal_child = visibleIcons <= 0;
+    };
+
+    const entry = (
+        <entry
+            onChanged={(self) => on_text_change(self.text)}
+            hexpand
+        />
+    ) as Widget.Entry;
+
+    list.set_sort_func((a, b) => {
+        const row1 = ((a.get_children()[0] as Widget.Box).get_children()[0] as Widget.Icon).icon;
+        const row2 = ((b.get_children()[0] as Widget.Box).get_children()[0] as Widget.Icon).icon;
+
+        if (entry.text === '' || entry.text === '-') {
+            a.set_visible(true);
+            b.set_visible(true);
+
+            return row1.charCodeAt(0) - row2.charCodeAt(0);
+        }
+        else {
+            const s1 = fzfResults.find((r) => r.item === row1)?.score ?? 0;
+            const s2 = fzfResults.find((r) => r.item === row2)?.score ?? 0;
+
+            a.set_visible(s1 !== 0);
+            b.set_visible(s2 !== 0);
+
+            return s2 - s1;
+        }
+    });
+
+    const refreshIcons = () => idle(() => {
+        (list.get_children() as Gtk.ListBoxRow[])
+            .forEach((child) => {
+                child.destroy();
+            });
+
+        Icons = Gtk.IconTheme.get_default().list_icons(null)
+            .filter((icon) => icon.endsWith('symbolic'))
+            .sort();
+
+        Icons
+            .flatMap((icon) => (
+                <box>
+                    <icon css="font-size: 60px; margin-right: 25px;" icon={icon} />
+                    <label label={icon} />
+                </box>
+            ))
+            .forEach((child) => {
+                list.add(child);
+            });
+
+        list.show_all();
+        on_text_change('');
+    });
+
+    refreshIcons();
+
+    return (
+        <PopupWindow
+            name="icon-browser"
+            keymode={Astal.Keymode.ON_DEMAND}
+            on_open={() => {
+                entry.text = '';
+                centerCursor();
+            }}
+        >
+            <box
+                vertical
+                className="icon-browser"
+            >
+                <box className="widget icon-search">
+
+                    <icon icon="preferences-system-search-symbolic" />
+
+                    {entry}
+
+                    <button
+                        css="margin-left: 5px;"
+                        onButtonReleaseEvent={refreshIcons}
+                    >
+                        <icon icon="view-refresh-symbolic" css="font-size: 26px;" />
+                    </button>
+
+                </box>
+
+                <scrollable
+                    className="widget icon-list"
+
+                    css="min-height: 600px; min-width: 600px;"
+                    hscroll={Gtk.PolicyType.NEVER}
+                    vscroll={Gtk.PolicyType.AUTOMATIC}
+                >
+                    <box vertical>
+                        {list}
+                        {placeholder}
+                    </box>
+                </scrollable>
+            </box>
+        </PopupWindow>
+    );
+};

nixosModules/ags/v2/widgets/icon-browser/style.scss

@@ -0,0 +1,32 @@
+.icon-browser {
+    .icon-search {
+        icon {
+            font-size: 20px;
+            min-width: 40px;
+            min-height: 40px
+        }
+
+        entry {}
+    }
+
+    .icon-list {
+        row {
+            border-radius: 10px;
+
+            &:hover, &:selected {
+                icon {
+                    -gtk-icon-shadow: 2px 2px $accent_color;
+                }
+            }
+
+            box {
+                margin: 20px;
+                font-size: 16px;
+            }
+        }
+
+        .placeholder {
+            font-size: 20px;
+        }
+    }
+}

nixosModules/ags/v2/widgets/powermenu/main.tsx

@@ -0,0 +1,43 @@
+import { execAsync } from 'astal';
+import { Astal } from 'astal/gtk3';
+
+import { hyprMessage } from '../../lib';
+
+import PopupWindow from '../misc/popup-window';
+
+
+const PowermenuWidget = () => (
+    <centerbox className="powermenu widget">
+        <button
+            className="shutdown button"
+            onButtonReleaseEvent={() => execAsync(['systemctl', 'poweroff']).catch(print)}
+        >
+            <icon icon="system-shutdown-symbolic" />
+        </button>
+
+        <button
+            className="reboot button"
+            onButtonReleaseEvent={() => execAsync(['systemctl', 'reboot']).catch(print)}
+        >
+            <icon icon="system-restart-symbolic" />
+        </button>
+
+        <button
+            className="logout button"
+            onButtonReleaseEvent={() => hyprMessage('dispatch exit').catch(print)}
+        >
+            <icon icon="system-log-out-symbolic" />
+        </button>
+    </centerbox>
+);
+
+export default () => (
+    <PopupWindow
+        name="powermenu"
+        transition="slide bottom"
+        // To put it at the center of the screen
+        exclusivity={Astal.Exclusivity.IGNORE}
+    >
+        <PowermenuWidget />
+    </PopupWindow>
+);

nixosModules/ags/v2/widgets/powermenu/style.scss

@@ -0,0 +1,29 @@
+.powermenu {
+    font-size: 70px;
+    padding: 10px;
+
+    icon {
+        min-width: 130px;
+        min-height: 130px;
+    }
+
+    button {
+        margin: 5px 10px;
+        transition: all ease .2s;
+
+        &:hover,
+        &:active {
+            background-color: lighten($window_bg_color, 3%);
+        }
+    }
+
+    .shutdown {
+        color: $red_1;
+    }
+    .reboot {
+        color: $purple_1;
+    }
+    .logout {
+        color: $yellow_1;
+    }
+}