Update (#17)

1. Battery material colors
2. Some changes

ags/apps/settings/theme.ts → ags/apps/settings/appearance.ts

@@ -1,6 +1,9 @@
 import { theme, theme_settings, generation_scheme_file } from "variables.ts";
 const GLib = imports.gi.GLib;
 import Gtk from "gi://Gtk?version=3.0"
+import config from "services/configuration.ts";
+import { Binding } from "types/service";
+import { default_config } from '../../services/configuration';
 
 const ComboBoxText = Widget.subclass<typeof Gtk.ComboBoxText, Gtk.ComboBoxText.ConstructorProperties>(Gtk.ComboBoxText)
 
@@ -15,10 +18,10 @@ const color_schemes = {
     "Fidelity": "fidelity",
     "Content": "content",
     [Symbol.iterator]: function* () {
-      const keys = Object.keys(this);
-      for (const key of keys) {
-        yield { key, value: this[key] };
-      }
+        const keys = Object.keys(this);
+        for (const key of keys) {
+            yield { key, value: this[key] };
+        }
     }
 }
 
@@ -242,13 +245,82 @@ const ColorScheme = () => Widget.EventBox({
     })
 })
 
-export function Theme() {
+const SwitchRow = (
+    on_activate: (...args: any) => void,
+    state: boolean | Binding<any, any, boolean>,
+    title: string,
+    description?: string
+) => Widget.EventBox({
+    class_name: "row",
+    on_primary_click_release: self => {
+        self.child.children[1]!.activate()
+    },
+    child: Widget.Box({
+        class_name: "row",
+        vpack: "start",
+        children: [
+            // @ts-expect-error
+            Widget.Box({
+                vertical: true,
+                hexpand: true,
+                vpack: "center",
+                children: [
+                    Widget.Label({
+                        hpack: "start",
+                        class_name: "title",
+                        label: title
+                    }),
+                    (description)
+                        ? Widget.Label({
+                            hpack: "start",
+                            class_name: "description",
+                            label: description
+                        })
+                        : undefined
+                ]
+            }),
+            Widget.Switch({
+                vexpand: false,
+                vpack: "center",
+                hpack: "end",
+                on_activate: on_activate,
+                state: state,
+            })
+        ]
+    })
+})
+
+function ToggleConfigVar(name: keyof typeof default_config) {
+    config.config = {
+        ...config.config,
+        [name]: !config.config[name]
+    }
+}
+
+export function Appearance() {
     const box = Widget.Box({
         vertical: true,
         children: [
             DarkTheme(),
             ThemeColor(),
-            ColorScheme()
+            ColorScheme(),
+            Widget.Separator(),
+            SwitchRow(
+                () => ToggleConfigVar("always_show_battery"),
+                config.config.always_show_battery,
+                "Always show battery"
+            ),
+            SwitchRow(
+                () => ToggleConfigVar("show_battery_percent"),
+                config.config.show_battery_percent,
+                "Show battery percent"
+            ),
+            SwitchRow(
+                () => ToggleConfigVar("show_taskbar"),
+                config.config.show_taskbar,
+                "Show taskbar",
+                "Requires ags restart"
+            )
         ],
     })
     return Widget.Scrollable({

ags/apps/settings/main.ts

@@ -1,7 +1,7 @@
 import { RegularWindow } from "apps/window";
 import { Network } from "./network";
 import { Bluetooth } from "./bluetooth";
-import { Theme } from "./theme";
+import { Appearance } from "./appearance";
 import { Wallpapers } from "./wallpapers";
 import { Info } from "./info";
 import { Apps } from "./apps";
@@ -43,7 +43,7 @@ function Settings(cur_tab: string) {
         children: {
             "network": Page(Network(), "Network"),
             "bluetooth": Page(Bluetooth(), "Bluetooth"),
-            "theme": Page(Theme(), "Theme"),
+            "appearance": Page(Appearance(), "Appearance"),
             "wallpaper": Page(Wallpapers(), "Wallpapers"),
             "info": Page(Info(), "Info"),
             "apps": Page(Apps(), "Apps")
@@ -68,7 +68,7 @@ function Settings(cur_tab: string) {
             Row("network", "Network", "signal_wifi_4_bar"),
             Row("bluetooth", "Bluetooth", "bluetooth"),
             Widget.Separator(),
-            Row("theme", "Theme", "palette"),
+            Row("appearance", "Appearance", "palette"),
             Row("wallpaper", "Wallpapers", "image"),
             Widget.Separator(),
             Row("apps", "Apps", "grid_view"),

ags/main.ts

@@ -7,7 +7,7 @@ import { Notifications } from "./modules/notificationPopups.ts"
 import { applauncher } from "./modules/applauncher.js"
 import { media } from "./modules/media.ts"
 import { cliphist } from "./modules/cliphist.ts"
-import { sidebar } from "./modules/sidebar/main.ts"
+import { sideright } from "./modules/sideright/main.ts"
 import {} from 'apps/settings/main.ts';
 import {} from 'apps/emoji/main.ts';
 import { cheatsheet } from 'modules/cheatsheet.ts';
@@ -31,7 +31,7 @@ const Windows = () => [
     media,
     applauncher,
     cliphist,
-    sidebar,
+    sideright,
     cheatsheet
 ];
 

ags/modules/bar.ts

@@ -17,6 +17,7 @@ const mpris = await Service.import("mpris")
 const bluetooth = await Service.import("bluetooth")
 import Gtk from "gi://Gtk?version=3.0"
 import { MaterialIcon } from "icons.js"
+import config from "services/configuration.ts";
 
 const keyboard_layout = Variable("none")
 hyprland.connect("keyboard-layout", (hyprland, keyboardname, layoutname) => {
@@ -143,20 +144,71 @@ function Clock() {
 }
 
 
-function BatteryLabel() {
-    const icon = battery.bind("icon_name");
+const battery_icons = {
+    charging: {
+        100: "battery_charging_full",
+        90: "battery_charging_90",
+        80: "battery_charging_80",
+        70: "battery_charging_80",
+        60: "battery_charging_60",
+        50: "battery_charging_50",
+        40: "battery_charging_30",
+        30: "battery_charging_30",
+        20: "battery_charging_20",
+        10: "battery_charging_20",
+        0: "battery_charging_20",
+    },
+    100: "battery_full",
+    90: "battery_6_bar",
+    80: "battery_5_bar",
+    70: "battery_5_bar",
+    60: "battery_4_bar",
+    50: "battery_3_bar",
+    40: "battery_2_bar",
+    30: "battery_2_bar",
+    20: "battery_1_bar",
+    10: "battery_1_bar",
+    0: "battery_alert",
+}
+
+
+function getClosestBatteryLevel(level: number, charging: boolean = false) {
+    const array = !charging ? battery_icons : battery_icons.charging;
+    const levels = Object.keys(array).map(Number).sort((a, b) => b - a);
+    for (let i = 0; i < levels.length; i++) {
+        if (level >= levels[i]) {
+            return array[levels[i]];
+        }
+    }
+    return array[levels[levels.length - 1]];
+}
 
-    const isVisible = battery.bind("percent").as(p => p < 100);
 
+function BatteryLabel() {
     return Widget.Box({
         class_name: "battery",
-        visible: isVisible,
+        visible: false,
         children: [
-            Widget.Icon({ icon }),
+            MaterialIcon(getClosestBatteryLevel(battery.percent, battery.charging), "16px"),
             Widget.Label({
                 label: battery.bind("percent").as(p => `${p > 0 ? p : 0}%`),
+                visible: config.bind("config").as(config => config.show_battery_percent)
             }),
         ],
+        tooltip_text: battery.bind("percent").as(p => `Battery: ${p > 0 ? p : 0}%`),
+        setup: (self) => {
+            self.hook(battery, () => {
+                self.children[0].label = getClosestBatteryLevel(battery.percent, battery.charging);
+                self.visible = (battery.percent < 100 && battery.available) || config.config.always_show_battery;
+            })
+            self.hook(config, () => {
+                if (config.config.always_show_battery) {
+                    self.visible = true;
+                } else {
+                    self.visible = battery.percent < 100 && battery.available;
+                }
+            })
+        }
     });
 }
 
@@ -325,6 +377,9 @@ function OpenSideBar() {
 const focus = ({ address }) => Utils.execAsync(`hyprctl dispatch focuswindow address:${address}`).catch(print);
 
 function TaskBar() {
+    if (!config.config.show_taskbar) {
+        return undefined
+    }
     let globalWidgets: Button<Icon<any>, any>[] = [];
 
     function Clients(clients: Client[]) {
@@ -407,7 +462,16 @@ function volumeIndicator() {
 }
 
 
+const Dot = () => Widget.Label({
+    class_name: "dot",
+    use_markup: true,
+    label: "·",
+    css: "font-weight: 900;"
+})
+
+
 function Left() {
+    // @ts-expect-error
     return Widget.Box({
         // margin_left: 15,
         class_name: "modules-left",

ags/modules/sidebar/main.ts → ags/modules/sideright/main.ts

@@ -4,7 +4,7 @@ import { SideBar } from './sidebar.ts'
 export const WINDOW_NAME = "sidebar" 
 
 
-export const sidebar = popupwindow({
+export const sideright = popupwindow({
     name: WINDOW_NAME,
 
     class_name: "sidebar",

ags/services/configuration.ts

@@ -0,0 +1,67 @@
+const { GLib } = imports.gi;
+
+export const default_config = {
+    "always_show_battery": false,
+    "show_taskbar": true,
+    "show_battery_percent": true,
+}
+
+
+Utils.exec(["mkdir", "-p", `${GLib.get_home_dir()}/.config/ags_config/`])
+const config_file = `${GLib.get_home_dir()}/.config/ags_config/conf.json`;
+if (Utils.readFile(config_file).length < 2) {
+    Utils.writeFileSync(JSON.stringify(default_config), config_file)
+}
+
+class ConfigService extends Service {
+    static {
+        Service.register(
+            this,
+            {
+                'config-changed': ['jsobject'],
+            },
+            {
+                'config': ['jsobject', 'rw'],
+            },
+        );
+    }
+
+    #config = default_config;
+    #config_file = config_file;
+
+    get config() {
+        return this.#config;
+    }
+
+    set config(conf) {
+        Utils.writeFile(JSON.stringify(conf), this.#config_file).catch(print)
+    }
+
+    constructor() {
+        super();
+
+        const config_file = this.#config_file;
+        Utils.monitorFile(config_file, () => this.#onChange());
+
+        this.#onChange();
+    }
+
+    #onChange() {
+        Utils.readFileAsync(this.#config_file)
+            .then(out => {
+                this.#config = {...default_config, ...JSON.parse(out)}
+                this.emit('changed');
+                this.notify('config');
+
+                this.emit('config-changed', this.#config);
+            })
+    }
+
+    connect(event = 'config-changed', callback) {
+        return super.connect(event, callback);
+    }
+}
+
+const service = new ConfigService;
+
+export default service;

ags/style.css

@@ -124,21 +124,24 @@ separator {
 }
 
 .workspaces button label {
-    color: @onSurface;
+    color: @onSurfaceVariant;
     font-weight: bold;
 }
 
 .workspaces button:hover {
     color: @onSurface;
-    background: @surfaceContainerHighest;
+    background-color: mix(@onSurface, @surface, 0.85);
 }
 
 .workspaces button.active {
-    color: @onSecondaryContainer;
     background: @secondaryContainer;
     min-width: 40px;
 }
 
+.workspaces button.active label {
+    color: @onSecondaryContainer;
+}
+
 /* -----------------------------------------------------
  * Clock
  * ----------------------------------------------------- */
@@ -528,9 +531,11 @@ window.notification-popups box.notifications {
 
 .battery label {
     color: @onSurface;
+    font-size: 16px;
+    font-weight: 300;
 }
 
-.battery image {
+.battery .icon {
     color: @onSurface;
 }