Reorganize imports

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

hosts/common/configs/user/gui/astal/config/.gitignore

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

hosts/common/configs/user/gui/astal/config/app.ts

@@ -0,0 +1,23 @@
+import { App } from "astal/gtk3"
+import Bar from "./widget/Bar"
+import { monitorFile } from "astal/file"
+import { exec } from "astal/process"
+import GLib from "gi://GLib"
+
+const HOME = GLib.getenv("HOME")
+const css = `${HOME}/.config/astal/theme.css`;
+const scss = `${HOME}/.config/astal/theme.sass`;
+
+monitorFile(scss, () => {
+  exec(`sassc ${scss} ${css}`);
+  App.apply_css(css, true);
+});
+
+exec(`sassc ${scss} ${css}`);
+
+App.start({
+  css,
+  main() {
+    App.get_monitors().map(Bar)
+  },
+})

hosts/common/configs/user/gui/astal/config/env.d.ts

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

hosts/common/configs/user/gui/astal/config/lib.ts

@@ -0,0 +1,3 @@
+export const range = (length: number, start = 1) => {
+  return Array.from({ length }, (n, i) => i + start);
+};

hosts/common/configs/user/gui/astal/config/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "strict": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "/nix/store/ii2w7wv88fjvmldn8kzz8ni20kzpkld4-astal-gjs/share/astal/gjs/gtk3",
+    "paths": {
+      "astal": [
+        "/nix/store/ii2w7wv88fjvmldn8kzz8ni20kzpkld4-astal-gjs/share/astal/gjs"
+      ],
+      "astal/*": [
+        "/nix/store/ii2w7wv88fjvmldn8kzz8ni20kzpkld4-astal-gjs/share/astal/gjs/*"
+      ]
+    },
+  }
+}

hosts/common/configs/user/gui/astal/config/widget/Bar.tsx

@@ -0,0 +1,29 @@
+import { App, Astal, Gtk, Gdk } from 'astal/gtk3'
+import Launcher from './components/Launcher';
+import Workspace from './components/Workspaces';
+import Date from './components/Date';
+import Systray from './components/Tray';
+
+const anchor = Astal.WindowAnchor.TOP
+  | Astal.WindowAnchor.LEFT
+  | Astal.WindowAnchor.RIGHT;
+
+export default (monitor: Gdk.Monitor) => <window
+  className='bar'
+  gdkmonitor={monitor}
+  exclusivity={Astal.Exclusivity.EXCLUSIVE}
+  anchor={anchor}
+  application={App}>
+  <centerbox className='widgets'>
+    <box hexpand halign={Gtk.Align.START}>
+      <Launcher />
+      <Workspace />
+    </box>
+    <box hexpand halign={Gtk.Align.CENTER}>
+      <Date />
+    </box>
+    <box hexpand halign={Gtk.Align.END}>
+      <Systray />
+    </box>
+  </centerbox>
+</window>

hosts/common/configs/user/gui/astal/config/widget/components/Date.tsx

@@ -0,0 +1,13 @@
+
+import { Variable } from 'astal/variable';
+import { GLib } from 'astal';
+
+const time = Variable<string>("").poll(1000, () => GLib.DateTime.new_now_local().format('%H:%M - %A, %d %B %Y')!)
+
+export default () => <button className='date'>
+  <label
+    className='label'
+    onDestroy={() => time.drop()}
+    label={time()}
+  />
+</button>;

hosts/common/configs/user/gui/astal/config/widget/components/Launcher.tsx

@@ -0,0 +1,7 @@
+import { execAsync } from "astal/process"
+
+export default () => <button
+  className="launcher"
+  onClickRelease={() => execAsync('bash -c "rofi -cache-dir $XDG_CACHE_HOME/rofi -show drun"')}>
+  <icon className="icon" icon="nix-snowflake-symbolic" />;
+</button>;

hosts/common/configs/user/gui/astal/config/widget/components/Tray.tsx

@@ -0,0 +1,30 @@
+import { App, Gdk } from 'astal/gtk3'
+import { bind } from 'astal'
+import Tray from 'gi://AstalTray'
+
+const tray = Tray.get_default()
+
+const TrayButton = ({ item }: { item: Tray.TrayItem }) => {
+  const menu = item.create_menu();
+
+  return <button
+    className='item'
+    tooltipMarkup={bind(item, 'tooltipMarkup')}
+    onClickRelease={self => {
+      menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null)
+    }}
+    onDestroy={() => menu?.destroy()}
+  >
+    <icon
+      className='icon'
+      gIcon={bind(item, 'gicon')} />
+  </button>;
+}
+
+export default () => <box className='systray'>
+  {
+    bind(tray, 'items').as(items => items.map(item => {
+      if (item.iconThemePath) App.add_icons(item.iconThemePath);
+      return <TrayButton item={item} />;
+    }))}
+</box>;

hosts/common/configs/user/gui/astal/config/widget/components/Workspaces.tsx

@@ -0,0 +1,44 @@
+import { bind, Binding, Variable } from "astal";
+import Hyprland from "gi://AstalHyprland";
+import { range } from '../../lib';
+
+const hyprland = Hyprland.get_default();
+
+const Workspace = ({ id }: { id: number }) => {
+  const className = Variable.derive(
+    [bind(hyprland, "workspaces"), bind(hyprland, "focusedWorkspace")],
+    (workspaces, focused) => {
+      const workspace = workspaces.find((w) => w.id === id);
+
+      if (!workspace) return "button";
+
+      const occupied = workspace.get_clients().length > 0;
+      const active = focused.id === id;
+
+      return `button ${active ? "active" : occupied && "occupied"}`;
+    },
+  );
+
+  return <box vertical>
+    <box vexpand />
+    <eventbox
+      onClickRelease={() => hyprland.dispatch("workspace", `${id}`)}
+    >
+      <label
+        className={className()}
+      />
+    </eventbox>
+    <box vexpand />
+  </box>;
+};
+
+export default () => <eventbox
+  className="workspaces"
+  onScroll={(_, e) => {
+    hyprland.dispatch("workspace", e.delta_y > 0 ? "+1" : "-1");
+  }}
+>
+  <box>
+    {range(10).map((i) => <Workspace id={i} />)}
+  </box>
+</eventbox>

hosts/common/configs/user/gui/astal/default.nix

@@ -0,0 +1,43 @@
+{
+  user ? throw "user argument is required",
+  home ? throw "home argument is required",
+}:
+{
+  config,
+  lib,
+  pkgs,
+  inputs,
+  ...
+}:
+{
+  home-manager.users.${user} = {
+    imports = [ inputs.ags.homeManagerModules.default ];
+
+    programs.ags = {
+      enable = true;
+      configDir = ./config;
+      systemd.enable = true;
+
+      extraPackages = with pkgs; [
+        inputs.ags.packages.${pkgs.system}.hyprland
+        inputs.ags.packages.${pkgs.system}.tray
+        sassc
+        hyprland
+        nixos-icons
+        (pkgs.callPackage ../cliphist/rofi.nix { })
+      ];
+    };
+
+    theme.template."${home}/.config/astal/theme.sass".source = ./theme.sass;
+
+    systemd.user = {
+      targets.tray.Unit = {
+        BindsTo = [ "ags.service" ];
+        After = [
+          "graphical-session.target"
+          "ags.service"
+        ];
+      };
+    };
+  };
+}

hosts/common/configs/user/gui/astal/theme.sass

@@ -0,0 +1,73 @@
+.bar
+  background-color: {{colors.surface.default.hex}}
+
+  @mixin interactive
+    min-height: {{custom.font_size}}pt
+    border-radius: .5 * {{custom.font_size}}pt
+    padding: 2pt
+    margin: 0 2pt 0
+    transition: .25s
+
+    background-color: {{colors.surface.default.hex}}
+
+    &:hover
+      background-color: {{colors.surface_container_high.default.hex}}
+
+    &:active
+      background-color: {{colors.surface_container_highest.default.hex}}
+
+  .widgets
+    padding: .2 * {{custom.padding}}pt
+
+    .launcher
+      @include interactive
+
+      min-width: {{custom.font_size}}pt
+
+      .icon
+        font-size: {{custom.font_size}}pt
+        padding: 0 .3 * {{custom.padding}}pt
+        color: {{colors.on_surface.default.hex}}
+
+    .workspaces
+      @include interactive
+
+      .button
+        font-size: 0
+        transition: .5s
+        margin: 0 .3 * {{custom.padding}}pt
+        background-color: {{colors.outline_variant.default.hex}}
+        min-width: .4 * {{custom.font_size}}pt
+        min-height: .4 * {{custom.font_size}}pt
+        border-radius: .5 * {{custom.font_size}}pt
+
+        &.occupied
+          background-color: {{colors.on_surface.default.hex}}
+          min-width: .6 * {{custom.font_size}}pt
+          min-height: .6 * {{custom.font_size}}pt
+          border-radius: .5 * {{custom.font_size}}pt
+
+        &.active
+          background-color: {{colors.primary.default.hex}}
+          min-width: 1.67 * {{custom.font_size}}pt
+          min-height: {{custom.font_size}}pt
+          border-radius: .4 * {{custom.font_size}}pt
+
+    .date
+      @include interactive
+
+      .label
+        color: {{colors.on_surface.default.hex}}
+        font-size: {{custom.font_size}}pt
+        font-family: {{custom.font_sans_serif_all}}
+        font-weight: 500
+        margin: 0 .5 * {{custom.padding}}pt
+
+    .systray
+      .item
+        @include interactive
+
+        .icon
+          font-size: {{custom.font_size}}pt
+          padding: 0 .3 * {{custom.padding}}pt
+          color: {{colors.on_surface.default.hex}}