feat: initial commit

.gitignore

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

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 tux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

app.ts

@@ -0,0 +1,10 @@
+import { App } from "astal/gtk4";
+import style from "./style.scss";
+import windows from "./windows";
+
+App.start({
+  css: style,
+  main() {
+    windows.map((win) => App.get_monitors().map(win));
+  },
+});

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
+}

flake.lock

@@ -0,0 +1,91 @@
+{
+  "nodes": {
+    "ags": {
+      "inputs": {
+        "astal": "astal",
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1744557573,
+        "narHash": "sha256-XAyj0iDuI51BytJ1PwN53uLpzTDdznPDQFG4RwihlTQ=",
+        "owner": "aylur",
+        "repo": "ags",
+        "rev": "3ed9737bdbc8fc7a7c7ceef2165c9109f336bff6",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "ags",
+        "type": "github"
+      }
+    },
+    "astal": {
+      "inputs": {
+        "nixpkgs": [
+          "ags",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1742571008,
+        "narHash": "sha256-5WgfJAeBpxiKbTR/gJvxrGYfqQRge5aUDcGKmU1YZ1Q=",
+        "owner": "aylur",
+        "repo": "astal",
+        "rev": "dc0e5d37abe9424c53dcbd2506a4886ffee6296e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "astal",
+        "type": "github"
+      }
+    },
+    "astal_2": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1748416910,
+        "narHash": "sha256-FEQcs58HL8Fe4i7XlqVEUwthjxwvRvgX15gTTfW17sU=",
+        "owner": "aylur",
+        "repo": "astal",
+        "rev": "c1bd89a47c81c66ab5fc6872db5a916c0433fb89",
+        "type": "github"
+      },
+      "original": {
+        "owner": "aylur",
+        "repo": "astal",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1748026106,
+        "narHash": "sha256-6m1Y3/4pVw1RWTsrkAK2VMYSzG4MMIj7sqUy7o8th1o=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "063f43f2dbdef86376cc29ad646c45c46e93234c",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "ags": "ags",
+        "astal": "astal_2",
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,60 @@
+{
+  description = "tux's widgets for wayland";
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+    astal = {
+      url = "github:aylur/astal";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+    ags = {
+      url = "github:aylur/ags";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+  };
+
+  outputs = {
+    self,
+    nixpkgs,
+    astal,
+    ags,
+  }: let
+    system = "x86_64-linux";
+    pkgs = nixpkgs.legacyPackages.${system};
+  in {
+    packages.${system} = {
+      default = ags.lib.bundle {
+        inherit pkgs;
+        src = ./.;
+        name = "tpanel";
+        entry = "app.ts";
+        gtk4 = true;
+
+        extraPackages = with ags.packages.${system}; [
+          hyprland
+          apps
+          battery
+        ];
+      };
+
+      astal = astal.packages.${system};
+    };
+
+    devShells.${system} = {
+      default = pkgs.mkShell {
+        nativeBuildInputs = [
+          astal.packages.${system}.default
+        ];
+        buildInputs = [
+          # includes astal3 astal4 astal-io by default
+          (ags.packages.${system}.default.override {
+            extraPackages = with ags.packages.${system}; [
+              hyprland
+              apps
+              battery
+            ];
+          })
+        ];
+      };
+    };
+  };
+}

package-lock.json

@@ -0,0 +1,35 @@
+{
+    "name": "astal-shell",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "astal-shell",
+            "dependencies": {
+                "astal": "/nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs",
+                "typescript": "^5.7.3"
+            }
+        },
+        "../../../../nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs": {
+            "name": "astal",
+            "license": "LGPL-2.1"
+        },
+        "node_modules/astal": {
+            "resolved": "../../../../nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs",
+            "link": true
+        },
+        "node_modules/typescript": {
+            "version": "5.7.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+            "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

package.json

@@ -0,0 +1,7 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/nix/store/8cl58ip2nasg6rdyj59cwg2f0qbixs28-astal-gjs/share/astal/gjs",
+        "typescript": "^5.7.3"
+    }
+}

style.scss

@@ -0,0 +1,84 @@
+@use "sass:math";
+@use "sass:list";
+
+$accent: #ebdbb2;
+$fg-color: #ebdbb2;
+$bg-color: #282828;
+$inactive-color: #807966;
+
+window.Bar {
+  background: $bg-color;
+  color: $fg-color;
+  margin: 10px;
+  border-radius: 10px;
+  padding: 10px;
+
+  .launcher {
+    button {
+      background-color: $inactive-color;
+      border-radius: 10px;
+      transition: all 0.15s ease-out;
+      padding: 0px;
+      margin: 0px;
+
+      &:hover {
+        background-color: $bg-color;
+      }
+    }
+  }
+
+  .workspace-container {
+    background-color: $bg-color;
+    color: $fg-color;
+    border-radius: 10px;
+
+    .workspace-button {
+      padding: 0px;
+      border: 0px;
+      margin: 2px;
+      background-color: $inactive-color;
+      min-height: 1em;
+      min-width: 1rem;
+      border-radius: calc(list.nth(8px, 1) * 1.5);
+      transition: min-width 0.15s ease-out;
+
+      &:hover {
+        background-color: $fg-color;
+        &.occupied {
+          background-color: $fg-color;
+        }
+      }
+
+      &.active {
+        min-width: 2rem;
+        min-height: 1rem;
+        background-color: $accent;
+      }
+
+      &.occupied {
+        background-color: $accent;
+        &.active {
+          background-color: $accent;
+        }
+      }
+    }
+  }
+}
+
+window.app-launcher {
+  background: $bg-color;
+  border-radius: 10px;
+  padding: 10px;
+
+  .app-list {
+    background: $bg-color;
+  }
+
+  .app-button {
+    border-radius: 10px;
+  }
+
+  .name {
+    color: $fg-color;
+  }
+}

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/gtk4",
+    }
+}

widget/app-launcher/index.tsx

@@ -0,0 +1,103 @@
+import { Variable, Gio } from "astal";
+import { App, Astal, Gdk, Gtk, hook } from "astal/gtk4";
+import AstalApps from "gi://AstalApps";
+import { Picture } from "../common";
+
+export const WINDOW_NAME = "app-launcher";
+const apps = new AstalApps.Apps();
+const text = Variable("");
+
+const hide = () => {
+  App.get_window(WINDOW_NAME)?.set_visible(false);
+};
+
+const AppButton = ({ app }: { app: AstalApps.Application }) => {
+  return (
+    <button
+      cssClasses={["app-button"]}
+      onClicked={() => {
+        hide();
+        app.launch();
+      }}
+    >
+      <box spacing={6} halign={Gtk.Align.START} valign={Gtk.Align.CENTER}>
+        <image iconName={app.iconName} iconSize={Gtk.IconSize.LARGE} />
+        <label cssClasses={["name"]} xalign={0} label={app.name} />
+      </box>
+    </button>
+  );
+};
+
+const AppList = () => {
+  const appList = text((text) => apps.fuzzy_query(text));
+
+  return (
+    <Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={300}>
+      <box vertical spacing={6} cssClasses={["app-list"]}>
+        {appList.as((list) => list.map((app) => <AppButton app={app} />))}
+      </box>
+    </Gtk.ScrolledWindow>
+  );
+};
+
+const AppSearch = () => {
+  const onEnter = () => {
+    apps.fuzzy_query(text.get())?.[0].launch();
+    hide();
+  };
+  return (
+    <overlay cssClasses={["entry-overlay"]} heightRequest={100}>
+      <Gtk.ScrolledWindow heightRequest={100}>
+        <Picture
+          file={Gio.file_new_for_path("/home/tux/Wallpapers/5m5kLI9.png")}
+          contentFit={Gtk.ContentFit.COVER}
+          overflow={Gtk.Overflow.HIDDEN}
+        />
+      </Gtk.ScrolledWindow>
+      <entry
+        type="overlay"
+        vexpand
+        text={text.get()}
+        primaryIconName={"system-search-symbolic"}
+        placeholderText="Search..."
+        onChanged={(self) => text.set(self.text)}
+        onActivate={onEnter}
+        setup={(self) => {
+          hook(self, App, "window-toggled", (_, win) => {
+            const winName = win.name;
+            const visible = win.visible;
+
+            if (winName == WINDOW_NAME && visible) {
+              text.set("");
+              self.set_text("");
+              self.grab_focus();
+            }
+          });
+        }}
+      />
+    </overlay>
+  );
+};
+
+export const AppLauncher = (gdkmonitor: Gdk.Monitor) => {
+  return (
+    <window
+      name={WINDOW_NAME}
+      cssClasses={["app-launcher"]}
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      application={App}
+      keymode={Astal.Keymode.ON_DEMAND}
+      onKeyPressed={(_, keyval) => {
+        if (keyval === Gdk.KEY_Escape) {
+          App.toggle_window(WINDOW_NAME);
+        }
+      }}
+    >
+      <box vertical spacing={6}>
+        <AppSearch />
+        <AppList />
+      </box>
+    </window>
+  );
+};

widget/bar/battery.tsx

@@ -0,0 +1,15 @@
+import { bind } from "astal";
+import AstalBattery from "gi://AstalBattery";
+
+export const Battery = () => {
+  const battery = AstalBattery.get_default();
+
+  return (
+    <box visible={bind(battery, "isPresent")}>
+      <image iconName={bind(battery, "batteryIconName")} />
+      <label
+        label={bind(battery, "percentage").as((p) => `${Math.floor(p * 100)}%`)}
+      />
+    </box>
+  );
+};

widget/bar/index.tsx

@@ -0,0 +1,45 @@
+import { App, Astal, Gdk } from "astal/gtk4";
+import { FocusedClient, WorkspaceButton } from "./workspace";
+import { Battery } from "./battery";
+import { Launcher } from "./launcher";
+
+export const WINDOW_NAME = "bar";
+
+export const Bar = (gdkmonitor: Gdk.Monitor) => {
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+
+  return (
+    <window
+      name={WINDOW_NAME}
+      visible
+      cssClasses={["Bar"]}
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      anchor={TOP | LEFT | RIGHT}
+      application={App}
+    >
+      <centerbox>
+        <Start />
+        <Center />
+        <End />
+      </centerbox>
+    </window>
+  );
+};
+
+const Start = () => {
+  return (
+    <box spacing={15}>
+      <Launcher />
+      <WorkspaceButton />
+    </box>
+  );
+};
+
+const Center = () => {
+  return <FocusedClient />;
+};
+
+const End = () => {
+  return <Battery />;
+};

widget/bar/launcher.tsx

@@ -0,0 +1,22 @@
+import { App, Gtk } from "astal/gtk4";
+import { Gio } from "astal";
+import { Picture } from "../common";
+import { WINDOW_NAME } from "../app-launcher";
+
+export const Launcher = () => {
+  return (
+    <Gtk.ScrolledWindow
+      heightRequest={30}
+      widthRequest={30}
+      cssClasses={["launcher"]}
+    >
+      <button onClicked={() => App.toggle_window(WINDOW_NAME)}>
+        <Picture
+          file={Gio.file_new_for_path("/home/tux/Wallpapers/avatar.png")}
+          contentFit={Gtk.ContentFit.CONTAIN}
+          overflow={Gtk.Overflow.HIDDEN}
+        />
+      </button>
+    </Gtk.ScrolledWindow>
+  );
+};

widget/bar/workspace.tsx

@@ -0,0 +1,56 @@
+import { Variable, bind } from "astal";
+import { Gtk } from "astal/gtk4";
+import { ButtonProps } from "astal/gtk4/widget";
+import AstalHyprland from "gi://AstalHyprland";
+
+type WsButtonProps = ButtonProps & {
+  ws: AstalHyprland.Workspace;
+};
+
+const Workspace = ({ ws, ...props }: WsButtonProps) => {
+  const hyprland = AstalHyprland.get_default();
+  const classNames = Variable.derive(
+    [bind(hyprland, "focusedWorkspace"), bind(hyprland, "clients")],
+    (fws, _) => {
+      const classes = ["workspace-button"];
+
+      const active = fws.id == ws.id;
+      active && classes.push("active");
+
+      const occupied = hyprland.get_workspace(ws.id)?.get_clients().length > 0;
+      occupied && classes.push("occupied");
+      return classes;
+    },
+  );
+
+  return (
+    <button
+      cssClasses={classNames()}
+      onDestroy={() => classNames.drop()}
+      valign={Gtk.Align.CENTER}
+      halign={Gtk.Align.CENTER}
+      onClicked={() => ws.focus()}
+      {...props}
+    />
+  );
+};
+
+export const WorkspaceButton = () => {
+  const range = Array.from({ length: 4 + 1 }, (_, i) => i);
+  return (
+    <box cssClasses={["workspace-container"]} spacing={4}>
+      {range.map((i) => (
+        <Workspace ws={AstalHyprland.Workspace.dummy(i + 1, null)} />
+      ))}
+    </box>
+  );
+};
+
+export const FocusedClient = () => {
+  const hyprland = AstalHyprland.get_default();
+  const title = bind(hyprland, "focusedClient")
+    .as((fcsClient) => fcsClient.title)
+    .toString();
+
+  return <label>{title}</label>;
+};

widget/common/index.ts

@@ -0,0 +1 @@
+export * from "./picture";

widget/common/picture.tsx

@@ -0,0 +1,11 @@
+import { ConstructProps } from "astal/gtk4";
+import { astalify, Gtk } from "astal/gtk4";
+
+export type PictureProps = ConstructProps<
+  Gtk.Picture,
+  Gtk.Picture.ConstructorProps
+>;
+
+export const Picture = astalify<Gtk.Picture, Gtk.Picture.ConstructorProps>(
+  Gtk.Picture,
+);

windows.ts

@@ -0,0 +1,4 @@
+import { Bar } from "./widget/bar";
+import { AppLauncher } from "./widget/app-launcher";
+
+export default [Bar, AppLauncher];