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/notifications/controls/ClearNotificationsButton.tsx

@@ -0,0 +1,36 @@
+import { bind } from 'astal';
+import { clearNotifications } from 'src/globals/notification';
+import { notifdService } from 'src/lib/constants/services';
+import { isPrimaryClick } from 'src/lib/utils';
+import options from 'src/options';
+
+const { clearDelay } = options.notifications;
+
+export const ClearNotificationsButton = (): JSX.Element => {
+    return (
+        <button
+            className={'clear-notifications-button'}
+            tooltipText={'Clear Notifications'}
+            onClick={(_, event) => {
+                if (!isPrimaryClick(event)) {
+                    return;
+                }
+
+                if (removingNotifications.get()) {
+                    return;
+                }
+
+                clearNotifications(notifdService.notifications, clearDelay.get());
+            }}
+        >
+            <label
+                className={bind(removingNotifications).as((removing) => {
+                    return removing
+                        ? 'clear-notifications-label txt-icon removing'
+                        : 'clear-notifications-label txt-icon';
+                })}
+                label={''}
+            />
+        </button>
+    );
+};

src/components/menus/notifications/controls/DndSwitch.tsx

@@ -0,0 +1,18 @@
+import { bind } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import { notifdService } from 'src/lib/constants/services';
+
+export const DndSwitch = (): JSX.Element => {
+    return (
+        <switch
+            className={'menu-switch notifications'}
+            valign={Gtk.Align.CENTER}
+            active={bind(notifdService, 'dontDisturb').as((dontDisturb) => !dontDisturb)}
+            setup={(self) => {
+                self.connect('notify::active', () => {
+                    notifdService.set_dont_disturb(!self.active);
+                });
+            }}
+        />
+    );
+};

src/components/menus/notifications/controls/MenuLabel.tsx

@@ -0,0 +1,9 @@
+import { Gtk } from 'astal/gtk3';
+
+export const MenuLabel = (): JSX.Element => {
+    return (
+        <box className={'menu-label-container notifications'} halign={Gtk.Align.START} valign={Gtk.Align.CENTER} expand>
+            <label className={'menu-label notifications'} label={'Notifications'} />
+        </box>
+    );
+};

src/components/menus/notifications/controls/index.tsx

@@ -0,0 +1,24 @@
+import { Gtk } from 'astal/gtk3';
+import Separator from 'src/components/shared/Separator';
+import { MenuLabel } from './MenuLabel';
+import { DndSwitch } from './DndSwitch';
+import { ClearNotificationsButton } from './ClearNotificationsButton';
+
+const Controls = (): JSX.Element => {
+    return (
+        <box className={'notification-menu-controls'} expand={false} vertical={false}>
+            <MenuLabel />
+            <box halign={Gtk.Align.END} valign={Gtk.Align.CENTER} expand={false}>
+                <DndSwitch />
+                <Separator
+                    halign={Gtk.Align.CENTER}
+                    vexpand={true}
+                    className={'menu-separator notification-controls'}
+                />
+                <ClearNotificationsButton />
+            </box>
+        </box>
+    );
+};
+
+export { Controls };

src/components/menus/notifications/helpers.ts

@@ -0,0 +1,27 @@
+import { bind, Variable } from 'astal';
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
+import { notifdService } from 'src/lib/constants/services';
+const { displayedTotal } = options.notifications;
+
+/**
+ * Handles page boundaries for notifications.
+ *
+ * This function ensures that the current page is within the valid range of pages based on the total number of notifications.
+ * If the current page is empty, it adjusts the current page to the previous page if possible.
+ *
+ * @param curPage The current page variable.
+ */
+export const handlePageBoundaries = (curPage: Variable<number>): void => {
+    Variable.derive(
+        [bind(curPage), bind(displayedTotal), bind(notifdService, 'notifications')],
+        (currentPage: number, dispTotal: number, notifications: AstalNotifd.Notification[]) => {
+            const isPageEmpty = notifications.length <= (currentPage - 1) * dispTotal;
+
+            if (isPageEmpty) {
+                const previousPage = currentPage <= 1 ? 1 : currentPage - 1;
+
+                curPage.set(previousPage);
+            }
+        },
+    );
+};

src/components/menus/notifications/index.tsx

@@ -0,0 +1,35 @@
+import DropdownMenu from '../shared/dropdown/index.js';
+import { Controls } from './controls/index.js';
+import { NotificationsContainer } from './notification/index.js';
+import { NotificationPager } from './pager/index.js';
+import options from 'src/options.js';
+import Variable from 'astal/variable.js';
+import { handlePageBoundaries } from './helpers.js';
+import { bind } from 'astal/binding.js';
+import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+
+const { transition } = options.menus;
+
+export default (): JSX.Element => {
+    const curPage = Variable(1);
+
+    handlePageBoundaries(curPage);
+
+    return (
+        <DropdownMenu
+            name={'notificationsmenu'}
+            transition={bind(transition).as((transition) => RevealerTransitionMap[transition])}
+            onDestroy={() => {
+                curPage.drop();
+            }}
+        >
+            <box className={'notification-menu-content'} css={'padding: 1px; margin: -1px;'} hexpand vexpand>
+                <box className={'notification-card-container menu'} hexpand vexpand vertical>
+                    <Controls />
+                    <NotificationsContainer curPage={curPage} />
+                    <NotificationPager curPage={curPage} />
+                </box>
+            </box>
+        </DropdownMenu>
+    );
+};

src/components/menus/notifications/notification/Placeholder.tsx

@@ -0,0 +1,22 @@
+import { bind } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import { notifdService } from 'src/lib/constants/services';
+
+export const Placeholder = (): JSX.Element => {
+    return (
+        <box className={'notification-label-container'} halign={Gtk.Align.CENTER} valign={Gtk.Align.FILL} expand>
+            <box valign={Gtk.Align.CENTER} vertical expand>
+                <label
+                    className={'placeholder-label dim bell txt-icon'}
+                    label={bind(notifdService, 'dontDisturb').as((dnd) => (dnd ? '󰂛' : '󰂚'))}
+                    valign={Gtk.Align.CENTER}
+                />
+                <label
+                    className={'placeholder-label dim message'}
+                    label={"You're all caught up :)"}
+                    valign={Gtk.Align.START}
+                />
+            </box>
+        </box>
+    );
+};

src/components/menus/notifications/notification/index.tsx

@@ -0,0 +1,66 @@
+import options from 'src/options.js';
+import { filterNotifications } from 'src/lib/shared/notifications.js';
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
+import Variable from 'astal/variable.js';
+import { Gtk } from 'astal/gtk3';
+import { bind } from 'astal/binding.js';
+import { notifdService } from 'src/lib/constants/services.js';
+import { NotificationCard } from 'src/components/notifications/Notification.js';
+import { Placeholder } from './Placeholder';
+
+const { displayedTotal, ignore, showActionsOnHover } = options.notifications;
+
+export const NotificationsContainer = ({ curPage }: NotificationsContainerProps): JSX.Element => {
+    return (
+        <scrollable vscroll={Gtk.PolicyType.AUTOMATIC}>
+            <box className={'menu-content-container notifications'} halign={Gtk.Align.FILL} spacing={0} vexpand>
+                {Variable.derive(
+                    [
+                        bind(notifdService, 'notifications'),
+                        bind(curPage),
+                        bind(displayedTotal),
+                        bind(ignore),
+                        bind(showActionsOnHover),
+                    ],
+                    (notifications, currentPage, totalDisplayed, ignored, hoverActions) => {
+                        const filteredNotifications = filterNotifications(notifications, ignored).sort(
+                            (a, b) => b.time - a.time,
+                        );
+
+                        if (filteredNotifications.length <= 0) {
+                            return <Placeholder />;
+                        }
+
+                        const pageStart = (currentPage - 1) * totalDisplayed;
+                        const pageEnd = currentPage * totalDisplayed;
+
+                        return (
+                            <box
+                                className={'notification-card-content-container'}
+                                valign={Gtk.Align.START}
+                                vexpand={false}
+                                vertical
+                            >
+                                {filteredNotifications
+                                    .slice(pageStart, pageEnd)
+                                    .map((notification: AstalNotifd.Notification) => {
+                                        return (
+                                            <NotificationCard
+                                                className={'notification-card menu'}
+                                                notification={notification}
+                                                showActions={hoverActions}
+                                            />
+                                        );
+                                    })}
+                            </box>
+                        );
+                    },
+                )()}
+            </box>
+        </scrollable>
+    );
+};
+
+interface NotificationsContainerProps {
+    curPage: Variable<number>;
+}

src/components/menus/notifications/pager/Buttons.tsx

@@ -0,0 +1,116 @@
+import { Variable } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
+import { isPrimaryClick } from 'src/lib/utils';
+
+export const FirstPageButton = ({ curPage, currentPage }: FirstPageButtonProps): JSX.Element => {
+    return (
+        <button
+            hexpand={true}
+            halign={Gtk.Align.START}
+            className={`pager-button left ${currentPage <= 1 ? 'disabled' : ''}`}
+            onClick={(_, event) => {
+                if (isPrimaryClick(event)) {
+                    curPage.set(1);
+                }
+            }}
+        >
+            <label className={'pager-button-label'} label={''} />
+        </button>
+    );
+};
+
+export const PreviousPageButton = ({ curPage, currentPage }: PreviousPageButtonProps): JSX.Element => {
+    return (
+        <button
+            hexpand={true}
+            halign={Gtk.Align.START}
+            className={`pager-button left ${currentPage <= 1 ? 'disabled' : ''}`}
+            onClick={(_, event) => {
+                if (isPrimaryClick(event)) {
+                    curPage.set(currentPage <= 1 ? 1 : currentPage - 1);
+                }
+            }}
+        >
+            <label className={'pager-button-label'} label={''} />
+        </button>
+    );
+};
+
+export const NextPageButton = ({
+    curPage,
+    currentPage,
+    notifications,
+    displayedTotal,
+    dispTotal,
+}: NextPageButtonProps): JSX.Element => {
+    return (
+        <button
+            hexpand={true}
+            halign={Gtk.Align.END}
+            className={`pager-button right ${
+                currentPage >= Math.ceil(notifications.length / dispTotal) ? 'disabled' : ''
+            }`}
+            onClick={(_, event) => {
+                if (isPrimaryClick(event)) {
+                    const maxPage = Math.ceil(notifications.length / displayedTotal.get());
+                    curPage.set(currentPage >= maxPage ? maxPage : currentPage + 1);
+                }
+            }}
+        >
+            <label className={'pager-button-label'} label={''} />
+        </button>
+    );
+};
+
+export const LastPageButton = ({
+    curPage,
+    currentPage,
+    notifications,
+    displayedTotal,
+    dispTotal,
+}: LastPageButtonProps): JSX.Element => {
+    return (
+        <button
+            hexpand={true}
+            halign={Gtk.Align.END}
+            className={`pager-button right ${
+                currentPage >= Math.ceil(notifications.length / dispTotal) ? 'disabled' : ''
+            }`}
+            onClick={(_, event) => {
+                if (isPrimaryClick(event)) {
+                    const maxPage = Math.ceil(notifications.length / displayedTotal.get());
+                    curPage.set(maxPage);
+                }
+            }}
+        >
+            <label className={'pager-button-label'} label={'󰄾'} />
+        </button>
+    );
+};
+
+interface FirstPageButtonProps {
+    curPage: Variable<number>;
+    currentPage: number;
+}
+
+interface PreviousPageButtonProps {
+    curPage: Variable<number>;
+    currentPage: number;
+}
+
+interface NextPageButtonProps {
+    curPage: Variable<number>;
+    currentPage: number;
+    notifications: AstalNotifd.Notification[];
+    displayedTotal: Variable<number>;
+    dispTotal: number;
+}
+
+interface LastPageButtonProps {
+    curPage: Variable<number>;
+    currentPage: number;
+    notifications: AstalNotifd.Notification[];
+    displayedTotal: Variable<number>;
+    dispTotal: number;
+}

src/components/menus/notifications/pager/index.tsx

@@ -0,0 +1,76 @@
+import { bind, Variable } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
+import { notifdService } from 'src/lib/constants/services';
+import options from 'src/options';
+import { FirstPageButton, LastPageButton, NextPageButton, PreviousPageButton } from './Buttons';
+
+const { displayedTotal } = options.notifications;
+const { show: showPager } = options.theme.bar.menus.menu.notifications.pager;
+
+const PageDisplay = ({ notifications, currentPage, dispTotal }: PageDisplayProps): JSX.Element => {
+    return (
+        <label
+            hexpand={true}
+            halign={Gtk.Align.CENTER}
+            className={'pager-label'}
+            label={`${currentPage} / ${Math.ceil(notifications.length / dispTotal) || 1}`}
+        />
+    );
+};
+
+export const NotificationPager = ({ curPage }: NotificationPagerProps): JSX.Element => {
+    const pagerBinding = Variable.derive(
+        [bind(curPage), bind(displayedTotal), bind(notifdService, 'notifications'), bind(showPager)],
+        (currentPage, dispTotal, notifications, showPgr) => {
+            if (showPgr === false || (currentPage === 1 && notifications.length <= dispTotal)) {
+                return <box />;
+            }
+
+            return (
+                <box>
+                    <FirstPageButton curPage={curPage} currentPage={currentPage} />
+                    <PreviousPageButton curPage={curPage} currentPage={currentPage} />
+                    <PageDisplay notifications={notifications} currentPage={currentPage} dispTotal={dispTotal} />
+                    <NextPageButton
+                        curPage={curPage}
+                        currentPage={currentPage}
+                        notifications={notifications}
+                        displayedTotal={displayedTotal}
+                        dispTotal={dispTotal}
+                    />
+                    <LastPageButton
+                        curPage={curPage}
+                        currentPage={currentPage}
+                        notifications={notifications}
+                        displayedTotal={displayedTotal}
+                        dispTotal={dispTotal}
+                    />
+                </box>
+            );
+        },
+    );
+
+    return (
+        <box
+            className={'notification-menu-pager'}
+            hexpand={true}
+            vexpand={false}
+            onDestroy={() => {
+                pagerBinding.drop();
+            }}
+        >
+            {pagerBinding()}
+        </box>
+    );
+};
+
+interface NotificationPagerProps {
+    curPage: Variable<number>;
+}
+
+interface PageDisplayProps {
+    notifications: AstalNotifd.Notification[];
+    currentPage: number;
+    dispTotal: number;
+}