Enable java/typescript support.

flake.lock

@@ -1,5 +1,45 @@
 {
   "nodes": {
+    "ags": {
+      "inputs": {
+        "astal": "astal",
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1738087375,
+        "narHash": "sha256-GLyNtU9A2VN22jNRHZ2OXuFfTJLh8uEVVt+ftsKUX0c=",
+        "owner": "aylur",
+        "repo": "ags",
+        "rev": "a6a7a0adb17740f4c34a59902701870d46fbb6a4",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "ags",
+        "type": "github"
+      }
+    },
+    "astal": {
+      "inputs": {
+        "nixpkgs": [
+          "ags",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1737670815,
+        "narHash": "sha256-ZCxxshGN7XooabArcoGkYSNx5yVunqjKJi2aTv6cznI=",
+        "owner": "aylur",
+        "repo": "astal",
+        "rev": "127e9cdcbf173846a3c40ddc0abfbb038df48042",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "astal",
+        "type": "github"
+      }
+    },
     "auto-cpufreq": {
       "inputs": {
         "nixpkgs": [
@@ -341,11 +381,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1738410390,
+        "lastModified": 1737469691,
-        "narHash": "sha256-xvTo0Aw0+veek7hvEVLzErmJyQkEcRk6PSR4zsRQFEc=",
+        "narHash": "sha256-nmKOgAU48S41dTPIXAq0AHZSehWUn6ZPrUKijHAMmIk=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "3a228057f5b619feb3186e986dbe76278d707b6e",
+        "rev": "9e4d5190a9482a1fb9d18adf0bdb83c6e506eaab",
         "type": "github"
       },
       "original": {
@@ -368,6 +408,22 @@
       }
     },
     "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1738410390,
+        "narHash": "sha256-xvTo0Aw0+veek7hvEVLzErmJyQkEcRk6PSR4zsRQFEc=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "3a228057f5b619feb3186e986dbe76278d707b6e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_3": {
       "locked": {
         "lastModified": 1736798957,
         "narHash": "sha256-qwpCtZhSsSNQtK4xYGzMiyEDhkNzOCz/Vfu4oL2ETsQ=",
@@ -3251,9 +3307,10 @@
     },
     "root": {
       "inputs": {
+        "ags": "ags",
         "auto-cpufreq": "auto-cpufreq",
         "home-manager": "home-manager",
-        "nixpkgs": "nixpkgs",
+        "nixpkgs": "nixpkgs_2",
         "nvf": "nvf",
         "stylix": "stylix"
       }
@@ -3292,7 +3349,7 @@
         "git-hooks": "git-hooks",
         "gnome-shell": "gnome-shell",
         "home-manager": "home-manager_2",
-        "nixpkgs": "nixpkgs_2",
+        "nixpkgs": "nixpkgs_3",
         "systems": "systems_3",
         "tinted-foot": "tinted-foot",
         "tinted-kitty": "tinted-kitty",

flake.nix

@@ -25,6 +25,9 @@
       url = "github:AdnanHodzic/auto-cpufreq";
       inputs.nixpkgs.follows = "nixpkgs";
     };
+
+    # ags for cool widgets
+    ags.url = "github:aylur/ags";
   };
 
   outputs = {
@@ -55,6 +58,7 @@
             imports = [
               ./hosts/nixos/home.nix
               ./modules/home-manager
+              inputs.ags.homeManagerModules.default
             ];
           };
         }

modules/home-manager/ags/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+@girs/

modules/home-manager/ags/app.ts

@@ -0,0 +1,13 @@
+import { App } from "astal/gtk3"
+import style from "./style.scss"
+import Bar from "./widget/Bar"
+
+App.start({
+    css: style,
+    instanceName: "js",
+    requestHandler(request, res) {
+        print(request)
+        res("ok")
+    },
+    main: () => App.get_monitors().map(Bar),
+})

modules/home-manager/ags/env.d.ts

@@ -0,0 +1,21 @@
+declare const SRC: string
+
+declare module "inline:*" {
+    const content: string
+    export default content
+}
+
+declare module "*.scss" {
+    const content: string
+    export default content
+}
+
+declare module "*.blp" {
+    const content: string
+    export default content
+}
+
+declare module "*.css" {
+    const content: string
+    export default content
+}

modules/home-manager/ags/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/home/crony/.local/share/ags"
+    }
+}

modules/home-manager/ags/style.scss

@@ -0,0 +1,106 @@
+@use "sass:color";
+
+$bg: #212223;
+$fg: #f1f1f1;
+$accent: #378DF7;
+$radius: 7px;
+
+window.Bar {
+    border: none;
+    box-shadow: none;
+    background-color: $bg;
+    color: $fg;
+    font-size: 1.1em;
+    font-weight: bold;
+
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
+
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
+        }
+
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
+        }
+
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
+    }
+
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
+    }
+
+    .FocusedClient {
+        color: $accent;
+    }
+
+    .Media .Cover {
+        min-height: 1.2em;
+        min-width: 1.2em;
+        border-radius: $radius;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .Battery label {
+        padding-left: 0;
+        margin-left: 0;
+    }
+
+    .AudioSlider {
+        * {
+            all: unset;
+        }
+
+        icon {
+            margin-right: .6em;
+        }
+
+        & {
+            margin: 0 1em;
+        }
+
+        trough {
+            background-color: color.adjust($fg, $alpha: -0.8);
+            border-radius: $radius;
+        }
+
+        highlight {
+            background-color: $accent;
+            min-height: .8em;
+            border-radius: $radius;
+        }
+
+        slider {
+            background-color: $fg;
+            border-radius: $radius;
+            min-height: 1em;
+            min-width: 1em;
+            margin: -.2em;
+        }
+    }
+}

modules/home-manager/ags/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "strict": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "Bundler",
+        // "checkJs": true,
+        // "allowJs": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "astal/gtk3",
+    }
+}

modules/home-manager/ags/widget/Bar.tsx

@@ -0,0 +1,133 @@
+import { App } from "astal/gtk3"
+import { Variable, GLib, bind } from "astal"
+import { Astal, Gtk, Gdk } from "astal/gtk3"
+import Hyprland from "gi://AstalHyprland"
+import Battery from "gi://AstalBattery"
+import Wp from "gi://AstalWp"
+import Network from "gi://AstalNetwork"
+import Tray from "gi://AstalTray"
+
+function SysTray() {
+    const tray = Tray.get_default()
+
+    return <box className="SysTray">
+        {bind(tray, "items").as(items => items.map(item => (
+            <menubutton
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                usePopover={false}
+                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                menuModel={bind(item, "menuModel")}>
+                <icon gicon={bind(item, "gicon")} />
+            </menubutton>
+        )))}
+    </box>
+}
+
+function Wifi() {
+    const network = Network.get_default()
+    const wifi = bind(network, "wifi")
+
+    return <box visible={wifi.as(Boolean)}>
+        {wifi.as(wifi => wifi && (
+            <icon
+                tooltipText={bind(wifi, "ssid").as(String)}
+                className="Wifi"
+                icon={bind(wifi, "iconName")}
+            />
+        ))}
+    </box>
+
+}
+
+function AudioSlider() {
+    const speaker = Wp.get_default()?.audio.defaultSpeaker!
+
+    return <box className="AudioSlider" css="min-width: 140px">
+        <icon icon={bind(speaker, "volumeIcon")} />
+        <slider
+            hexpand
+            onDragged={({ value }) => speaker.volume = value}
+            value={bind(speaker, "volume")}
+        />
+    </box>
+}
+
+function BatteryLevel() {
+    const bat = Battery.get_default()
+
+    return <box className="Battery"
+        visible={bind(bat, "isPresent")}>
+        <icon icon={bind(bat, "batteryIconName")} />
+        <label label={bind(bat, "percentage").as(p =>
+            `${Math.floor(p * 100)} %`
+        )} />
+    </box>
+}
+
+function Workspaces() {
+    const hypr = Hyprland.get_default()
+
+    return <box className="Workspaces">
+        {bind(hypr, "workspaces").as(wss => wss
+            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
+            .sort((a, b) => a.id - b.id)
+            .map(ws => (
+                <button
+                    className={bind(hypr, "focusedWorkspace").as(fw =>
+                        ws === fw ? "focused" : "")}
+                    onClicked={() => ws.focus()}>
+                    {ws.id}
+                </button>
+            ))
+        )}
+    </box>
+}
+
+function FocusedClient() {
+    const hypr = Hyprland.get_default()
+    const focused = bind(hypr, "focusedClient")
+
+    return <box
+        className="Focused"
+        visible={focused.as(Boolean)}>
+        {focused.as(client => (
+            client && <label label={bind(client, "title").as(String)} />
+        ))}
+    </box>
+}
+
+function Time({ format = "%d.%m %H:%M" }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!)
+
+    return <label
+        className="Time"
+        onDestroy={() => time.drop()}
+        label={time()}
+    />
+}
+
+export default function Bar(monitor: Gdk.Monitor) {
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+
+    return <window
+        className="Bar"
+        gdkmonitor={monitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={TOP | LEFT | RIGHT}>
+        <centerbox>
+            <box hexpand halign={Gtk.Align.START}>
+                <Workspaces />
+                <FocusedClient />
+            </box>
+            <box />
+            <box hexpand halign={Gtk.Align.END} >
+                <AudioSlider />
+                <Wifi />
+                <BatteryLevel />
+                <Time />
+                <SysTray />
+            </box>
+        </centerbox>
+    </window>
+}

modules/home-manager/hyprland.nix

@@ -1,5 +1,6 @@
 {
   config,
+  inputs,
   pkgs,
   lib,
   ...
@@ -63,6 +64,7 @@ in {
       cliphist
       wl-clipboard
       xwaylandvideobridge
+      inputs.ags.packages.${pkgs.system}.battery
     ];
 
     # Enable and setup tofi
@@ -162,61 +164,16 @@ in {
       };
     };
 
-    # Setup and enable waybar
+    programs.ags = {
-    programs.waybar = {
       enable = true;
-      settings = {
+      configDir = ./ags;
-        mainBar = {
+      extraPackages = [
-          height = 30;
+        inputs.ags.packages.${pkgs.system}.battery
-          modules-left = [
+        inputs.ags.packages.${pkgs.system}.hyprland
-            "hyprland/workspaces"
+        inputs.ags.packages.${pkgs.system}.network
+        inputs.ags.packages.${pkgs.system}.tray
+        inputs.ags.packages.${pkgs.system}.wireplumber
       ];
-          modules-center = [
-            "hyprland/window"
-          ];
-          modules-right = [
-            "cpu"
-            "memory"
-            "temperature"
-            "battery"
-            "clock"
-            "tray"
-          ];
-          "hyprland/workspaces" = {
-            persistent-workspaces = {
-              "*" = [1 2 3 4 5 6 7 8 9];
-            };
-          };
-          tray = {
-            spacing = 10;
-          };
-          clock = {
-            format = " {:%Y.%m.%d %H:%M}";
-          };
-          cpu = {
-            format = "  {usage}%";
-          };
-          memory = {
-            format = "  {}%";
-          };
-          temperature = {
-            critical-threshold = 80;
-            format = " {temperatureC}°C";
-          };
-          battery = {
-            states = {
-              warning = 30;
-              critical = 15;
-            };
-
-            format = "{icon} {capacity}%";
-            format-full = "{icon} {capacity}%";
-            format-charging = " {icon} {capacity}%";
-            format-plugged = " {capacity}%";
-            format-icons = [" " " " " " " " " "];
-          };
-        };
-      };
     };
 
     # Setup and enable hyprland
@@ -234,7 +191,7 @@ in {
           "wl-paste --type text --watch cliphist store" # Stores only text data
           "wl-paste --type image --watch cliphist store" # Stores only image data
           "keepassxc" # Startup my password manager
-          "waybar" # Start waybar on start
+          # "waybar" # Start waybar on start
         ];
 
         monitor = [

modules/home-manager/neovim.nix

@@ -58,6 +58,9 @@
             enableTreesitter = true;
             enableFormat = true;
 
+            ts = {
+              enable = true;
+            };
             nix = {
               enable = true;
             };