update gitignore

app.ts

@@ -0,0 +1,67 @@
+import style from "./styles/style.scss"
+
+import { GLib, monitorFile, exec } from "astal";
+import { App, Gtk } from "astal/gtk4";
+import Hyprland from "gi://AstalHyprland";
+
+import QuickSettings from "widget/quick_settings/quick_settings";
+import BluetoothWindow from "widget/quick_settings/bluetooth";
+import Launcher from "widget/launcher/launcher";
+import BatteryInfo from "@/widget/bar/battery_info";
+import Bar from "widget/bar/bar";
+
+const hypr = Hyprland.get_default();
+const windows = new Map<number, Gtk.Window[]>();
+const components = [
+	Bar, 
+	Launcher, 
+	QuickSettings, 
+	BluetoothWindow,
+	BatteryInfo
+];
+
+const setupBars = async (monitor_id: number) => {
+    const windows = await Promise.all(
+        components.map(item => Promise.resolve(item(monitor_id)) as Promise<Gtk.Window>)
+    );
+
+    return windows;
+};
+
+const STYLES = `${GLib.get_user_config_dir()}/ags/styles`;
+const monitorCSS = () => monitorFile(
+	STYLES + '/colors.scss',
+	() => {
+		exec(`sass ${STYLES}/style.scss /tmp/ags-style.css`);
+		App.apply_css('/tmp/ags-style.css', true);
+	}
+);
+
+App.start({
+	css: style,
+	async main() {
+		App.add_icons(`${GLib.get_user_data_dir()}/icons/Astal`);
+		monitorCSS();
+
+		const monitors = App.get_monitors();
+		for (const monitor of monitors) {
+			const index = monitors.indexOf(monitor);
+			windows.set(index, await setupBars(index));
+
+			hypr.connect("monitor-added", async (_, monitor: Hyprland.Monitor) => {
+				if (!windows.has(monitor.id)) windows.set(monitor.id, await setupBars(monitor.id))
+			});
+		
+			hypr.connect("monitor-removed", (_, monitor_id: number) => {
+				const monitorWindows = windows.get(monitor_id)
+				if (monitorWindows) {
+					for (const monitorWindow of monitorWindows) {
+						monitorWindow.destroy();
+					};
+
+					windows.delete(monitor_id);
+				};
+			});
+		}
+	},
+})

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

lib/icons.ts

@@ -0,0 +1,17 @@
+import { Binding } from "astal";
+
+type Substitution = { charging?: string, idle?: string }
+
+export const getBatteryIcon = (percentage: number, charging: Binding<boolean>) => {
+    const levels = Array.from({ length: 10 }, (_, i) => (i + 1) * 10);
+    const level = levels.find((level) => percentage <= level)!;
+
+    const substitutions: Record<number, Substitution> = {
+        100: { charging: "battery-level-100-charged-symbolic" }
+    };
+
+    return charging.as(c => c
+        ? substitutions[level]?.charging || `battery-level-${level}-charging-symbolic`
+        : substitutions[level]?.idle || `battery-level-${level}-symbolic`
+    );
+};

lib/utils.ts

@@ -0,0 +1,24 @@
+import { Gtk, Gdk } from "astal/gtk4";
+
+export type If<Condition, Then, Else> = Condition extends true ? Then : Else;
+export type Belongs<T, U> = {
+    [K in keyof T]: T[K] extends U ? K : never;
+}[keyof T];
+
+export const hideWindow = (self: Gtk.Window, keyval: number) => {
+    const keys = ["quick_settings"].includes(self.name)
+        ? [Gdk.KEY_Escape]
+        : [
+            Gdk.KEY_Escape, 
+            Gdk.KEY_Super_L, 
+            Gdk.KEY_Super_R
+        ];
+
+    if (keys.some(key => key === keyval)) self.hide();
+}
+
+export const openOnButton = (event: Gdk.ButtonEvent, keyval: number) => (action: () => void) => {
+    if (event.get_button() !== keyval) return;
+
+    action();
+}

lib/widgets/datetime.tsx

@@ -0,0 +1,24 @@
+import { Variable, GLib } from "astal";
+import { Widget } from "astal/gtk4";
+
+type Props = { 
+    format: string, 
+    interval?: number
+} & Widget.LabelProps;
+
+export default function DateTime({ format, interval, ...props }: Props) {
+    const shouldPoll = typeof interval === "number" && interval >= 1;
+
+    const currentTime = () => {
+        const dateTime = GLib.DateTime.new_now_local();
+        return dateTime.format(format)!;
+    }
+
+    if (shouldPoll) {
+        const pollTime = new Variable(currentTime()).poll(interval || 1000, currentTime);
+        return <label label={pollTime()} {...props} />
+    } else {
+        const time = new Variable(currentTime())
+        return <label label={time()} {...props} />
+    }
+}

package.json

@@ -0,0 +1,6 @@
+{
+    "name": "astal-shell",
+    "dependencies": {
+        "astal": "/nix/store/52w3zsyjrj7xrwcf3gxi3hv2y9lnc9pv-astal-gjs/share/astal/gjs"
+    }
+}

settings.json

@@ -0,0 +1,5 @@
+{
+    "SHELL": "fish",
+    "IDLE_INHIBIT_SCRIPT": "$HOME/.config/hypr/scripts/idle-inhibitor.py",
+    "RANDOM_WALLPAPER_SCRIPT": "$HOME/.config/hypr/scripts/random-wallpaper.sh"
+}

styles/_variables.scss

@@ -0,0 +1,2 @@
+$font-family: "SFProText Nerd Font", "SFProDisplay Nerd Font", sans-serif;
+$font-family-monospace: "JetBrains Mono", monospace;

styles/classes.scss

@@ -0,0 +1,6 @@
+@use '_variables' as *;
+@use 'mixins';
+
+.material-icon {
+    @include mixins.material-icon;
+}

styles/colors.scss

@@ -0,0 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_131.jpg";
+
+// Special
+$background: #f3f3f1;
+$foreground: #27211F;
+$cursor: #27211F;
+
+// Colors
+$color0: #f3f3f1;
+$color1: #C6643F;
+$color2: #906E69;
+$color3: #CF9569;
+$color4: #365689;
+$color5: #586C90;
+$color6: #887887;
+$color7: #27211F;
+$color8: #6a6a63;
+$color9: #C6643F;
+$color10: #906E69;
+$color11: #CF9569;
+$color12: #365689;
+$color13: #586C90;
+$color14: #887887;
+$color15: #27211F;

styles/components/_bar.scss

@@ -0,0 +1,32 @@
+@use '../colors' as *;
+
+window.bar {
+    font-weight: bold;
+
+    >box {
+        border-radius: 10px;
+    }
+
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.25rem 1rem;
+        margin: 0;
+
+        * { color: $color0; }
+    }
+
+    .tray .item {
+        padding: 0;
+        margin: 0;
+        background: $color5;
+
+        image {
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    calendar>header { border: none; }
+}

styles/components/_battery_info.scss

@@ -0,0 +1,56 @@
+@use '../colors' as *;
+
+window.battery_info {
+    font-weight: bold;
+
+    >box {
+        border: 1px solid $color0;
+        border-radius: 10px;
+        margin: 8px;
+    }
+    
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.75rem 3rem;
+        margin: 0;
+
+        label.percentage {
+            font-size: 300%;
+        }
+
+        * { 
+            transition: all 0.2s ease-in-out;
+            color: $color0;
+        }
+    }
+
+    button {
+        padding: 0.75rem 1rem;
+    }
+}
+
+window.battery_info button {
+    transition: all 0.2s ease-in-out;
+    background: $color5;
+    border: 2px solid $color0;
+    margin: 5px;
+
+    &:hover {
+        background: $color0;
+
+        * {
+            color: $color5;
+        }
+    }
+
+    &.active {
+        background: $color0;
+        border: 0.5px solid $color5;
+
+        * {
+            color: $color5;
+        }
+    }
+}

styles/components/_index.scss

@@ -0,0 +1,4 @@
+@forward '_bar';
+@forward '_launcher';
+@forward '_battery_info';
+@forward '_quick_settings';

styles/components/_launcher.scss

@@ -0,0 +1,60 @@
+@use '../colors' as *;
+
+.launcher {
+    entry {
+        background: $color5;
+        color: $color0;
+        padding: 8px 12px;
+        border: none;
+
+        margin-bottom: 6px;
+        
+        &:focus {
+            outline: 2px solid $color0;
+        }
+    }
+
+    .application {
+        padding: 10px;
+        background: $color5;
+        border-radius: 8px;
+        transition: background 0.2s ease;
+
+        &:hover {
+            background: $color0;
+        
+            box>.name, box>.description {
+                color: $color5;
+            }
+        }
+
+        image {
+            margin-right: 12px;
+        }
+
+        box {
+            .name {
+                color: $color0;
+                font-size: 14px;
+                font-weight: 600;
+            }
+
+            .description {
+                color: $color0;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .not-found {
+        background: $color5;
+        color: $color0;
+        font-size: 14px;
+        padding: 10px;
+        border-radius: 8px;
+
+        image {
+            margin-bottom: 8px;
+        }
+    }
+}

styles/components/_quick_settings.scss

@@ -0,0 +1,70 @@
+@use '../colors' as *;
+
+window.quick_settings {
+    font-weight: bold;
+
+    >box {
+        border: 1px solid $color0;
+        border-radius: 10px;
+        margin: 8px;
+    }
+    
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.75rem 3rem;
+        margin: 0;
+
+        * { 
+            transition: all 0.2s ease-in-out;
+            color: $color0;
+        }
+    }
+
+    button {
+        padding: 0.75rem 1rem;
+    }
+}
+
+window.qs_bluetooth {
+    >.inner {
+        background: $color5;
+        padding: 0.75rem 3rem;
+        border-radius: 10px;
+    
+        * { color: $color0; }
+    }
+
+    .device {
+        padding: 1rem 3rem;
+    }
+
+    button {
+        padding: 0.75rem 0.5rem;
+    }
+}
+
+window.quick_settings button, window.qs_bluetooth button {
+    transition: all 0.2s ease-in-out;
+    background: $color5;
+    border: 2px solid $color0;
+    margin: 5px;
+
+    &:hover {
+        background: $color0;
+
+        * {
+            color: $color5;
+        }
+    }
+
+    &.active {
+        background: $color0;
+        border: 0.5px solid $color5;
+
+        * {
+            color: $color5;
+        }
+    }
+}

styles/mixins.scss

@@ -0,0 +1,8 @@
+@mixin full-rounding {
+    border-radius: 100%;
+}
+
+@mixin material-icon {
+    font-family: "Material Symbols Rounded", "MaterialSymbolsRounded", "Material Symbols Outlined",
+        "Material Symbols Sharp";
+}

styles/style.scss

@@ -0,0 +1,29 @@
+@use 'variables' as *;
+@use 'colors' as *;
+@use 'mixins';
+@use 'classes';
+@use 'components';
+
+* {
+    font-family: $font-family;
+}
+
+separator {
+    background: $color0;
+}
+
+popover>contents, calendar {
+    background: $color5;
+}
+
+button, button:hover {
+    background: transparent;
+}
+
+popover modelbutton {
+    &:hover, &:focus { background: $color6; }
+}
+
+image {
+    padding: 0 0.25rem;
+}

tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "strict": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "Bundler",
+        "noEmit": true,
+        "baseUrl": ".",
+        "allowImportingTsExtensions": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "astal/gtk4",
+        "paths": {
+            "@/*": ["./*"],
+            "@lib/*": ["lib/*"]
+        }
+    }
+}

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

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

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

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

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

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

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

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