# Bar
## Attempt 1
Use Astal (https://aylur.github.io/astal) to write me a new status bar for hyprland. You may use JSX (be aware, it's not react, but gjs based and has therefore some limitations), but I prefer using the other syntax that is similar to what it was for AGS (the old version of astal), which more closely resembles GTK syntax. The bar should include the following, from left to right:
Left aligned
- Date & Time (with seconds, preferably)
- System stats (i.e. CPU, Memory util, Screen Brightness & Battery status, if available)
- Workspace number
Centered
- The window name
Right aligned (still left to right)
- System tray
- QuickAction menu in GNOME QuickAction menu style, but only the closed version showing icons for volume, mic, WiFi / Ethernet and a Power icon. For the icons (all throughout the bar) use the fluentui-icons (so the Windows 11 icons). If you can't provide them here, tell me what icon should go there and I will put it there manually

The actual QuickAction Menu (which you could also write in a separate file) will provide options where I can pick WiFi, Bluetooth (also turn it on and off), change volume of mic and output, pick the mic and output, have media controls and have a power menu).

For the QuickAction menu, provide a function that is exposed from the file to open and close it, as for all the features (like enabling BT, WiFi, etc).


### Followups
To the WiFi and Bluetooth menus, add the option to pick a WiFi Network / Bluetooth device. Please also fully extract the QuickActions menu to a separate file.


Now, can you also provide scss for the bar, such that:
- I have an easy way to customize colours (which I will be doing using one of my scripts, so having a separate colour config file will be a great option)
- it is very rounded (the corners)
- it has a very sleek, but modern design, with only a single accent colour
- Hovering over something clickable uses a hover colour


## Attempt 2
Using AstalNetwork, can you write a UI (that can be integrated into a popover) and a corresponding backend that allows me to:
- Turn on/off networking and WiFi
- Select a WiFi Network
- Some way of adding a new connection (can be a special UI or simply opens up another tool like nm-applet's network config)
- WiFi-Auto-Connect
- Exposes a function (or multiple) through which I can get (as a bindable porperty):
    - Current up/down speed
    - Connection type
    - WiFi SSID (if applicable)
    - WiFi Signal Strength (if applicable)
    - Local IP

I would prefer if you could split up the logic from the UI, i.e. have the logic in a separate TS file and have the UI as its own TSX file and simply import the logic