Sweetbread/nixos-config
1
0
Fork 0
Code Issues Activity

feat: ags

Browse Source
This commit is contained in:
Sweetbread
2024-12-27 15:42:51 +03:00
parent 21fe030dc7
commit 8ea1207bb9
21 changed files with 357 additions and 1214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home-manager/modules/ags.nix
+11 -316
View File
@@ -1,325 +1,20 @@
{ inputs, pkgs, config, ... }: {
# imports = [ inputs.ags.homeManagerModules.default ];
{ inputs, pkgs, ... }: {
imports = [ inputs.ags.homeManagerModules.default ];
programs.ags = {
enable = true;
# null or path, leave as null if you don't want hm to manage the config
configDir = null;
configDir = ./ags;
# additional packages to add to gjs's runtime
extraPackages = with pkgs; [
gtksourceview
webkitgtk
accountsservice
extraPackages = with inputs.ags.packages.${pkgs.system}; [
battery
mpris
hyprland
network
tray
wireplumber
];
};
xdg.configFile."ags/config.js".text = /*js*/ ''
const hyprland = await Service.import("hyprland")
const notifications = await Service.import("notifications")
const mpris = await Service.import("mpris")
const audio = await Service.import("audio")
const battery = await Service.import("battery")
const systemtray = await Service.import("systemtray")
const date = Variable("", {
poll: [1000, 'date "+%H:%M:%S %b %e."'],
})
// widgets can be only assigned as a child in one container
// so to make a reuseable widget, make it a function
// then you can simply instantiate one by calling it
function Workspaces() {
const activeId = hyprland.active.workspace.bind("id")
const workspaces = hyprland.bind("workspaces")
.as(ws => ws.map(({ id }) => Widget.Button({
on_clicked: () => hyprland.messageAsync(`dispatch workspace ''${id}`),
child: Widget.Label(`''${id}`),
class_name: activeId.as(i => `''${i === id ? "focused" : ""}`),
})))
return Widget.Box({
class_name: "workspaces",
children: workspaces,
})
}
function ClientTitle() {
return Widget.Label({
class_name: "client-title",
label: hyprland.active.client.bind("title"),
})
}
function Clock() {
return Widget.Label({
class_name: "clock",
label: date.bind(),
})
}
// we don't need dunst or any other notification daemon
// because the Notifications module is a notification daemon itself
function Notification() {
const popups = notifications.bind("popups")
return Widget.Box({
class_name: "notification",
visible: popups.as(p => p.length > 0),
children: [
Widget.Icon({
icon: "preferences-system-notifications-symbolic",
}),
Widget.Label({
label: popups.as(p => p[0]?.summary || ""),
}),
],
})
}
function Media() {
const label = Utils.watch("default", mpris, "player-changed", () => {
if (mpris.players[0]) {
const { track_artists, track_title } = mpris.players[0]
return `''${track_artists.join(", ")} - ''${track_title}`
} else {
return "Nothing is playing"
}
})
print(Object.values(label))
if (label != "default") {
return Widget.Button({
class_name: "media",
on_primary_click: () => mpris.getPlayer("")?.playPause(),
on_scroll_up: () => mpris.getPlayer("")?.next(),
on_scroll_down: () => mpris.getPlayer("")?.previous(),
child: Widget.Label({ label }),
})
}
}
function Volume() {
const icons = {
101: "overamplified",
67: "high",
34: "medium",
1: "low",
0: "muted",
}
function getIcon() {
const icon = audio.speaker.is_muted ? 0 : [101, 67, 34, 1, 0].find(
threshold => threshold <= audio.speaker.volume * 100)
return `audio-volume-''${icons[icon]}-symbolic`
}
const icon = Widget.Icon({
icon: Utils.watch(getIcon(), audio.speaker, getIcon),
})
const slider = Widget.Slider({
hexpand: true,
draw_value: false,
on_change: ({ value }) => audio.speaker.volume = value,
setup: self => self.hook(audio.speaker, () => {
self.value = audio.speaker.volume || 0
}),
})
return Widget.Box({
class_name: "volume",
css: "min-width: 180px",
children: [icon, slider],
})
}
function BatteryLabel() {
const value = battery.bind("percent").as(p => p > 0 ? p / 100 : 0)
const icon = battery.bind("percent").as(p =>
`battery-level-''${Math.floor(p / 10) * 10}-symbolic`)
return Widget.Box({
class_name: "battery",
visible: battery.bind("available"),
children: [
Widget.Icon({ icon }),
Widget.LevelBar({
widthRequest: 140,
vpack: "center",
value,
}),
],
})
}
function SysTray() {
const items = systemtray.bind("items")
.as(items => items.map(item => Widget.Button({
child: Widget.Icon({ icon: item.bind("icon") }),
on_primary_click: (_, event) => item.activate(event),
on_secondary_click: (_, event) => item.openMenu(event),
tooltip_markup: item.bind("tooltip_markup"),
})))
return Widget.Box({
children: items,
})
}
// layout of the bar
function Left() {
return Widget.Box({
spacing: 8,
children: [
Workspaces(),
ClientTitle(),
],
})
}
function Center() {
return Widget.Box({
spacing: 8,
children: [
Media(),
Notification(),
],
})
}
function Right() {
return Widget.Box({
hpack: "end",
spacing: 8,
children: [
Volume(),
BatteryLabel(),
Clock(),
SysTray(),
],
})
}
function Bar(monitor = 0) {
return Widget.Window({
name: `bar-''${monitor}`, // name has to be unique
class_name: "bar",
monitor,
anchor: ["top", "left", "right"],
exclusivity: "exclusive",
child: Widget.CenterBox({
start_widget: Left(),
center_widget: Center(),
end_widget: Right(),
}),
})
}
App.config({
style: "./style.css",
windows: [
Bar(),
// you can call it, for each monitor
// Bar(0),
// Bar(1)
],
})
export { }
'';
xdg.configFile."ags/style.css".text = let
colors = config.lib.stylix.colors;
color = {
base = colors.base00;
mantle = colors.base01;
surface0 = colors.base02;
surface1 = colors.base03;
surface2 = colors.base04;
text = colors.base05;
rosewater = colors.base06;
lavander = colors.base07;
red = colors.base08;
peach = colors.base09;
yellow = colors.base0A;
green = colors.base0B;
teal = colors.base0C;
blue = colors.base0D;
mauve = colors.base0E;
flamingo = colors.base0F;
};
in /*css*/ ''
* {
border: none;
box-shadow: none;
text-shadow: none;
}
window.bar {
background-color: transparent;
color: #${color.text};
}
button {
/* size: 20px; */
background-color: transparent;
border-radius: 10px;
}
button:active {
background-color: /*#${color.surface0}*/ red;
}
label {
font-weight: bold;
}
.workspaces {
background-color: #${color.base};
border-radius: 10px;
}
.workspaces button {
color: #${color.surface2};
background: transparent;
padding: 5px;
}
.workspaces button:hover {
color: #${color.text};
}
.workspaces button.focused {
background-color: #${color.surface0};
color: #${color.text};
}
.client-title {
color: @theme_selected_bg_color;
}
.notification {
color: yellow;
}
levelbar block,
highlight {
min-height: 10px;
}
'';
# home.packages = [ pkgs.ags ];
wayland.windowManager.hyprland.settings.exec-once = [ "ags run" ];
}
home-manager/modules/ags/README.md
+9 -15
View File
@@ -1,18 +1,12 @@
# Simple Bar
# Simple Bar Example
setup
![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b)
```bash
mkdir -p ~/.config/ags
git clone https://github.com/Aylur/ags.git /tmp/ags
cp -r /tmp/ags/example/simple-bar/* ~/.config/ags
A simple bar for Hyprland using
# optionally setup types
ags --init -c ~/.config/ags/config.js
```
running
```bash
ags -c ~/.config/ags/config.js &
```
- [Battery library](https://aylur.github.io/astal/guide/libraries/battery).
- [Hyprland library](https://aylur.github.io/astal/guide/libraries/hyprland).
- [Mpris library](https://aylur.github.io/astal/guide/libraries/mpris).
- [Network library](https://aylur.github.io/astal/guide/libraries/network).
- [Tray library](https://aylur.github.io/astal/guide/libraries/tray).
- [WirePlumber library](https://aylur.github.io/astal/guide/libraries/wireplumber).
home-manager/modules/ags/app.ts
+13
View File
@@ -0,0 +1,13 @@
import { App } from "astal/gtk3"
import style from "./style.scss"
import Bar from "./widget/Bar"
App.start({
css: style,
instanceName: "js",
requestHandler(request, res) {
print(request)
res("ok")
},
main: () => App.get_monitors().map(Bar),
})
home-manager/modules/ags/config.js
-219
View File
@@ -1,219 +0,0 @@
const hyprland = await Service.import("hyprland")
const notifications = await Service.import("notifications")
const mpris = await Service.import("mpris")
const audio = await Service.import("audio")
const battery = await Service.import("battery")
const systemtray = await Service.import("systemtray")
const date = Variable("", {
poll: [1000, 'date "+%H:%M:%S %b %e."'],
})
// widgets can be only assigned as a child in one container
// so to make a reuseable widget, make it a function
// then you can simply instantiate one by calling it
function Workspaces() {
const activeId = hyprland.active.workspace.bind("id")
const workspaces = hyprland.bind("workspaces")
.as(ws => ws.map(({ id }) => Widget.Button({
on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
child: Widget.Label(`${id}`),
class_name: activeId.as(i => `${i === id ? "focused" : ""}`),
})))
return Widget.Box({
class_name: "workspaces",
children: workspaces,
})
}
function ClientTitle() {
return Widget.Label({
class_name: "client-title",
label: hyprland.active.client.bind("title"),
})
}
function Clock() {
return Widget.Label({
class_name: "clock",
label: date.bind(),
})
}
// we don't need dunst or any other notification daemon
// because the Notifications module is a notification daemon itself
function Notification() {
const popups = notifications.bind("popups")
return Widget.Box({
class_name: "notification",
visible: popups.as(p => p.length > 0),
children: [
Widget.Icon({
icon: "preferences-system-notifications-symbolic",
}),
Widget.Label({
label: popups.as(p => p[0]?.summary || ""),
}),
],
})
}
function Media() {
const label = Utils.watch("", mpris, "player-changed", () => {
if (mpris.players[0]) {
const { track_artists, track_title } = mpris.players[0]
return `${track_artists.join(", ")} - ${track_title}`
} else {
return "Nothing is playing"
}
})
return Widget.Button({
class_name: "media",
on_primary_click: () => mpris.getPlayer("")?.playPause(),
on_scroll_up: () => mpris.getPlayer("")?.next(),
on_scroll_down: () => mpris.getPlayer("")?.previous(),
child: Widget.Label({ label }),
})
}
function Volume() {
const icons = {
101: "overamplified",
67: "high",
34: "medium",
1: "low",
0: "muted",
}
function getIcon() {
const icon = audio.speaker.is_muted ? 0 : [101, 67, 34, 1, 0].find(
threshold => threshold <= audio.speaker.volume * 100)
return `audio-volume-${icons[icon]}-symbolic`
}
const icon = Widget.Icon({
icon: Utils.watch(getIcon(), audio.speaker, getIcon),
})
const slider = Widget.Slider({
hexpand: true,
draw_value: false,
on_change: ({ value }) => audio.speaker.volume = value,
setup: self => self.hook(audio.speaker, () => {
self.value = audio.speaker.volume || 0
}),
})
return Widget.Box({
class_name: "volume",
css: "min-width: 180px",
children: [icon, slider],
})
}
function BatteryLabel() {
const value = battery.bind("percent").as(p => p > 0 ? p / 100 : 0)
const icon = battery.bind("percent").as(p =>
`battery-level-${Math.floor(p / 10) * 10}-symbolic`)
return Widget.Box({
class_name: "battery",
visible: battery.bind("available"),
children: [
Widget.Icon({ icon }),
Widget.LevelBar({
widthRequest: 140,
vpack: "center",
value,
}),
],
})
}
function SysTray() {
const items = systemtray.bind("items")
.as(items => items.map(item => Widget.Button({
child: Widget.Icon({ icon: item.bind("icon") }),
on_primary_click: (_, event) => item.activate(event),
on_secondary_click: (_, event) => item.openMenu(event),
tooltip_markup: item.bind("tooltip_markup"),
})))
return Widget.Box({
children: items,
})
}
// layout of the bar
function Left() {
return Widget.Box({
spacing: 8,
children: [
Workspaces(),
ClientTitle(),
],
})
}
function Center() {
return Widget.Box({
spacing: 8,
children: [
Media(),
Notification(),
],
})
}
function Right() {
return Widget.Box({
hpack: "end",
spacing: 8,
children: [
Volume(),
BatteryLabel(),
Clock(),
SysTray(),
],
})
}
function Bar(monitor = 0) {
return Widget.Window({
name: `bar-${monitor}`, // name has to be unique
class_name: "bar",
monitor,
anchor: ["top", "left", "right"],
exclusivity: "exclusive",
child: Widget.CenterBox({
start_widget: Left(),
center_widget: Center(),
end_widget: Right(),
}),
})
}
App.config({
style: "./style.css",
windows: [
Bar(),
// you can call it, for each monitor
// Bar(0),
// Bar(1)
],
})
export { }
home-manager/modules/ags/style.scss
+106
View File
@@ -0,0 +1,106 @@
@use "sass:color";
$bg: #212223;
$fg: #f1f1f1;
$accent: #378DF7;
$radius: 7px;
window.Bar {
border: none;
box-shadow: none;
background-color: $bg;
color: $fg;
font-size: 1.1em;
font-weight: bold;
label {
margin: 0 8px;
}
.Workspaces {
button {
all: unset;
background-color: transparent;
&:hover label {
background-color: color.adjust($fg, $alpha: -0.84);
border-color: color.adjust($accent, $alpha: -0.8);
}
&:active label {
background-color: color.adjust($fg, $alpha: -0.8)
}
}
label {
transition: 200ms;
padding: 0 8px;
margin: 2px;
border-radius: $radius;
border: 1pt solid transparent;
}
.focused label {
color: $accent;
border-color: $accent;
}
}
.SysTray {
margin-right: 8px;
button {
padding: 0 4px;
}
}
.FocusedClient {
color: $accent;
}
.Media .Cover {
min-height: 1.2em;
min-width: 1.2em;
border-radius: $radius;
background-position: center;
background-size: contain;
}
.Battery label {
padding-left: 0;
margin-left: 0;
}
.AudioSlider {
* {
all: unset;
}
icon {
margin-right: .6em;
}
& {
margin: 0 1em;
}
trough {
background-color: color.adjust($fg, $alpha: -0.8);
border-radius: $radius;
}
highlight {
background-color: $accent;
min-height: .8em;
border-radius: $radius;
}
slider {
background-color: $fg;
border-radius: $radius;
min-height: 1em;
min-width: 1em;
margin: -.2em;
}
}
}
home-manager/modules/ags/widget/Bar.tsx
+37
View File
@@ -0,0 +1,37 @@
import { App } from "astal/gtk3"
import { Astal, Gtk, Gdk } from "astal/gtk3"
import Time from "./elements/Time"
import Wifi from "./elements/Wifi"
import Audio from "./elements/Audio"
import Media from "./elements/Media"
import SysTray from "./elements/SysTray"
import Workspaces from "./elements/Workspaces"
import BatteryLevel from "./elements/Battery"
export default function Bar(monitor: Gdk.Monitor) {
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
return <window
className="Bar"
gdkmonitor={monitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | LEFT | RIGHT}>
<centerbox>
<box hexpand halign={Gtk.Align.START}>
<Workspaces />
</box>
<box>
<Media />
</box>
<box hexpand halign={Gtk.Align.END} >
<SysTray />
<Wifi />
<Audio />
<BatteryLevel />
<Time />
</box>
</centerbox>
</window>
}
home-manager/modules/ags/widget/elements/Audio.tsx
+15
View File
@@ -0,0 +1,15 @@
import { bind } from "astal"
import Wp from "gi://AstalWp"
export default function Audio() {
const speaker = Wp.get_default()?.audio.defaultSpeaker!
return <box className="AudioSlider" css="min-width: 140px">
<icon icon={bind(speaker, "volumeIcon")} />
<slider
hexpand
onDragged={({ value }) => speaker.volume = value}
value={bind(speaker, "volume")}
/>
</box>
}
home-manager/modules/ags/widget/elements/Battery.tsx
+14
View File
@@ -0,0 +1,14 @@
import { bind } from "astal"
import Battery from "gi://AstalBattery"
export default function BatteryLevel() {
const bat = Battery.get_default()
return <box className="Battery"
visible={bind(bat, "isPresent")}>
<icon icon={bind(bat, "batteryIconName")} />
<label label={bind(bat, "percentage").as(p =>
`${Math.floor(p * 100)} %`
)} />
</box>
}
home-manager/modules/ags/widget/elements/Media.tsx
+28
View File
@@ -0,0 +1,28 @@
import { bind } from "astal"
import { Gtk } from "astal/gtk3"
import Mpris from "gi://AstalMpris"
export default function Media() {
const mpris = Mpris.get_default()
return <box className="Media">
{bind(mpris, "players").as(ps => ps[0] ? (
<box>
<box
className="Cover"
valign={Gtk.Align.CENTER}
css={bind(ps[0], "coverArt").as(cover =>
`background-image: url('${cover}');`
)}
/>
<label
label={bind(ps[0], "title").as(() =>
`${ps[0].title} - ${ps[0].artist}`
)}
/>
</box>
) : (
"Nothing Playing"
))}
</box>
}
home-manager/modules/ags/widget/elements/SysTray.tsx
+18
View File
@@ -0,0 +1,18 @@
import { bind } from "astal"
import Tray from "gi://AstalTray"
export default function SysTray() {
const tray = Tray.get_default()
return <box className="SysTray">
{bind(tray, "items").as(items => items.map(item => (
<menubutton
tooltipMarkup={bind(item, "tooltipMarkup")}
usePopover={false}
actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])}
menuModel={bind(item, "menu-model")}>
<icon gicon={bind(item, "gicon")} />
</menubutton>
)))}
</box>
}
home-manager/modules/ags/widget/elements/Time.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Variable, GLib } from "astal"
export default function Time({ format = "%H:%M - %A %e." }) {
const time = Variable<string>("").poll(1000, () =>
GLib.DateTime.new_now_local().format(format)!)
return <label
className="Time"
onDestroy={() => time.drop()}
label={time()}
/>
}
home-manager/modules/ags/widget/elements/Wifi.tsx
+17
View File
@@ -0,0 +1,17 @@
import { bind } from "astal"
import Network from "gi://AstalNetwork"
export default function Wifi() {
const network = Network.get_default()
const wifi = bind(network, "wifi")
return <box visible={wifi.as(Boolean)}>
{wifi.as(wifi => wifi && (
<icon
tooltipText={bind(wifi, "ssid").as(String)}
className="Wifi"
icon={bind(wifi, "iconName")}
/>
))}
</box>
}
home-manager/modules/ags/widget/elements/Workspaces.tsx
+21
View File
@@ -0,0 +1,21 @@
import { bind } from "astal"
import Hyprland from "gi://AstalHyprland"
export default function Workspaces() {
const hypr = Hyprland.get_default()
return <box className="Workspaces">
{bind(hypr, "workspaces").as(wss => wss
.filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
.sort((a, b) => a.id - b.id)
.map(ws => (
<button
className={bind(hypr, "focusedWorkspace").as(fw =>
ws === fw ? "focused" : "")}
onClicked={() => ws.focus()}>
{ws.id}
</button>
))
)}
</box>
}