feat(agsV2): add some more bar items

nixosModules/ags-v2/config/eslint.config.ts

@@ -33,6 +33,10 @@ export default tseslint.config({
         'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': 'error',
         '@stylistic/indent-binary-ops': 'off',
+        '@stylistic/max-statements-per-line': [
+            'error',
+            { max: 2 },
+        ],
 
         // Pre-flat config
         '@typescript-eslint/no-unused-vars': [
@@ -252,6 +256,7 @@ export default tseslint.config({
         '@stylistic/brace-style': [
             'warn',
             'stroustrup',
+            { allowSingleLine: true },
         ],
         '@stylistic/comma-dangle': [
             'warn',

nixosModules/ags-v2/config/services/brightness.ts

@@ -103,6 +103,7 @@ class Brightness extends GObject.Object {
 
             this._screen = Number(await execAsync('brightnessctl g')) /
                 Number(await execAsync('brightnessctl m'));
+            this.notify('screen');
         }
         catch (_e) {
             console.error('missing dependancy: brightnessctl');

nixosModules/ags-v2/config/style/common.scss

@@ -30,6 +30,18 @@ progressbar {
     }
 }
 
+circular-progress {
+    background: #363847;
+    min-height: 35px;
+    min-width: 35px;
+    font-size: 4px;
+    color: #79659f;
+
+    &.disabled {
+        opacity: 0.5;
+    }
+}
+
 .widget {
     margin: 10px;
     padding: 5px;

nixosModules/ags-v2/config/widgets/bar/_index.scss

@@ -18,6 +18,10 @@
             background-color: lighten(colors.$window_bg_color, 3%);
         }
 
+        &.network icon {
+            min-width: 30px;
+        }
+
         &.battery icon {
             &.charging {
                 color: green;

nixosModules/ags-v2/config/widgets/bar/items/audio.tsx

@@ -0,0 +1,28 @@
+import { bind } from 'astal';
+
+import AstalWp from 'gi://AstalWp';
+
+export default () => {
+    const speaker = AstalWp.get_default()?.audio.default_speaker;
+
+    if (!speaker) {
+        throw new Error('Could not find default audio devices.');
+    }
+
+    return (
+        <box className="bar-item audio">
+            <overlay>
+                <circularprogress
+                    startAt={0.75}
+                    endAt={0.75}
+                    value={bind(speaker, 'volume')}
+
+                    rounded
+                    className={bind(speaker, 'mute').as((muted) => muted ? 'disabled' : '')}
+                />
+
+                <icon icon={bind(speaker, 'volumeIcon')} />
+            </overlay>
+        </box>
+    );
+};

nixosModules/ags-v2/config/widgets/bar/items/brightness.tsx

@@ -0,0 +1,20 @@
+import { bind } from 'astal';
+
+import Brightness from '../../../services/brightness';
+
+export default () => {
+    return (
+        <box className="bar-item brightness">
+            <overlay>
+                <circularprogress
+                    startAt={0.75}
+                    endAt={0.75}
+                    value={bind(Brightness, 'screen')}
+                    rounded
+                />
+
+                <icon icon={bind(Brightness, 'screenIcon')} />
+            </overlay>
+        </box>
+    );
+};

nixosModules/ags-v2/config/widgets/bar/items/network.tsx

@@ -0,0 +1,53 @@
+import { bind, Variable } from 'astal';
+import { Gtk } from 'astal/gtk3';
+
+import AstalNetwork from 'gi://AstalNetwork';
+const Network = AstalNetwork.get_default();
+
+
+export default () => {
+    const Hovered = Variable(false);
+
+    return (
+        <button
+            className="bar-item network"
+            cursor="pointer"
+
+            onHover={() => Hovered.set(true)}
+            onHoverLost={() => Hovered.set(false)}
+        >
+            {bind(Network, 'primary').as((primary) => {
+                if (primary === AstalNetwork.Primary.UNKNOWN) {
+                    return (<icon icon="network-wireless-signal-none-symbolic" />);
+                }
+                else if (primary === AstalNetwork.Primary.WIFI) {
+                    const Wifi = Network.get_wifi();
+
+                    if (!Wifi) { return; }
+
+                    return (
+                        <box>
+                            <icon icon={bind(Wifi, 'iconName')} />
+
+                            <revealer
+                                revealChild={bind(Hovered)}
+                                transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT}
+                            >
+                                {bind(Wifi, 'activeAccessPoint').as((ap) => (
+                                    <label label={bind(ap, 'ssid')} />
+                                ))}
+                            </revealer>
+                        </box>
+                    );
+                }
+                else {
+                    const Wired = Network.get_wired();
+
+                    if (!Wired) { return; }
+
+                    return (<icon icon={bind(Wired, 'iconName')} />);
+                }
+            })}
+        </button>
+    );
+};

nixosModules/ags-v2/config/widgets/bar/wim.tsx

@@ -1,8 +1,11 @@
 import { Astal, Gtk } from 'astal/gtk3';
 
+import Audio from './items/audio';
 import Battery from './items/battery';
+import Brightness from './items/brightness';
 import Clock from './items/clock';
 import CurrentClient from './items/current-client';
+import Network from './items/network';
 import NotifButton from './items/notif-button';
 import SysTray from './items/tray';
 import Workspaces from './items/workspaces';
@@ -11,6 +14,7 @@ import BarRevealer from './fullscreen';
 import Separator from '../misc/separator';
 
 
+// TODO: add Bluetooth, Kbd Layout
 export default () => (
     <BarRevealer
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
@@ -40,10 +44,22 @@ export default () => (
             </box>
 
             <box hexpand halign={Gtk.Align.END}>
+                <Network />
+
+                <Separator size={8} />
+
                 <NotifButton />
 
                 <Separator size={8} />
 
+                <Audio />
+
+                <Separator size={8} />
+
+                <Brightness />
+
+                <Separator size={8} />
+
                 <Battery />
 
                 <Separator size={2} />

nixosModules/ags-v2/config/widgets/osd/main.tsx

@@ -70,7 +70,7 @@ export default () => {
                 className="osd"
                 transitionDuration={transition_duration}
                 setup={(self) => {
-                    timeout(1000, () => {
+                    timeout(3 * 1000, () => {
                         stack = self;
                     });
                 }}