Added filters for notifications and system tray items. (#234)

* Added filters for notifications and systray. closes #233

* Add links to documentation.

customModules/module.ts

@@ -46,6 +46,7 @@ export const module = ({
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
                 return `${boxClass} ${styleMap[style]} ${!shouldShowLabel ? "no-label" : ""}`;
             }),

globals.d.ts

@@ -0,0 +1,9 @@
+// globals.d.ts
+
+import { Variable as VariableType } from "types/variable";
+
+declare global {
+    var globalMousePos: VariableType<number[]>;
+}
+
+export { };

globals/mousePos.ts

@@ -1,3 +1,5 @@
-const globalMousePosVar = Variable([0, 0]);
+import { Variable as VariableType } from "types/variable";
+
+const globalMousePosVar: VariableType<number[]> = Variable([0, 0]);
 
 globalThis["globalMousePos"] = globalMousePosVar;

lib/shared/media.ts

@@ -13,17 +13,17 @@ export const getCurrentPlayer = (activePlayer: MprisPlayer = mpris.players[0]):
     }
 
     const isPlaying = mpris.players.some(
-        (p) => p["play-back-status"] === "Playing",
+        (p: MprisPlayer) => p.play_back_status === "Playing",
     );
 
     const playerStillExists = mpris.players.some(
-        (p) => activePlayer["bus-name"] === p["bus-name"],
+        (p) => activePlayer.bus_name === p.bus_name
     );
 
     const nextPlayerUp = mpris.players.sort(
-        (a, b) =>
+        (a: MprisPlayer, b: MprisPlayer) =>
-            statusOrder[a["play-back-status"]] -
+            statusOrder[a.play_back_status] -
-            statusOrder[b["play-back-status"]],
+            statusOrder[b.play_back_status],
     )[0];
 
     if (isPlaying || !playerStillExists) {

lib/shared/notifications.ts

@@ -0,0 +1,15 @@
+import { Notification } from "types/service/notifications";
+
+export const filterNotifications = (notifications: Notification[], filter: string[]): Notification[] => {
+
+    const notifFilter = new Set(
+        filter.map((name: string) => name.toLowerCase().replace(/\s+/g, '_'))
+    );
+
+    const filteredNotifications = notifications.filter((notif: Notification) => {
+        const normalizedAppName = notif.app_name.toLowerCase().replace(/\s+/g, '_');
+        return !notifFilter.has(normalizedAppName);
+    });
+
+    return filteredNotifications;
+}

lib/types/volume.d.ts

@@ -0,0 +1,3 @@
+export type VolumeIcons = {
+    [index: number]: string
+}

modules/bar/battery/index.ts

@@ -46,6 +46,7 @@ const BatteryLabel = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
                 return `battery ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
             }),

modules/bar/bluetooth/index.ts

@@ -32,6 +32,7 @@ const Bluetooth = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
                 return `bluetooth ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
             }),

modules/bar/clock/index.ts

@@ -33,6 +33,7 @@ const Clock = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
 
                 return `bluetooth ${styleMap[btnStyle]} ${!shwLbl ? "no-label" : ""} ${!shwIcn ? "no-icon" : ""}`;

modules/bar/media/index.ts

@@ -70,6 +70,7 @@ const Media = () => {
                         default: "style1",
                         split: "style2",
                         wave: "style3",
+                        wave2: "style3",
                     };
                     return `media ${styleMap[style]}`;
                 }),

modules/bar/menu/index.ts

@@ -10,6 +10,7 @@ const Menu = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
                 return `dashboard ${styleMap[style]}`;
             }),

modules/bar/network/index.ts

@@ -15,6 +15,7 @@ const Network = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
                 return `network ${styleMap[style]}${!showLabel ? " no-label" : ""}`;
             }),

modules/bar/notifications/index.ts

@@ -1,8 +1,10 @@
 import Gdk from 'gi://Gdk?version=3.0';
 import { openMenu } from "../utils.js";
 import options from "options";
+import { filterNotifications } from 'lib/shared/notifications.js';
 
 const { show_total } = options.bar.notifications;
+const { ignore } = options.notifications;
 
 const notifs = await Service.import("notifications");
 
@@ -10,11 +12,20 @@ export const Notifications = () => {
     return {
         component: Widget.Box({
             hpack: "start",
-            className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_total.bind("value")], (style, showTotal) => {
+            className: Utils.merge(
+                [
+                    options.theme.bar.buttons.style.bind("value"),
+                    show_total.bind("value")
+                ],
+                (
+                    style,
+                    showTotal
+                ) => {
                     const styleMap = {
                         default: "style1",
                         split: "style2",
                         wave: "style3",
+                        wave2: "style3",
                     };
                     return `notifications ${styleMap[style]} ${!showTotal ? "no-label" : ""}`;
                 }),
@@ -22,18 +33,20 @@ export const Notifications = () => {
                 hpack: "start",
                 class_name: "bar-notifications",
                 children: Utils.merge(
-                    [notifs.bind("notifications"), notifs.bind("dnd"), show_total.bind("value")],
+                    [notifs.bind("notifications"), notifs.bind("dnd"), show_total.bind("value"), ignore.bind("value")],
-                    (notif, dnd, showTotal) => {
+                    (notif, dnd, showTotal, ignoredNotifs) => {
+                        const filteredNotifications = filterNotifications(notif, ignoredNotifs);
+
                         const notifIcon = Widget.Label({
                             hpack: "center",
                             class_name: "bar-button-icon notifications txt-icon bar",
-                            label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
+                            label: dnd ? "󰂛" : filteredNotifications.length > 0 ? "󱅫" : "󰂚",
                         });
 
                         const notifLabel = Widget.Label({
                             hpack: "center",
                             class_name: "bar-button-label notifications",
-                            label: notif.length.toString(),
+                            label: filteredNotifications.length.toString(),
                         });
 
                         if (showTotal) {

modules/bar/systray/index.ts

@@ -1,4 +1,5 @@
 import Gdk from 'gi://Gdk?version=3.0';
+import { Notify } from 'lib/utils';
 const systemtray = await Service.import("systemtray");
 import options from "options";
 
@@ -27,6 +28,7 @@ const SysTray = () => {
                     }),
                     on_primary_click: (_: any, event: Gdk.Event) => item.activate(event),
                     on_secondary_click: (_, event) => item.openMenu(event),
+                    onMiddleClick: () => Notify({ summary: "App Name", body: item.id }),
                     tooltip_markup: item.bind("tooltip_markup"),
                 });
             });

modules/bar/volume/index.ts

@@ -2,9 +2,11 @@ import Gdk from 'gi://Gdk?version=3.0';
 const audio = await Service.import("audio");
 import { openMenu } from "../utils.js";
 import options from "options";
+import { Binding } from 'lib/utils.js';
+import { VolumeIcons } from 'lib/types/volume.js';
 
 const Volume = () => {
-    const icons = {
+    const icons: VolumeIcons = {
         101: "󰕾",
         66: "󰕾",
         34: "󰖀",
@@ -13,16 +15,16 @@ const Volume = () => {
     };
 
     const getIcon = () => {
-        const icon = Utils.merge(
+        const icon: Binding<number> = Utils.merge(
             [audio.speaker.bind("is_muted"), audio.speaker.bind("volume")],
             (isMuted, vol) => {
                 return isMuted
                     ? 0
-                    : [101, 66, 34, 1, 0].find((threshold) => threshold <= vol * 100);
+                    : [101, 66, 34, 1, 0].find((threshold) => threshold <= vol * 100) || 101;
             },
         );
 
-        return icon.as((i) => i !== undefined ? icons[i] : 101);
+        return icon.as((i: number) => i !== undefined ? icons[i] : icons[101]);
     };
 
     const volIcn = Widget.Label({
@@ -46,6 +48,7 @@ const Volume = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
 
                 return `volume ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;

modules/bar/window_title/index.ts

@@ -140,6 +140,7 @@ const ClientTitle = () => {
                     default: "style1",
                     split: "style2",
                     wave: "style3",
+                    wave2: "style3",
                 };
                 return `windowtitle ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
             }),

modules/menus/notifications/notification/index.ts

@@ -8,8 +8,9 @@ import { Body } from "./body/index.js";
 import { CloseButton } from "./close/index.js";
 import options from "options.js";
 import { Variable } from "types/variable.js";
+import { filterNotifications } from "lib/shared/notifications.js";
 
-const { displayedTotal } = options.notifications;
+const { displayedTotal, ignore } = options.notifications;
 
 const NotificationCard = (notifs: Notifications, curPage: Variable<number>) => {
     return Widget.Scrollable({
@@ -21,12 +22,26 @@ const NotificationCard = (notifs: Notifications, curPage: Variable<number>) => {
             spacing: 0,
             vertical: true,
             setup: (self) => {
-                Utils.merge([notifs.bind("notifications"), curPage.bind("value"), displayedTotal.bind("value")], (notifications, currentPage, dispTotal) => {
+                Utils.merge(
-                    const sortedNotifications = notifications.sort(
+                    [
+                        notifs.bind("notifications"),
+                        curPage.bind("value"),
+                        displayedTotal.bind("value"),
+                        ignore.bind("value")
+                    ],
+                    (
+                        notifications,
+                        currentPage,
+                        dispTotal,
+                        ignoredNotifs
+                    ) => {
+                        const filteredNotifications = filterNotifications(notifications, ignoredNotifs);
+
+                        const sortedNotifications = filteredNotifications.sort(
                             (a, b) => b.time - a.time,
                         );
 
-                    if (notifications.length <= 0) {
+                        if (filteredNotifications.length <= 0) {
                             return (self.children = [Placeholder(notifs)]);
                         }
 

modules/notifications/index.ts

@@ -7,9 +7,11 @@ import { Header } from "./header/index.js";
 import { Body } from "./body/index.js";
 import { CloseButton } from "./close/index.js";
 import { getPosition } from "lib/utils.js";
+import { filterNotifications } from "lib/shared/notifications.js";
+import { Notification } from "types/service/notifications.js";
 const hyprland = await Service.import("hyprland");
 
-const { position, timeout, cache_actions, monitor, active_monitor, displayedTotal } = options.notifications;
+const { position, timeout, cache_actions, monitor, active_monitor, displayedTotal, ignore } = options.notifications;
 
 
 const curMonitor = Variable(monitor.value);
@@ -46,8 +48,10 @@ export default () => {
             vertical: true,
             hexpand: true,
             setup: (self) => {
-                self.hook(notifs, () => {
+                Utils.merge([notifs.bind("popups"), ignore.bind("value")], (notifications: Notification[], ignoredNotifs: string[]) => {
-                    return (self.children = notifs.popups.slice(0, displayedTotal.value).map((notif) => {
+                    const filteredNotifications = filterNotifications(notifications, ignoredNotifs);
+
+                    return (self.children = filteredNotifications.slice(0, displayedTotal.value).map((notif) => {
                         return Widget.Box({
                             class_name: "notification-card",
                             vpack: "start",
@@ -65,7 +69,7 @@ export default () => {
                             ],
                         });
                     }));
-                });
+                })
             },
         }),
     });

options.ts

@@ -849,7 +849,7 @@ const options = mkOptions(OPTIONS, {
             label: opt(true),
         },
         systray: {
-            ignore: opt([]),
+            ignore: opt<string[]>([]),
         },
         clock: {
             icon: opt("󰸗"),
@@ -1068,6 +1068,7 @@ const options = mkOptions(OPTIONS, {
 
     notifications: {
         position: opt<NotificationAnchor>("top right"),
+        ignore: opt<string[]>([]),
         displayedTotal: opt(10),
         monitor: opt(0),
         active_monitor: opt(true),

tsconfig.json

@@ -9,7 +9,7 @@
         "allowJs": true,
         "checkJs": true,
         "strict": true,
-        "noImplicitAny": false,
+        "noImplicitAny": true,
         "baseUrl": ".",
         "typeRoots": [
             "types",

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

@@ -2,8 +2,10 @@ import { Option } from "widget/settings/shared/Option";
 import { Header } from "widget/settings/shared/Header";
 
 import options from "options";
+import Scrollable from "types/widgets/scrollable";
+import Gtk from "types/@girs/gtk-3.0/gtk-3.0";
 
-export const BarSettings = () => {
+export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
     return Widget.Scrollable({
         vscroll: "always",
         hscroll: "automatic",
@@ -11,109 +13,423 @@ export const BarSettings = () => {
         child: Widget.Box({
             vertical: true,
             children: [
-                Header('Layouts'),
+                /*
-                Option({
+                 ******************************
+                 *           LAYOUTS          *
+                 ******************************
+                 */
+                Header("Layouts"),
+                Option(
+                    {
                         opt: options.bar.layouts,
-                    title: 'Bar Layouts for Monitors',
+                        title: "Bar Layouts for Monitors",
-                    subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#layouts',
+                        subtitle: "Wiki Link: https://hyprpanel.com/configuration/panel.html#layouts",
-                    type: 'object',
+                        type: "object",
-                    subtitleLink: 'https://hyprpanel.com/configuration/panel.html#layouts'
+                        subtitleLink: "https://hyprpanel.com/configuration/panel.html#layouts",
                     },
-                    'bar-layout-input'),
+                    "bar-layout-input"
+                ),
 
-                Header('Spacing'),
+                /*
-                Option({ opt: options.theme.bar.outer_spacing, title: 'Outer Spacing', subtitle: 'Spacing on the outer left and right edges of the bar.', type: 'string' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.y_margins, title: 'Vertical Margins', subtitle: 'Spacing above/below the buttons in the bar.', type: 'string' }),
+                 *          SPACING           *
-                Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', subtitle: 'Spacing between the buttons in the bar.', type: 'string' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.padding_x, title: 'Button Horizontal Padding', type: 'string' }),
+                 */
-                Option({ opt: options.theme.bar.buttons.padding_y, title: 'Button Vertical Padding', type: 'string' }),
+                Header("Spacing"),
-                Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
+                Option({
-                Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),
+                    opt: options.theme.bar.outer_spacing,
-                Option({ opt: options.theme.bar.layer, title: 'Layer', type: 'enum', subtitle: 'Layer determines the Z index of your bar.', enums: ["top", "bottom", "overlay", "background"] }),
+                    title: "Outer Spacing",
-                Option({ opt: options.theme.bar.margin_top, title: 'Margin Top', subtitle: 'Only applies if floating is enabled', type: 'string' }),
+                    subtitle: "Spacing on the outer left and right edges of the bar.",
-                Option({ opt: options.theme.bar.margin_bottom, title: 'Margin Bottom', subtitle: 'Only applies if floating is enabled', type: 'string' }),
+                    type: "string",
-                Option({ opt: options.theme.bar.margin_sides, title: 'Margin Sides', subtitle: 'Only applies if floating is enabled', type: 'string' }),
+                }),
-                Option({ opt: options.theme.bar.border_radius, title: 'Border Radius', subtitle: 'Only applies if floating is enabled', type: 'string' }),
+                Option({
+                    opt: options.theme.bar.buttons.y_margins,
+                    title: "Vertical Margins",
+                    subtitle: "Spacing above/below the buttons in the bar.",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.spacing,
+                    title: "Button Spacing",
+                    subtitle: "Spacing between the buttons in the bar.",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.padding_x,
+                    title: "Button Horizontal Padding",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.padding_y,
+                    title: "Button Vertical Padding",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.radius,
+                    title: "Button Radius",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.floating,
+                    title: "Floating Bar",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.layer,
+                    title: "Layer",
+                    type: "enum",
+                    subtitle: "Layer determines the Z index of your bar.",
+                    enums: ["top", "bottom", "overlay", "background"],
+                }),
+                Option({
+                    opt: options.theme.bar.margin_top,
+                    title: "Margin Top",
+                    subtitle: "Only applies if floating is enabled",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.margin_bottom,
+                    title: "Margin Bottom",
+                    subtitle: "Only applies if floating is enabled",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.margin_sides,
+                    title: "Margin Sides",
+                    subtitle: "Only applies if floating is enabled",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.border_radius,
+                    title: "Border Radius",
+                    subtitle: "Only applies if floating is enabled",
+                    type: "string",
+                }),
 
-                Header('Dashboard'),
+                /*
-                Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }),
+                 ******************************
+                 *         DASHBOARD          *
+                 ******************************
+                 */
+                Header("Dashboard"),
+                Option({
+                    opt: options.bar.launcher.icon,
+                    title: "Dashboard Menu Icon",
+                    type: "string",
+                }),
 
-                Header('Workspaces'),
+                /*
-                Option({ opt: options.bar.workspaces.show_icons, title: 'Show Workspace Icons', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.bar.workspaces.icons.available, title: 'Workspace Available', type: 'string' }),
+                 *         WORKSPACES         *
-                Option({ opt: options.bar.workspaces.icons.active, title: 'Workspace Active', type: 'string' }),
+                 ******************************
-                Option({ opt: options.bar.workspaces.icons.occupied, title: 'Workspace Occupied', type: 'string' }),
+                 */
-                Option({ opt: options.bar.workspaces.show_numbered, title: 'Show Workspace Numbers', type: 'boolean' }),
+                Header("Workspaces"),
-                Option({ opt: options.bar.workspaces.numbered_active_indicator, title: 'Numbered Workspace Identifier', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'enum', enums: ["underline", "highlight", "color"] }),
+                Option({
-                Option({ opt: options.theme.bar.buttons.workspaces.numbered_active_highlight_border, title: 'Highlight Radius', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'string' }),
+                    opt: options.bar.workspaces.show_icons,
-                Option({ opt: options.theme.bar.buttons.workspaces.numbered_active_highlight_padding, title: 'Highlight Padding', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'string' }),
+                    title: "Show Workspace Icons",
-                Option({ opt: options.bar.workspaces.spacing, title: 'Spacing', subtitle: 'Spacing between workspace icons', type: 'float' }),
+                    type: "boolean",
-                Option({ opt: options.bar.workspaces.workspaces, title: 'Total Workspaces', subtitle: 'The least amount of workspaces to always show.', type: 'number' }),
+                }),
-                Option({ opt: options.bar.workspaces.monitorSpecific, title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed.\nWorks in conjuction with \'Total Workspaces\'.', type: 'boolean' }),
+                Option({
-                Option({ opt: options.bar.workspaces.hideUnoccupied, title: 'Hide Unoccupied', subtitle: 'Only show workspaces that are occupied or active', type: 'boolean' }),
+                    opt: options.bar.workspaces.icons.available,
+                    title: "Workspace Available",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.workspaces.icons.active,
+                    title: "Workspace Active",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.workspaces.icons.occupied,
+                    title: "Workspace Occupied",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.workspaces.show_numbered,
+                    title: "Show Workspace Numbers",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.workspaces.numbered_active_indicator,
+                    title: "Numbered Workspace Identifier",
+                    subtitle: "Only applicable if Workspace Numbers are enabled",
+                    type: "enum",
+                    enums: ["underline", "highlight", "color"],
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.workspaces.numbered_active_highlight_border,
+                    title: "Highlight Radius",
+                    subtitle: "Only applicable if Workspace Numbers are enabled",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.workspaces.numbered_active_highlight_padding,
+                    title: "Highlight Padding",
+                    subtitle: "Only applicable if Workspace Numbers are enabled",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.workspaces.spacing,
+                    title: "Spacing",
+                    subtitle: "Spacing between workspace icons",
+                    type: "float",
+                }),
+                Option({
+                    opt: options.bar.workspaces.workspaces,
+                    title: "Total Workspaces",
+                    subtitle: "The least amount of workspaces to always show.",
+                    type: "number",
+                }),
+                Option({
+                    opt: options.bar.workspaces.monitorSpecific,
+                    title: "Monitor Specific",
+                    subtitle:
+                        "Only workspaces applicable to the monitor will be displayed.\n" +
+                        "Works in conjuction with 'Total Workspaces'.",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.workspaces.hideUnoccupied,
+                    title: "Hide Unoccupied",
+                    subtitle: "Only show workspaces that are occupied or active",
+                    type: "boolean",
+                }),
                 Option({
                     opt: options.bar.workspaces.workspaceMask,
-                    title: 'Mask Workspace Numbers On Monitors',
+                    title: "Mask Workspace Numbers On Monitors",
-
+                    subtitle: "Only applicable if Workspace Numbers and Monitor Specific are enabled.\n" +
-                    subtitle: `Only applicable if Workspace Numbers and Monitor Specific are enabled.
+                        "Forces each Monitor's Workspace labels to start from 1.",
-Forces each Monitor's Workspace labels to start from 1.`,
+                    type: "boolean",
-                    type: 'boolean'
+                }),
+                Option({
+                    opt: options.bar.workspaces.reverse_scroll,
+                    title: "Invert Scroll",
+                    subtitle: "Scrolling up will go to the previous workspace rather than the next.",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.workspaces.scroll_speed,
+                    title: "Scrolling Speed",
+                    type: "number",
                 }),
-                Option({ opt: options.bar.workspaces.reverse_scroll, title: 'Invert Scroll', subtitle: 'Scrolling up will go to the previous workspace rather than the next.', type: 'boolean' }),
-                Option({ opt: options.bar.workspaces.scroll_speed, title: 'Scrolling Speed', type: 'number' }),
 
-                Header('Window Titles'),
+                /*
-                Option({ opt: options.bar.windowtitle.label, title: 'Show Window Title Label', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.windowtitle.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 *       WINDOW TITLES        *
+                 ******************************
+                 */
+                Header("Window Titles"),
+                Option({
+                    opt: options.bar.windowtitle.label,
+                    title: "Show Window Title Label",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.windowtitle.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
                 Option({
                     opt: options.bar.windowtitle.title_map,
-                    title: 'Window Title Mappings',
+                    title: "Window Title Mappings",
-                    subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings',
+                    subtitle: "Wiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings",
-                    type: 'object',
+                    type: "object",
-                    subtitleLink: 'https://hyprpanel.com/configuration/panel.html#window-title-mappings'
+                    subtitleLink: "https://hyprpanel.com/configuration/panel.html#window-title-mappings",
                 }),
 
-                Header('Volume'),
+                /*
-                Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.volume.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 *          VOLUME            *
+                 ******************************
+                 */
+                Header("Volume"),
+                Option({
+                    opt: options.bar.volume.label,
+                    title: "Show Volume Percentage",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.volume.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
 
-                Header('Network'),
+                /*
-                Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.bar.network.truncation, title: 'Truncate Network Name', subtitle: 'Will truncate the network name to the specified size below.', type: 'boolean' }),
+                 *          NETWORK           *
-                Option({ opt: options.bar.network.truncation_size, title: 'Truncation Size', type: 'number' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.network.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 */
+                Header("Network"),
+                Option({
+                    opt: options.bar.network.label,
+                    title: "Show Network Name",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.network.truncation,
+                    title: "Truncate Network Name",
+                    subtitle: "Will truncate the network name to the specified size below.",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.network.truncation_size,
+                    title: "Truncation Size",
+                    type: "number",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.network.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
 
-                Header('Bluetooth'),
+                /*
-                Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.bluetooth.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 *         BLUETOOTH          *
+                 ******************************
+                 */
+                Header("Bluetooth"),
+                Option({
+                    opt: options.bar.bluetooth.label,
+                    title: "Show Bluetooth Label",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.bluetooth.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
 
-                Header('Battery'),
+                /*
-                Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.battery.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 *          BATTERY           *
+                 ******************************
+                 */
+                Header("Battery"),
+                Option({
+                    opt: options.bar.battery.label,
+                    title: "Show Battery Percentage",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.battery.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
 
-                // Header('System Tray'),
+                /*
-                // TODO: Figure out how to handle arrays
+                 ******************************
-                // Option({ opt: options.bar.systray.ignore, title: 'Ignore', subtitle: 'Comma separated string of apps to ignore in the tray', type: 'string' }),
+                 *        SYSTEM TRAY         *
+                 ******************************
+                 */
+                Header("System Tray"),
+                Option({
+                    opt: options.bar.systray.ignore,
+                    title: "Ignore List",
+                    subtitle:
+                        "An array of applications to prevent from showing in the system tray.\n" +
+                        "Wiki: https://hyprpanel.com/configuration/panel.html#system-tray",
+                    subtitleLink: "https://hyprpanel.com/configuration/panel.html#system-tray",
+                    type: "object",
+                }),
 
-                Header('Clock'),
+                /*
-                Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
+                 ******************************
-                Option({ opt: options.bar.clock.icon, title: 'Icon', type: 'string' }),
+                 *           CLOCK            *
-                Option({ opt: options.bar.clock.showIcon, title: 'Show Icon', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.bar.clock.showTime, title: 'Show Time', type: 'boolean' }),
+                 */
-                Option({ opt: options.theme.bar.buttons.clock.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                Header("Clock"),
+                Option({
+                    opt: options.bar.clock.format,
+                    title: "Clock Format",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.clock.icon,
+                    title: "Icon",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.clock.showIcon,
+                    title: "Show Icon",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.clock.showTime,
+                    title: "Show Time",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.clock.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
 
-                Header('Media'),
+                /*
-                Option({ opt: options.theme.bar.buttons.media.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 ******************************
-                Option({ opt: options.bar.media.show_artist, title: 'Show Track Artist', type: 'boolean' }),
+                 *          MEDIA             *
-                Option({ opt: options.bar.media.show_label, title: 'Toggle Media Label', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.bar.media.truncation, title: 'Truncate Media Label', subtitle: 'Only applicable if Toggle Media Label is enabled', type: 'boolean' }),
+                 */
-                Option({ opt: options.bar.media.truncation_size, title: 'Truncation Size', subtitle: 'Only applicable if Toggle Media Label is enabled', type: 'number', min: 10 }),
+                Header("Media"),
-                Option({ opt: options.bar.media.show_active_only, title: 'Auto Hide', subtitle: 'Button will automatically hide if no media is detected.', type: 'boolean' }),
+                Option({
+                    opt: options.theme.bar.buttons.media.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.bar.media.show_artist,
+                    title: "Show Track Artist",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.media.show_label,
+                    title: "Toggle Media Label",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.media.truncation,
+                    title: "Truncate Media Label",
+                    subtitle: "Only applicable if Toggle Media Label is enabled",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.bar.media.truncation_size,
+                    title: "Truncation Size",
+                    subtitle: "Only applicable if Toggle Media Label is enabled",
+                    type: "number",
+                    min: 10,
+                }),
+                Option({
+                    opt: options.bar.media.show_active_only,
+                    title: "Auto Hide",
+                    subtitle: "Button will automatically hide if no media is detected.",
+                    type: "boolean",
+                }),
 
-                Header('Notifications'),
+                /*
-                Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }),
+                 ******************************
-                Option({ opt: options.theme.bar.buttons.notifications.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                 *       NOTIFICATIONS        *
-            ]
+                 ******************************
-        })
+                 */
-    })
+                Header("Notifications"),
-}
+                Option({
+                    opt: options.bar.notifications.show_total,
+                    title: "Show Total # of notifications",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.notifications.spacing,
+                    title: "Inner Spacing",
+                    subtitle: "Spacing between the icon and the label inside the buttons.",
+                    type: "string",
+                }),
+            ],
+        }),
+    });
+};

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

@@ -2,29 +2,94 @@ import { Option } from "widget/settings/shared/Option";
 import { Header } from "widget/settings/shared/Header";
 
 import options from "options";
+import Scrollable from "types/widgets/scrollable";
+import Gtk from "types/@girs/gtk-3.0/gtk-3.0";
 
-export const NotificationSettings = () => {
+export const NotificationSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
     return Widget.Scrollable({
         vscroll: "automatic",
         child: Widget.Box({
             class_name: "bar-theme-page paged-container",
             vertical: true,
             children: [
-                Header('Notification Settings'),
+                Header("Notification Settings"),
-                Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }),
+                Option({
-                Option({ opt: options.theme.notification.border_radius, title: 'Border Radius', type: 'string' }),
+                    opt: options.notifications.ignore,
-                Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }),
+                    title: "Ignored Applications",
-                Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }),
+                    subtitle: "Applications to ignore.\n" +
-                Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }),
+                        "Wiki: https://hyprpanel.com/configuration/notifications.html#ignored-applications",
-                Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }),
+                    subtitleLink: "https://hyprpanel.com/configuration/notifications.html#ignored-applications",
+                    type: "object",
+                    enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "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.theme.notification.border_radius,
+                    title: "Border Radius",
+                    type: "string",
+                }),
+                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",
+                }),
+
+                Header("Notification Menu Settings"),
+                Option({
+                    opt: options.theme.bar.menus.menu.notifications.height,
+                    title: "Notification Menu Height",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.notifications.displayedTotal,
+                    title: "Displayed Total",
+                    subtitle: "How many notifications to show in the menu at once.\n" +
+                        "Newer notifications will display towards the top.",
+                    type: "number",
+                    min: 1,
+                }),
+                Option({
+                    opt: options.theme.bar.menus.menu.notifications.pager.show,
+                    title: "Show Pager",
+                    subtitle: "Shows the pagination footer at the bottom of the menu.",
+                    type: "boolean",
+                }),
+                Option({
+                    opt: options.theme.bar.menus.menu.notifications.scrollbar.width,
+                    title: "Scrollbar Width",
+                    type: "string",
+                }),
+                Option({
+                    opt: options.theme.bar.menus.menu.notifications.scrollbar.radius,
+                    title: "Scrollbar Radius",
+                    type: "string",
+                }),
+            ],
+        }),
+    });
+};
 
-                Header('Notification Menu Settings'),
-                Option({ opt: options.theme.bar.menus.menu.notifications.height, title: 'Notification Menu Height', type: 'string' }),
-                Option({ opt: options.notifications.displayedTotal, title: 'Displayed Total', subtitle: 'How many notifications to show in the menu at once.\nNewer notifications will display towards the top.', type: 'number', min: 1 }),
-                Option({ opt: options.theme.bar.menus.menu.notifications.pager.show, title: 'Show Pager', subtitle: "Shows the pagination footer at the bottom of the menu.", type: 'boolean' }),
-                Option({ opt: options.theme.bar.menus.menu.notifications.scrollbar.width, title: 'Scrollbar Width', type: 'string' }),
-                Option({ opt: options.theme.bar.menus.menu.notifications.scrollbar.radius, title: 'Scrollbar Radius', type: 'string' }),
-            ]
-        })
-    })
-}