Added more configuration options

modules/bar/Bar.ts

@@ -14,7 +14,6 @@ import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
 import options from "options";
 
 const { start, center, end } = options.bar.layout;
-const { transparent, position } = options.bar;
 
 export type BarWidget = keyof typeof widget;
 

modules/bar/battery/index.js

@@ -4,7 +4,8 @@ import { openMenu } from "../utils.js";
 const BatteryLabel = () => {
   const isVis = Variable(battery.available);
 
-  const icon = battery
+  const icon = () =>
+    battery
       .bind("percent")
       .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`);
 
@@ -36,19 +37,22 @@ const BatteryLabel = () => {
       class_name: "battery",
       visible: battery.bind("available"),
       tooltip_text: battery.bind("time_remaining").as((t) => t.toString()),
-      children: [
+      setup: (self) => {
-        Widget.Icon({ icon }),
+        self.hook(battery, () => {
+          if (battery.available) {
+            self.children = [
+              Widget.Icon({ icon: icon() }),
               Widget.Label({
                 label: battery.bind("percent").as((p) => ` ${p}%`),
               }),
-      ],
+            ];
-      setup: (self) => {
+
-        self.hook(battery, () => {
             self.tooltip_text = generateTooltip(
               battery.time_remaining,
               battery.charging,
               battery.charged,
             );
+          }
         });
       },
     }),

modules/bar/bluetooth/index.js

@@ -1,4 +1,5 @@
 const bluetooth = await Service.import('bluetooth')
+import options from "options";
 import { openMenu } from "../utils.js";
 
 const Bluetooth = () => {
@@ -8,7 +9,13 @@ const Bluetooth = () => {
   });
 
   const btText = Widget.Label({
-    label: bluetooth.bind("enabled").as((v) => v ? " On" : " Off"),
+    label: Utils.merge([bluetooth.bind("enabled"), options.bar.bluetooth.label.bind("value")], (btEnabled, showLabel) => {
+      if (showLabel) {
+        return btEnabled ? " On" : " Off"
+      }
+      return "";
+
+    }),
     class_name: "bar-bt_label",
   });
 

modules/bar/clock/index.js

@@ -1,14 +1,18 @@
+import GLib from "gi://GLib";
 import { openMenu } from "../utils.js";
+import options from "options";
+const { format } = options.bar.clock;
 
-const date = Variable("", {
+const date = Variable(GLib.DateTime.new_now_local(), {
-  poll: [1000, 'date "+󰃭  %a %b %d    %I:%M:%S %p"'],
+  poll: [1000, () => GLib.DateTime.new_now_local()],
 });
+const time = Utils.derive([date, format], (c, f) => c.format(f) || "");
 
 const Clock = () => {
   return {
     component: Widget.Label({
       class_name: "clock",
-      label: date.bind(),
+      label: time.bind(),
     }),
     isVisible: true,
     boxClass: "clock",

modules/bar/index.js

@@ -1,113 +0,0 @@
-import { Menu } from "./menu/index.js";
-import { Workspaces } from "./workspaces/index.js";
-import { ClientTitle } from "./window_title/index.js";
-import { Media } from "./media/index.js";
-import { Notifications } from "./notifications/index.js";
-import { Volume } from "./volume/index.js";
-import { Network } from "./network/index.js";
-import { Bluetooth } from "./bluetooth/index.js";
-import { BatteryLabel } from "./battery/index.js";
-import { Clock } from "./clock/index.js"; 
-import { SysTray } from "./systray/index.js";
-
-import { BarItemBox } from "../shared/barItemBox.js";
-
-// layout of the bar
-const Left = (monitor, wsMap) => {
-  return Widget.Box({
-    class_name: "box-left",
-    hpack: "start",
-    spacing: 5,
-    children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap, 10)), BarItemBox(ClientTitle())],
-  });
-};
-
-const Center = () => {
-  return Widget.Box({
-    class_name: "box-center",
-    spacing: 5,
-    children: [
-      BarItemBox(Media()),
-    ],
-  });
-};
-
-const Right = () => {
-  return Widget.Box({
-    class_name: "box-right",
-    hpack: "end",
-    spacing: 5,
-    children: [
-      BarItemBox(Volume()),
-      BarItemBox(Network()),
-      BarItemBox(Bluetooth()),
-      BarItemBox(BatteryLabel()),
-      BarItemBox(SysTray()),
-      BarItemBox(Clock()),
-      BarItemBox(Notifications()),
-    ],
-  });
-};
-
-const LeftAlt = (monitor, wsMap) => {
-  return Widget.Box({
-    class_name: "box-left",
-    hpack: "start",
-    spacing: 5,
-    children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap)), BarItemBox(ClientTitle())],
-  });
-};
-
-const CenterAlt = () => {
-  return Widget.Box({
-    class_name: "box-center",
-    spacing: 5,
-    children: [
-      BarItemBox(Media()),
-    ],
-  });
-};
-
-const RightAlt = () => {
-  return Widget.Box({
-    class_name: "box-right",
-    hpack: "end",
-    spacing: 5,
-    children: [
-      BarItemBox(Volume()),
-      BarItemBox(Clock()),
-    ],
-  });
-};
-
-const Bar = (monitor = 0, wsMap) => {
-  return Widget.Window({
-    name: `bar-${monitor}`,
-    class_name: "bar",
-    monitor,
-    anchor: ["top", "left", "right"],
-    exclusivity: "exclusive",
-    child: Widget.CenterBox({
-      start_widget: Left(monitor, wsMap),
-      center_widget: Center(),
-      end_widget: Right(),
-    }),
-  });
-};
-
-const BarAlt = (monitor = 0, wsMap) => {
-  return Widget.Window({
-    name: `bar-${monitor}`,
-    class_name: "bar",
-    monitor,
-    anchor: ["top", "left", "right"],
-    exclusivity: "exclusive",
-    child: Widget.CenterBox({
-      start_widget: LeftAlt(monitor, wsMap),
-      center_widget: CenterAlt(),
-      end_widget: RightAlt(),
-    }),
-  });
-};
-
-export { Bar, BarAlt };

modules/bar/menu/index.js

@@ -1,11 +1,12 @@
 import { openMenu } from "../utils.js";
+import options from "options";
 
 const Menu = () => {
   return {
     component: Widget.Box({
       child: Widget.Label({
         class_name: "bar-menu_label",
-        label: "󰣇",
+        label: options.bar.launcher.icon.bind("value"),
       }),
     }),
     isVisible: true,

modules/bar/network/index.js

@@ -1,4 +1,5 @@
 const network = await Service.import("network");
+import options from "options";
 import { openMenu } from "../utils.js";
 
 const Network = () => {
@@ -22,7 +23,15 @@ const Network = () => {
     }),
     Widget.Label({
       class_name: "bar-network-label",
-      label: network.bind("wired").as(() => "  Wired"),
+      label: Utils.merge(
+        [network.bind("wired"), options.bar.network.label.bind("value")],
+        (_, showLabel) => {
+          if (showLabel) {
+            return "  Wired";
+          }
+          return "";
+        },
+      ),
     }),
   ];
 

modules/bar/notifications/index.js

@@ -1,4 +1,7 @@
 import { openMenu } from "../utils.js";
+import options from "options";
+
+const { show_total } = options.bar.notifications;
 
 const notifs = await Service.import("notifications");
 
@@ -9,21 +12,27 @@ export const Notifications = () => {
       child: Widget.Box({
         hpack: "start",
         class_name: "bar-notifications",
-        child: Widget.Label({
+        children: Utils.merge(
+          [notifs.bind("notifications"), notifs.bind("dnd"), show_total.bind("value")],
+          (notif, dnd, showTotal) => {
+            const notifIcon = Widget.Label({
               hpack: "center",
               class_name: "bar-notifications-label",
-          setup: (self) => {
+              label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
-            self.hook(notifs, () => {
-              if (notifs.dnd) {
-                return (self.label = "󰂛");
-              } else if (notifs.notifications.length > 0) {
-                return (self.label = "󱅫");
-              } else {
-                return (self.label = "󰂚");
-              }
             });
+
+            const notifLabel = Widget.Label({
+              hpack: "center",
+              class_name: "bar-notifications-total",
+              label: notif.length.toString(),
+            });
+
+            if (showTotal) {
+              return [notifIcon, notifLabel];
+            }
+            return [notifIcon];
           },
-        }),
+        ),
       }),
     }),
     isVisible: true,

modules/bar/power/index.js

@@ -1,18 +0,0 @@
-export const Power = () => {
-  return {
-    component: Widget.Box({
-      child: Widget.Button({
-        class_name: "bar-powermenu",
-        child: Widget.Icon({
-          class_name: "bar-power_label",
-          icon: "system-shutdown-symbolic",
-        }),
-      }),
-    }),
-    isVisible: true,
-    boxClass: "power",
-    props: {
-      on_clicked: () => App.toggleWindow("powermenu"),
-    },
-  };
-};

modules/bar/systray/index.js

@@ -1,11 +1,20 @@
 const systemtray = await Service.import("systemtray");
+import { bash } from "lib/utils";
+import options from "options";
+
+const { ignore } = options.bar.systray;
 
 const SysTray = () => {
   const isVis = Variable(false);
 
-  const items = systemtray.bind("items").as((items) => {
+  const items = Utils.merge(
-    isVis.value = items.length > 0;
+    [systemtray.bind("items"), ignore.bind("value")],
-    return items.map((item) => {
+    (items, ignored) => {
+      const filteredTray = items.filter(({ id }) => !ignored.includes(id));
+
+      isVis.value = filteredTray.length > 0;
+
+      return filteredTray.map((item) => {
         if (item.menu !== undefined) {
           item.menu["class_name"] = "systray-menu";
         }
@@ -21,7 +30,8 @@ const SysTray = () => {
           tooltip_markup: item.bind("tooltip_markup"),
         });
       });
-  });
+    },
+  );
 
   return {
     component: Widget.Box({

modules/bar/volume/index.js

@@ -1,7 +1,8 @@
 const audio = await Service.import("audio");
 import { openMenu } from "../utils.js";
+import options from "options";
 
-import { globalMousePos } from "../../../globals.js";
+import { globalMousePos } from "globals.js";
 
 const Volume = () => {
   const icons = {
@@ -41,7 +42,12 @@ const Volume = () => {
     component: Widget.Box({
       vpack: "center",
       class_name: "volume",
-      children: [volIcn, volPct],
+      children: options.bar.volume.label.bind("value").as((showLabel) => {
+        if (showLabel) {
+          return [volIcn, volPct];
+        }
+        return [volIcn];
+      }),
     }),
     isVisible: true,
     boxClass: "volume",

modules/bar/workspaces/index.js

@@ -58,8 +58,46 @@ const Workspaces = (monitor = -1, ws = 8) => {
               return Widget.Label({
                 attribute: i,
                 vpack: "center",
-                label: `${i}`,
+                class_name: Utils.merge(
-                setup: (self) =>
+                  [
+                    options.bar.workspaces.show_icons.bind("value"),
+                    options.bar.workspaces.icons.available.bind("value"),
+                    options.bar.workspaces.icons.active.bind("value"),
+                    options.bar.workspaces.icons.occupied.bind("value"),
+                  ],
+                  (show_icons) => {
+                    if (show_icons) {
+                      return `workspace-icon`;
+                    }
+                    return "";
+                  },
+                ),
+                label: Utils.merge(
+                  [
+                    options.bar.workspaces.show_icons.bind("value"),
+                    options.bar.workspaces.icons.available.bind("value"),
+                    options.bar.workspaces.icons.active.bind("value"),
+                    options.bar.workspaces.icons.occupied.bind("value"),
+                  ],
+                  (showIcons, available, active, occupied) => {
+                    if (showIcons) {
+                      if (hyprland.active.workspace.id === i) {
+                        return active;
+                      }
+                      if ((hyprland.getWorkspace(i)?.windows || 0) > 0) {
+                        return occupied;
+                      }
+                      if (
+                        monitor !== -1 &&
+                        hyprland.getWorkspace(i)?.monitorID !== monitor
+                      ) {
+                        return available;
+                      }
+                    }
+                    return `${i}`;
+                  },
+                ),
+                setup: (self) => {
                   self.hook(hyprland, () => {
                     self.toggleClassName(
                       "active",
@@ -69,13 +107,8 @@ const Workspaces = (monitor = -1, ws = 8) => {
                       "occupied",
                       (hyprland.getWorkspace(i)?.windows || 0) > 0,
                     );
-
+                  });
-                    const isCurrentMonitor =
+                },
-                      monitor !== -1 &&
-                      hyprland.getWorkspace(i)?.monitorID !== monitor;
-
-                    self.toggleClassName("hidden", isCurrentMonitor);
-                  }),
               });
             });
         },

modules/menus/audio/index.js

@@ -7,7 +7,7 @@ export default () => {
     name: "audiomenu",
     transition: "crossfade",
     child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items audio",
       hpack: "fill",
       hexpand: true,
       child: Widget.Box({

modules/menus/bluetooth/index.js

@@ -6,7 +6,7 @@ export default () => {
     name: "bluetoothmenu",
     transition: "crossfade",
     child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items bluetooth",
       hpack: "fill",
       hexpand: true,
       child: Widget.Box({

modules/menus/dashboard/profile/index.js

@@ -1,11 +1,14 @@
 import icons from "../../../icons/index.js";
 import powermenu from "../../power/helpers/actions.js";
 
+import options from "options";
+const { image, name } = options.menus.dashboard.powermenu.avatar;
+
 const Profile = () => {
   const handleClick = (action) => {
     App.closeWindow("dashboardmenu");
     return powermenu.action(action);
-  }
+  };
 
   return Widget.Box({
     class_name: "profiles-container",
@@ -20,12 +23,17 @@ const Profile = () => {
           Widget.Icon({
             hpack: "center",
             class_name: "profile-picture",
-            icon: `${App.configDir}/assets/21210205.png`,
+            icon: image.bind("value"),
           }),
           Widget.Label({
             hpack: "center",
             class_name: "profile-name",
-            label: "Jaskir Linux",
+            label: name.bind("value").as((v) => {
+              if (v === "system") {
+                return Utils.exec("bash -c whoami");
+              }
+              return v;
+            }),
           }),
         ],
       }),

modules/menus/dashboard/shortcuts/index.js

@@ -1,4 +1,7 @@
 const hyprland = await Service.import("hyprland");
+import options from "options";
+
+const { left, right } = options.menus.dashboard.shortcuts;
 
 const Shortcuts = () => {
   const isRecording = Variable(false, {
@@ -83,21 +86,25 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
-                tooltip_text: "Microsoft Edge",
+                tooltip_text: left.shortcut1.tooltip.bind("value"),
-                class_name: "dashboard-button edge top-button",
+                class_name: "dashboard-button top-button",
-                on_primary_click: () => handleClick("microsoft-edge-stable"),
+                on_primary_click: left.shortcut1.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                 child: Widget.Label({
                   class_name: "button-label",
-                  label: "󰇩",
+                  label: left.shortcut1.icon.bind("value"),
                 }),
               }),
               Widget.Button({
-                tooltip_text: "Spotify",
+                tooltip_text: left.shortcut2.tooltip.bind("value"),
-                class_name: "dashboard-button spotify",
+                class_name: "dashboard-button",
-                on_primary_click: () => handleClick("spotify-launcher"),
+                on_primary_click: left.shortcut2.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                 child: Widget.Label({
                   class_name: "button-label",
-                  label: "",
+                  label: left.shortcut2.icon.bind("value"),
                 }),
               }),
             ],
@@ -107,22 +114,26 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
-                tooltip_text: "Discord",
+                tooltip_text: left.shortcut3.tooltip.bind("value"),
-                class_name: "dashboard-button discord top-button",
+                class_name: "dashboard-button top-button",
-                on_primary_click: () => handleClick("discord"),
+                on_primary_click: left.shortcut3.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                 child: Widget.Label({
                   hpack: "center",
                   class_name: "button-label",
-                  label: "",
+                  label: left.shortcut3.icon.bind("value"),
                 }),
               }),
               Widget.Button({
-                tooltip_text: "Search Apps",
+                tooltip_text: left.shortcut4.tooltip.bind("value"),
-                class_name: "dashboard-button search",
+                class_name: "dashboard-button",
-                on_primary_click: () => handleClick("rofi -show drun"),
+                on_primary_click: left.shortcut4.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                 child: Widget.Label({
                   class_name: "button-label",
-                  label: "",
+                  label: left.shortcut4.icon.bind("value"),
                 }),
               }),
             ],
@@ -139,24 +150,25 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
-                tooltip_text: "Color Picker",
+                tooltip_text: right.shortcut1.tooltip.bind("value"),
-                class_name: "dashboard-button colorpicker top-button",
+                class_name: "dashboard-button top-button",
-                on_primary_click: () => handleClick("hyprpicker -a", {}, 500),
+                on_primary_click: right.shortcut1.command
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                 child: Widget.Label({
                   class_name: "button-label",
-                  label: "",
+                  label: right.shortcut1.icon.bind("value"),
                 }),
               }),
               Widget.Button({
-                tooltip_text: "Hyprland Settings",
+                tooltip_text: right.shortcut2.tooltip.bind("value"),
-                class_name: "dashboard-button settings",
+                class_name: "dashboard-button",
-                on_primary_click: () =>
+                on_primary_click: right.shortcut2.command
-                  handleClick(
+                  .bind("value")
-                    'bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"',
+                  .as((cmd) => () => handleClick(cmd)),
-                  ),
                 child: Widget.Label({
                   class_name: "button-label",
-                  label: "󰒓",
+                  label: right.shortcut2.icon.bind("value"),
                 }),
               }),
             ],
@@ -166,13 +178,14 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
-                tooltip_text: "Screenshot",
+                tooltip_text: right.shortcut3.tooltip.bind("value"),
-                class_name: "dashboard-button snapshot top-button",
+                class_name: "dashboard-button top-button",
-                on_primary_click: () =>
+                on_primary_click: right.shortcut3.command
-                  handleClick(`${App.configDir}/services/snapshot.sh`),
+                  .bind("value")
+                  .as((cmd) => () => handleClick(cmd)),
                 child: Widget.Label({
                   class_name: "button-label",
-                  label: "󰄀",
+                  label: right.shortcut3.icon.bind("value"),
                 }),
               }),
               Widget.Button({

modules/menus/energy/index.js

@@ -7,7 +7,7 @@ export default () => {
     name: "energymenu",
     transition: "crossfade",
     child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items energy",
       hpack: "fill",
       hexpand: true,
       child: Widget.Box({

modules/menus/media/index.js

@@ -6,7 +6,7 @@ export default () => {
     name: "mediamenu",
     transition: "crossfade",
     child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items media",
       hpack: "fill",
       hexpand: true,
       child: Widget.Box({

modules/menus/network/ethernet/index.js

@@ -21,16 +21,17 @@ const Ethernet = () => {
         child: Widget.Box({
           class_name: "menu-content",
           vertical: true,
-          child: network.bind("wired").as((wired) => {
+          setup: (self) => {
-            return Widget.Box({
+            self.hook(network, () => {
+              return (self.child = Widget.Box({
                 class_name: "network-element-item",
                 child: Widget.Box({
                   hpack: "start",
                   children: [
                     Widget.Icon({
                       class_name: `network-icon ethernet ${network.wired.state === "activated" ? "active" : ""}`,
-                    tooltip_text: wired.internet,
+                      tooltip_text: network.wired.internet,
-                    icon: `${wired["icon_name"]}`,
+                      icon: `${network.wired["icon_name"]}`,
                     }),
                     Widget.Box({
                       class_name: "connection-container",
@@ -41,21 +42,22 @@ const Ethernet = () => {
                           hpack: "start",
                           truncate: "end",
                           wrap: true,
-                        label: `Ethernet Connection ${wired.state !== "unknown" && typeof wired?.speed === "number" ? `(${wired?.speed / 1000} Gbps)` : ""}`,
+                          label: `Ethernet Connection ${network.wired.state !== "unknown" && typeof network.wired?.speed === "number" ? `(${network.wired?.speed / 1000} Gbps)` : ""}`,
                         }),
                         Widget.Label({
                           hpack: "start",
                           class_name: "connection-status dim",
                           label:
-                          wired.internet.charAt(0).toUpperCase() +
+                          network.wired.internet.charAt(0).toUpperCase() +
-                          wired.internet.slice(1),
+                            network.wired.internet.slice(1),
                         }),
                       ],
                     }),
                   ],
                 }),
+              }));
             });
-          }),
+          },
         }),
       }),
     ],

modules/menus/network/index.js

@@ -7,7 +7,7 @@ export default () => {
     name: "networkmenu",
     transition: "crossfade",
     child: Widget.Box({
-      class_name: "menu-items",
+      class_name: "menu-items network",
       child: Widget.Box({
         vertical: true,
         hexpand: true,

modules/menus/power/helpers/actions.js

@@ -1,9 +1,5 @@
-const powerOptions = {
+import options from "options";
-  sleep: "systemctl suspend",
+const { sleep, reboot, logout, shutdown } = options.menus.dashboard.powermenu;
-  reboot: "systemctl reboot",
-  logout: "pkill Hyprland",
-  shutdown: "shutdown now",
-};
 
 class PowerMenu extends Service {
   static {
@@ -26,10 +22,10 @@ class PowerMenu extends Service {
 
   action(action) {
     [this.#cmd, this.#title] = {
-      sleep: [powerOptions.sleep, "Sleep"],
+      sleep: [sleep.value, "Sleep"],
-      reboot: [powerOptions.reboot, "Reboot"],
+      reboot: [reboot.value, "Reboot"],
-      logout: [powerOptions.logout, "Log Out"],
+      logout: [logout.value, "Log Out"],
-      shutdown: [powerOptions.shutdown, "Shutdown"],
+      shutdown: [shutdown.value, "Shutdown"],
     }[action];
 
     this.notify("cmd");

options.ts

@@ -1,7 +1,4 @@
 import { opt, mkOptions } from "lib/option"
-import { distro } from "lib/variables"
-import { icon } from "lib/utils"
-import icons from "lib/icons"
 
 const colors = {
     "rosewater": "#f5e0dc",
@@ -36,6 +33,11 @@ const colors = {
 const options = mkOptions(OPTIONS, {
     autotheme: opt(false),
     theme: {
+        font: {
+            size: opt("1.2rem"),
+            name: opt("Ubuntu Nerd Font"),
+            weight: opt(600),
+        },
         notification: {
             background: opt(colors.mantle),
             actions: {
@@ -129,13 +131,19 @@ const options = mkOptions(OPTIONS, {
                     background: opt(colors.base2),
                     hover: opt(colors.surface1),
                     icon: opt(colors.lavender),
+                    total: opt(colors.lavender)
                 },
             },
             menus: {
                 monochrome: opt(true),
                 background: opt(colors.crust),
                 cards: opt(colors.base),
-                border: opt(colors.surface0),
+                border: {
+                    size: opt("0.13 em"),
+                    radius: opt("0.7em"),
+                    card_radius: opt("0.4em"),
+                    color: opt(colors.surface0)
+                },
                 text: opt(colors.text),
                 dimtext: opt(colors.surface2),
                 feinttext: opt(colors.surface0),
@@ -197,6 +205,12 @@ const options = mkOptions(OPTIONS, {
                         song: opt(colors.lavender),
                         artist: opt(colors.teal),
                         album: opt(colors.pink),
+                        background: {
+                            color: opt(colors.crust),
+                        },
+                        border: {
+                            color: opt(colors.surface0),
+                        },
                         buttons: {
                             inactive: opt(colors.surface2),
                             enabled: opt(colors.teal),
@@ -305,7 +319,7 @@ const options = mkOptions(OPTIONS, {
                             active: opt(colors.sky)
                         },
                         icons: {
-                            passive: opt(colors.text),
+                            passive: opt(colors.overlay2),
                             active: opt(colors.sky),
                         },
                         iconbutton: {
@@ -502,7 +516,7 @@ const options = mkOptions(OPTIONS, {
                     notifications: {
                         label: opt(colors.lavender),
                         no_notifications_label: opt(colors.surface0),
-                        background: opt(colors.mantle),
+                        background: opt(colors.crust),
                         card: opt(colors.base),
                         border: opt(colors.surface0),
                         switch_divider: opt(colors.surface1),
@@ -518,13 +532,7 @@ const options = mkOptions(OPTIONS, {
         }
     },
 
-    font: {
-        size: opt(13),
-        name: opt("Ubuntu Nerd Font"),
-    },
-
     bar: {
-        position: opt<"top" | "bottom">("top"),
         layout: {
             start: opt<Array<import("modules/bar/Bar").BarWidget>>([
                 "dashboard",
@@ -545,7 +553,7 @@ const options = mkOptions(OPTIONS, {
             ]),
         },
         launcher: {
-            icon: opt(icon(distro.logo, icons.ui.search)),
+            icon: opt("󰣇"),
         },
         workspaces: {
             show_icons: opt(false),
@@ -557,21 +565,14 @@ const options = mkOptions(OPTIONS, {
             workspaces: opt(7),
             monitorSpecific: opt(true),
         },
-        media: {
-            icon: opt(true),
-            label: opt(true),
-        },
         volume: {
             label: opt(true),
         },
         network: {
-            status: {
+            label: opt(true),
-                show: opt(true),
-                type: opt<"status" | "connection">("connection"),
-            },
         },
         bluetooth: {
-            status: opt(true),
+            label: opt(true),
         },
         battery: {
             show_label: opt(true),
@@ -583,11 +584,7 @@ const options = mkOptions(OPTIONS, {
             ]),
         },
         clock: {
-            icons: {
+            format: opt("󰃭  %a %b %d    %I:%M:%S %p"),
-                clock: opt(true),
-                calendar: opt(true),
-            },
-            format: opt("%H:%M - %A %e."),
         },
         notifications: {
             show_total: opt(false)
@@ -595,86 +592,55 @@ const options = mkOptions(OPTIONS, {
     },
 
     menus: {
-        border: {
-            enabled: opt(true),
-            size: opt(""),
-            outer_gap: opt(""),
-            inner_gap: opt(""),
-            radius: opt(""),
-            card_radius: opt(""),
-        },
         dashboard: {
-            modules: opt([
-                "powermenu",
-                "shortcuts",
-                "controls",
-                "directories",
-                "monitor",
-            ]),
-            order: {
-                primary: opt([
-                    "powermenu",
-                    "shortcuts",
-                    "controls",
-                    "directories",
-                    "monitor",
-                ]),
-                powermenu: opt([
-                    "avatar",
-                    "powermenu",
-                ]),
-                monitor: opt([
-                    "cpu",
-                    "ram",
-                    "gpu",
-                    "disk",
-                ])
-            },
             powermenu: {
                 sleep: opt("systemctl suspend"),
                 reboot: opt("systemctl reboot"),
                 logout: opt("pkill Hyprland"),
                 shutdown: opt("shutdown now"),
                 avatar: {
-                    image: opt<string>,
+                    image: opt("/home/jaskir/Pictures/Icons/900-900-max_catppuccin-mocha_hald8_GaussianRBF_lum1_shape96_near16.png"),
                     name: opt<"system" | string>("system"),
                 },
             },
             shortcuts: {
                 left: {
                     shortcut1: {
-                        icon: opt(""),
+                        icon: opt("󰇩"),
-                        command: opt("")
+                        tooltip: opt("Microsoft Edge"),
+                        command: opt("microsoft-edge-stable")
                     },
                     shortcut2: {
-                        icon: opt(""),
+                        icon: opt(""),
-                        command: opt("")
+                        tooltip: opt("Spotify"),
+                        command: opt("spotify-launcher")
                     },
                     shortcut3: {
-                        icon: opt(""),
+                        icon: opt(""),
-                        command: opt("")
+                        tooltip: opt("Discord"),
+                        command: opt("discord")
                     },
                     shortcut4: {
-                        icon: opt(""),
+                        icon: opt(""),
-                        command: opt("")
+                        tooltip: opt("Search Apps"),
+                        command: opt("rofi -show drun")
                     },
                 },
                 right: {
                     shortcut1: {
-                        icon: opt(""),
+                        icon: opt(""),
-                        command: opt("")
+                        tooltip: opt("Color Picker"),
+                        command: opt("hyprpicker -a")
                     },
                     shortcut2: {
-                        icon: opt(""),
+                        icon: opt("󰒓"),
-                        command: opt("")
+                        tooltip: opt("Hyprland Config"),
+                        command: opt("bash -c \"kitty -e nvim $HOME/.config/hypr/hyprland.conf\"")
                     },
                     shortcut3: {
-                        icon: opt(""),
+                        icon: opt("󰄀"),
-                        command: opt("")
+                        tooltip: opt("Screenshot"),
-                    },
+                        command: opt("./services/snapshot.sh")
-                    shortcut4: {
-                        icon: opt(""),
-                        command: opt("")
                     },
                 }
             },
@@ -709,43 +675,16 @@ const options = mkOptions(OPTIONS, {
                 }
             },
         },
-        volume: {
-            order: opt([
-                "volume",
-                "devices",
-            ])
-        },
         network: {
-            order: opt([
-                "ethernet",
-                "wifi",
-            ]),
             status: opt(true),
         },
         bluetooth: {
             status: opt(true),
         },
         battery: {
-            modules: opt([
+            percentage: opt(true)
-                "brightness",
-                "powerprofile"
-            ]),
-            order: opt([
-                "brightness",
-                "powerprofile"
-            ])
         },
         clock: {
-            modules: opt([
-                "clock",
-                "calendar",
-                "weather"
-            ]),
-            order: opt([
-                "clock",
-                "calendar",
-                "weather"
-            ]),
             time: {
                 military: opt(false),
                 seconds: opt(true)
@@ -767,15 +706,6 @@ const options = mkOptions(OPTIONS, {
         monochromeIcon: opt(true),
     },
 
-    powermenu: {
-        sleep: opt("systemctl suspend"),
-        reboot: opt("systemctl reboot"),
-        logout: opt("pkill Hyprland"),
-        shutdown: opt("shutdown now"),
-        layout: opt<"line" | "box">("line"),
-        labels: opt(true),
-    },
-
     osd: {
         progress: {
             vertical: opt(true),

scss/entry.scss

@@ -1,9 +1,9 @@
 @import '/home/jaskir/.config/ags/scss/variables.scss';
 * {
   all: unset;
-  font-family: "Ubuntu Nerd Font";
+  font-family: $font-name;
-  font-size: 1.2rem;
+  font-size: $font-size;
-  font-weight: 600;
+  font-weight: $font-weight;
 }
 
 //general

scss/main.scss

@@ -1,8 +1,8 @@
 * {
   all: unset;
-  font-family: "Ubuntu Nerd Font";
+  font-family: $font-name;
-  font-size: 1.2rem;
+  font-size: $font-size;
-  font-weight: 600;
+  font-weight: $font-weight;
 }
 
 //general

scss/style.ts

@@ -37,7 +37,7 @@ function extractVariables(theme: any, prefix: string = ""): string[] {
 }
 
 const variables = () => [
-    ...extractVariables(options.theme)
+    ...extractVariables(options.theme),
 ];
 
 async function resetCss() {

scss/style/bar/notifications.scss

@@ -5,3 +5,8 @@
   font-size: 1.3em;
   min-width: 1em;
 }
+
+.bar-notifications-total {
+  color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
+  margin-left: 0.4em;
+}

scss/style/bar/workspace.scss

@@ -12,6 +12,10 @@
     background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-available);
     color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-available);
 
+    &:not(:first-child) {
+      margin-left: 4.5em;
+    }
+
     &.occupied {
       background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-occupied);
       color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-occupied);
@@ -25,10 +29,16 @@
       min-width: 12em;
       min-height: 4em;
     }
+
+    &.workspace-icon {
+      background-color: transparent;
+      min-width: 0em;
+      min-height: 0em;
+      border-radius: 0em;
+      margin: 0rem 1rem * .5;
+      transition: 300ms * .5;
+      font-size: 1.1em;
+    }
   }
-}
 
-
-.workspaces label:not(:first-child) {
-  margin-left: 4.5em;
 }

scss/style/menus/audiomenu.scss

@@ -1,6 +1,10 @@
 @import "../colors";
 @import '../../variables';
 
+.menu-items.audio {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
+}
 .menu-dropdown-label.audio {
     color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
 }
@@ -8,6 +12,9 @@
 .menu-label.audio {
     color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
 }
+.menu-active.playback, .menu-active.input {
+    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
+}
 
 .menu-button-isactive.audio {
     color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);

scss/style/menus/bluetooth.scss

@@ -1,6 +1,10 @@
 @import "../colors";
 @import '../../variables';
 
+.menu-items.bluetooth {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
+}
 .menu-items-container.bluetooth {
     font-size: 1.3em;
 

scss/style/menus/calendar.scss

@@ -6,7 +6,7 @@
   min-width: 27em;
   min-height: 6em;
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
-  border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-clock-border-color);
+  border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
   border-radius: 0.7em;
   margin-right: 0.5em;
 }

scss/style/menus/dashboard.scss

@@ -1,10 +1,11 @@
 @import "../colors";
+@import '../../variables';
 
 .dashboard-content-items {
     margin-left: 0.50em;
     min-width: 28.5em;
-    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-dashboard-background);
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
-    border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-dashboard-border-color);
+    border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
     border-radius: 0.7em;
 
     button {

scss/style/menus/energy.scss

@@ -1,6 +1,10 @@
 @import "../colors";
 @import '../../variables';
 
+.menu-items.energy {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
+}
 .menu-items-container.energy {
     .menu-label {
         color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);

scss/style/menus/media.scss

@@ -1,5 +1,10 @@
 @import "../colors";
+@import '../../variables';
 
+.menu-items.media {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
+}
 .menu-items-container.media {
   min-width: 23em;
   min-height: 10em;

scss/style/menus/menu.scss

@@ -1,3 +1,5 @@
+@import '../../variables';
+
 .menu-slider {
     trough {
         border-radius: 0.3rem;

scss/style/menus/network.scss

@@ -1,6 +1,11 @@
 @import "../colors";
 @import '../../variables';
 
+.menu-items.network {
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
+    border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
+}
+
 .menu-items-container.network {
     font-size: 1.3em;
     .menu-items-section {
@@ -90,9 +95,8 @@
     }
 
     .menu-icon-button.network.search {
-        label {
         color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
-        }
+
         &:hover { 
             color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
         }

scss/style/menus/notifications.scss

@@ -5,8 +5,8 @@
   margin: 0em;
   min-width: 30.5em;
   min-height: 48em;
-  background: $crust;
+  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
-  border: 0.13em solid $notification-border;
+  border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
   border-radius: 0.7em;
   margin-right: 0.45em;
 

scss/variables.scss

@@ -1,3 +1,6 @@
+$font-size: 1.2rem;
+$font-name: Ubuntu Nerd Font;
+$font-weight: 600;
 $notification-background: #181825;
 $notification-actions-background: #313244;
 $notification-actions-hover: #45475a;
@@ -60,10 +63,14 @@ $bar-buttons-clock-icon: #f5c2e7;
 $bar-buttons-notifications-background: #242438;
 $bar-buttons-notifications-hover: #45475a;
 $bar-buttons-notifications-icon: #b4befe;
-$bar-menus-monochrome: false;
+$bar-buttons-notifications-total: #b4befe;
+$bar-menus-monochrome: true;
 $bar-menus-background: #11111b;
 $bar-menus-cards: #1e1e2e;
-$bar-menus-border: #313244;
+$bar-menus-border-size: 0.13 em;
+$bar-menus-border-radius: 0.7em;
+$bar-menus-border-card_radius: 0.4em;
+$bar-menus-border-color: #313244;
 $bar-menus-text: #cdd6f4;
 $bar-menus-dimtext: #585b70;
 $bar-menus-feinttext: #313244;
@@ -101,6 +108,8 @@ $bar-menus-tooltip-text: #cdd6f4;
 $bar-menus-menu-media-song: #b4befe;
 $bar-menus-menu-media-artist: #94e2d5;
 $bar-menus-menu-media-album: #f5c2e7;
+$bar-menus-menu-media-background-color: #11111b;
+$bar-menus-menu-media-border-color: #313244;
 $bar-menus-menu-media-buttons-inactive: #585b70;
 $bar-menus-menu-media-buttons-enabled: #94e2d5;
 $bar-menus-menu-media-buttons-background: #b4befe;
@@ -152,7 +161,7 @@ $bar-menus-menu-bluetooth-switch-disabled: #313244;
 $bar-menus-menu-bluetooth-switch-puck: #6c7086;
 $bar-menus-menu-bluetooth-listitems-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-listitems-active: #89dceb;
-$bar-menus-menu-bluetooth-icons-passive: #cdd6f4;
+$bar-menus-menu-bluetooth-icons-passive: #9399b2;
 $bar-menus-menu-bluetooth-icons-active: #89dceb;
 $bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-iconbutton-active: #89dceb;
@@ -248,7 +257,7 @@ $bar-menus-menu-dashboard-monitors-disk-bar: #f5c2e7;
 $bar-menus-menu-dashboard-monitors-disk-label: #f5c2e7;
 $bar-menus-menu-notifications-label: #b4befe;
 $bar-menus-menu-notifications-no_notifications_label: #313244;
-$bar-menus-menu-notifications-background: #181825;
+$bar-menus-menu-notifications-background: #11111b;
 $bar-menus-menu-notifications-card: #1e1e2e;
 $bar-menus-menu-notifications-border: #313244;
 $bar-menus-menu-notifications-switch_divider: #45475a;