refactor(ags): start rearranging ags files

config/ags/config.js

@@ -1,13 +1,13 @@
-import { execAsync, writeFile } from 'resource:///com/github/Aylur/ags/utils.js';
-import { Powermenu } from 'file:///home/matt/.nix/config/ags/powermenu/powermenu.js';
-import { LeftBar } from 'file:///home/matt/.nix/config/ags/traybuttons/traybuttons.js';
-import { Closer } from 'file:///home/matt/.nix/config/ags/closer/closer.js';
+import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
+import { Powermenu } from './js/powermenu.js';
+import { LeftBar } from './js/bar/traybuttons.js';
+import { Closer } from './js/common.js';
 
-const scss = ags.App.configDir + '/style.scss';
+const scss = ags.App.configDir + '/scss/main.scss';
 const css = ags.App.configDir + '/style.css';
 
-ags.Utils.exec(`touch ${css}`);
-ags.Utils.exec(`sassc ${scss} ${css}`);
+exec(`touch ${css}`);
+exec(`sassc ${scss} ${css}`);
 
 export default {
     style: css,

config/ags/js/bar/traybuttons.js

@@ -1,7 +1,7 @@
 import Gdk from 'gi://Gdk';
 const display = Gdk.Display.get_default();
-import { CurrentWindow } from 'file:///home/matt/.nix/config/ags/current-window/current-window.js';
-import { Workspaces } from 'file:///home/matt/.nix/config/ags/workspaces/workspaces.js';
+import { CurrentWindow } from './current-window.js';
+import { Workspaces } from './workspaces.js';
 
 const Separator = width => ags.Widget.Box({
   style: `min-width: ${width}px;`,

config/ags/scss/main.scss

@@ -0,0 +1,8 @@
+* {
+  all: unset;
+}
+
+@import "./common.scss";
+@import "./widgets/powermenu.scss";
+@import "./widgets/traybuttons.scss";
+@import "./widgets/workspaces.scss";

config/ags/style.css

@@ -0,0 +1,116 @@
+* {
+  all: unset; }
+
+.powermenu {
+  background-color: rgba(40, 42, 54, 0.8);
+  color: #a5b6cf;
+  padding: 10px;
+  font-family: MesloLGS NF;
+  /*font-family: Iosevka Nerd Font;*/
+  font-size: 70px;
+  border-radius: 30px;
+  border: 2px solid rgba(189, 147, 249, 0.8); }
+  .powermenu label {
+    min-width: 140px;
+    min-height: 130px; }
+  .powermenu button {
+    margin-right: 10px;
+    margin-left: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-radius: 12px;
+    min-width: 80px;
+    transition: all ease .2s; }
+    .powermenu button:hover {
+      background-color: #11131c; }
+    .powermenu button:active {
+      background-color: #11131c; }
+    .powermenu button .content {
+      border-radius: 4px;
+      padding: 0px 15px 0px 15px; }
+  .powermenu .shutdown {
+    color: #dd6777; }
+  .powermenu .reboot {
+    color: #c296eb; }
+  .powermenu .logout {
+    color: #ecd3a0; }
+
+.powermenu-clickhandler {
+  background-color: black; }
+
+.osk-toggle,
+.tablet-toggle,
+.heart-toggle {
+  font-size: 28px;
+  min-height: 40px;
+  min-width: 53px; }
+
+.notif-panel {
+  font-size: 20px;
+  border-radius: 80px;
+  min-height: 37px;
+  min-width: 105px;
+  padding: 1px 0px 1px 5px; }
+  .notif-panel .toggle-on {
+    border-top-left-radius: 22px;
+    border-top-right-radius: 22px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom: 0px solid rgba(40, 42, 54, 0.8); }
+
+.filler {
+  border-left: 2px solid rgba(189, 147, 249, 0.8);
+  border-right: 2px solid rgba(189, 147, 249, 0.8);
+  min-height: 14px;
+  min-width: 105px;
+  background-color: rgba(40, 42, 54, 0.8);
+  transition: all 0.5s; }
+
+.quick-settings-toggle {
+  font-size: 24px;
+  min-height: 40px;
+  min-width: 40px;
+  padding: 0px 0px 0px 0px; }
+
+.toggle-off {
+  background-color: rgba(40, 42, 54, 0.8);
+  color: #CBA6F7;
+  border-radius: 80px;
+  border: 2px solid #1b1b2b;
+  transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+
+.toggle-on {
+  background-color: rgba(40, 42, 54, 0.8);
+  color: #CBA6F7;
+  border-radius: 80px;
+  border: 2px solid rgba(189, 147, 249, 0.8);
+  transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+
+.toggle-on:hover, .toggle-off:hover {
+  background-color: rgba(127, 132, 156, 0.4);
+  transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+
+.workspaces {
+  background-color: rgba(40, 42, 54, 0.8);
+  border-radius: 80px;
+  border: 2px solid #1b1b1b;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 12px;
+  padding-right: 12px; }
+  .workspaces .button {
+    margin: 2px;
+    min-width: 20px;
+    border-radius: 100%; }
+    .workspaces .button * {
+      color: transparent; }
+  .workspaces .empty {
+    border: none;
+    transition: border-color 0.25s linear; }
+  .workspaces .occupied {
+    border: 2px solid rgba(40, 42, 54, 0.8);
+    background: rgba(189, 147, 249, 0.8);
+    transition: border-color 0.25s linear; }
+  .workspaces .active {
+    border: 2px solid #50fa7b;
+    transition: border-color 0.25s linear; }

config/ags/style.scss

@@ -1,8 +0,0 @@
-* {
-  all: unset;
-}
-
-@import "/home/matt/.nix/config/ags/colors.scss";
-@import "/home/matt/.nix/config/ags/powermenu/powermenu.scss";
-@import "/home/matt/.nix/config/ags/traybuttons/traybuttons.scss";
-@import "/home/matt/.nix/config/ags/workspaces/workspaces.scss";

nixos/home/dotfiles.nix

@@ -14,8 +14,7 @@ in
     "gtklock/config.ini".source = config.lib.file.mkOutOfStoreSymlink "${configDir}/gtklock/config.ini";
     "gtklock/style.css".source = config.lib.file.mkOutOfStoreSymlink "${configDir}/gtklock/style.css";
 
-    "ags/config.js".source = config.lib.file.mkOutOfStoreSymlink "${configDir}/ags/config.js";
-    "ags/style.scss".source = config.lib.file.mkOutOfStoreSymlink "${configDir}/ags/style.scss";
+    "ags".source = config.lib.file.mkOutOfStoreSymlink "${configDir}/ags";
   };
 
   programs = {