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>