Reorganize imports

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

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>