baobeld/ags
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lets goo

Browse source
This commit is contained in:
Benjamin Palko 2025-06-17 14:13:35 -04:00
parent e62a7afa60
commit 6b8b5f62ea
7 changed files with 196 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

64
widget/Bar.tsx
View file

@ -13,37 +13,37 @@ import Tray from "./Tray";
import WirePlumber from "./WirePlumber";
export default function Bar(gdkmonitor: Gdk.Monitor) {
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
return (
<window
visible
cssClasses={["Bar"]}
gdkmonitor={gdkmonitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | LEFT | RIGHT}
application={App}
>
<centerbox cssName="centerbox">
<box halign={Gtk.Align.START}>
<OS />
<Workspaces />
<Tray />
<Hyprland.Client />
</box>
<box halign={Gtk.Align.CENTER}>
<Mpris />
</box>
<box halign={Gtk.Align.END}>
<Pywal />
<WirePlumber />
<Internet />
<Bluetooth />
<Memory />
<Calendar />
<SwayNC />
</box>
</centerbox>
</window>
);
return (
<window
visible
cssClasses={["Bar"]}
gdkmonitor={gdkmonitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | LEFT | RIGHT}
application={App}
>
<centerbox cssName="centerbox">
<box halign={Gtk.Align.START}>
<OS />
<Workspaces />
<Tray />
<Hyprland.Client />
</box>
<box halign={Gtk.Align.CENTER}>
<Mpris />
</box>
<box halign={Gtk.Align.END}>
<Pywal />
<WirePlumber />
<Bluetooth />
<Internet />
<Memory />
<Calendar />
<SwayNC />
</box>
</centerbox>
</window>
);
}

65
widget/Bluetooth.tsx
View file

@ -3,46 +3,47 @@ import { bind, derive } from "astal";
import AstalBluetooth from "gi://AstalBluetooth";
const DeviceList = function ({
devices,
devices,
}: {
devices: Binding<AstalBluetooth.Device[]>;
devices: Binding<AstalBluetooth.Device[]>;
}) {
return (
<box vertical>
{devices.as((devices) => {
return devices.map((device) => {
const name = bind(device, "name");
const connected = bind(device, "connected");
return (
<box vertical>
{devices.as((devices) => {
return devices.map((device) => {
const name = bind(device, "name");
const connected = bind(device, "connected");
return (
<button
label={bind(
derive(
[name, connected],
(name, connected) => `${connected ? "󰂱" : ""} ${name}`,
),
)}
/>
);
});
})}
</box>
);
return (
<button
label={bind(
derive(
[name, connected],
(name, connected) => `${connected ? "󰂱" : ""} ${name}`,
),
)}
/>
);
});
})}
</box>
);
};
const Bluetooth = function () {
const bluetooth = AstalBluetooth.get_default();
const bluetooth = AstalBluetooth.get_default();
const devices = bind(bluetooth, "devices");
const devices = bind(bluetooth, "devices");
const count = devices.as((devices) => devices.length);
return (
<menubutton>
<label label={"󰂯"} />
<popover>
<DeviceList devices={devices} />
</popover>
</menubutton>
);
return (
<menubutton>
<label label={devices.as((devices) => `󰂯 ${devices.length}`)} />
<popover>
<DeviceList devices={devices} />
</popover>
</menubutton>
);
};
export default Bluetooth;

84
widget/Hyprland/workspaces.tsx
View file

@ -1,44 +1,58 @@
import { bind } from "astal";
import { Gdk } from "astal/gtk4";
import { Gdk, Gtk } from "astal/gtk4";
import Hyprland from "gi://AstalHyprland";
import Rsvg from "gi://Rsvg?version=2.0";
const Workspaces = function () {
const hyprland = Hyprland.get_default();
const hyprland = Hyprland.get_default();
const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
workspaces
.filter((workspace) => workspace.id > 0)
.sort((a, b) => {
if (a.id > b.id) {
return 1;
} else if (a.id < b.id) {
return -1;
}
return 0;
}),
);
const focusedWorkspace = bind(hyprland, "focused_workspace");
const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
workspaces.filter((workspace) => workspace.id < 0),
);
const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
workspaces
.filter((workspace) => workspace.id > 0)
.sort((a, b) => {
if (a.id > b.id) {
return 1;
} else if (a.id < b.id) {
return -1;
}
return 0;
}),
);
const focusedWorkspace = bind(hyprland, "focused_workspace");
const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
workspaces.filter((workspace) => workspace.id < 0),
);
return (
<box cssClasses={["Workspaces"]}>
{workspaces.as((workspaces) => {
return workspaces.map((workspace) => (
<button
cursor={Gdk.Cursor.new_from_name("pointer", null)}
cssClasses={focusedWorkspace.as((focused) => [
focused.id === workspace.id ? "active" : "",
])}
onClicked={() => workspace.focus()}
>
{workspace?.name}
</button>
));
})}
</box>
);
Gtk.Image.interface_install_property;
const activeTrianglePath =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1fb854" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
const inactiveTrianglePath =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180 12 12)" fill="none" stroke="#cac9c9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
const activeTrianglePixBuf =
Rsvg.Handle.new_from_data(activeTrianglePath).get_pixbuf();
const inactiveTrianglePixBuf =
Rsvg.Handle.new_from_data(inactiveTrianglePath).get_pixbuf();
return (
<box cssClasses={["Workspaces"]}>
{workspaces.as((workspaces) => {
return workspaces.map((workspace) => (
<button
cursor={Gdk.Cursor.new_from_name("pointer", null)}
onClicked={() => workspace.focus()}
>
{focusedWorkspace.as((focused) =>
focused.id === workspace.id
? Gtk.Image.new_from_pixbuf(activeTrianglePixBuf)
: Gtk.Image.new_from_pixbuf(inactiveTrianglePixBuf),
)}
</button>
));
})}
</box>
);
};
export default Workspaces;

49
widget/Tray.tsx
View file

@ -1,41 +1,30 @@
import { bind } from "astal";
import { Gdk } from "astal/gtk4";
import { Gdk, Gtk } from "astal/gtk4";
import AstalTray from "gi://AstalTray";
const TrayItemPopover = function ({ item }: { item: AstalTray.TrayItem }) {
const actionGroup = bind(item, "actionGroup");
const TrayItem = function ({ item }: { item: AstalTray.TrayItem }) {
const popover = Gtk.PopoverMenu.new_from_model(item.menu_model);
popover.insert_action_group("dbusmenu", item.action_group);
return (
<popover>
<box>{actionGroup.get()}</box>
</popover>
);
return (
<menubutton
cursor={Gdk.Cursor.new_from_name("pointer", null)}
icon_name={item.icon_name}
popover={popover}
/>
);
};
const Tray = function () {
const tray = AstalTray.get_default();
const tray = AstalTray.get_default();
const trayItems = bind(tray, "items");
return (
<box cssClasses={["Tray"]}>
{trayItems.as((items) =>
items.map((item) => {
return (
<menubutton cursor={Gdk.Cursor.new_from_name("pointer", null)}>
<image
tooltip_text={bind(item, "tooltip_markup")}
file={bind(item, "icon_name").as(
(iconName) => iconName || "NONE",
)}
/>
<TrayItemPopover item={item} />
</menubutton>
);
}),
)}
</box>
);
return (
<box cssClasses={["Tray"]}>
{bind(tray, "items").as((items) =>
items.map((item) => TrayItem({ item })),
)}
</box>
);
};
export default Tray;