Notification monitors (#81)

* added monitor options for notifications

* added monitor options for notifications

* ..

* added changes

* Update widget/settings/pages/config/notifications/index.ts

* Added the ability for left/right anchors for notifications and updated types to reflect that.

* merge (not sure if I did this correct)

* Implemented Wallpaper Selector and Matugen's Wallpaper based auto-theming. (#73)

* Implement matugen - WIP

* Added matugen

* Add types and cleanup code

* Matugen implementation updates and added more options such as scheme and contrast.

* Code cleanup and matugen settings renamed for clarity.

* Makon maroon a primary matugen color.

* Updates to handle variations of matugen colors

* Finalizing matugen and wrapping up variations.

* Minor styling updates of the settings dialog.

* Do a swww dependency check.

* Dependency logic update

* Switch shouldn't double trigger notifications now when checking dependency.

* Logic was inverted

* Add matugen to dependency checker.

* Fixed dependency checking conditional

* Update dependency list in readme and check for matugen before doing matugen operations

* Styling fixes

* OSD Fix

* Remove unused code from wallpaper service.

* Color fixes for matugen.

* Nix updates for new dependencies

* Change default wallpaper to empty.

* Added custom notification service for startup, cleaned up code and updated readme.

* added options for bar media module (#88)

* added options for bar media module

* added reviewed changes

* cleaned up

* Made the media player more responsive and accurate. (#95)

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

lib/types/options.d.ts

@@ -3,7 +3,7 @@ import { Variable } from "types/variable";
 
 export type Unit = "imperial" | "metric";
 export type PowerOptions = "sleep" | "reboot" | "logout" | "shutdown";
-export type NotificationAnchor = "top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left";
+export type NotificationAnchor = "top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left" | "left" | "right";
 export type OSDAnchor = "top left" | "top" | "top right" | "right" | "bottom right" | "bottom" | "bottom left" | "left";
 export type RowProps<T> = {
     opt: Opt<T>

lib/utils.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type Application } from "types/service/applications"
+import { NotificationAnchor } from "./types/options"
+import { OSDAnchor } from "lib/types/options";
 import icons, { substitutes } from "./icons"
 import Gtk from "gi://Gtk?version=3.0"
 import Gdk from "gi://Gdk"
@@ -145,3 +147,18 @@ export const Notify = (notifPayload: NotificationArgs): void => {
 
     Utils.execAsync(command)
 }
+
+export function getPosition (pos: NotificationAnchor | OSDAnchor): ("top" | "bottom" | "left" | "right")[] {
+    const positionMap: { [key: string]: ("top" | "bottom" | "left" | "right")[] } = {
+        "top": ["top"],
+        "top right": ["top", "right"],
+        "top left": ["top", "left"],
+        "bottom": ["bottom"],
+        "bottom right": ["bottom", "right"],
+        "bottom left": ["bottom", "left"],
+        "right": ["right"],
+        "left": ["left"],
+    };
+
+    return positionMap[pos] || ["top"];
+}

modules/notifications/index.ts

@@ -6,9 +6,17 @@ import { Action } from "./actions/index.js";
 import { Header } from "./header/index.js";
 import { Body } from "./body/index.js";
 import { CloseButton } from "./close/index.js";
-import { NotificationAnchor } from "lib/types/options";
+import { getPosition } from "lib/utils.js";
+const hyprland = await Service.import("hyprland");
 
-const { position, timeout, cache_actions } = options.notifications;
+const { position, timeout, cache_actions, monitor, active_monitor } = options.notifications;
+
+
+const curMonitor = Variable(monitor.value);
+
+hyprland.active.connect("changed", () => {
+    curMonitor.value = hyprland.active.monitor.id;
+})
 
 export default () => {
     Utils.merge([timeout.bind("value"), cache_actions.bind("value")], (timeout, doCaching) => {
@@ -16,24 +24,21 @@ export default () => {
         notifs.cacheActions = doCaching;
     });
 
-    const getPosition = (pos: NotificationAnchor): ("top" | "bottom" | "left" | "right")[] => {
-        const positionMap: { [key: string]: ("top" | "bottom" | "left" | "right")[] } = {
-            "top": ["top"],
-            "top right": ["top", "right"],
-            "top left": ["top", "left"],
-            "bottom": ["bottom"],
-            "bottom right": ["bottom", "right"],
-            "bottom left": ["bottom", "left"]
-        };
-
-        return positionMap[pos] || ["top"];
-    }
-
     return Widget.Window({
         name: "notifications-window",
         class_name: "notifications-window",
-        monitor: 2,
-        layer: "top",
+        monitor: Utils.merge([
+            curMonitor.bind("value"),
+            monitor.bind("value"),
+            active_monitor.bind("value")], (curMon, mon, activeMonitor) => {
+                if (activeMonitor === true) {
+                    return curMon;
+                }
+    
+                return mon;
+            }
+        ),
+        layer: "overlay",
         anchor: position.bind("value").as(v => getPosition(v)),
         exclusivity: "ignore",
         child: Widget.Box({

modules/osd/index.ts

@@ -1,9 +1,9 @@
-import { OSDAnchor } from "lib/types/options";
 import options from "options";
 import brightness from "services/Brightness"
 import { OSDLabel } from "./label/index";
 import { OSDBar } from "./bar/index";
 import { OSDIcon } from "./icon/index";
+import { getPosition } from "lib/utils";
 const hyprland = await Service.import("hyprland");
 const audio = await Service.import("audio")
 
@@ -38,20 +38,6 @@ const handleReveal = (self: any, property: string) => {
     })
 }
 
-const getPosition = (pos: OSDAnchor): ("top" | "bottom" | "left" | "right")[] => {
-    const positionMap: { [key: string]: ("top" | "bottom" | "left" | "right")[] } = {
-        "top": ["top"],
-        "top right": ["top", "right"],
-        "top left": ["top", "left"],
-        "bottom": ["bottom"],
-        "bottom right": ["bottom", "right"],
-        "bottom left": ["bottom", "left"],
-        "right": ["right"],
-        "left": ["left"],
-    };
-
-    return positionMap[pos];
-}
 const renderOSD = () => {
 
 

options.ts

@@ -1,4 +1,5 @@
 import { opt, mkOptions } from "lib/option"
+import { NotificationAnchor, OSDAnchor, OSDOrientation } from "lib/types/options";
 import { MatugenScheme, MatugenTheme, MatugenVariation } from "lib/types/options";
 
 // WARN: CHANGING THESE VALUES WILL PREVENT MATUGEN COLOR GENERATION FOR THE CHANGED VALUE
@@ -101,7 +102,7 @@ const options = mkOptions(OPTIONS, {
         },
         osd: {
             enable: opt(true),
-            orientation: opt<"horizontal" | "vertical">("vertical"),
+            orientation: opt<OSDOrientation>("vertical"),
             bar_container: opt(colors.crust),
             icon_container: opt(tertiary_colors.lavender),
             bar_color: opt(tertiary_colors.lavender),
@@ -113,7 +114,7 @@ const options = mkOptions(OPTIONS, {
             active_monitor: opt(true),
             radius: opt("0.4em"),
             margins: opt("0px 5px 0px 0px"),
-            location: opt<"top left" | "top" | "top right" | "right" | "bottom right" | "bottom" | "bottom left" | "left">("right"),
+            location: opt<OSDAnchor>("right"),
         },
         bar: {
             floating: opt(false),
@@ -691,7 +692,7 @@ const options = mkOptions(OPTIONS, {
             truncation_size: opt(30)
         },
         notifications: {
-            show_total: opt(false)
+            show_total: opt(false),
         },
     },
 
@@ -799,7 +800,9 @@ const options = mkOptions(OPTIONS, {
     },
 
     notifications: {
-        position: opt<"top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left">("top right"),
+        position: opt<NotificationAnchor>("top right"),
+        monitor: opt(0),
+        active_monitor: opt(true),
         timeout: opt(7000),
         cache_actions: opt(true),
     },

widget/settings/pages/config/notifications/index.ts

@@ -9,7 +9,9 @@ export const NotificationSettings = () => {
         vertical: true,
         children: [
             Header('Notification Settings'),
-            Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'bottom right', 'bottom', 'bottom left'] }),
+            Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }),
+            Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }),
+            Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }),
             Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }),
             Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }),
         ]