style: adjust scss for consistent styling

app.ts

@@ -1,14 +1,12 @@
 import app from "ags/gtk4/app";
 import GLib from "gi://GLib";
 import style from "./style/main.scss";
-import windows from "./windows";
+import { Main } from "./main";
 
 const icons = `${GLib.get_user_config_dir()}/tpanel/assets/icons`;
 
 app.start({
   css: style,
   icons: icons,
-  main() {
-    windows.map((win) => app.get_monitors().map(win));
-  },
+  main: Main,
 });

main.tsx

@@ -0,0 +1,25 @@
+import { For, This, createBinding } from "ags";
+import app from "ags/gtk4/app";
+import { Bar } from "./widgets/bar";
+import { Launcher } from "./widgets/launcher";
+import { Notifications } from "./widgets/notifications";
+import { ControlCenter } from "./widgets/control-center";
+import { WallpaperManager } from "./widgets/wallpaper-manager";
+
+export const Main = () => {
+  const monitors = createBinding(app, "monitors");
+
+  return (
+    <For each={monitors}>
+      {(monitor) => (
+        <This this={app}>
+          <Bar gdkmonitor={monitor} />
+          <Launcher gdkmonitor={monitor} />
+          <Notifications gdkmonitor={monitor} />
+          <ControlCenter gdkmonitor={monitor} />
+          <WallpaperManager gdkmonitor={monitor} />
+        </This>
+      )}
+    </For>
+  );
+};

style/_bar.scss

@@ -15,7 +15,7 @@ window.Bar {
     padding: 8px;
 
     image {
-      -gtk-icon-size: 1.5rem;
+      -gtk-icon-size: 1.2rem;
     }
 
     &:hover {
@@ -73,13 +73,13 @@ window.Bar {
     padding: 8px;
 
     image {
-      -gtk-icon-size: 1.5rem;
+      -gtk-icon-size: 1.2rem;
     }
   }
 
   .tray {
     image {
-      -gtk-icon-size: 1.3rem;
+      -gtk-icon-size: 1rem;
     }
 
     menubutton {

style/_control-center.scss

@@ -15,7 +15,7 @@ window.control-center {
     color: $fg-color;
     background-color: $inactive-color;
     border-radius: calc($rounded / 1.5);
-    padding: 20px;
+    padding: 15px;
 
     image {
       -gtk-icon-size: 2rem;
@@ -32,19 +32,19 @@ window.control-center {
   .header {
     .name {
       color: rgba($fg-color, 0.8);
-      font-size: 1.8rem;
+      font-size: 1.5rem;
     }
 
     .username {
       color: rgba($fg-color, 0.5);
-      font-size: 1.2rem;
+      font-size: 1rem;
     }
 
     .controls {
       button {
         background-color: $inactive-color;
         border-radius: calc($rounded / 1.5);
-        padding: 10px;
+        padding: 6px;
         transition: color 100ms;
 
         &:hover {
@@ -56,7 +56,7 @@ window.control-center {
       }
 
       image {
-        -gtk-icon-size: 2rem;
+        -gtk-icon-size: 1.5rem;
       }
     }
   }

style/_launcher.scss

@@ -4,7 +4,7 @@ window.launcher {
   background: $bg-color;
   border-radius: $rounded;
   padding: 10px;
-  font-size: 1.2rem;
+  font-size: $font-size;
 
   .search {
     min-width: 300px;
@@ -30,7 +30,7 @@ window.launcher {
     }
 
     image {
-      -gtk-icon-size: 2rem;
+      -gtk-icon-size: 1.5rem;
     }
   }
 

style/_variable.scss

@@ -3,4 +3,4 @@ $fg-color: #fff;
 $bg-color: #101213;
 $inactive-color: #1b1d1e;
 $rounded: 14px;
-$font-size: 1rem;
+$font-size: 0.8rem;

widgets/bar/index.tsx

@@ -8,10 +8,11 @@ import { Tray } from "./tray";
 import { WorkspaceButton } from "./workspace";
 import { Bluetooth } from "./bluetooth";
 import { Cava } from "./cava";
+import { onCleanup } from "gnim";
 
 export const WINDOW_NAME = "bar";
 
-export const Bar = (gdkmonitor: Gdk.Monitor) => {
+export const Bar = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const { TOP } = Astal.WindowAnchor;
 
   return (
@@ -24,6 +25,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
       anchor={TOP}
       widthRequest={1200}
       application={app}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <centerbox>
         <box spacing={10} $type="start">

widgets/bar/network.tsx

@@ -21,8 +21,7 @@ export const Network = () => {
     const wifi = net.wifi;
     switch (wifi.internet) {
       case 0:
-        const ssid = wifi.ssid;
-        ssid ? ssid : "";
+        let ssid = wifi.ssid ? wifi.ssid : "";
         let text = ssid.length > 10 ? ssid.substring(0, 10) + "..." : ssid;
         return text;
       case 1:

widgets/control-center/index.tsx

@@ -5,10 +5,11 @@ import { Header } from "./header";
 import { NotificationList } from "./notification-list";
 import { SlidingControls } from "./sliding-controls";
 import { SystemInfo } from "./system-info";
+import { onCleanup } from "ags";
 
 export const WINDOW_NAME = "control-center";
 
-export const ControlCenter = (gdkmonitor: Gdk.Monitor) => {
+export const ControlCenter = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const { TOP, BOTTOM, RIGHT } = Astal.WindowAnchor;
   const { VERTICAL } = Gtk.Orientation;
 
@@ -20,6 +21,7 @@ export const ControlCenter = (gdkmonitor: Gdk.Monitor) => {
       application={app}
       keymode={Astal.Keymode.ON_DEMAND}
       anchor={TOP | BOTTOM | RIGHT}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <Gtk.EventControllerKey onKeyPressed={onKey} />
       <box vexpand orientation={VERTICAL} spacing={20}>

widgets/control-center/system-info.tsx

@@ -66,8 +66,9 @@ export const SystemInfo = () => {
           <image iconName="fa-speed-symbolic" />
           <label
             label={profile((val) => {
-              const data = val.split(" ");
-              return data[data.length - 1];
+              const match = val.match(/Active profile is\s+(.+)/);
+              const activeProfile = match?.[1]?.trim() ?? "NA";
+              return activeProfile;
             })}
           />
         </box>

widgets/launcher/index.tsx

@@ -1,4 +1,4 @@
-import { createState, For } from "ags";
+import { createState, For, onCleanup } from "ags";
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import app from "ags/gtk4/app";
 import AstalApps from "gi://AstalApps";
@@ -59,7 +59,7 @@ const AppSearch = () => {
   );
 };
 
-export const Launcher = (gdkmonitor: Gdk.Monitor) => {
+export const Launcher = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   return (
     <window
       name={WINDOW_NAME}
@@ -72,6 +72,7 @@ export const Launcher = (gdkmonitor: Gdk.Monitor) => {
         if (visible) searchEntry.grab_focus();
         else searchEntry.set_text("");
       }}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <Gtk.EventControllerKey onKeyPressed={onKey} />
 

widgets/notifications/index.tsx

@@ -11,7 +11,7 @@ import { Notification } from "./notification";
 
 export const WINDOW_NAME = "notifications";
 
-export const Notifications = (gdkmonitor: Gdk.Monitor) => {
+export const Notifications = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const notifd = AstalNotifd.get_default();
   const isDndMode = createBinding(notifd, "dont-disturb");
 

widgets/wallpaper-manager/index.tsx

@@ -1,3 +1,4 @@
+import { onCleanup } from "ags";
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import app from "ags/gtk4/app";
 import { exec } from "ags/process";
@@ -10,7 +11,11 @@ export const WINDOW_NAME = "wallpaper-manager";
 const wallpaperPath = `/home/tux/Wallpapers/new`;
 const imageFormats = [".jpeg", ".jpg", ".webp", ".png"];
 
-export const WallpaperManager = (gdkmonitor: Gdk.Monitor) => {
+export const WallpaperManager = ({
+  gdkmonitor,
+}: {
+  gdkmonitor: Gdk.Monitor;
+}) => {
   const { TOP, BOTTOM, LEFT } = Astal.WindowAnchor;
   const { VERTICAL } = Gtk.Orientation;
   const wallpaperList = getWallpaperList(wallpaperPath);
@@ -23,6 +28,7 @@ export const WallpaperManager = (gdkmonitor: Gdk.Monitor) => {
       application={app}
       keymode={Astal.Keymode.ON_DEMAND}
       anchor={TOP | BOTTOM | LEFT}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <Gtk.EventControllerKey onKeyPressed={onKey} />
       <scrolledwindow>
@@ -88,16 +94,7 @@ const setWallpaper = (name: string) => {
 
   if (!hyprctl) return;
 
-  const preloadedWalls = exec([hyprctl, "hyprpaper", "listloaded"]);
-  const nWall = preloadedWalls.split("\n").length;
-  console.log(nWall);
-
-  if (nWall >= 5) {
-    exec([hyprctl, "hyprpaper", "unload", "all"]);
-  }
-
-  exec([hyprctl, "hyprpaper", "preload", imagePath]);
-  exec([hyprctl, "hyprpaper", "wallpaper", `,${imagePath}`]);
+  exec([hyprctl, "hyprpaper", "wallpaper", `,${imagePath},`]);
 
   app.toggle_window(WINDOW_NAME);
 };

windows.ts

@@ -1,7 +0,0 @@
-import { Bar } from "./widgets/bar";
-import { Launcher } from "./widgets/launcher";
-import { Notifications } from "./widgets/notifications";
-import { ControlCenter } from "./widgets/control-center";
-import { WallpaperManager } from "./widgets/wallpaper-manager";
-
-export default [Bar, Launcher, Notifications, ControlCenter, WallpaperManager];