feat(ags): show error disk usage when > 80

config/ags/lib/icons.ts

@@ -4,13 +4,14 @@ export const substitutes = {
   Caprine: "facebook-messenger",
   "com.raggesilver.BlackBox-symbolic": "terminal-symbolic",
   "org.wezfurlong.wezterm-symbolic": "terminal-symbolic",
+  quake: "org.wezfurlong.wezterm",
   "audio-headset-bluetooth": "audio-headphones-symbolic",
   "audio-card-analog-usb": "audio-speakers-symbolic",
   "audio-card-analog-pci": "audio-card-symbolic",
   "preferences-system": "emblem-system-symbolic",
   "com.github.Aylur.ags-symbolic": "controls-symbolic",
   "com.github.Aylur.ags": "controls-symbolic",
-};
+}
 
 export default {
   missing: "image-missing-symbolic",
@@ -143,4 +144,4 @@ export default {
     dark: "dark-mode-symbolic",
     light: "light-mode-symbolic",
   },
-};
+}

config/ags/lib/variables.ts

@@ -5,20 +5,30 @@ import GLib from "gi://GLib"
 // const tempPath = options.system.temperature.value
 
 export const clock = Variable(GLib.DateTime.new_now_local(), {
-    poll: [1000, () => GLib.DateTime.new_now_local()],
+  poll: [1000, () => GLib.DateTime.new_now_local()],
 })
 
 export const uptime = Variable(0, {
-    poll: [60_000, "cat /proc/uptime", line =>
-        Number.parseInt(line.split(".")[0]) / 60,
-    ],
+  poll: [60_000, "cat /proc/uptime", (line) => Number.parseInt(line.split(".")[0]) / 60],
 })
 
 export const distro = {
-    id: GLib.get_os_info("ID"),
-    logo: GLib.get_os_info("LOGO"),
+  id: GLib.get_os_info("ID"),
+  logo: GLib.get_os_info("LOGO"),
 }
 
+export const df = Variable(0, {
+  poll: [
+    1000,
+    "/bin/df / --output=size,used",
+    (out) => {
+      out = out.trim().split("\n")[1]
+      const [total, used] = out.match(/\d+/g).map(Number)
+      return (used * 100.0) / total
+    },
+  ],
+})
+
 // const divide = ([total, free]: string[]) => Number.parseInt(free) / Number.parseInt(total)
 //
 // export const cpu = Variable(0, {

config/ags/options.ts

@@ -83,6 +83,7 @@ const options = mkOptions(OPTIONS, {
         "colorpicker",
         "screenrecord",
         "hyprshade",
+        "system-info",
         "system",
         "battery",
         "powermenu",

config/ags/style/widgets/bar.scss

@@ -26,6 +26,13 @@ $button-radius: $radius;
   }
 }
 
+@keyframes error {
+  to {
+    background-color: $error-bg;
+    color: $error-fg;
+  }
+}
+
 .bar {
   transition: $transition;
   background-color: transparentize($bg, 0.5);
@@ -104,6 +111,17 @@ $button-radius: $radius;
     margin: 0 ($spacing * 0.5);
   }
 
+  .system-info > * {
+    animation-name: error;
+    animation-duration: 0.8s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    label {
+      margin: 0 ($spacing * 0.5);
+    }
+  }
+
   .taskbar .indicator.active {
     background-color: $primary-bg;
     border-radius: $radius;

config/ags/widget/bar/Bar.ts

@@ -11,6 +11,7 @@ import Workspaces from "./buttons/Workspaces"
 import ScreenRecord from "./buttons/ScreenRecord"
 import Messages from "./buttons/Messages"
 import Hyprshade from "./buttons/Hyprshade"
+import SystemInfo from "./buttons/SystemInfo"
 import options from "options"
 
 const { start, center, end } = options.bar.layout
@@ -32,6 +33,7 @@ const widget = {
   screenrecord: ScreenRecord,
   hyprshade: Hyprshade,
   messages: Messages,
+  ["system-info"]: SystemInfo,
   expander: () => Widget.Box({ expand: true }),
 }
 

config/ags/widget/bar/buttons/SystemInfo.ts

@@ -0,0 +1,16 @@
+import PanelButton from "../PanelButton"
+import { df } from "lib/variables"
+import { icon } from "lib/utils"
+
+export default () => {
+  return PanelButton({
+    class_name: "system-info",
+    visible: df.bind().as((c) => c > 80),
+    child: Widget.Box([
+      Widget.Icon({ icon: icon("drive-harddisk") }),
+      Widget.Label({
+        label: df.bind().as((c) => Math.round(c) + "%"),
+      }),
+    ]),
+  })
+}

config/ags/widget/bar/buttons/Taskbar.ts

@@ -32,8 +32,7 @@ const AppItem = (address: string) => {
 
   const title = Utils.watch(client.title, hyprland, () => hyprland.getClient(address)?.title || "")
 
-  let icon_name = app?.icon_name ?? client.class
-  icon_name = icon_name === "quake" ? "org.wezfurlong.wezterm" : icon_name
+  const icon_name = app?.icon_name ?? client.class
 
   const btn = PanelButton({
     class_name: "panel-button",