Initial commit

ags/widget/bar/bar.tsx

@@ -0,0 +1,45 @@
+import { App, Astal, Gdk, Gtk } from "astal/gtk4"
+import { Binding } from "astal"
+
+import Battery from "gi://AstalBattery";
+
+import { BatteryInfo } from "./components/battery";
+import DateTime from "@lib/widgets/datetime";
+import Workspace from "./workspace";
+import TrayView from "./tray";
+
+export default function Bar(monitor_id: number) {
+    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
+    const CENTER = Gtk.Align.CENTER;
+
+    const battery = Battery.get_default();
+
+    const openQuickSettings = (_self: Gtk.Button, state: Gdk.ButtonEvent) => {
+        if (state.get_button() === Gdk.BUTTON_PRIMARY)
+            App.get_window("quick_settings")?.show()
+    }
+
+    return <window
+        visible
+		name={`bar_${monitor_id}`}
+		monitor={monitor_id}
+        cssClasses={["bar"]}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={BOTTOM | LEFT | RIGHT}
+        application={App}>
+        <box halign={CENTER} cssClasses={["inner"]}>
+            {[
+                Workspace(),
+                <menubutton hasFrame={false}>
+                    <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
+                    <popover>
+                        <Gtk.Calendar />
+                    </popover>
+                </menubutton>,
+                BatteryInfo({ battery }),
+                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />,
+                TrayView()
+            ]}
+        </box>
+    </window>
+}

ags/widget/bar/battery_info.tsx

@@ -0,0 +1,53 @@
+import { App, Astal, Gtk } from "astal/gtk4";
+import { bind } from "astal";
+
+import { getBatteryIcon } from "@/lib/icons";
+import { hideWindow } from "@lib/utils";
+
+import PowerProfiles from "gi://AstalPowerProfiles?version=0.1";
+import Battery from "gi://AstalBattery?version=0.1";
+import Hyprland from "gi://AstalHyprland";
+
+export default function BatteryInfo(_monitor_id: number) {
+    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
+    const CENTER = Gtk.Align.CENTER;
+
+    const hypr = Hyprland.get_default();
+    const power = PowerProfiles.get_default();
+    const battery = Battery.get_default();
+
+    const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
+    const charging = bind(battery, "charging");
+
+    return <window
+        visible={false}
+        name={"battery_info"}
+        monitor={bind(hypr, "focusedMonitor").as(monitor => monitor.id)}
+        cssClasses={["battery_info"]}
+        keymode={Astal.Keymode.EXCLUSIVE}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={BOTTOM | LEFT | RIGHT}
+        onKeyPressed={hideWindow}
+        application={App}>
+        <box halign={CENTER} cssClasses={["inner"]} spacing={10}>
+            {percentage.as(p => <>
+                <image
+                    iconSize={Gtk.IconSize.LARGE}
+                    iconName={getBatteryIcon(p, charging)}
+                />
+
+                <label cssClasses={["percentage"]}>{percentage.as(p => `${p}%`)}</label>
+            </>)}
+
+            {power.get_profiles().map(profile => <button
+                label={profile.profile}
+                cssClasses={bind(power, "active_profile").as(active =>
+                    active === profile.profile
+                        ? ["active"]
+                        : []
+                )}
+                onClicked={() => power.set_active_profile(profile.profile)}
+            />)}
+        </box>
+    </window>
+}

ags/widget/bar/components/battery.tsx

@@ -0,0 +1,26 @@
+import { App, Gdk } from "astal/gtk4";
+import { bind } from "astal";
+
+import Battery from "gi://AstalBattery";
+
+import { getBatteryIcon } from "@/lib/icons";
+import { openOnButton } from "@/lib/utils";
+
+export function BatteryInfo({ battery }: { battery: Battery.Device }) {
+    const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
+    const charging = bind(battery, "charging");
+
+    return (
+        <box>
+            {percentage.as(p => <button hasFrame={false}>
+                <box onButtonPressed={(_self, event) =>
+                    openOnButton(event, Gdk.BUTTON_PRIMARY)
+                        (() => App.toggle_window("battery_info"))
+                }>
+                    <label>{percentage.as(p => `${p}%`)}</label>
+                    <image iconName={getBatteryIcon(p, charging)} />
+                </box>
+            </button>)}
+        </box>
+    );
+};

ags/widget/bar/tray.tsx

@@ -0,0 +1,30 @@
+import { hook } from "astal/gtk4";
+import { bind } from "astal";
+
+import Tray from "gi://AstalTray";
+
+export default function TrayView() {
+    const tray = Tray.get_default();
+    const items = bind(tray, "items");
+
+    return <box spacing={items.as(items => items.length)} cssClasses={["tray"]}>
+        {items.as(items => items.map(item => {
+            const button = <menubutton
+                cssClasses={["item"]}
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                menuModel={bind(item, "menuModel")}
+                hasFrame={false}
+                primary
+                setup={self => self.insert_action_group("dbusmenu", item.actionGroup)}
+            >
+                <image gicon={item.gicon} />
+            </menubutton>;
+
+            hook(button, item, "notify::action-group", self => {
+                self.insert_action_group("dbusmenu", item.actionGroup);
+            });
+
+            return button;
+        }))}
+    </box>
+}

ags/widget/bar/workspace.tsx

@@ -0,0 +1,18 @@
+import Hyprland from "gi://AstalHyprland";
+import { bind, Variable } from "astal";
+
+export default function Workspace() {
+    const hypr = Hyprland.get_default();
+    const lastWorkspaceId = Variable(hypr.focusedWorkspace.id);
+
+    return <button hasFrame={false}>
+        {bind(hypr, "focusedWorkspace").as(workspace => {
+            // This is a hack; sometimes when disconnecting monitor
+            // focusedWorkspace is null for a while.
+            // Therefore an error occurs when trying to reference id.
+            if (workspace) lastWorkspaceId.set(workspace.id)
+
+            return `workspace ${workspace?.id ?? lastWorkspaceId.get()}`
+        })}
+    </button>
+}

ags/widget/launcher/launcher.tsx

@@ -0,0 +1,82 @@
+import { Variable, bind } from "astal";
+import { App, Astal, Gtk } from "astal/gtk4";
+import { hideWindow } from "@lib/utils";
+
+import Hyprland from "gi://AstalHyprland";
+import Apps from "gi://AstalApps";
+
+const hide = () => App.get_window("launcher")?.hide();
+
+function AppButton({ app }: { app: Apps.Application }) {
+    return <button
+        cssClasses={["application"]}
+        onClicked={() => {
+            hide();
+        	app.launch();
+		}}
+    >
+        <box>
+            <image iconName={app.iconName} />
+            <box valign={Gtk.Align.CENTER} vertical>
+                <label
+                    cssClasses={["name"]}
+                    xalign={0}
+                    label={app.name}
+                />
+                {app.description && <label
+                    cssClasses={["description"]}
+                    wrap
+                    xalign={0}
+                    label={app.description}
+                />}
+            </box>
+        </box>
+    </button>
+}
+
+export default function Launcher(_monitor_id: number) {
+    const { TOP, BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor;
+
+	const hypr = Hyprland.get_default();
+    const apps = new Apps.Apps();
+
+    const query = Variable("")
+    const list = query(text => apps.fuzzy_query(text).slice(0, 10))
+    const onEnter = () => {
+        hide()
+        list.get().at(0)!.launch()
+    }
+
+    return <window
+        visible={false}
+        monitor={bind(hypr, "focusedMonitor").as(monitor => monitor.id)}
+        name={"launcher"}
+        cssClasses={["launcher"]}
+        keymode={Astal.Keymode.EXCLUSIVE}
+        anchor={TOP | BOTTOM | LEFT | RIGHT}
+        onKeyPressed={hideWindow}
+        application={App}>
+        <box hexpand={false} vertical halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER}>
+            <box cssClasses={["launcher"]} vertical>
+                <entry
+                    placeholderText="Search"
+                    onChanged={self => query.set(self.text)}
+                    onActivate={onEnter}
+                />
+                <box spacing={6} vertical>
+                    {list.as(list => list.map(app => (
+                        <AppButton app={app} />
+                    )))}
+                </box>
+                <box
+                    halign={Gtk.Align.CENTER}
+                    cssClasses={["not-found"]}
+                    vertical
+                    visible={list.as(l => l.length === 0)}>
+                    <image iconName="system-search-symbolic" />
+                    <label label="No match found" />
+                </box>
+            </box>
+        </box>
+    </window>
+}

ags/widget/quick_settings/bluetooth.tsx

@@ -0,0 +1,71 @@
+import { App, Astal, Gtk } from "astal/gtk4";
+import { bind, execAsync, Gio } from "astal";
+
+import { hideWindow } from "@/lib/utils";
+import Bluetooth from "gi://AstalBluetooth";
+import Hyprland from "gi://AstalHyprland";
+
+function DeviceMenu({ device, child }: { device: Bluetooth.Device, child?: JSX.Element }) {
+    const menu = Gio.Menu.new();
+    const copy_mac = Gio.MenuItem.new("Copy MAC address", "bt.copy_mac");
+    const toggle_state = Gio.MenuItem.new(device.get_connected() ? "Disconnect" : "Connect", "bt.toggle_state");
+
+    const action_group = Gio.SimpleActionGroup.new();
+
+    const copy_mac_action = Gio.SimpleAction.new("copy_mac", null);
+    copy_mac_action.connect("activate", () => execAsync(["wl-copy", device.address]));
+
+    const toggle_state_action = Gio.SimpleAction.new("toggle_state", null);
+    toggle_state_action.connect("activate", async () => {
+		if (device.connected)
+            await device.disconnect_device()
+        else
+            await device.connect_device()
+    })
+
+    menu.insert_item(1, copy_mac);
+    menu.insert_item(2, toggle_state);
+
+    action_group.insert(copy_mac_action);
+    action_group.insert(toggle_state_action);
+
+    return <menubutton
+        menuModel={menu}
+        setup={self => self.insert_action_group("bt", action_group)}
+    >
+        {child}
+        <popover>
+            <label label={"Copy MAC address"} />
+            <label label={"Toggle state"} />
+        </popover>
+    </menubutton>;
+};
+
+export default function BluetoothWindow(_monitor_id: number) {
+    const CENTER = Gtk.Align.CENTER;
+
+    const bt = Bluetooth.get_default();
+    const hypr = Hyprland.get_default();
+    const devices = bind(bt, "devices");
+
+    return <window
+        name={"qs_bluetooth"}
+        cssClasses={["qs_bluetooth"]}
+        monitor={bind(hypr, "focusedMonitor").as(monitor => monitor.id)}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        keymode={Astal.Keymode.EXCLUSIVE}
+        application={App}
+        onKeyPressed={hideWindow}
+    >
+        <box vertical halign={CENTER} cssClasses={["inner"]} spacing={5}>
+            {devices.as(devices => devices.map(device =>
+                <DeviceMenu device={device}>
+                    <box cssClasses={["device", "small-padding"].concat(device.connected ? ["active"] : [])} spacing={3}>
+                        <image iconName={device.icon} />
+                        <label>{device.alias}</label>
+                    </box>
+                </DeviceMenu>
+            ))}
+        </box>
+    </window>
+}

ags/widget/quick_settings/quick_settings.tsx

@@ -0,0 +1,167 @@
+import { bind, execAsync, Binding, Variable } from "astal";
+import { App, Astal, Gdk, Gtk } from "astal/gtk4";
+
+import Bluetooth from "gi://AstalBluetooth";
+import Hyprland from "gi://AstalHyprland";
+import Network from "gi://AstalNetwork";
+
+import { SHELL, IDLE_INHIBIT_SCRIPT, RANDOM_WALLPAPER_SCRIPT } from "@/settings.json";
+
+import { hideWindow, openOnButton } from "@lib/utils";
+
+type ButtonProps = {
+    icon: string | Binding<string>,
+    command?: string,
+    label: string | Binding<string>,
+    binding?: Binding<boolean>,
+    bindingMethod?: (binding: boolean) => void
+}
+
+const isIdleInhibitorEnabled = async () => {
+    try {
+        await execAsync([SHELL, "-c", `pgrep -f ${IDLE_INHIBIT_SCRIPT}`]);
+        return true;
+    } catch {
+        return false;
+    }
+};
+
+function Preference(props: ButtonProps & JSX.IntrinsicElements["button"]) {
+    const onClicked = () => {
+        if (props.command) execAsync([ SHELL, "-c", props.command ]);
+        else if (typeof props.binding !== 'undefined' && props.bindingMethod)
+            props.bindingMethod(!props.binding.get())
+    }
+
+    return <button 
+        {...props}
+        label={undefined}
+        onClicked={onClicked} 
+        cssClasses={props.binding?.as(active => active ? ["active"] : [])}
+    >
+        <box orientation={Gtk.Orientation.HORIZONTAL} spacing={4}>
+            <image iconName={props.icon} />
+            <label>{props.label}</label>
+        </box>
+    </button>
+}
+
+async function toggleIdleInhibitor(state: Variable<boolean>, enable: boolean) {
+    try {
+        if (enable) {
+            execAsync([SHELL, "-c", IDLE_INHIBIT_SCRIPT]);
+        } else {
+            const pids = await execAsync([SHELL, "-c", `pgrep -f ${IDLE_INHIBIT_SCRIPT}`]);
+            if (pids) {
+                const pidList = pids.trim().split("\n");
+                for (const pid of pidList) {
+                    await execAsync(["kill", "-9", pid]);
+                }
+            }
+        }
+
+        state.set(!state.get());
+    } catch {
+        console.error("Failed to change state of idle inhibitor");
+    }
+}
+
+export default async function QuickSettings(_monitor_id: number) {
+    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
+    const CENTER = Gtk.Align.CENTER;
+
+    const hypr = Hyprland.get_default();
+    const bt = Bluetooth.get_default();
+    const net = Network.get_default();
+
+    const connectedBtDevice = bind(bt, "devices").as(devices => devices.find(device => device.connected));
+    const idleInhibitorEnabled = Variable(await isIdleInhibitorEnabled());
+
+    return <window
+        visible={false}
+        name={"quick_settings"}
+        monitor={bind(hypr, "focusedMonitor").as(monitor => monitor.id)}
+        cssClasses={["quick_settings"]}
+        keymode={Astal.Keymode.EXCLUSIVE}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={BOTTOM | LEFT | RIGHT}
+        onKeyPressed={hideWindow}
+        application={App}>
+        <box halign={CENTER} cssClasses={["inner"]} vertical>
+            <box orientation={Gtk.Orientation.HORIZONTAL} halign={CENTER}>
+                <Preference
+                    icon={"network-wireless-symbolic"}
+                    label={bind(Variable.derive([
+                        bind(net.wifi, "enabled"),
+                        bind(net.wifi, "ssid")
+                    ], (enabled, ssid) => enabled && ssid ? ssid : "Wi-Fi"))}
+                    binding={bind(net.wifi, "enabled")}
+                    bindingMethod={enabled => net.wifi.set_enabled(enabled)}
+                />
+                <Preference
+                    icon={bind(bt, "isConnected").as(c => c
+                        ? "bluetooth-active-symbolic"
+                        : "bluetooth-disabled-symbolic"
+                    )}
+                    label={connectedBtDevice.as(device => bt.isPowered && device ? device.alias : "Bluetooth")}
+                    binding={bind(bt, "isPowered")}
+                    bindingMethod={() => bt.toggle()}
+                    onButtonPressed={(_self, event) => 
+                        openOnButton(event, Gdk.BUTTON_SECONDARY)
+                        (() => App.toggle_window("qs_bluetooth"))
+                    }
+                />
+                <Preference
+                    icon={"uninterruptible-power-supply-symbolic"}
+                    label={"Idle inhibitor"}
+                    binding={bind(idleInhibitorEnabled)}
+                    bindingMethod={toggleIdleInhibitor.bind(null, idleInhibitorEnabled)}
+                />
+                <Preference
+                icon="preferences-desktop-wallpaper-symbolic"
+                command={RANDOM_WALLPAPER_SCRIPT}
+                label="Random wallpaper"
+            />
+            </box>
+            <box orientation={Gtk.Orientation.HORIZONTAL} halign={CENTER}>
+                <Preference
+                    icon="system-shutdown-symbolic"
+                    command="systemctl poweroff"
+                    label="Shutdown"
+                />
+                <Preference
+                    icon="system-reboot-symbolic"
+                    command="systemctl reboot"
+                    label="Reboot"
+                />
+                <Preference
+                    icon="preferences-system-privacy-symbolic"
+                    command="systemctl suspend"
+                    label="Suspend"
+                />
+                <Preference
+                    icon="application-exit-symbolic"
+                    command="systemctl exit"
+                    label="Exit session"
+                />
+            </box>
+            <box orientation={Gtk.Orientation.HORIZONTAL} halign={CENTER}>
+                <Preference
+                    icon="system-lock-screen-symbolic"
+                    command="loginctl lock-session"
+                    label="Lock Screen"
+                />
+                <Preference
+                    icon="system-log-out-symbolic"
+                    command="loginctl terminate-user $(whoami)"
+                    label="Log out"
+                />
+                <Preference
+                    icon="system-reboot-symbolic"
+                    command="systemctl reboot --boot-loader-entry=menu"
+                    label="Reboot to bootloader"
+                />
+            </box>
+        </box>
+    </window>
+}