Sync dotfiles and migrate waybar menus to ags drawers

.config/ags/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+@girs/

.config/ags/app.ts

@@ -0,0 +1,22 @@
+import app from "ags/gtk4/app"
+import style from "./style.scss"
+import { execAsync } from "ags/process"
+import NetworkDrawer from "./drawers/NetworkDrawer"
+import BluetoothDrawer from "./drawers/BluetoothDrawer"
+import AudioDrawer from "./drawers/AudioDrawer"
+import BatteryDrawer from "./drawers/BatteryDrawer"
+import CalendarDrawer from "./drawers/CalendarDrawer"
+
+app.start({
+  css: style,
+  main() {
+    execAsync("rm -f /tmp/ags-drawer-open")
+    app.get_monitors().map((m) => {
+      NetworkDrawer(m)
+      BluetoothDrawer(m)
+      AudioDrawer(m)
+      BatteryDrawer(m)
+      CalendarDrawer(m)
+    })
+  },
+})

.config/ags/drawers/AudioDrawer.tsx

@@ -0,0 +1,38 @@
+import app from "ags/gtk4/app"
+import { Astal, Gtk } from "ags/gtk4"
+import { execAsync } from "ags/process"
+import GLib from "gi://GLib"
+
+const { TOP, RIGHT } = Astal.WindowAnchor
+
+export default function AudioDrawer(gdkmonitor: any) {
+  return (
+    <window
+      name="audio-drawer"
+      class="Drawer"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.NORMAL}
+      keymode={Astal.Keymode.ON_DEMAND}
+      anchor={TOP | RIGHT}
+      margin-top={30}
+      visible={false}
+      application={app}
+      setup={(self) => {
+        self.connect("notify::is-active", () => {
+          if (!self.isActive && self.visible) {
+            if (GLib.file_test("/tmp/ags-drawer-lock", GLib.FileTest.EXISTS)) return
+            self.visible = false
+            GLib.file_set_contents("/tmp/ags-drawer-open", "")
+          }
+        })
+      }}
+    >
+      <box orientation={Gtk.Orientation.VERTICAL}>
+        <label class="drawer-title" label="󰕾  Audio" />
+        <button class="drawer-item primary" onClicked={() => execAsync("pavucontrol")}>
+          <box><label class="drawer-icon" label="󰐌" /><label label="Open Audio Settings" /></box>
+        </button>
+      </box>
+    </window>
+  )
+}

.config/ags/drawers/BatteryDrawer.tsx

@@ -0,0 +1,39 @@
+import app from "ags/gtk4/app"
+import { Astal, Gtk } from "ags/gtk4"
+import { createPoll } from "ags/time"
+import GLib from "gi://GLib"
+
+const { TOP, RIGHT } = Astal.WindowAnchor
+
+export default function BatteryDrawer(gdkmonitor: any) {
+  const info = createPoll("  N/A", 10000,
+    `sh -c 'upower -i $(upower -e | grep BAT 2>/dev/null) 2>/dev/null | awk -F":\\\\t*" "/percentage/{p=\\$2} /state/{s=\\$2} /time to (empty|full)/{t=\\$2} END{printf \"  %s  |  %s  |    %s\", p?p:\"?\", s?s:\"?\", t?t:\"N/A\"}"'`)
+
+  return (
+    <window
+      name="battery-drawer"
+      class="Drawer"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.NORMAL}
+      keymode={Astal.Keymode.ON_DEMAND}
+      anchor={TOP | RIGHT}
+      margin-top={30}
+      visible={false}
+      application={app}
+      setup={(self) => {
+        self.connect("notify::is-active", () => {
+          if (!self.isActive && self.visible) {
+            if (GLib.file_test("/tmp/ags-drawer-lock", GLib.FileTest.EXISTS)) return
+            self.visible = false
+            GLib.file_set_contents("/tmp/ags-drawer-open", "")
+          }
+        })
+      }}
+    >
+      <box orientation={Gtk.Orientation.VERTICAL}>
+        <label class="drawer-title" label="󰁹  Battery" />
+        <box class="drawer-item"><label label={info} /></box>
+      </box>
+    </window>
+  )
+}

.config/ags/drawers/BluetoothDrawer.tsx

@@ -0,0 +1,38 @@
+import app from "ags/gtk4/app"
+import { Astal, Gtk } from "ags/gtk4"
+import { execAsync } from "ags/process"
+import GLib from "gi://GLib"
+
+const { TOP, RIGHT } = Astal.WindowAnchor
+
+export default function BluetoothDrawer(gdkmonitor: any) {
+  return (
+    <window
+      name="bluetooth-drawer"
+      class="Drawer"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.NORMAL}
+      keymode={Astal.Keymode.ON_DEMAND}
+      anchor={TOP | RIGHT}
+      margin-top={30}
+      visible={false}
+      application={app}
+      setup={(self) => {
+        self.connect("notify::is-active", () => {
+          if (!self.isActive && self.visible) {
+            if (GLib.file_test("/tmp/ags-drawer-lock", GLib.FileTest.EXISTS)) return
+            self.visible = false
+            GLib.file_set_contents("/tmp/ags-drawer-open", "")
+          }
+        })
+      }}
+    >
+      <box orientation={Gtk.Orientation.VERTICAL}>
+        <label class="drawer-title" label="󰂯  Bluetooth" />
+        <button class="drawer-item primary" onClicked={() => execAsync("blueman-manager")}>
+          <box><label class="drawer-icon" label="󰂯" /><label label="Open Bluetooth Manager" /></box>
+        </button>
+      </box>
+    </window>
+  )
+}

.config/ags/drawers/CalendarDrawer.tsx

@@ -0,0 +1,43 @@
+import app from "ags/gtk4/app"
+import { Astal, Gtk } from "ags/gtk4"
+import { createPoll } from "ags/time"
+import GLib from "gi://GLib"
+
+const { TOP, RIGHT } = Astal.WindowAnchor
+
+export default function CalendarDrawer(gdkmonitor: any) {
+  const time = createPoll("", 1000, "date '+  %H:%M:%S'")
+  const date = createPoll("", 60000, "date '+  %A, %d %B %Y'")
+
+  return (
+    <window
+      name="calendar-drawer"
+      class="Drawer"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.NORMAL}
+      keymode={Astal.Keymode.ON_DEMAND}
+      anchor={TOP | RIGHT}
+      margin-top={30}
+      visible={false}
+      application={app}
+      setup={(self) => {
+        self.connect("notify::is-active", () => {
+          if (!self.isActive && self.visible) {
+            if (GLib.file_test("/tmp/ags-drawer-lock", GLib.FileTest.EXISTS)) return
+            self.visible = false
+            GLib.file_set_contents("/tmp/ags-drawer-open", "")
+          }
+        })
+      }}
+    >
+      <box orientation={Gtk.Orientation.VERTICAL}>
+        <label class="drawer-title" label="󰥔  Clock" />
+        <box class="drawer-item" orientation={Gtk.Orientation.VERTICAL}>
+          <label label={time} />
+          <label label={date} />
+        </box>
+        <box class="drawer-item"><Gtk.Calendar /></box>
+      </box>
+    </window>
+  )
+}

.config/ags/drawers/NetworkDrawer.tsx

@@ -0,0 +1,38 @@
+import app from "ags/gtk4/app"
+import { Astal, Gtk } from "ags/gtk4"
+import { execAsync } from "ags/process"
+import GLib from "gi://GLib"
+
+const { TOP, RIGHT } = Astal.WindowAnchor
+
+export default function NetworkDrawer(gdkmonitor: any) {
+  return (
+    <window
+      name="network-drawer"
+      class="Drawer"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.NORMAL}
+      keymode={Astal.Keymode.ON_DEMAND}
+      anchor={TOP | RIGHT}
+      margin-top={30}
+      visible={false}
+      application={app}
+      setup={(self) => {
+        self.connect("notify::is-active", () => {
+          if (!self.isActive && self.visible) {
+            if (GLib.file_test("/tmp/ags-drawer-lock", GLib.FileTest.EXISTS)) return
+            self.visible = false
+            GLib.file_set_contents("/tmp/ags-drawer-open", "")
+          }
+        })
+      }}
+    >
+      <box orientation={Gtk.Orientation.VERTICAL}>
+        <label class="drawer-title" label="󰤨  Network" />
+        <button class="drawer-item primary" onClicked={() => execAsync("nm-connection-editor")}>
+          <box><label class="drawer-icon" label="󰈀" /><label label="Open Network Manager" /></box>
+        </button>
+      </box>
+    </window>
+  )
+}

.config/ags/env.d.ts

@@ -0,0 +1,21 @@
+declare const SRC: string
+
+declare module "inline:*" {
+  const content: string
+  export default content
+}
+
+declare module "*.scss" {
+  const content: string
+  export default content
+}
+
+declare module "*.blp" {
+  const content: string
+  export default content
+}
+
+declare module "*.css" {
+  const content: string
+  export default content
+}

.config/ags/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "ags": "*",
+    "gnim": "*"
+  },
+  "prettier": {
+    "semi": false,
+    "tabWidth": 2
+  }
+}

.config/ags/style.scss

@@ -0,0 +1,64 @@
+* {
+  all: unset;
+  font-family: "Ubuntu Nerd Font";
+  font-size: 13px;
+}
+
+window.Drawer {
+  background: transparent;
+}
+
+window.Drawer > box {
+  margin: 8px;
+  padding: 12px;
+  min-width: 280px;
+  border: 1px solid #45475a;
+  border-radius: 12px;
+  background: #1c1c1c;
+  color: #cdd6f4;
+}
+
+.drawer-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #89b4fa;
+  margin-bottom: 8px;
+}
+
+.drawer-item {
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+.drawer-item:hover {
+  background: #313244;
+}
+
+.drawer-label {
+  color: #cdd6f4;
+}
+
+.drawer-icon {
+  margin-right: 8px;
+}
+
+button {
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: #313244;
+  color: #cdd6f4;
+}
+
+button:hover {
+  background: #45475a;
+}
+
+button.danger:hover {
+  background: #f38ba8;
+  color: #1c1c1c;
+}
+
+button.primary:hover {
+  background: #89b4fa;
+  color: #1c1c1c;
+}

.config/ags/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "strict": true,
+    "module": "ES2022",
+    "target": "ES2020",
+    "lib": ["ES2023"],
+    "moduleResolution": "Bundler",
+    // "checkJs": true,
+    // "allowJs": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "ags/gtk4"
+  }
+}

.config/ags/widget/Bar.tsx

@@ -0,0 +1,39 @@
+import app from "ags/gtk4/app"
+import { Astal, Gtk, Gdk } from "ags/gtk4"
+import { execAsync } from "ags/process"
+import { createPoll } from "ags/time"
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+  const time = createPoll("", 1000, "date")
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+
+  return (
+    <window
+      visible
+      name="bar"
+      class="Bar"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      anchor={TOP | LEFT | RIGHT}
+      application={app}
+    >
+      <centerbox cssName="centerbox">
+        <button
+          $type="start"
+          onClicked={() => execAsync("echo hello").then(console.log)}
+          hexpand
+          halign={Gtk.Align.CENTER}
+        >
+          <label label="Welcome to AGS!" />
+        </button>
+        <box $type="center" />
+        <menubutton $type="end" hexpand halign={Gtk.Align.CENTER}>
+          <label label={time} />
+          <popover>
+            <Gtk.Calendar />
+          </popover>
+        </menubutton>
+      </centerbox>
+    </window>
+  )
+}