fix: profile and ping stdout

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,
 });

flake.nix

@@ -63,6 +63,11 @@
 
             runHook postInstall
           '';
+
+          # Remove any broken symlinks
+          postFixup = ''
+            find $out -type l ! -exec test -e {} \; -delete 2>/dev/null || true
+          '';
         };
       in
         pkgs.runCommand "tpanel" {

main.tsx

@@ -0,0 +1,21 @@
+import { For, This, createBinding } from "ags";
+import app from "ags/gtk4/app";
+import { Bar } from "./widgets/bar";
+import { Notifications } from "./widgets/notifications";
+import { ControlCenter } from "./widgets/control-center";
+
+export const Main = () => {
+  const monitors = createBinding(app, "monitors");
+
+  return (
+    <For each={monitors}>
+      {(monitor) => (
+        <This this={app}>
+          <Bar gdkmonitor={monitor} />
+          <Notifications gdkmonitor={monitor} />
+          <ControlCenter 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

@@ -1,40 +0,0 @@
-@use "./_variable.scss" as *;
-
-window.launcher {
-  background: $bg-color;
-  border-radius: $rounded;
-  padding: 10px;
-  font-size: 1.2rem;
-
-  .search {
-    min-width: 300px;
-    padding: 10px;
-    color: rgba($fg-color, 0.5);
-  }
-
-  separator {
-    border: 1px solid rgba($inactive-color, 0.5);
-  }
-
-  .list {
-    background: $bg-color;
-  }
-
-  .button {
-    border-radius: $rounded;
-    padding: 10px;
-
-    &:hover,
-    &:focus {
-      background: $inactive-color;
-    }
-
-    image {
-      -gtk-icon-size: 2rem;
-    }
-  }
-
-  .name {
-    color: $fg-color;
-  }
-}

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;

style/_wallpaper-manager.scss

@@ -1,30 +0,0 @@
-@use "./_variable.scss" as *;
-@use "sass:math";
-@use "sass:list";
-
-window.wallpaper-manager {
-  background: $bg-color;
-  color: $fg-color;
-  min-width: 400px;
-  margin: 10px;
-  padding: 20px;
-  border-radius: $rounded;
-
-  .button {
-    border-radius: $rounded;
-    opacity: 0.5;
-
-    &:hover,
-    &:focus {
-      opacity: 1;
-    }
-  }
-
-  picture {
-    border-radius: $rounded;
-
-    &:hover {
-      background: $inactive-color;
-    }
-  }
-}

style/main.scss

@@ -4,14 +4,8 @@
 // bar
 @use "./_bar.scss";
 
-// launcher
-@use "./_launcher.scss";
-
 // notifications
 @use "./_notification.scss";
 
 // control center
 @use "./_control-center.scss";
-
-// wallpaper manager
-@use "./_wallpaper-manager.scss";

widgets/bar/index.tsx

@@ -8,10 +8,12 @@ import { Tray } from "./tray";
 import { WorkspaceButton } from "./workspace";
 import { Bluetooth } from "./bluetooth";
 import { Cava } from "./cava";
+import { onCleanup } from "gnim";
+import { execAsync } from "ags/process";
 
 export const WINDOW_NAME = "bar";
 
-export const Bar = (gdkmonitor: Gdk.Monitor) => {
+export const Bar = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const { TOP } = Astal.WindowAnchor;
 
   return (
@@ -24,10 +26,14 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
       anchor={TOP}
       widthRequest={1200}
       application={app}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <centerbox>
         <box spacing={10} $type="start">
-          <Launcher windowName="launcher" icon="nix-symbolic" />
+          <Launcher
+            icon="nix-symbolic"
+            onClicked={() => execAsync("vicinae toggle")}
+          />
           <Network />
           <Battery />
         </box>
@@ -42,7 +48,10 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
           <Bluetooth />
           <Tray />
           <Time />
-          <Launcher windowName="control-center" icon="fa-ghost-symbolic" />
+          <Launcher
+            icon="fa-ghost-symbolic"
+            onClicked={() => app.toggle_window("control-center")}
+          />
         </box>
       </centerbox>
     </window>

widgets/bar/launcher.tsx

@@ -1,20 +1,15 @@
-import { Gdk } from "ags/gtk4";
-import app from "ags/gtk4/app";
-import { WINDOW_NAME as APP_LAUNCHER_WINDOW_NAME } from "../launcher";
-import { WINDOW_NAME as CONTROL_CENTER_WINDOW_NAME } from "../control-center";
+import { Gdk, Gtk } from "ags/gtk4";
 
 type Props = {
   icon: string;
-  windowName:
-  | typeof APP_LAUNCHER_WINDOW_NAME
-  | typeof CONTROL_CENTER_WINDOW_NAME;
+  onClicked?: ((source: Gtk.Button) => void) | undefined;
 };
 
-export const Launcher = ({ icon, windowName }: Props) => {
+export const Launcher = ({ icon, onClicked }: Props) => {
   return (
     <button
       cssClasses={["launcher"]}
-      onClicked={() => app.toggle_window(windowName)}
+      onClicked={onClicked}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
     >
       <image iconName={icon} />

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:
@@ -39,7 +38,7 @@ export const Network = () => {
       cssClasses={["pill"]}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
       onClicked={() =>
-        execAsync(`wezterm start --class wezterm-floating nmtui`)
+        execAsync(`wezterm start --class wezterm-floating impala`)
       }
     >
       <box spacing={5}>

widgets/bar/workspace.tsx

@@ -33,7 +33,7 @@ const Workspace = ({ ws }: WsButtonProps) => {
 };
 
 export const WorkspaceButton = () => {
-  const range = Array.from({ length: 4 + 1 }, (_, i) => i);
+  const range = Array.from({ length: 6 + 1 }, (_, i) => i);
   return (
     <box cssClasses={["workspace-container"]} spacing={4}>
       {range.map((i) => (

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

@@ -4,8 +4,8 @@ import { createPoll } from "ags/time";
 export const SystemInfo = () => {
   const cpu = PollCMD("cat /sys/class/thermal/thermal_zone*/temp");
   const gpu = PollCMD("supergfxctl -g");
-  const profile = PollCMD("asusctl profile -p");
-  const tailscale = PollCMD("tailscale ping homelab");
+  const profile = PollCMD("asusctl profile get");
+  const home = PollCMD("ping 100.64.0.3 -c 1");
   const cpuUsage = PollCMD(
     `awk '{u=$2+$4; t=$2+$3+$4+$5+$6+$7+$8; if(NR==1){u1=u; t1=t}else{printf "%.1f%%",(u-u1)*100/(t-t1)}}' <(grep '^cpu ' /proc/stat; sleep 1; grep '^cpu ' /proc/stat)`,
     2000,
@@ -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:\s*(.+)$/m);
+              const activeProfile = match?.[1]?.trim() ?? "NA";
+              return activeProfile;
             })}
           />
         </box>
@@ -80,9 +81,9 @@ export const SystemInfo = () => {
           <image iconName="fa-home-symbolic" />
 
           <label
-            label={tailscale((val) => {
-              const data = val.split(" ");
-              return data[data.length - 1];
+            label={home((val) => {
+              const time = `${parseInt(val.match(/time=([\d.]+)\s*ms/)?.[1] ?? "0", 10)}ms`;
+              return time;
             })}
           />
         </box>

widgets/launcher/index.tsx

@@ -1,97 +0,0 @@
-import { createState, For } from "ags";
-import { Astal, Gdk, Gtk } from "ags/gtk4";
-import app from "ags/gtk4/app";
-import AstalApps from "gi://AstalApps";
-
-export const WINDOW_NAME = "launcher";
-
-let searchEntry: Gtk.Entry;
-const apps = new AstalApps.Apps();
-const [searchText, setSearchText] = createState("");
-
-const hide = () => {
-  app.get_window(WINDOW_NAME)?.set_visible(false);
-};
-
-const AppButton = ({ app }: { app: AstalApps.Application }) => {
-  return (
-    <button
-      cssClasses={["button"]}
-      onClicked={() => {
-        hide();
-        app.launch();
-      }}
-      cursor={Gdk.Cursor.new_from_name("pointer", null)}
-    >
-      <box spacing={6} halign={Gtk.Align.START} valign={Gtk.Align.CENTER}>
-        <image iconName={app.iconName} iconSize={Gtk.IconSize.LARGE} />
-        <label cssClasses={["name"]} xalign={0} label={app.name} />
-      </box>
-    </button>
-  );
-};
-
-const AppList = () => {
-  const appList = searchText((text) => apps.fuzzy_query(text));
-
-  return (
-    <Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={350}>
-      <box
-        spacing={5}
-        orientation={Gtk.Orientation.VERTICAL}
-        cssClasses={["list"]}
-      >
-        <For each={appList}>{(app) => <AppButton app={app} />}</For>
-      </box>
-    </Gtk.ScrolledWindow>
-  );
-};
-
-const AppSearch = () => {
-  return (
-    <entry
-      $={(ref) => (searchEntry = ref)}
-      cssClasses={["search"]}
-      text={searchText}
-      placeholderText="Search..."
-      onNotifyText={({ text }) => setSearchText(text)}
-    />
-  );
-};
-
-export const Launcher = (gdkmonitor: Gdk.Monitor) => {
-  return (
-    <window
-      name={WINDOW_NAME}
-      cssClasses={["launcher"]}
-      gdkmonitor={gdkmonitor}
-      application={app}
-      exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      keymode={Astal.Keymode.ON_DEMAND}
-      onNotifyVisible={({ visible }) => {
-        if (visible) searchEntry.grab_focus();
-        else searchEntry.set_text("");
-      }}
-    >
-      <Gtk.EventControllerKey onKeyPressed={onKey} />
-
-      <box orientation={Gtk.Orientation.VERTICAL} spacing={5}>
-        <AppSearch />
-        <Gtk.Separator orientation={Gtk.Orientation.HORIZONTAL} />
-        <AppList />
-      </box>
-    </window>
-  );
-};
-
-const onKey = (
-  _e: Gtk.EventControllerKey,
-  keyval: number,
-  _: number,
-  mod: number,
-) => {
-  if (keyval === Gdk.KEY_Escape) {
-    app.toggle_window(WINDOW_NAME);
-    return;
-  }
-};

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,103 +0,0 @@
-import { Astal, Gdk, Gtk } from "ags/gtk4";
-import app from "ags/gtk4/app";
-import { exec } from "ags/process";
-import Gio from "gi://Gio";
-import GLib from "gi://GLib";
-
-export const WINDOW_NAME = "wallpaper-manager";
-
-// @TODO wallpaper cache
-const wallpaperPath = `/home/tux/Wallpapers/new`;
-const imageFormats = [".jpeg", ".jpg", ".webp", ".png"];
-
-export const WallpaperManager = (gdkmonitor: Gdk.Monitor) => {
-  const { TOP, BOTTOM, LEFT } = Astal.WindowAnchor;
-  const { VERTICAL } = Gtk.Orientation;
-  const wallpaperList = getWallpaperList(wallpaperPath);
-
-  return (
-    <window
-      name={WINDOW_NAME}
-      cssClasses={["wallpaper-manager"]}
-      gdkmonitor={gdkmonitor}
-      application={app}
-      keymode={Astal.Keymode.ON_DEMAND}
-      anchor={TOP | BOTTOM | LEFT}
-    >
-      <Gtk.EventControllerKey onKeyPressed={onKey} />
-      <scrolledwindow>
-        <box orientation={VERTICAL} spacing={20}>
-          {wallpaperList.map((wall) => (
-            <button
-              cssClasses={["button"]}
-              cursor={Gdk.Cursor.new_from_name("pointer", null)}
-              onClicked={() => setWallpaper(wall)}
-            >
-              <Gtk.Picture
-                file={Gio.file_new_for_path(`${wallpaperPath}/${wall}`)}
-                heightRequest={200}
-                widthRequest={200}
-                hexpand
-                vexpand
-                cssClasses={["wallpaper-picture"]}
-                contentFit={Gtk.ContentFit.COVER}
-              />
-            </button>
-          ))}
-        </box>
-      </scrolledwindow>
-    </window>
-  );
-};
-
-const onKey = (
-  _e: Gtk.EventControllerKey,
-  keyval: number,
-  _: number,
-  mod: number,
-) => {
-  if (keyval === Gdk.KEY_Escape) {
-    app.toggle_window(WINDOW_NAME);
-    return;
-  }
-};
-
-function getWallpaperList(path: string) {
-  const dir = Gio.file_new_for_path(path);
-  const fileEnum = dir.enumerate_children(
-    "standard::name",
-    Gio.FileQueryInfoFlags.NONE,
-    null,
-  );
-
-  const files: string[] = [];
-  let i = fileEnum.next_file(null);
-  while (i) {
-    let fileName = i.get_name();
-    if (imageFormats.some((fmt) => fileName.endsWith(fmt))) {
-      files.push(fileName);
-    }
-    i = fileEnum.next_file(null);
-  }
-  return files;
-}
-
-const setWallpaper = (name: string) => {
-  const hyprctl = GLib.find_program_in_path("hyprctl");
-  const imagePath = `${wallpaperPath}/${name}`;
-
-  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}`]);
-
-  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];