Implement dashboard skeleton

modules/bar/media/index.js

@@ -66,11 +66,8 @@ const Media = () => {
   return {
     component: Widget.Box({
       visible: false,
-      child: Widget.Button({
+      child: Widget.Box({
         class_name: "media",
-        on_primary_click: () => mpris.getPlayer("")?.playPause(),
-        on_scroll_up: () => mpris.getPlayer("")?.next(),
-        on_scroll_down: () => mpris.getPlayer("")?.previous(),
         child: Widget.Box({
           children: [
             Widget.Label({
@@ -91,6 +88,8 @@ const Media = () => {
     isVisible: false,
     name: "media",
     props: {
+      on_scroll_up: () => mpris.getPlayer("")?.next(),
+      on_scroll_down: () => mpris.getPlayer("")?.previous(),
       on_primary_click: (_, event) => {
         const clickPos = event.get_root_coords();
         const coords = [clickPos[1], clickPos[2]];

modules/bar/menu/index.js

@@ -1,4 +1,4 @@
-import { exec } from "resource:///com/github/Aylur/ags/utils.js";
+import { closeAllMenus } from "../index.js";
 
 const Menu = () => {
   return {
@@ -10,7 +10,15 @@ const Menu = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: () => exec("/home/jaskir/.config/hypr/scripts/rofi.sh"),
+      on_primary_click: (_, event) => {
+        const clickPos = event.get_root_coords();
+        const coords = [clickPos[1], clickPos[2]];
+
+        globalMousePos.value = coords;
+
+        closeAllMenus();
+        App.toggleWindow("dashboardmenu");
+      },
     },
   };
 };

modules/menus/PopupWindow.js

@@ -92,6 +92,10 @@ const Layout = (name, child, transition) => ({
           hexpand: false,
           vertical: true,
         },
+        Padding(name, {
+          vexpand: false,
+          className: "event-top-padding",
+        }),
         PopupRevealer(name, child, transition),
         Padding(name),
       ),

modules/menus/dashboard/controls/index.js

@@ -0,0 +1,33 @@
+const Controls = () => {
+  return Widget.Box({
+    class_name: "controls-container",
+    children: [
+      Widget.Button({
+        class_name: "dashboard-button airplane-mode",
+      }),
+      Widget.Separator({
+        hpack: "center",
+        vexpand: true,
+        vertical: true,
+        class_name: "menu-separator dashboard-controls",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button wifi",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button bluetooth",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button notifications",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button playback",
+      }),
+      Widget.Button({
+        class_name: "dashboard-button input",
+      }),
+    ],
+  });
+};
+
+export { Controls };

modules/menus/dashboard/index.js

@@ -0,0 +1,37 @@
+import PopupWindow from "../PopupWindow.js";
+import { Profile } from "./profile/index.js";
+import { Shortcuts } from "./shortcuts/index.js";
+import { Controls } from "./controls/index.js";
+import { Stats } from "./stats/index.js";
+
+export default () => {
+  return PopupWindow({
+    name: "dashboardmenu",
+    visible: false,
+    transition: "crossfade",
+    layout: "top-left",
+    child: Widget.Box({
+      class_name: "dashboard-menu-content",
+      css: "padding: 1px; margin: -1px;",
+      vexpand: false,
+      children: [
+        Widget.Box({
+          class_name: "dashboard-content-container",
+          vertical: true,
+          children: [
+            Widget.Box({
+              class_name: "dashboard-content-items",
+              vertical: true,
+              children: [
+                Profile(),
+                Shortcuts(),
+                Controls(),
+                Stats(),
+              ],
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};

modules/menus/dashboard/profile/index.js

@@ -0,0 +1,37 @@
+const Profile = () => {
+  return Widget.Box({
+    class_name: "profiles-container",
+    children: [
+      Widget.Box({
+        class_name: "profile-picture-container",
+        children: [
+          Widget.Icon({
+            class_name: "profile-picture",
+          }),
+          Widget.Box({
+            class_name: "profile-name",
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "power-menu-container",
+        children: [
+          Widget.Button({
+            class_name: "dashboard-button shutdown",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button restart",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button lock",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button sleep",
+          }),
+        ],
+      }),
+    ],
+  });
+};
+
+export { Profile };

modules/menus/dashboard/shortcuts/index.js

@@ -0,0 +1,43 @@
+const Shortcuts = () => {
+  return Widget.Box({
+    class_name: "shortcuts-container",
+    children: [
+      Widget.Box({
+        class_name: "most-used-container",
+        children: [
+          Widget.Button({
+            class_name: "dashboard-button edge",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button spotify",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button discord",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button search",
+          }),
+        ],
+      }),
+      Widget.Box({
+        class_name: "utilities-container",
+        children: [
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+          Widget.Button({
+            class_name: "dashboard-button utility",
+          }),
+        ],
+      }),
+    ],
+  });
+};
+
+export { Shortcuts };

modules/menus/dashboard/stats/index.js

@@ -0,0 +1,21 @@
+const Stats = () => {
+  return Widget.Box({
+    class_name: "stats-container",
+    children: [
+      Widget.Box({
+        class_name: "stat-cpu",
+      }),
+      Widget.Box({
+        class_name: "stat-ram",
+      }),
+      Widget.Box({
+        class_name: "stat-gpu",
+      }),
+      Widget.Box({
+        class_name: "stat-storage",
+      }),
+    ],
+  });
+};
+
+export { Stats };

modules/menus/main.js

@@ -7,6 +7,8 @@ import MediaMenu from "./media/index.js";
 import NotificationsMenu from "./notifications/index.js";
 import CalendarMenu from "./calendar/index.js";
 import EnergyMenu from "./energy/index.js";
+import DashboardMenu from "./dashboard/index.js";
+
 export default [
   PowerMenu(),
   Verification(),
@@ -17,4 +19,5 @@ export default [
   NotificationsMenu(),
   CalendarMenu(),
   EnergyMenu(),
+  DashboardMenu(),
 ];

scss/menus/calendar.scss

@@ -29,7 +29,6 @@
 }
 
 .calendar-menu-widget {
-  margin-top: 2em;
   border-radius: 0.4em;
   color: $text;
 

style.css

@@ -1153,7 +1153,6 @@ window#powermenu .powermenu.box {
 }
 
 .calendar-menu-widget {
-  margin-top: 2em;
   border-radius: 0.4em;
   color: #cdd6f4;
   font-size: 1.1em;