Upgrade to Agsv2 + Astal (#533)

* migrate to astal

* Reorganize project structure.

* progress

* Migrate Dashboard and Window Title modules.

* Migrate clock and notification bar modules.

* Remove unused code

* Media menu

* Rework network and volume modules

* Finish custom modules.

* Migrate battery bar module.

* Update battery module and organize helpers.

* Migrate workspace module.

* Wrap up bar modules.

* Checkpoint before I inevitbly blow something up.

* Updates

* Fix event propagation logic.

* Type fixes

* More type fixes

* Fix padding for event boxes.

* Migrate volume menu and refactor scroll event handlers.

* network module WIP

* Migrate network service.

* Migrate bluetooth menu

* Updates

* Migrate notifications

* Update scrolling behavior for custom modules.

* Improve popup notifications and add timer functionality.

* Migration notifications menu header/controls.

* Migrate notifications menu and consolidate notifications menu code.

* Migrate power menu.

* Dashboard progress

* Migrate dashboard

* Migrate media menu.

* Reduce media menu nesting.

* Finish updating media menu bindings to navigate active player.

* Migrate battery menu

* Consolidate code

* Migrate calendar menu

* Fix workspace logic to update on client add/change/remove and consolidate code.

* Migrate osd

* Consolidate hyprland service connections.

* Implement startup dropdown menu position allocation.

* Migrate settings menu (WIP)

* Settings dialo menu fixes

* Finish Dashboard menu

* Type updates

* update submoldule for types

* update github ci

* ci

* Submodule update

* Ci updates

* Remove type checking for now.

* ci fix

* Fix a bunch of stuff, losing track... need rest. Brb coffee

* Validate dropdown menu before render.

* Consolidate code and add auto-hide functionality.

* Improve auto-hide behavior.

* Consolidate audio menu code

* Organize bluetooth code

* Improve active player logic

* Properly dismiss a notification on action button resolution.

* Implement CLI command engine and migrate CLI commands.

* Handle variable disposal

* Bar component fixes and add hyprland startup rules.

* Handle potentially null bindings network and bluetooth bindings.

* Handle potentially null wired adapter.

* Fix GPU stats

* Handle poller for GPU

* Fix gpu bar logic.

* Clean up logic for stat bars.

* Handle wifi and wired bar icon bindings.

* Fix battery percentages

* Fix switch behavior

* Wifi staging fixes

* Reduce redundant hyprland service calls.

* Code cleanup

* Document the option code and reduce redundant calls to optimize performance.

* Remove outdated comment.

* Add JSDocs

* Add meson to build hyprpanel

* Consistency updates

* Organize commands

* Fix images not showing up on notifications.

* Remove todo

* Move hyprpanel configuration to the ~/.config/hyprpanel directory and add utility commands.

* Handle SRC directory for the bundled/built hyprpanel.

* Add namespaces to all windows

* Migrate systray

* systray updates

* Update meson to include ts, tsx and scss files.

* Remove log from meson

* Fix file choose path and make it float.

* Added a command to check the dependency status

* Update dep names.

* Get scale directly from env

* Add todo

src/components/menus/shared/dropdown/eventBoxes/index.tsx

@@ -0,0 +1,35 @@
+import { App } from 'astal/gtk3';
+import { BarEventMarginsProps, EventBoxPaddingProps } from '../types';
+
+const EventBoxPadding = ({ className, windowName }: EventBoxPaddingProps): JSX.Element => {
+    return (
+        <eventbox
+            className={className}
+            hexpand
+            vexpand={false}
+            canFocus={false}
+            setup={(self) => {
+                self.connect('button-press-event', () => App.toggle_window(windowName));
+            }}
+        >
+            <box />
+        </eventbox>
+    );
+};
+
+export const BarEventMargins = ({ windowName, location = 'top' }: BarEventMarginsProps): JSX.Element => {
+    if (location === 'top') {
+        return (
+            <box className="event-box-container">
+                <EventBoxPadding className="mid-eb event-top-padding-static" windowName={windowName} />
+                <EventBoxPadding className="mid-eb event-top-padding" windowName={windowName} />
+            </box>
+        );
+    } else {
+        return (
+            <box className="event-box-container">
+                <EventBoxPadding className="mid-eb event-bottom-padding-static" windowName={windowName} />
+            </box>
+        );
+    }
+};

src/components/menus/shared/dropdown/helpers.ts

@@ -0,0 +1,46 @@
+import { calculateMenuPosition } from './locationHandler';
+import { App, Gtk } from 'astal/gtk3';
+import { DropdownMenuList } from 'src/lib/types/options';
+
+/**
+ * Handles the realization of a dropdown menu.
+ *
+ * This function attempts to realize a dropdown menu by calculating its position and setting its visibility.
+ * It also processes any pending GTK events to ensure the menu is properly displayed and then hides it.
+ * If an error occurs during the realization process, it logs the error message.
+ *
+ * The primary purpose of this function is to render the menus at least once to generate and calculate their
+ * gemoetry. That way when they're opened later, they'll be displayed at the correct position.
+ *
+ * The menus are originally realized off-screen to prevent flickering when they're opened.
+ *
+ * @param name The name of the dropdown menu to realize.
+ */
+export const handleRealization = async (name: DropdownMenuList): Promise<void> => {
+    try {
+        const appWindow = App.get_window(name);
+
+        if (!appWindow) {
+            return;
+        }
+
+        const coords = [100000, 100000];
+
+        await calculateMenuPosition(coords, name);
+
+        appWindow?.set_visible(true);
+
+        while (Gtk.events_pending()) {
+            Gtk.main_iteration();
+        }
+
+        appWindow?.set_visible(false);
+
+        await calculateMenuPosition([0, 0], name);
+    } catch (error) {
+        if (error instanceof Error) {
+            console.error(`Error realizing ${name}: ${error.message}`);
+        }
+        console.error(`Error realizing ${name}: ${error}`);
+    }
+};

src/components/menus/shared/dropdown/index.tsx

@@ -0,0 +1,113 @@
+import options from 'src/options';
+import { DropdownMenuProps } from 'src/lib/types/dropdownmenu';
+import { BarEventMargins } from './eventBoxes/index';
+import { globalEventBoxes } from 'src/globals/dropdown';
+import { bind } from 'astal';
+import { App, Astal, Gdk } from 'astal/gtk3';
+import { Revealer } from 'astal/gtk3/widget';
+import { locationMap } from 'src/lib/types/defaults/bar';
+
+const { location } = options.theme.bar;
+
+export default ({
+    name,
+    child,
+    transition,
+    exclusivity = Astal.Exclusivity.IGNORE,
+    ...props
+}: DropdownMenuProps): JSX.Element => {
+    return (
+        <window
+            name={name}
+            namespace={name}
+            className={`${name} dropdown-menu`}
+            onKeyPressEvent={(_, event) => {
+                const key = event.get_keyval()[1];
+
+                if (key === Gdk.KEY_Escape) {
+                    App.get_window(name)?.set_visible(false);
+                }
+            }}
+            visible={false}
+            application={App}
+            keymode={Astal.Keymode.ON_DEMAND}
+            exclusivity={exclusivity}
+            layer={Astal.Layer.TOP}
+            anchor={bind(location).as((ln) => {
+                if (locationMap[ln] === Astal.WindowAnchor.TOP) {
+                    return Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT;
+                }
+
+                if (locationMap[ln] === Astal.WindowAnchor.BOTTOM) {
+                    return Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT;
+                }
+            })}
+            {...props}
+        >
+            <eventbox
+                className="parent-event"
+                onButtonPressEvent={(_, event) => {
+                    const buttonClicked = event.get_button()[1];
+
+                    if (buttonClicked === Gdk.BUTTON_PRIMARY || buttonClicked === Gdk.BUTTON_SECONDARY) {
+                        App.get_window(name)?.set_visible(false);
+                    }
+                }}
+            >
+                <box className="top-eb" vertical>
+                    {bind(location).as((lcn) => {
+                        if (locationMap[lcn] === Astal.WindowAnchor.TOP) {
+                            return <BarEventMargins windowName={name} />;
+                        }
+                        return <box />;
+                    })}
+                    <eventbox
+                        className="in-eb menu-event-box"
+                        onButtonPressEvent={(_, event) => {
+                            const buttonClicked = event.get_button()[1];
+
+                            if (buttonClicked === Gdk.BUTTON_PRIMARY || buttonClicked === Gdk.BUTTON_SECONDARY) {
+                                return true;
+                            }
+                        }}
+                        setup={(self) => {
+                            globalEventBoxes.set({
+                                ...globalEventBoxes.get(),
+                                [name]: self,
+                            });
+                        }}
+                    >
+                        <box className="dropdown-menu-container" css="padding: 1px; margin: -1px;">
+                            <revealer
+                                revealChild={false}
+                                setup={(self: Revealer) => {
+                                    App.connect('window-toggled', (app) => {
+                                        const targetWindow = app.get_window(name);
+
+                                        const visibility = targetWindow?.get_visible();
+
+                                        if (targetWindow?.name === name) {
+                                            self.set_reveal_child(visibility ?? false);
+                                        }
+                                    });
+                                }}
+                                transitionType={transition}
+                                transitionDuration={bind(options.menus.transitionTime)}
+                            >
+                                <box className="dropdown-menu-container" canFocus>
+                                    {child}
+                                </box>
+                            </revealer>
+                        </box>
+                    </eventbox>
+                    {bind(location).as((lcn) => {
+                        if (locationMap[lcn] === Astal.WindowAnchor.BOTTOM) {
+                            return <BarEventMargins windowName={name} />;
+                        }
+                        return <box />;
+                    })}
+                </box>
+            </eventbox>
+        </window>
+    );
+};

src/components/menus/shared/dropdown/locationHandler/index.ts

@@ -0,0 +1,97 @@
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+
+import options from 'src/options';
+import { bash } from 'src/lib/utils';
+import { globalEventBoxes } from 'src/globals/dropdown';
+import { GLib } from 'astal';
+import { EventBox } from 'astal/gtk3/widget';
+
+const hyprland = AstalHyprland.get_default();
+
+const { location } = options.theme.bar;
+const { scalingPriority } = options;
+
+export const calculateMenuPosition = async (pos: number[], windowName: string): Promise<void> => {
+    try {
+        const self = globalEventBoxes.get()[windowName] as EventBox;
+
+        const curHyprlandMonitor = hyprland.get_monitors().find((m) => m.id === hyprland.focusedMonitor.id);
+
+        const dropdownWidth = self.get_child()?.get_allocation().width ?? 0;
+        const dropdownHeight = self.get_child()?.get_allocation().height ?? 0;
+
+        let hyprScaling = 1;
+        const monitorInfo = await bash('hyprctl monitors -j');
+        const parsedMonitorInfo = JSON.parse(monitorInfo);
+
+        const foundMonitor = parsedMonitorInfo.find(
+            (monitor: AstalHyprland.Monitor) => monitor.id === hyprland.focusedMonitor.id,
+        );
+        hyprScaling = foundMonitor?.scale || 1;
+
+        let monWidth = curHyprlandMonitor?.width;
+        let monHeight = curHyprlandMonitor?.height;
+
+        if (monWidth === undefined || monHeight === undefined || hyprScaling === undefined) {
+            return;
+        }
+
+        // If GDK Scaling is applied, then get divide width by scaling
+        // to get the proper coordinates.
+        // Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
+        // end of the monitor is the 1430th pixel.
+        const gdkScale = GLib.getenv('GDK_SCALE') || '1';
+
+        if (scalingPriority.get() === 'both') {
+            const scale = parseFloat(gdkScale);
+            monWidth = monWidth / scale;
+            monHeight = monHeight / scale;
+
+            monWidth = monWidth / hyprScaling;
+            monHeight = monHeight / hyprScaling;
+        } else if (/^\d+(.\d+)?$/.test(gdkScale) && scalingPriority.get() === 'gdk') {
+            const scale = parseFloat(gdkScale);
+            monWidth = monWidth / scale;
+            monHeight = monHeight / scale;
+        } else {
+            monWidth = monWidth / hyprScaling;
+            monHeight = monHeight / hyprScaling;
+        }
+
+        // If monitor is vertical (transform = 1 || 3) swap height and width
+        const isVertical = curHyprlandMonitor?.transform !== undefined ? curHyprlandMonitor.transform % 2 !== 0 : false;
+
+        if (isVertical) {
+            [monWidth, monHeight] = [monHeight, monWidth];
+        }
+
+        let marginRight = monWidth - dropdownWidth / 2;
+        marginRight = marginRight - pos[0];
+        let marginLeft = monWidth - dropdownWidth - marginRight;
+
+        const minimumMargin = 0;
+
+        if (marginRight < minimumMargin) {
+            marginRight = minimumMargin;
+            marginLeft = monWidth - dropdownWidth - minimumMargin;
+        }
+
+        if (marginLeft < minimumMargin) {
+            marginLeft = minimumMargin;
+            marginRight = monWidth - dropdownWidth - minimumMargin;
+        }
+
+        self.set_margin_left(marginLeft);
+        self.set_margin_right(marginRight);
+
+        if (location.get() === 'top') {
+            self.set_margin_top(0);
+            self.set_margin_bottom(monHeight);
+        } else {
+            self.set_margin_bottom(0);
+            self.set_margin_top(monHeight - dropdownHeight);
+        }
+    } catch (error) {
+        console.error(`Error getting menu position: ${error}`);
+    }
+};

src/components/menus/shared/dropdown/types.ts

@@ -0,0 +1,11 @@
+import { BarLocation } from 'src/lib/types/options';
+
+export type EventBoxPaddingProps = {
+    className: string;
+    windowName: string;
+};
+
+export type BarEventMarginsProps = {
+    windowName: string;
+    location?: BarLocation;
+};

src/components/menus/shared/popup/index.tsx

@@ -0,0 +1,160 @@
+import { App, Astal, Gdk, Gtk } from 'astal/gtk3';
+import { WINDOW_LAYOUTS } from 'src/globals/window';
+import { LayoutFunction, Layouts, PaddingProps, PopupRevealerProps, PopupWindowProps } from 'src/lib/types/popupwindow';
+import { Exclusivity, GtkWidget } from 'src/lib/types/widget';
+import { EventBox, Revealer } from 'astal/gtk3/widget';
+
+export const Padding = ({ name, opts }: PaddingProps): JSX.Element => (
+    <eventbox
+        className={opts?.className ?? ''}
+        hexpand
+        vexpand={typeof opts?.vexpand === 'boolean' ? opts.vexpand : true}
+        canFocus={false}
+        setup={(self: EventBox) => self.connect('button-press-event', () => App.toggle_window(name))}
+    >
+        <box />
+    </eventbox>
+);
+
+const PopupRevealer = ({ name, child, transition }: PopupRevealerProps): JSX.Element => (
+    <box css={'padding: 1px'}>
+        <revealer
+            transitionType={transition}
+            transition_duration={200}
+            setup={(self: Revealer) => {
+                App.connect('window-toggled', (app) => {
+                    self.revealChild = app.get_window(name)?.is_visible() ?? false;
+                });
+            }}
+        >
+            <box className={`window-content ${name}-window`}>{child}</box>
+        </revealer>
+    </box>
+);
+
+const Layout: LayoutFunction = (name: string, child: GtkWidget, transition: Gtk.RevealerTransitionType) => ({
+    center: () => (
+        <centerbox>
+            <Padding name={name} />
+            <centerbox vertical>
+                <Padding name={name} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+                <Padding name={name} />
+            </centerbox>
+            <Padding name={name} />
+        </centerbox>
+    ),
+    top: () => (
+        <centerbox>
+            <Padding name={name} />
+            <box vertical>
+                <PopupRevealer name={name} child={child} transition={transition} />
+                <Padding name={name} />
+            </box>
+            <Padding name={name} />
+        </centerbox>
+    ),
+    'top-right': () => (
+        <box>
+            <Padding name={name} />
+            <box hexpand vertical>
+                <Padding name={name} opts={{ vexpand: false, className: 'event-top-padding' }} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+                <Padding name={name} />
+            </box>
+        </box>
+    ),
+    'top-center': () => (
+        <box>
+            <Padding name={name} />
+            <box hexpand={false} vertical>
+                <Padding name={name} opts={{ vexpand: false, className: 'event-top-padding' }} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+                <Padding name={name} />
+            </box>
+            <Padding name={name} />
+        </box>
+    ),
+    'top-left': () => (
+        <box>
+            <Padding name={name} />
+            <box hexpand={false} vertical>
+                <Padding name={name} opts={{ vexpand: false, className: 'event-top-padding' }} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+                <Padding name={name} />
+            </box>
+            <Padding name={name} />
+        </box>
+    ),
+    'bottom-left': () => (
+        <box>
+            <box hexpand={false} vertical>
+                <Padding name={name} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+            </box>
+            <Padding name={name} />
+        </box>
+    ),
+    'bottom-center': () => (
+        <box>
+            <Padding name={name} />
+            <box hexpand={false} vertical>
+                <Padding name={name} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+            </box>
+            <Padding name={name} />
+        </box>
+    ),
+    'bottom-right': () => (
+        <box>
+            <Padding name={name} />
+            <box hexpand={false} vertical>
+                <Padding name={name} />
+                <PopupRevealer name={name} child={child} transition={transition} />
+            </box>
+        </box>
+    ),
+});
+
+const isValidLayout = (layout: string): layout is Layouts => {
+    return WINDOW_LAYOUTS.includes(layout);
+};
+
+export default ({
+    name,
+    child,
+    layout = 'center',
+    transition = 'none',
+    exclusivity = 'ignore' as Exclusivity,
+    ...props
+}: PopupWindowProps): JSX.Element => {
+    const layoutFn = isValidLayout(layout) ? layout : 'center';
+
+    const layoutWidget = Layout(name, child, transition)[layoutFn]();
+
+    return (
+        <window
+            name={name}
+            namespace={name}
+            className={`${name} popup-window`}
+            onKeyPressEvent={(_, event) => {
+                const key = event.get_keyval()[1];
+
+                if (key === Gdk.KEY_Escape) {
+                    App.get_window(name)?.set_visible(false);
+                }
+            }}
+            visible={false}
+            keymode={Astal.Keymode.ON_DEMAND}
+            exclusivity={exclusivity}
+            application={App}
+            layer={Astal.Layer.TOP}
+            anchor={
+                Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.LEFT
+            }
+            {...props}
+        >
+            {layoutWidget}
+        </window>
+    );
+};