Update all dotfiles

configs/dotfiles/hyprland/gulfport/.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();
+    }
+})

configs/dotfiles/hyprland/gulfport/.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
+}

configs/dotfiles/hyprland/gulfport/.config/ags/scripts/run_themeswitcher.sh

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

configs/dotfiles/hyprland/gulfport/.config/ags/scripts/run_wallpapereffects.sh

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

configs/dotfiles/hyprland/gulfport/.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;
+}

configs/dotfiles/hyprland/gulfport/.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/*"
+            ]
+        },
+    }
+}

configs/dotfiles/hyprland/gulfport/.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>
+}

configs/dotfiles/hyprland/gulfport/.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")
+        })
+    }
+}

configs/dotfiles/hyprland/gulfport/.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>
+}

configs/dotfiles/hyprland/gulfport/.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>
+}