[AGS] Bar progress

config/astal/components/bar/ui/Bar.tsx

@@ -1,23 +1,36 @@
-import { createQuickActionsMenu } from "./QuickActions";
-import { GLib } from "astal";
 import { Astal, Gdk, Gtk } from "astal/gtk3";
+import Hyprland from "./modules/Hyprland";
+import Calendar from "./modules/Calendar";
+import QuickView from "./modules/QuickView";
 
 const Bar = (gdkmonitor: Gdk.Monitor) => {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
 
     return (
         <window gdkmonitor={gdkmonitor}
-            cssClasses={["Bar"]}>
+            cssClasses={["Bar"]}
+            exclusivity={Astal.Exclusivity.EXCLUSIVE}
+            anchor={TOP | LEFT | RIGHT}>
             <box orientation={Gtk.Orientation.HORIZONTAL} spacing={10}>
-                <box>
+                <box hexpand halign={Gtk.Align.START}>
+                    <Calendar.Time />
+                    <Hyprland.Workspace />
                 </box>
-                <label>{windowTitle}</label>
-                <box>
-                    <tray />
-                    <button icon="quickaction" menu={quickActionMenu} />
+                <Hyprland.ActiveWindow />
+                <box hexpand halign={Gtk.Align.END}>
+                    <Hyprland.SysTray />
+                    <QuickView.QuickView />
                 </box>
             </box>
         </window>
     );
 }
 
-export default Bar;
+const cliHandler = ( args: string[] ): string => {
+    return 'Not implemented';
+}
+
+export default {
+    Bar,
+    cliHandler
+};

config/astal/components/bar/ui/modules/Calendar.tsx

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

config/astal/components/bar/ui/modules/Hyprland.tsx

@@ -19,7 +19,7 @@ const SysTray = () => {
 }
 
 
-const HyprlandWorkspace = () => {
+const Workspace = () => {
     const hypr = AstalHyprland.get_default()
 
     return <box className={"HyprlandWorkspaces"}>
@@ -39,7 +39,7 @@ const HyprlandWorkspace = () => {
 }
 
 
-const HyprlandActiveWindow = () => {
+const ActiveWindow = () => {
     const hypr = AstalHyprland.get_default();
     const focused = bind( hypr, "focusedClient" );
 
@@ -51,7 +51,7 @@ const HyprlandActiveWindow = () => {
 }
 
 export default {
-    HyprlandWorkspace, 
-    HyprlandActiveWindow,
+    Workspace, 
+    ActiveWindow,
     SysTray
 }

config/astal/components/bar/ui/modules/QuickView.tsx

@@ -0,0 +1,106 @@
+import { bind } from "astal";
+import AstalBattery from "gi://AstalBattery?version=0.1";
+import AstalBluetooth from "gi://AstalBluetooth?version=0.1";
+import AstalNetwork from "gi://AstalNetwork?version=0.1"
+import AstalWp from "gi://AstalWp?version=0.1";
+import Brightness from "../../util/brightness";
+import { Gtk } from "astal/gtk3";
+
+const QuickView = () => {
+    return <box>
+        <Audio></Audio>
+        <label label="QuickView"></label>
+    </box>
+}
+
+
+const NetworkWidget = () => {
+    const network = AstalNetwork.get_default();
+    const status = bind( network, "state" );
+    const wifiStrength = bind( network.wifi, 'strength' );
+    const states = {
+        "off": ""
+    }
+
+    return <label label={""}></label>
+
+}
+
+const BluetoothWidget = () => {
+    const bluetooth = AstalBluetooth.get_default();
+    const enabled = bind( bluetooth, "isPowered" );
+    const connected = bind( bluetooth, "isConnected" );
+}
+
+
+const BatteryWidget = () => {
+    const battery = AstalBattery.get_default();
+    if ( battery.get_is_present() ) {
+        const states = {
+            "100": "",
+            "90": "",
+            "80": "",
+            "70": "",
+            "60": "",
+            "50": "",
+            "40": "",
+            "30": "",
+            "20": "",
+            "10": "",
+            "critical": "",
+            "charging":"",
+            "plugged": " ",
+        }
+    }
+    // Else, no battery available -> Don't show the widget
+}
+
+
+const BrightnessWidget = () => {
+    // TODO: Finish (detect if there is a controllable screen)
+    const brightness = Brightness.get_default();
+    const screen_brightness = bind( brightness, "screen" );
+
+    return <label label={"🌣" + screen_brightness}></label>
+}
+
+
+const Audio = () => {
+    const wireplumber = AstalWp.get_default();
+    if ( wireplumber ) {
+        // With the states, split up the icons according to number of elements available
+        const speakerMuted = " ";
+        const speakersStates = [
+            "",
+            "",
+            ""
+        ]
+        const micStates = {
+            "on": " ",
+            "muted": " ",
+        }
+        const volume_speakers = bind( wireplumber.defaultSpeaker, 'volume' );
+        const muted_speakers = bind( wireplumber.defaultSpeaker, 'mute' );
+        const muted_mic = bind( wireplumber.defaultMicrophone, 'mute' );
+
+        return <box orientation={Gtk.Orientation.HORIZONTAL}>
+            <label label={micStates[ muted_mic ? 'muted' : 'on' ]}></label>
+            <label label={(muted_speakers ? speakerMuted : volume_speakers.as( v => {
+                if ( v === 0 ) return speakerMuted;
+                else if ( v <= 30 ) return speakersStates[ 0 ];
+                else if ( v <= 70 ) return speakersStates[ 1 ];
+                else return speakersStates[ 2 ];
+            } ) )}></label>
+            <label label={volume_speakers.as( v => { return "" + v } ) }></label>
+            <label label={wireplumber.default_speaker.get_name()}></label>
+        </box>
+    } else {
+        print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing' );
+    }
+    return null;
+}
+
+
+export default {
+    QuickView
+}