Initial commit

.config/ags/app.ts

@@ -0,0 +1,11 @@
+import { App, Widget } from "astal/gtk3"
+import Calendar from "./widget/Calendar"
+import Sidebar from "./widget/Sidebar"
+
+App.start({
+    css: "./style.css",
+    main() {
+        Sidebar();
+        Calendar();
+    }
+})

.config/ags/config.js

@@ -0,0 +1,366 @@
+//  ____  _     _      _                
+// / ___|(_) __| | ___| |__   __ _ _ __ 
+// \___ \| |/ _` |/ _ \ '_ \ / _` | '__|
+//  ___) | | (_| |  __/ |_) | (_| | |   
+// |____/|_|\__,_|\___|_.__/ \__,_|_|   
+//                                      
+
+import GLib from "gi://GLib?version=2.0"
+
+// Set App icons
+App.addIcons(`${App.configDir}/assets`)
+
+// Get current username to generate absolute paths
+const username = GLib.get_user_name()
+const divide = ([total, free]) => free / total
+
+// Get current time
+const date = Variable("", {
+    poll: [1000, 'date "+%H:%M:%S %b %e."'],
+})
+
+// Get CPU information
+const cpu = Variable(0, {
+    poll: [2000, 'top -b -n 1', out => divide([100, out.split('\n')
+        .find(line => line.includes('Cpu(s)'))
+        .split(/\s+/)[1]
+        .replace(',', '.')])],
+})
+
+const cpuval = Variable(0, {
+    poll: [2000, 'top -b -n 1', out => Math.round(divide([100, out.split('\n')
+        .find(line => line.includes('Cpu(s)'))
+        .split(/\s+/)[1]
+        .replace(',', '.')])*100).toString() + "%"],
+})
+
+// Get RAM information
+const ram = Variable(0, {
+    poll: [2000, 'free', out => divide(out.split('\n')
+        .find(line => line.includes('Mem:'))
+        .split(/\s+/)
+        .splice(1, 2))],
+})
+
+const ramval = Variable(0, {
+    poll: [2000, 'free', out => Math.round(divide(out.split('\n')
+        .find(line => line.includes('Mem:'))
+        .split(/\s+/)
+        .splice(1, 2))*100).toString() + "%"],
+})
+
+// Calendar Widget
+const cld = Widget.Calendar({
+    showDayNames: true,
+    showDetails: false,
+    showHeading: true,
+    showWeekNumbers: true,
+    className:"cld"
+})
+
+// ML4W Welcome Button
+const ml4wWelcomeBox = Widget.Box({
+    vertical: true,
+    children: [
+        Widget.Button({
+            className:"ml4wwelcomeicon",
+            onClicked: () => {
+                print(':: Start Welcome App')
+                Utils.subprocess('com.ml4w.welcome')
+                App.closeWindow("sidebar")
+            }
+        }),
+        Widget.Button({
+            className: "btn",
+            child: Widget.Label('Welcome App'),
+            onClicked: () => {
+                print(':: Start Welcome App')
+                Utils.subprocess('com.ml4w.welcome')
+                App.closeWindow("sidebar")
+            }
+        })
+    ]
+})
+
+// ML4W Dotfiles Settings Button
+const ml4wSettingsBox = Widget.Box({
+    vertical: true,
+    children: [
+        Widget.Button({
+            className:"ml4wsettingsicon",
+            onClicked: () => {
+                print(':: Start Settings App')
+                Utils.subprocess('com.ml4w.dotfilessettings')
+                App.closeWindow("sidebar")
+            }
+        }),
+        Widget.Button({
+            className: "btn",
+            child: Widget.Label('Settings App'),
+            onClicked: () => {
+                print(':: Start Settings App')
+                Utils.subprocess('com.ml4w.dotfilessettings')
+                App.closeWindow("sidebar")
+            }
+        })
+    ]
+})
+
+// ML4W Hyprland Settings Button
+const ml4wHyprlandBox = Widget.Box({
+    vertical: true,
+    children: [
+        Widget.Button({
+            className:"ml4whyprlandicon",
+            onClicked: () => { 
+                print(':: Start Hyprland App')
+                Utils.subprocess('com.ml4w.hyprland.settings')
+                App.closeWindow("sidebar")
+            }
+        }),
+        Widget.Button({
+            className: "btn",
+            child: Widget.Label('Hyprland App'),
+            onClicked: () => { 
+                print(':: Start Hyprland App')
+                Utils.subprocess('com.ml4w.hyprland.settings')
+                App.closeWindow("sidebar")
+            }
+        })
+    ]
+})
+
+// CPU Widget
+const cpuProgress = Widget.CircularProgress({
+    className: "circularprocess",
+    value: cpu.bind(),
+    child: Widget.Label({
+        label:cpuval.bind()
+    })
+})
+
+const cpuProgressBox = Widget.Box({
+    vertical: true,
+    children: [
+        cpuProgress,
+        Widget.Label({
+            className: "circularlabel",
+            label: "CPU"
+        })
+    ]
+})
+
+// RAM Widget
+const ramProgress = Widget.CircularProgress({
+    className: "circularprocess",
+    value: ram.bind(),
+    child: Widget.Label({
+        label:ramval.bind()
+    })
+})
+
+const ramProgressBox = Widget.Box({
+    vertical: true,
+    children: [
+        ramProgress,
+        Widget.Label({
+            className: "circularlabel",
+            label: "RAM"
+        })
+    ]
+})
+
+const audio = await Service.import('audio')
+
+/** @param {'speaker' | 'microphone'} type */
+const VolumeSlider = (type = 'speaker') => Widget.Slider({
+    hexpand: true,
+    drawValue: false,
+    onChange: ({ value }) => audio[type].volume = value,
+    value: audio[type].bind('volume'),
+})
+
+const speakerSlider = VolumeSlider('speaker')
+const micSlider = VolumeSlider('microphone')
+
+const speakerBox = Widget.Box({
+    vertical: true,
+    spacing: 3,
+    children:[
+        Widget.Label({
+            className: "sliderlabel",
+            label: "Speaker",
+            xalign: 0
+        }),        
+        speakerSlider
+    ]
+})
+
+const micBox = Widget.Box({
+    vertical: true,
+    spacing: 3,
+    children:[
+        Widget.Label({
+            className: "sliderlabel",
+            label: "Mic",
+            xalign: 0
+        }),        
+        micSlider
+    ]
+})
+
+const btnWallpaper = Widget.Button({
+    className: "midbtn",
+    child: Widget.Label('Wallpapers'),
+    onClicked: () => { 
+        print(':: Start Waypaper')
+        Utils.subprocess('waypaper')
+        App.closeWindow("sidebar")
+    }
+})
+
+const btnWallpaperEffects = Widget.Button({
+    className: "midbtn",
+    child: Widget.Label('Effects'),
+    onClicked: () => { 
+        print(':: Start Wallpaper Effects')
+        Utils.subprocess(App.configDir + '/scripts/run_wallpapereffects.sh')
+        App.closeWindow("sidebar")
+    }
+})
+
+const btnWaybarThemes = Widget.Button({
+    className: "midbtn",
+    child: Widget.Label('Status Bar Themes'),
+    onClicked: () => { 
+        print(':: Start Waybar Themes')
+        Utils.subprocess(App.configDir + '/scripts/run_themeswitcher.sh')
+        App.closeWindow("sidebar")
+    }
+})
+
+// Sidebar Box
+const Sidebar = Widget.Box({
+    spacing: 16,
+    vertical: true,
+    className: "sidebar",
+    children: [
+        Widget.Box({
+            className: "group",
+            homogeneous: true,
+            children:[
+                Widget.Box({
+                    className: "row",
+                    homogeneous: true,
+                    children:[ml4wWelcomeBox,ml4wSettingsBox,ml4wHyprlandBox]
+                }),
+            ]
+        }),
+        Widget.Box({
+            className: "group",
+            homogeneous: false,
+            vertical: true,
+            spacing:10,
+            children:[
+                Widget.Box({
+                    className: "rowsmall",
+                    spacing:10,
+                    homogeneous: true,
+                    children:[btnWallpaper, btnWallpaperEffects]
+                }),
+                Widget.Box({
+                    homogeneous: true,
+                    children:[btnWaybarThemes]
+                }),
+            ]
+        }),
+        Widget.Box({
+            className: "group",
+            homogeneous: true,
+            children:[
+                Widget.Box({
+                    className: "row",
+                    homogeneous: true,
+                    children:[cpuProgressBox, ramProgressBox]
+                }),
+            ]
+        }),
+        Widget.Box({
+            className: "group",
+            homogeneous: true,
+            vertical: true,
+            spacing:10,
+            children:[speakerBox, micBox]
+        }),
+    ]
+})
+
+// Sidebar Box
+const Calendar = Widget.Box({
+    spacing: 8,
+    vertical: true,
+    className: "calendar",
+    children: [
+        Widget.Box({
+            className: "group",
+            homogeneous: true,
+            children:[cld]
+        })
+    ]
+})
+
+// Sidebar Window
+const SideBarWindow = Widget.Window({
+    name: 'sidebar',
+    className:"window",
+    anchor: ['top', 'right'],
+    // Start with hidden window, toggle with ags -t sidebar
+    // visible: true,
+    visible: false,
+    child: Widget.Box({
+        css: 'padding: 1px;',
+        child: Sidebar,
+    })
+})
+
+// Calendar Window
+const CalendarWindow = Widget.Window({
+    name: 'calendar',
+    className:"window",
+    anchor: ['top', 'right'],
+    // Start with hidden window, toggle with ags -t sidebar
+    // visible: true,
+    visible: false,
+    child: Widget.Box({
+        css: 'padding: 1px;',
+        child: Calendar,
+    })
+})
+
+// App Configuration
+let config = {
+    style: "./style.css",
+    windows: [
+        SideBarWindow,
+        CalendarWindow
+    ],
+    openWindowDelay: {
+        'sidebar':100,
+        'calendar':100,
+    },
+    closeWindowDelay: {
+        'sidebar': 50,
+        'calendar':50,
+    },    
+}
+
+App.connect("window-toggled", (_, name, visible) => {
+    if (visible && name == 'calendar') {
+        const d = new Date();
+        cld.select_day(d.getDate()) 
+        cld.select_month(d.getMonth(),d.getFullYear()) 
+    }
+})
+
+// Run AGS
+App.config(config)

.config/ags/env.d.ts

@@ -0,0 +1,21 @@
+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
+}

.config/ags/scripts/run_themeswitcher.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+$HOME/.config/waybar/themeswitcher.sh

.config/ags/scripts/run_wallpapereffects.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+$HOME/.config/hypr/scripts/wallpaper-effects.sh

.config/ags/style.css

@@ -0,0 +1,144 @@
+@import url('../../.cache/wal/colors-waybar.css');
+
+* {
+    all:unset;
+    font-size: 14px;
+    font-family: "Fira Sans", sans-serif;
+    font-weight: normal;
+}
+
+.calendar {
+    background: #222222;
+    padding: 12px;
+    margin:14px;
+    border-radius: 12px;
+    font-weight: bold;
+    border: 3px solid @color11;
+    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.8);
+    padding:20px;
+    min-width:320px;
+}
+
+calendar:selected {
+    background-color:@color11;
+    padding:0px;
+}
+
+.sidebar {
+    background: #222222;
+    padding: 12px;
+    margin:14px;
+    border-radius: 12px;
+    font-weight: bold;
+    border: 3px solid @color11;
+    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.8);
+    padding:20px;
+}
+
+.group {
+    padding:16px;
+    background-color: rgba(116, 116, 116, 0.1);
+    border-radius: 20px;
+}
+
+.ml4wwelcomeicon {
+    background:url("assets/ml4w-welcome.png");
+    background-size:50px;
+    background-repeat: no-repeat;
+    background-position: top;
+    padding: 40px 50px 20px 50px;
+}
+
+.ml4wsettingsicon {
+    background:url("assets/ml4w-dotfiles-settings.png");
+    background-size:50px;
+    background-repeat: no-repeat;
+    background-position: top;
+    padding: 40px 50px 20px 50px;
+}
+
+.ml4whyprlandicon {
+    background:url("assets/ml4w-hyprland-settings.png");
+    background-size:50px;
+    background-repeat: no-repeat;
+    background-position: top;
+    padding: 40px 50px 20px 50px;
+}
+
+.midbtn {
+    background-color: @color11;
+    font-size: 12px;
+    padding:10px;
+    border-radius: 20px;
+}
+
+.AudioSlider {
+    background-color:@color11;
+    border-radius:12px;
+    margin-bottom:10px;
+}
+
+.AudioSlider contents {
+    min-height: 20px;
+    background-color:@color15;
+    border-radius:12px;
+}
+
+.AudioSlider value {
+    min-height: 20px;
+    background-color: #222222;
+}
+
+.AudioSlider slider {
+    min-height: 20px;
+    background-color:@color15;
+    border-radius:12px;
+}
+
+.AudioSlider highlight {
+    min-height:20px;
+    background-color:@color11;
+    border-radius:12px;
+    outline-width:3px;
+}
+
+.AudioSlider fill {
+    min-height:20px;
+    background-color:@color11;
+    border-radius:12px;
+}
+
+.MicrophoneSlider {
+    background-color:@color11;
+    border-radius:12px;
+}
+
+.MicrophoneSlider contents {
+    min-height: 20px;
+    background-color:@color15;
+    border-radius:12px;
+}
+
+.MicrophoneSlider value {
+    min-height: 20px;
+    background-color: #222222;
+}
+
+.MicrophoneSlider slider {
+    min-height: 20px;
+    background-color:@color15;
+    border-radius:12px;
+}
+
+.MicrophoneSlider highlight {
+    min-height:20px;
+    background-color:@color11;
+    border-radius:12px;
+    outline-width:3px;
+}
+
+.MicrophoneSlider fill {
+    min-height:20px;
+    background-color:@color11;
+    border-radius:12px;
+}

.config/ags/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "strict": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "Bundler",
+        // "checkJs": true,
+        // "allowJs": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "/usr/share/astal/gjs/gtk3",
+        "paths": {
+            "astal": [
+                "/usr/share/astal/gjs"
+            ],
+            "astal/*": [
+                "/usr/share/astal/gjs/*"
+            ]
+        },
+    }
+}

.config/ags/widget/Bar.tsx

@@ -0,0 +1,29 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3"
+import { Variable } from "astal"
+
+const time = Variable("").poll(1000, "date")
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    return <window
+        className="Bar"
+        gdkmonitor={gdkmonitor}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+        anchor={Astal.WindowAnchor.TOP
+            | Astal.WindowAnchor.LEFT
+            | Astal.WindowAnchor.RIGHT}
+        application={App}>
+        <centerbox>
+            <button
+                onClicked="echo hello"
+                halign={Gtk.Align.CENTER} >
+                Welcome to AGS!
+            </button>
+            <box />
+            <button
+                onClick={() => print("hello")}
+                halign={Gtk.Align.CENTER} >
+                <label label={time()} />
+            </button>
+        </centerbox>
+    </window>
+}

.config/ags/widget/Brightness.tsx

@@ -0,0 +1,72 @@
+// Thanks to https://gitlab.com/filippoaceto/
+import GObject, { register, property } from "astal/gobject"
+import { monitorFile, readFileAsync } from "astal/file"
+import { exec, execAsync } from "astal/process"
+
+const get = (args: string) => Number(exec(`brightnessctl ${args}`))
+const screen = exec(`bash -c "ls -w1 /sys/class/backlight | head -1"`)
+const kbd = exec(`bash -c "ls -w1 /sys/class/leds | head -1"`)
+
+@register({ GTypeName: "Brightness" })
+export default class Brightness extends GObject.Object {
+    static instance: Brightness
+    static get_default() {
+        if (!this.instance)
+            this.instance = new Brightness()
+
+        return this.instance
+    }
+
+    #kbdMax = get(`--device ${kbd} max`)
+    #kbd = get(`--device ${kbd} get`)
+    #screenMax = get("max")
+    #screen = get("get") / (get("max") || 1)
+
+    @property(Number)
+    get kbd() { return this.#kbd }
+
+    set kbd(value) {
+        if (value < 0 || value > this.#kbdMax)
+            return
+        execAsync(`brightnessctl -d ${kbd} s ${value} -q`).then(() => {
+            this.#kbd = value
+            this.notify("kbd")
+        })
+    }
+
+    @property(Number)
+    get screen() { return this.#screen }
+
+    set screen(percent) {
+        if (percent < 0)
+            percent = 0
+
+        if (percent > 1)
+            percent = 1
+
+        if (Math.floor(percent * 100) > 1)
+            execAsync(`brightnessctl set ${Math.floor(percent * 100)}% -q`).then(() => {
+                this.#screen = percent
+                this.notify("screen")
+            })
+    }
+
+    constructor() {
+        super()
+
+        const screenPath = `/sys/class/backlight/${screen}/brightness`
+        const kbdPath = `/sys/class/leds/${kbd}/brightness`
+
+        monitorFile(screenPath, async f => {
+            const v = await readFileAsync(f)
+            this.#screen = Number(v) / this.#screenMax
+            this.notify("screen")
+        })
+
+        monitorFile(kbdPath, async f => {
+            const v = await readFileAsync(f)
+            this.#kbd = Number(v) / this.#kbdMax
+            this.notify("kbd")
+        })
+    }
+}

.config/ags/widget/Calendar.tsx

@@ -0,0 +1,42 @@
+import { GObject } from "astal";
+import { astalify, ConstructProps, App, Astal, Gdk, Gtk } from "astal/gtk3"
+
+class CalendarGtk extends astalify(Gtk.Calendar) {
+	static {
+		GObject.registerClass(this);
+	}
+
+	constructor(
+		props: ConstructProps<Gtk.Calendar, Gtk.Calendar.ConstructorProps>,
+	) {
+		super(props as any);
+	}
+}
+
+export default function Calendar() {
+    const anchor = Astal.WindowAnchor.TOP
+        | Astal.WindowAnchor.RIGHT
+
+    return <window 
+    name="calendar"
+    visible={false} 
+    application={App}
+    anchor={anchor}
+    keymode={Astal.Keymode.ON_DEMAND}
+    onKeyPressEvent={function (self, event: Gdk.Event) {
+        if (event.get_keyval()[1] === Gdk.KEY_Escape)
+            self.hide()
+    }}   
+    >
+    <box 
+    className="calendar"
+    >{new CalendarGtk({ 
+        hexpand: true, 
+        vexpand: true,
+        showDayNames: true,
+        showDetails: false,
+        showHeading: true,
+        showWeekNumbers: true
+    })}</box>
+</window>
+}

.config/ags/widget/Sidebar.tsx

@@ -0,0 +1,131 @@
+import { App } from "astal/gtk3"
+import Apps from "gi://AstalApps"
+import Wp from "gi://AstalWp"
+import { Variable, GLib, bind } from "astal"
+import { subprocess, exec, execAsync } from "astal/process"
+import { Astal, Gtk, Gdk } from "astal/gtk3"
+import Brightness from "./Brightness"
+
+function BrightnessSlider() {
+    const brightness = Brightness.get_default()
+
+    return <box className="MicrophoneSlider" css="min-width: 140px">
+        <slider
+            hexpand
+            value={bind(brightness, "screen")}
+            onDragged={({ value }) => brightness.screen = value}
+        />
+    </box>
+}
+
+function AudioSlider() {
+    const speaker = Wp.get_default()?.audio.defaultSpeaker!
+
+    return <box className="AudioSlider" css="min-width: 140px">
+        <slider
+            hexpand
+            onDragged={({ value }) => speaker.volume = value}
+            value={bind(speaker, "volume")}
+        />
+    </box>
+}
+
+function MicrophoneSlider() {
+    const microphone = Wp.get_default()?.audio.defaultMicrophone!
+
+    return <box className="MicrophoneSlider" css="min-width: 140px">
+        <slider
+            hexpand
+            onDragged={({ value }) => microphone.volume = value}
+            value={bind(microphone, "volume")}
+        />
+    </box>
+}
+
+function openwelcomeapp() {
+    execAsync("com.ml4w.welcome")
+    App.get_window("sidebar")!.hide()
+}
+
+function opensettingsapp() {
+    execAsync("com.ml4w.dotfilessettings")
+    App.get_window("sidebar")!.hide()
+}
+
+function openhyprlandapp() {
+    execAsync("com.ml4w.hyprland.settings")
+    App.get_window("sidebar")!.hide()
+}
+
+function openwaypaper() {
+    const proc = subprocess(["bash", "-c", "waypaper"])    
+    App.get_window("sidebar")!.hide()
+}
+
+function openwallpapereffects() {
+    const proc = subprocess(["bash", "-c", "$HOME/.config/hypr/scripts/wallpaper-effects.sh"])    
+    App.get_window("sidebar")!.hide()
+}
+
+function openwaybarthemes() {
+    const proc = subprocess(["bash", "-c", "$HOME/.config/waybar/themeswitcher.sh"])    
+    App.get_window("sidebar")!.hide()
+}
+
+export default function Sidebar() {
+
+    const anchor = Astal.WindowAnchor.TOP
+        | Astal.WindowAnchor.RIGHT
+
+    return <window 
+    name="sidebar"
+    application={App}
+    visible={false} 
+    className="Sidebar"
+    anchor={anchor}
+    keymode={Astal.Keymode.ON_DEMAND}
+    onKeyPressEvent={function (self, event: Gdk.Event) {
+        if (event.get_keyval()[1] === Gdk.KEY_Escape)
+            self.hide()
+    }}      
+    >    
+    <box className="sidebar" vertical>
+        <box css="padding-bottom:20px;">
+            <box className="group" vertical>
+                <box homogeneous>
+                    <button onClicked={openwelcomeapp} className="ml4wwelcomeicon"></button>
+                    <button onClicked={opensettingsapp} className="ml4wsettingsicon"></button>
+                    <button onClicked={openhyprlandapp} className="ml4whyprlandicon"></button>
+                </box>
+                <box homogeneous>
+                    <button onClicked={openwelcomeapp}>Welcome App</button>
+                    <button onClicked={opensettingsapp}>Settings App</button>
+                    <button onClicked={openhyprlandapp}>Hyprland App</button>
+                </box>
+            </box>
+        </box>
+        <box css="padding-bottom:20px;">
+            <box className="group" hexpand vertical>
+                <box spacing="20" css="padding-bottom:20px;" homogeneous>
+                    <button onClicked={openwaypaper} className="midbtn">Wallpapers</button>
+                    <button onClicked={openwallpapereffects} className="midbtn">Effects</button>
+                </box>
+                <box homogeneous>
+                    <button onClicked={openwaybarthemes} className="midbtn">Status Bar Themes</button>
+                </box>
+            </box>
+        </box>
+        <box className="group" halign="left" vertical>
+            <label css="padding-bottom:10px" label="Speaker"></label>
+            <AudioSlider/>
+            <label css="padding-bottom:10px" label="Microphone"></label>
+            <MicrophoneSlider />
+        </box>
+        <box css="padding-bottom:20px;"></box>
+        <box className="group" halign="left" vertical>
+            <label css="padding-bottom:10px" label="Brightness"></label>
+            <BrightnessSlider />
+        </box>
+    </box>
+</window>
+}