make dwm like bar with ags

config/ags/.envrc

@@ -1 +1 @@
-use flake github:aylur/ags#agsFull
+use flake

config/ags/flake.lock

@@ -0,0 +1,84 @@
+{
+  "nodes": {
+    "ags": {
+      "inputs": {
+        "astal": "astal",
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1731689198,
+        "narHash": "sha256-XMFaDht3RHtlwZ7NQKbz2Cd0e4oDMB7syyOd9ifbn98=",
+        "owner": "aylur",
+        "repo": "ags",
+        "rev": "3e270c8172ae7b61c5e5f24aea69985f792aa000",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "ags",
+        "type": "github"
+      }
+    },
+    "astal": {
+      "inputs": {
+        "nixpkgs": [
+          "ags",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1731533099,
+        "narHash": "sha256-q0JcigMAoz3bJqCJwms5mR2de5J1Cw5NgjCev+2ylDA=",
+        "owner": "aylur",
+        "repo": "astal",
+        "rev": "f7cfc8eb77a395373bf40f83b0d779ece34a6108",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "astal",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1731139594,
+        "narHash": "sha256-IigrKK3vYRpUu+HEjPL/phrfh7Ox881er1UEsZvw9Q4=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "76612b17c0ce71689921ca12d9ffdc9c23ce40b2",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1731319897,
+        "narHash": "sha256-PbABj4tnbWFMfBp6OcUK5iGy1QY+/Z96ZcLpooIbuEI=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "dc460ec76cbff0e66e269457d7b728432263166c",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "ags": "ags",
+        "nixpkgs": "nixpkgs_2"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

config/ags/flake.nix

@@ -0,0 +1,28 @@
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+    ags.url = "github:aylur/ags";
+  };
+
+  outputs = { self, nixpkgs, ags }: let
+    system = "x86_64-linux";
+    pkgs = nixpkgs.legacyPackages.${system};
+  in {
+    devShells.${system}.default = pkgs.mkShell {
+      buildInputs = [
+        pkgs.typescript-language-server
+        # includes astal3 astal4 astal-io by default
+        (ags.packages.${system}.default.overrideAttrs { 
+          extraPackages = [
+                    ags.packages.${pkgs.system}.hyprland
+          ags.packages.${pkgs.system}.mpris
+          ags.packages.${pkgs.system}.battery
+          ags.packages.${pkgs.system}.wireplumber
+          ags.packages.${pkgs.system}.network
+          ags.packages.${pkgs.system}.tray
+          ];
+        })
+      ];
+    };
+  };
+}

config/ags/style.scss

@@ -1,18 +1,19 @@
 @use "sass:color";
 
-$bg: #212223;
+$bg: #222222;
-$fg: #f1f1f1;
+$fg: #bbbbbb;
-$accent: #378DF7;
+$accent: #005577;
 $radius: 0px;
 
 window.Bar {
     font-family: 'monospace';
     border: none;
     box-shadow: none;
-    background-color: $bg;
+    background-color: $accent;
     color: $fg;
-    font-size: 1.1em;
+    font-size: 10pt;
-    font-weight: bold;
+    // font-size: 1.1em;
+    // font-weight: bold;
 
     button {
         all: unset;
@@ -36,6 +37,14 @@ window.Bar {
         // border: 1pt solid transparent;
     }
 
+    .Workspaces {
+	background-color: $bg;
+    }
+
+    .right {
+	background-color: $bg;
+    }
+
     .Workspaces .focused label {
         color: $fg;
         background-color: $accent;

config/ags/widget/Bar.tsx

@@ -160,9 +160,8 @@ export default function Bar(monitor: Gdk.Monitor) {
                 <FocusedClient />
             </box>
             <box>
-                <Media />
+             </box>
-            </box>
+            <box className="right" hexpand halign={Gtk.Align.END} >
-            <box hexpand halign={Gtk.Align.END} >
                 <SysTray />
 	      <AudioPercent/>
                 <BatteryLevel />