refactor and add modules directory

widget/Bar.tsx

@@ -1,73 +1,15 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk3"
-import { Variable, GLib, bind } from "astal"
-import Hyprland from "gi://AstalHyprland"
-import Tray from "gi://AstalTray"
-import PowerMenu from "./PowerMenu"
-import Cpu from "./Cpu"
-
-const time = Variable("").poll(1000, "date")
-
-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>
-}
-
-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>
-}
+import { 
+    PowerMenu,
+    Cpu,
+    BatteryLevel,
+    Ram,
+    Storage,
+    Workspaces,
+    FocusedClient,
+    Time,
+    SysTray
+} from "./modules/export"
 
 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 />
-                <Wifi />
-                <AudioSlider />
-                <BatteryLevel /> */}
+                <BatteryLevel />
                 <Time />
                 <button
                     onClicked={() => App.toggle_window("powermenu")}