prepare for multiple home-manager configs

home-manager/nathan/dotfiles/ags/README.md

@@ -0,0 +1,15 @@
+
+# Starter Config
+
+if suggestions don't work, first make sure
+you have TypeScript LSP working in your editor
+
+if you do not want typechecking only suggestions
+
+```json
+// tsconfig.json
+"checkJs": false
+```
+
+types are symlinked to:
+/home/nathan/.nix-profile/share/com.github.Aylur.ags/types

home-manager/nathan/dotfiles/ags/bluetooth.js

@@ -0,0 +1,34 @@
+const bluetooth = await Service.import("bluetooth")
+
+
+export function ConnectedList() {
+    return Widget.Box({
+        class_name: "btdevices",
+        setup: self => self.hook(bluetooth, self => {
+            self.children = bluetooth.connected_devices
+                .map(({ address, icon_name, name }) => Widget.EventBox({
+                    child: Widget.Icon(icon_name + '-symbolic'),
+                    tooltip_text: name,
+		    on_primary_click: () => {
+			bluetooth.getDevice(address).setConnection(false)
+		    },
+                }));
+    
+            self.visible = bluetooth.connected_devices.length > 0;
+        }, 'notify::connected-devices'),
+    })
+}
+
+
+export default function Bluetooth() {
+
+
+
+    return Widget.EventBox({
+        tooltip_text: bluetooth.bind('enabled').as(on => on ? 'Enabled' : 'Disabled'),
+        child: Widget.Icon({
+            icon: bluetooth.bind('enabled').as(on =>
+                `bluetooth-${on ? 'active' : 'disabled'}-symbolic`),
+        })
+    })
+}

home-manager/nathan/dotfiles/ags/clock.js

@@ -0,0 +1,14 @@
+
+
+const date = Variable("", {
+    poll: [1000, 'date "+%H:%M %b %e."'],
+})
+
+function Clock() {
+    return Widget.Label({
+        class_name: "clock",
+        label: date.bind(),
+    })
+}
+
+export default Clock

home-manager/nathan/dotfiles/ags/config.js

@@ -0,0 +1,132 @@
+
+const hyprland = await Service.import("hyprland")
+//const systemtray = await Service.import("systemtray")
+
+import Clock from './clock.js'
+import Launcher from './launcher.js'
+import Media from './media.js'
+import Notification from './notif.js'
+import Power from './power.js'
+import Workspaces from './workspaces.js'
+import Settings, {SettingsWindow} from './settings.js'
+import { ConnectedList } from './bluetooth.js'
+
+import { NotificationPopups } from './notification.js'
+
+
+// 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
+
+
+
+//////////////////////////////////////////////////////////////
+// layout of the bar
+function Left() {
+    return Widget.Box({
+        spacing: 8,
+        margin_bottom: 5,
+        children: [
+            Launcher(),
+            Workspaces(),
+        ],
+    })
+}
+
+function Center() {
+    return Widget.Box({
+        spacing: 8,
+        margin_bottom: 5,
+        children: [
+            Media(),
+            Clock(),
+            Notification(),
+        ],
+    })
+}
+
+function Right() {
+    return Widget.Box({
+        hpack: "end",
+        spacing: 8,
+        margin_bottom: 5,
+        children: [
+            ConnectedList(),
+            Settings(),
+            Power(),
+        ],
+    })
+}
+
+///////////////////////////////////////////////////////////
+//windows
+
+function Bar(monitor = 0) {
+    return Widget.Window({
+        name: `bar-${monitor}`, // name has to be unique
+        class_name: "bar",
+        monitor,
+        anchor: ["top", "left", "right"],
+        height_request: 32,
+        vexpand: false,
+        exclusivity: "exclusive",
+        child: Widget.CenterBox({
+            start_widget: Left(),
+            center_widget: Center(),
+            end_widget: Right(),
+        }),
+    })
+}
+
+
+
+function pickMonitor() {
+
+    let n = 0
+
+    for(let i = 0; i < hyprland.monitors.length; i++) {
+        print(hyprland.getMonitor(i).name)
+        if(hyprland.getMonitor(i).name == 'eDP-1')
+            n = i
+            break
+    }
+
+    return n;
+}
+
+////////////////////////////////////////////////////////////
+//App config
+
+let m = 0
+
+App.config({
+    style: "/home/nathan/.cache/wal/colors-ags.css",
+    windows: [
+        Bar(m),
+        SettingsWindow(m),
+        NotificationPopups(m)
+        // you can call it, for each monitor
+        // Bar(0),
+        // Bar(1)
+    ],
+})
+
+App.toggleWindow(App.windows[1].name)
+
+// Utils.timeout(100, () => Utils.notify({
+//     summary: "Notification Popup Example",
+//     iconName: "info-symbolic",
+//     body: "Lorem ipsum dolor sit amet, qui minim labore adipisicing "
+//         + "minim sint cillum sint consectetur cupidatat.",
+//     actions: {
+//         "Cool": () => print("pressed Cool"),
+//     },
+// }))
+
+Utils.monitorFile(`/home/nathan/.cache/wal`, () => {
+    const css = `/home/nathan/.cache/wal/colors-ags.css`
+    App.resetCss()
+    App.applyCss(css)
+})
+
+export { }

home-manager/nathan/dotfiles/ags/media.js

@@ -0,0 +1,141 @@
+const mpris = await Service.import("mpris")
+
+
+export default function Media() {
+    const track = 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.EventBox({
+        class_name: "media",
+        on_primary_click: () => mpris.getPlayer("")?.playPause(),
+        on_scroll_up: () => mpris.getPlayer("")?.next(),
+        on_scroll_down: () => mpris.getPlayer("")?.previous(),
+        child: Widget.Icon({icon: 'emblem-music-symbolic'}),
+    })
+}
+
+function PlayerImg(player) {
+	return Widget.Box({
+	    hpack: "start",
+            width_request: 80,
+            height_request: 80,
+            css: player.bind("track_cover_url").transform(p => `
+                background-image: url('${p || player.cover_path || '/home/nathan/Pictures/symbols/audio.png'}');
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+            `),
+        })
+
+}
+
+
+function PlayerGUI(player) {
+
+
+    return Widget.Box({
+        class_name: "playerbox",
+        height_request: 200,
+        vexpand: false,
+        vertical: true,
+        children: [
+            Widget.Box({
+                vertical: false,
+                margin: 15,
+                hpack: "start",
+                spacing: 20,
+                children: [
+                    PlayerImg(player),
+                    Widget.Box({
+                        vertical: true,
+                        children: [
+                            Widget.Label({
+                                hpack: "start",
+                                max_width_chars: 30,
+                                truncate: "end",
+                                label: player.bind('track-title').as(t => t)
+                            }),
+                            Widget.Label({
+                                hpack: "start",
+                                max_width_chars: 30,
+                                truncate: "end",
+                                label: player.bind("track_artists").transform(a => a.join(", ")),
+                                wrap: true,
+                            }),
+                            Widget.Label({
+                                hpack: "start",
+                                max_width_chars: 30,
+                                truncate: "end",
+                                label: player.bind('track-album').as(t => t)
+                            }),
+                        ]
+                    })
+                ],
+                
+            }),
+
+            Widget.Slider({
+                class_name: "position",
+                draw_value: false,
+                on_change: ({ value }) => player.position = value * player.length,
+                visible: player.bind("length").as(l => l > 0),
+                setup: self => {
+                    function update() {
+                        const value = player.position / player.length
+                        self.value = value > 0 ? value : 0
+                    }
+                    self.hook(player, update)
+                    self.hook(player, update, "position")
+                    self.poll(1000, update)
+                },
+            }),
+
+            Widget.Box({
+                vertical: false,
+                hpack: "center",
+                spacing: 20,
+                children: [
+                    Widget.Button({
+                        child: Widget.Icon({ icon: 'media-skip-backward-symbolic'}),
+                        on_primary_click: () => player.previous()
+                    }),
+                    Widget.Button({
+                        child: Widget.Icon({ icon: player.bind("play_back_status").transform(s => {
+                                switch (s) {
+                                    case "Playing": return 'media-playback-pause-symbolic'
+                                    case "Paused":
+                                    case "Stopped": return 'media-playback-start-symbolic'
+                                }
+                            }),
+                        }),
+                        on_primary_click: () => player.playPause(),
+                    }),
+                    Widget.Button({
+                        child: Widget.Icon({ icon: 'media-skip-forward-symbolic'}),
+                        on_primary_click: () => player.next()
+                    })
+                ]
+            })
+        ],
+        setup: self => {
+            
+        },
+    })
+}
+
+export function Players() {
+
+    const plrs = mpris.bind('players')
+    .as(p => p.map((v) => PlayerGUI(v)))
+
+    return Widget.Box({
+        vertical: true,
+        children: plrs,
+    })
+}

home-manager/nathan/dotfiles/ags/notif.js

@@ -0,0 +1,22 @@
+const notifications = await Service.import("notifications")
+
+
+
+// we don't need dunst or any other notification daemon
+// because the Notifications module is a notification daemon itself
+export default function Notification() {
+    const popups = notifications.bind("popups")
+    return Widget.EventBox({
+        class_name: "notificationbutton",
+        visible: true,
+        on_primary_click: () => {},
+        child: Widget.Icon({
+            icon: "preferences-system-notifications-symbolic",
+        }),
+            
+    })
+}
+
+// Widget.Label({
+//     label: popups.as(p => p[0]?.summary || ""),
+// }),

home-manager/nathan/dotfiles/ags/notification.js

@@ -0,0 +1,131 @@
+const notifications = await Service.import("notifications")
+
+/** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */
+function NotificationIcon({ app_entry, app_icon, image }) {
+    if (image) {
+        return Widget.Box({
+            css: `background-image: url("${image}");`
+                + "background-size: contain;"
+                + "background-repeat: no-repeat;"
+                + "background-position: center;",
+        })
+    }
+
+    let icon = "dialog-information-symbolic"
+    if (Utils.lookUpIcon(app_icon))
+        icon = app_icon
+
+    if (app_entry && Utils.lookUpIcon(app_entry))
+        icon = app_entry
+
+    return Widget.Box({
+        child: Widget.Icon(icon),
+    })
+}
+
+/** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */
+function Notification(n) {
+    const icon = Widget.Box({
+        vpack: "start",
+        class_name: "icon",
+        child: NotificationIcon(n),
+    })
+
+    const title = Widget.Label({
+        class_name: "title",
+        xalign: 0,
+        justification: "left",
+        hexpand: true,
+        max_width_chars: 24,
+        truncate: "end",
+        wrap: true,
+        label: n.summary,
+        use_markup: true,
+    })
+
+    const body = Widget.Label({
+        class_name: "body",
+        hexpand: true,
+        use_markup: true,
+        xalign: 0,
+        justification: "left",
+        label: n.body,
+        wrap: true,
+    })
+
+    const actions = Widget.Box({
+        class_name: "actions",
+        children: n.actions.map(({ id, label }) => Widget.Button({
+            class_name: "action-button",
+            on_clicked: () => {
+                n.invoke(id)
+                n.dismiss()
+            },
+            hexpand: true,
+            child: Widget.Label(label),
+        })),
+    })
+
+    return Widget.EventBox(
+        {
+            attribute: { id: n.id },
+            on_primary_click: n.dismiss,
+        },
+        Widget.Box(
+            {
+                class_name: `notification ${n.urgency}`,
+                vertical: true,
+            },
+            Widget.Box([
+                icon,
+                Widget.Box(
+                    { vertical: true },
+                    title,
+                    body,
+                ),
+            ]),
+            actions,
+        ),
+    )
+}
+
+export function NotificationPopups(monitor = 0) {
+    const list = Widget.Box({
+        vertical: true,
+        children: notifications.popups.map(Notification),
+    })
+
+    function onNotified(_, /** @type {number} */ id) {
+        const n = notifications.getNotification(id)
+        if (n)
+            list.children = [Notification(n), ...list.children]
+    }
+
+    function onDismissed(_, /** @type {number} */ id) {
+        list.children.find(n => n.attribute.id === id)?.destroy()
+    }
+
+    list.hook(notifications, onNotified, "notified")
+        .hook(notifications, onDismissed, "dismissed")
+
+    return Widget.Window({
+        monitor,
+        name: `notifications${monitor}`,
+        class_name: "notification-popups",
+        anchor: ["top", "right"],
+        layer: "overlay",
+        child: Widget.Box({
+            css: "min-width: 2px; min-height: 2px;",
+            class_name: "notifications",
+            vertical: true,
+            child: list,
+
+            /** this is a simple one liner that could be used instead of
+                hooking into the 'notified' and 'dismissed' signals.
+                but its not very optimized becuase it will recreate
+                the whole list everytime a notification is added or dismissed */
+            // children: notifications.bind('popups')
+            //     .as(popups => popups.map(Notification))
+        }),
+    })
+}

home-manager/nathan/dotfiles/ags/power.js

@@ -0,0 +1,44 @@
+
+
+
+function Power() {
+
+
+    return Widget.Box({
+        vertical: false,
+        spacing: 8,
+        children: [
+            Widget.EventBox({
+                child: Widget.Icon({icon: 'system-reboot-symbolic'}),
+                margin_right: 10,
+                class_name: 'restart',
+                tooltip_text: 'restart',
+                on_primary_click: () => {App.Quit(); Utils.execAsync('reboot')},
+            }),
+            Widget.EventBox({
+                child: Widget.Icon({icon: 'system-log-out-symbolic'}),
+                margin_right: 10,
+                class_name: 'logout',
+                tooltip_text: 'log out',
+                on_primary_click: () => {App.Quit(); Utils.execAsync('loginctl kill-session self')},
+            }),
+            Widget.EventBox({
+                child: Widget.Icon({icon: 'system-lock-screen-symbolic'}),
+                margin_right: 10,
+                class_name: 'lockscreen',
+                tooltip_text: 'lock screen',
+                on_primary_click: () => {Utils.exec('swaylock')},
+            }),
+            Widget.EventBox({
+                child: Widget.Icon({icon: 'system-shutdown-symbolic'}),
+                margin_right: 10,
+                class_name: 'poweroff',
+                tooltip_text: 'shutdown',
+                on_primary_click: () => {App.Quit(); Utils.execAsync('shutdown now')},
+            })
+        ],
+    })
+}
+
+
+export default Power

home-manager/nathan/dotfiles/ags/settings.js

@@ -0,0 +1,125 @@
+const audio = await Service.import("audio")
+const battery = await Service.import("battery")
+const mpris = await Service.import("mpris")
+
+import Bluetooth from "./bluetooth.js"
+import WifiIndicator from "./wifi.js"
+import { Players } from "./media.js"
+
+export function Volume() {
+    const icons = {
+        101: "high",
+        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`
+    }
+
+
+    return Widget.EventBox({
+        tooltip_text: '',
+        setup: (self) => self.hook(audio.speaker, () => {
+            self.tooltip_text = `Volume: ${(100 * audio.speaker.volume).toFixed(0)}%`
+        }),
+        child: Widget.Icon({
+            class_name: "volume",
+            icon: Utils.watch(getIcon(), audio.speaker, getIcon),
+        })
+    })
+
+}
+
+// const slider = Widget.Slider({
+//     hexpand: true,
+//     draw_value: false,
+//     inverted: true,
+//     on_change: ({ value }) => audio.speaker.volume = value,
+//     setup: (self) => self.hook(audio.speaker, () => {
+//         self.value = audio.speaker.volume || 0
+//     }),
+// })
+
+
+export function BatteryLabel() {
+    const value = battery.bind("percent").as(p => p > 0 ? p / 100 : 0)
+    const icon = battery.bind("percent").as(p => 
+	    `battery-${p > 90 ? "full" : p > 70 ? "good" : p > 50 ? "medium" : p > 30 ? "low" : p > 10 ? "caution" : "empty"}-symbolic`)
+
+    return Widget.Box({
+        class_name: "battery",
+        visible: battery.bind("available"),
+        child: Widget.EventBox({
+            child: Widget.Icon({ icon }), 
+            tooltip_text: value.as(p => `Battery: ${(p * 100).toFixed(0)}%`)
+        }),
+    })
+}
+
+function Panel() {
+  return Widget.Box({
+	  height_request: 200,
+	  css: 'background: black;',
+  })
+}
+
+export function SettingsWindow(monitor = 0) {
+    return Widget.Window({
+        monitor,
+        name: `Settings-${monitor}`,
+        anchor: ["top", "bottom", "right"],
+        margins: [50, 0, 10, 0],
+        width_request: 400,
+        exclusivity: "ignore",
+        layer: "top",
+        class_name: "SettingsWindow",
+        child: Widget.Box({
+            class_name: "settings_window",
+            child: Widget.Scrollable({
+                vscroll: "always",
+                hscroll: "never",
+                hexpand: true,
+                vexpand: true,
+                margin: 20,
+                child: Widget.Box({
+                    vertical: true,
+                    children: [
+			Panel(),
+                        Players()
+                    ]
+                }),
+            }),
+        }),
+    })
+}
+
+
+export default function Settings() {
+
+
+    return Widget.Button({
+        tooltip_text: 'Settings',
+        attribute: false,
+        margin_right: 8,
+        child: Widget.Box({
+            spacing: 8,
+            children: [
+                Bluetooth(),
+                WifiIndicator(),
+                BatteryLabel(),
+                Volume(),
+            ],
+        }),
+        on_clicked: (self) => {
+            self.attribute = !self.attribute
+            
+            App.toggleWindow(App.windows[1].name)
+        },
+    })
+}

home-manager/nathan/dotfiles/ags/style.css

@@ -0,0 +1,174 @@
+
+
+
+
+window.bar {
+    background-color: rgb(36, 40, 59);
+    color: rgb(200, 200, 200);
+    
+}
+
+window.win {
+    background-color: transparent;
+    color: rgb(200, 200, 200);
+}
+
+.booox {
+    color: white;
+    background-color: white;
+
+}
+
+.playerbox {
+    background-color: rgb(73, 81, 121);
+    color:rgb(73, 81, 121);
+    border: 3px solid black;
+    border-radius: 15px;
+}
+
+.launcher {
+    color: aqua;
+    background: none;
+    border: none;
+    
+}
+
+box {
+    color: aqua;
+}
+
+
+Window.SettingsWindow {
+    background-color: black;
+    color: black;
+}
+.settings_window {
+    background-color: rgb(36, 40, 59);
+    color: teal;
+    border-radius: 15px;
+}
+
+.focused {
+    color: aqua;
+}
+
+.other {
+    color: teal;
+}
+
+.media {
+    color: aqua;
+}
+
+.media:active {
+    background-color: aqua;
+}
+
+button {
+    min-width: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    background: none;
+    border: none;
+    padding: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
+    color: aqua;
+}
+
+button:active {
+    background-color: aqua;
+}
+
+button:hover {
+    border-bottom: 3px solid teal;
+}
+
+label {
+    font-weight: bold;
+}
+
+.workspaces button.focused {
+    border-bottom: 3px solid aqua;
+}
+
+.client-title {
+    color: rgb(200, 200, 200);
+}
+
+.clock {
+    color: rgb(200, 200, 200);
+}
+
+.notification {
+    color: yellow;
+}
+
+levelbar block,
+highlight {
+    min-height: 4px;
+}
+
+/************************************/
+
+window.notification-popups box.notifications {
+    padding: .5em;
+}
+
+.icon {
+    min-width: 68px;
+    min-height: 68px;
+    margin-right: 1em;
+}
+
+.icon image {
+    font-size: 58px;
+    /* to center the icon */
+    margin: 5px;
+    color: yellow;
+}
+
+.icon box {
+    min-width: 68px;
+    min-height: 68px;
+    border-radius: 7px;
+}
+
+.notificationbutton {
+    color: teal;
+}
+
+.notification {
+    min-width: 350px;
+    border-radius: 11px;
+    padding: 1em;
+    margin: .5em;
+    border: 1px solid blue;
+    background-color: rgb(36, 40, 59);
+}
+
+.notification.critical {
+    border: 1px solid lightcoral;
+}
+
+.title {
+    color: black;
+    font-size: 1.4em;
+}
+
+.body {
+    color: red;
+}
+
+.actions .action-button {
+    margin: 0 .4em;
+    margin-top: .8em;
+}
+
+.actions .action-button:first-child {
+    margin-left: 0;
+}
+
+.actions .action-button:last-child {
+    margin-right: 0;
+}

home-manager/nathan/dotfiles/ags/wifi.js

@@ -0,0 +1,30 @@
+const network = await Service.import('network')
+
+export default function WifiIndicator()  {
+    return Widget.Box({
+        child: Widget.EventBox({
+            child: Widget.Icon({
+                icon: 'network-wireless-disconnected-symbolic',
+            }),
+
+            setup: self => self.hook(network.wifi, () => {
+                self.child.icon = network.wifi.icon_name == 'network-wireless-disabled-symbolic' ? 'network-wireless-disconnected-symbolic' : network.wifi.icon_name
+                self.tooltip_text = network.wifi.ssid ? network.wifi.ssid : network.wifi.internet
+            }),
+
+            tooltip_text: 'disconnected',
+        }),
+    })
+}
+
+// const WiredIndicator = () => Widget.Icon({
+//     icon: network.wired.bind('icon_name'),
+// })
+
+// const NetworkIndicator = () => Widget.Stack({
+//     children: {
+//         wifi: WifiIndicator(),
+//         wired: WiredIndicator(),
+//     },
+//     shown: network.bind('primary').as(p => p || 'wifi'),
+// })

home-manager/nathan/dotfiles/ags/workspaces.js

@@ -0,0 +1,37 @@
+const hyprland = await Service.import("hyprland")
+
+
+function ClientTitle() {
+    return Widget.Label({
+        class_name: "client-title",
+        max_width_chars: 30,
+        truncate: "end",
+        label: hyprland.active.client.bind("title"),
+    })
+}
+
+
+function Workspaces() {
+    const activeId = hyprland.active.workspace.bind("id")
+    const workspaces = hyprland.bind("workspaces")
+        .as(ws => ws.map(({ id }) => id > 0 ? Widget.Button({
+            on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
+            child: Widget.Label(`${id}`),
+            class_name: activeId.as(i => `${i === id ? "focused" : "other"}`),
+            margin_left: 10,
+        }) : null
+	).sort((a, b) => { return a && b ? Number(a.child.label) - Number(b.child.label) : a ? -1 : 1 }))
+
+    return Widget.CenterBox({
+        
+        spacing: 8,
+        start_widget: Widget.Box({
+            class_name: "workspaces", 
+            spacing: 0, 
+            children: workspaces
+        }),
+        end_widget: ClientTitle(),
+    })
+}
+
+export default Workspaces