refactor and add modules directory

style.scss

@@ -66,8 +66,20 @@ window.Bar {
         }
     }
 
+    .Cpu {
+        padding: 0 5px;
+    }
+
+    .Ram {
+        padding: 0 5px;
+    }
+
+    .Storage {
+        padding: 0 5px;
+    }
+
     .Focused {
-        padding: 0 15px;
+        padding: 0 15px 0 5px;
         transition: 300ms;
     }
 

widget/Bar.tsx

@@ -1,73 +1,15 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk3"
-import { Variable, GLib, bind } from "astal"
+import { 
-import Hyprland from "gi://AstalHyprland"
+    PowerMenu,
-import Tray from "gi://AstalTray"
+    Cpu,
-import PowerMenu from "./PowerMenu"
+    BatteryLevel,
-import Cpu from "./Cpu"
+    Ram,
-
+    Storage,
-const time = Variable("").poll(1000, "date")
+    Workspaces,
-
+    FocusedClient,
-function Workspaces() {
+    Time,
-    const hypr = Hyprland.get_default()
+    SysTray
-
+} from "./modules/export"
-    return <box className="Workspaces">
-        {bind(hypr, "workspaces").as(wss => wss
-            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
-            .sort((a, b) => a.id - b.id)
-            .map(ws => (
-                <button
-                    className={bind(hypr, "focusedWorkspace").as(fw =>
-                        ws === fw ? "focused" : "")}
-                    onClicked={() => ws.focus()}>
-                    {ws.id}
-                </button>
-            ))
-        )}
-    </box>
-}
-
-function FocusedClient() {
-    const hypr = Hyprland.get_default()
-    const focused = bind(hypr, "focusedClient")
-
-    return <box
-        className="Focused"
-        visible={focused.as(Boolean)}>
-        {focused.as(client => (
-            client && <label label={bind(client, "title").as(String)} />
-        ))}
-        {/* {focused.as(client => (
-            client && <label label={bind(client, "icon").as(String)} />
-        ))} */}
-    </box>
-}
-
-function Time({ format = "%H:%M - %A %e" }) {
-    const time = Variable<string>("").poll(1000, () =>
-        GLib.DateTime.new_now_local().format(format)!)
-
-    return <label
-        className="Time"
-        onDestroy={() => time.drop()}
-        label={time()}
-    />
-}
-
-function SysTray() {
-    const tray = Tray.get_default()
-
-    return <box className="SysTray">
-        {bind(tray, "items").as(items => items.map(item => (
-            <menubutton
-                tooltipMarkup={bind(item, "tooltipMarkup")}
-                usePopover={false}
-                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
-                menuModel={bind(item, "menuModel")}>
-                <icon gicon={bind(item, "gicon")} />
-            </menubutton>
-        )))}
-    </box>
-}
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
@@ -89,6 +31,8 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
                     
                 </button>
                 <Cpu />
+                <Ram />
+                <Storage />
                 <FocusedClient />
             </box>  
             <box hexpand halign={Gtk.Align.CENTER} className="RoudedBlock">
@@ -96,10 +40,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
             </box>
             <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
                 <SysTray />
-                {/* <SysTray />
+                <BatteryLevel />
-                <Wifi />
-                <AudioSlider />
-                <BatteryLevel /> */}
                 <Time />
                 <button
                     onClicked={() => App.toggle_window("powermenu")}

widget/Ram.tsx

@@ -1,13 +0,0 @@
-import { Variable } from "astal";
-
-export default function Ram() {
-    const cpu_usage = Variable<string>("").poll(1000, () =>
-        computeCPU())
-
-    return <box className="cpu">
-        <label 
-            className="Time"
-            onDestroy={() => cpu_usage.drop()}
-            label={cpu_usage()} />
-    </box>
-}

widget/modules/Battery.tsx

@@ -0,0 +1,14 @@
+import { bind } from "astal"
+import Battery from "gi://AstalBattery"
+
+export default function BatteryLevel() {
+    const bat = Battery.get_default()
+
+    return <box className="Battery"
+        visible={bind(bat, "isPresent")}>
+        <icon icon={bind(bat, "batteryIconName")} />
+        <label label={bind(bat, "percentage").as(p =>
+            `${Math.floor(p * 100)} %`
+        )} />
+    </box>
+}

widget/modules/Cpu.tsx

@@ -16,18 +16,18 @@ const computeCPU = (): string => {
 
     previousCpuData = currentCpuData;
 
-    const cpuUsagePercentageString = "    " +  cpuUsagePercentage.toFixed(0) + "%";
+    const cpuUsagePercentageString = "    " +  Math.floor(cpuUsagePercentage) + "%";
 
     return cpuUsagePercentageString;
 }
 
 export default function Cpu() {
-    const cpu_usage = Variable<string>("").poll(10000, () =>
+    const cpu_usage = Variable<string>("").poll(5000, () =>
         computeCPU())
 
     return <box className="cpu">
         <label 
-            className="Time"
+            className="Cpu"
             onDestroy={() => cpu_usage.drop()}
             label={cpu_usage()} />
     </box>

widget/modules/FocusedClient.tsx

@@ -0,0 +1,15 @@
+import Hyprland from "gi://AstalHyprland"
+import { bind } from "astal"
+
+export default function FocusedClient() {
+    const hypr = Hyprland.get_default()
+    const focused = bind(hypr, "focusedClient")
+
+    return <box
+        className="Focused"
+        visible={focused.as(Boolean)}>
+        {focused.as(client => (
+            client && <label label={bind(client, "title").as(String)} />
+        ))}
+    </box>
+}

widget/modules/Ram.tsx

@@ -0,0 +1,45 @@
+import { Variable, GLib } from "astal";
+
+const calculateRamUsage = (): string => {
+    try {
+        const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo');
+
+        if (!success || !meminfoBytes) {
+            throw new Error('Failed to read /proc/meminfo or file content is null.');
+        }
+
+        const meminfo = new TextDecoder('utf-8').decode(meminfoBytes);
+
+        const totalMatch = meminfo.match(/MemTotal:\s+(\d+)/);
+        const availableMatch = meminfo.match(/MemAvailable:\s+(\d+)/);
+
+        if (!totalMatch || !availableMatch) {
+            throw new Error('Failed to parse /proc/meminfo for memory values.');
+        }
+
+        const totalRamInBytes = parseInt(totalMatch[1], 10) * 1024;
+        const availableRamInBytes = parseInt(availableMatch[1], 10) * 1024;
+
+        let usedRam = totalRamInBytes - availableRamInBytes;
+        usedRam = isNaN(usedRam) || usedRam < 0 ? 0 : usedRam;
+
+        const ramstring = "    " + Math.floor(usedRam / totalRamInBytes * 100) + "%"
+
+        return ramstring
+    } catch (error) {
+        console.error('Error calculating RAM usage:', error);
+        return "";
+    }
+};
+
+export default function Ram() {
+    const ram_usage = Variable<string>("").poll(5000, () =>
+        calculateRamUsage())
+
+    return <box className="ram">
+        <label 
+            className="Ram"
+            onDestroy={() => ram_usage.drop()}
+            label={ram_usage()} />
+    </box>
+}

widget/modules/Storage.tsx

@@ -0,0 +1,33 @@
+import { Variable } from "astal";
+import GTop from 'gi://GTop';
+
+const computeStorage = (): string => {
+    try {
+        const currentFsUsage = new GTop.glibtop_fsusage();
+
+        GTop.glibtop_get_fsusage(currentFsUsage, '/');
+
+        const total = currentFsUsage.blocks * currentFsUsage.block_size;
+        const available = currentFsUsage.bavail * currentFsUsage.block_size;
+        const used = total - available;
+
+        const storagestring = "    " + Math.floor(used / total * 100) + "%"
+
+        return storagestring
+    } catch (error) {
+        console.error('Error calculating RAM usage:', error);
+        return "";
+    }
+};
+
+export default function Storage() {
+    const storage_usage = Variable<string>("").poll(5000, () =>
+        computeStorage())
+
+    return <box className="storage">
+        <label 
+            className="Storage"
+            onDestroy={() => storage_usage.drop()}
+            label={storage_usage()} />
+    </box>
+}

widget/modules/SysTray.tsx

@@ -0,0 +1,18 @@
+import { bind } from "astal"
+import Tray from "gi://AstalTray"
+
+export default function SysTray() {
+    const tray = Tray.get_default()
+
+    return <box className="SysTray">
+        {bind(tray, "items").as(items => items.map(item => (
+            <menubutton
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                usePopover={false}
+                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                menuModel={bind(item, "menuModel")}>
+                <icon gicon={bind(item, "gicon")} />
+            </menubutton>
+        )))}
+    </box>
+}

widget/modules/Time.tsx

@@ -0,0 +1,12 @@
+import { Variable, GLib } from "astal"
+
+export default function Time({ format = "%H:%M - %A %e" }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!)
+
+    return <label
+        className="Time"
+        onDestroy={() => time.drop()}
+        label={time()}
+    />
+}

widget/modules/Workspaces.tsx

@@ -0,0 +1,21 @@
+import { bind } from "astal"
+import Hyprland from "gi://AstalHyprland"
+
+export default function Workspaces() {
+    const hypr = Hyprland.get_default()
+
+    return <box className="Workspaces">
+        {bind(hypr, "workspaces").as(wss => wss
+            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
+            .sort((a, b) => a.id - b.id)
+            .map(ws => (
+                <button
+                    className={bind(hypr, "focusedWorkspace").as(fw =>
+                        ws === fw ? "focused" : "")}
+                    onClicked={() => ws.focus()}>
+                    {ws.id}
+                </button>
+            ))
+        )}
+    </box>
+}

widget/modules/export.ts

@@ -0,0 +1,21 @@
+import BatteryLevel from "./Battery";
+import Cpu from "./Cpu";
+import FocusedClient from "./FocusedClient";
+import PowerMenu from "./PowerMenu";
+import Ram from "./Ram";
+import Storage from "./Storage";
+import SysTray from "./SysTray";
+import Time from "./Time";
+import Workspaces from "./Workspaces";
+
+export {
+    BatteryLevel,
+    Cpu,
+    FocusedClient,
+    PowerMenu,
+    Ram,
+    Storage,
+    SysTray,
+    Time,
+    Workspaces
+}