[AGS] Bar: Improve QuickActions

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

@@ -5,24 +5,49 @@ import AstalNetwork from "gi://AstalNetwork"
 import AstalWp from "gi://AstalWp";
 import Brightness from "../../util/brightness";
 import { Gtk } from "astal/gtk4";
+import QuickActions from "../QuickActions/QuickActions";
+
+const STATE = AstalNetwork.DeviceState;
+
 
 const QuickView = () => {
-    return <box>
-        <Audio></Audio>
-        <label label="QuickView"></label>
-    </box>
+    const quickActions = QuickActions.QuickActions();
+
+
+    return <button onClicked={() => quickActions.popup()} child={
+        <box>
+            <Audio></Audio>
+            <NetworkWidget></NetworkWidget>
+            { quickActions }
+        </box>
+    }></button>
 }
 
 
 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>
+    return <box>
+        <image iconName={bind( network, 'state' ).as( state => {
+            if ( state === AstalNetwork.State.CONNECTING ) {
+                return 'chronometer-reset-symbolic';
+            } else if ( state === AstalNetwork.State.CONNECTED_LOCAL || state === AstalNetwork.State.CONNECTED_SITE || state === AstalNetwork.State.CONNECTED_GLOBAL ) {
+                print( 'Wired connected' );
+                return 'network-wired-activated-symbolic';
+            } else {
+                print( 'Unknown state' );
+                return 'paint-unknown-symbolic';
+            }
+        } )} cssClasses={[ 'network-widget' ]} visible={bind( network.wifi, 'state' ).as( state => state !== STATE.ACTIVATED )}></image>
+        <image iconName={bind( network.wifi, 'state' ).as( state => {
+            if ( state === STATE.ACTIVATED ) {
+                return network.wifi.iconName
+            } else {
+                return '';
+            }
+        } )} cssClasses={[ 'network-widget' ]} visible={bind( network.wifi, 'state' ).as( state => state === STATE.ACTIVATED )}></image>
+    </box>
+        
 
 }
 
@@ -36,21 +61,9 @@ const BluetoothWidget = () => {
 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": " ",
-        }
+        return <image iconName={battery.iconName}></image>
+    } else {
+        return <box></box>
     }
     // Else, no battery available -> Don't show the widget
 }
@@ -68,31 +81,13 @@ const BrightnessWidget = () => {
 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>
+            <image iconName={wireplumber.defaultSpeaker.volumeIcon}></image>
+            <image iconName={wireplumber.defaultMicrophone.volumeIcon}></image>
             <label label={volume_speakers.as( v => { return "" + v } ) }></label>
-            <label label={wireplumber.default_speaker.get_name()}></label>
+            <label label={wireplumber.defaultSpeaker.get_name()}></label>
         </box>
     } else {
         print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing' );