hyprpanel

ags/HyprPanel/widget/settings/shared/FileChooser.ts

@@ -0,0 +1,251 @@
+import Gtk from 'gi://Gtk?version=3.0';
+import Gio from 'gi://Gio';
+import { bash, Notify } from 'lib/utils';
+import icons from 'lib/icons';
+import { Config } from 'lib/types/filechooser';
+import { hexColorPattern } from 'globals/useTheme';
+import { isHexColor } from 'globals/variables';
+
+const whiteListedThemeProp = ['theme.bar.buttons.style'];
+
+export const loadJsonFile = (filePath: string): Config | null => {
+    const file = Gio.File.new_for_path(filePath as string);
+    const [success, content] = file.load_contents(null);
+
+    if (!success) {
+        console.error(`Failed to import: ${filePath}`);
+        return null;
+    }
+
+    const jsonString = new TextDecoder('utf-8').decode(content);
+    return JSON.parse(jsonString);
+};
+
+export const saveConfigToFile = (config: object, filePath: string): void => {
+    const file = Gio.File.new_for_path(filePath);
+    const outputStream = file.replace(null, false, Gio.FileCreateFlags.NONE, null);
+    const dataOutputStream = new Gio.DataOutputStream({ base_stream: outputStream });
+
+    const jsonString = JSON.stringify(config, null, 2);
+    dataOutputStream.put_string(jsonString, null);
+    dataOutputStream.close(null);
+};
+
+export const filterConfigForThemeOnly = (config: Config): Config => {
+    const filteredConfig: Config = {};
+
+    for (const key in config) {
+        const value = config[key];
+        if (typeof value === 'string' && hexColorPattern.test(value)) {
+            filteredConfig[key] = config[key];
+        } else if (whiteListedThemeProp.includes(key)) {
+            filteredConfig[key] = config[key];
+        }
+    }
+    return filteredConfig;
+};
+
+export const filterConfigForNonTheme = (config: Config): Config => {
+    const filteredConfig: Config = {};
+    for (const key in config) {
+        if (whiteListedThemeProp.includes(key)) {
+            continue;
+        }
+
+        const value = config[key];
+        if (!(typeof value === 'string' && hexColorPattern.test(value))) {
+            filteredConfig[key] = config[key];
+        }
+    }
+    return filteredConfig;
+};
+
+export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
+    const original_file_path = filePath;
+
+    const file = Gio.File.new_for_path(original_file_path);
+    const [success, content] = file.load_contents(null);
+
+    if (!success) {
+        console.error(`Could not find 'config.json' at ${TMP}`);
+        return;
+    }
+
+    const jsonString = new TextDecoder('utf-8').decode(content);
+    const jsonObject = JSON.parse(jsonString);
+
+    // Function to filter hex color pairs
+    const filterHexColorPairs = (jsonObject: Config): Config => {
+        const filteredObject: Config = {};
+
+        for (const key in jsonObject) {
+            const value = jsonObject[key];
+            if (typeof value === 'string' && isHexColor(value)) {
+                filteredObject[key] = jsonObject[key];
+            } else if (whiteListedThemeProp.includes(key)) {
+                filteredObject[key] = jsonObject[key];
+            }
+        }
+
+        return filteredObject;
+    };
+
+    // Function to filter out hex color pairs (keep only non-hex color value)
+    const filterOutHexColorPairs = (jsonObject: Config): Config => {
+        const filteredObject: Config = {};
+
+        for (const key in jsonObject) {
+            // do not add key-value pair if its in whiteListedThemeProp
+            if (whiteListedThemeProp.includes(key)) {
+                continue;
+            }
+
+            const value = jsonObject[key];
+            if (!(typeof value === 'string' && isHexColor(value))) {
+                filteredObject[key] = jsonObject[key];
+            }
+        }
+
+        return filteredObject;
+    };
+
+    // Filter the JSON object based on the themeOnly flag
+    const filteredJsonObject = themeOnly ? filterHexColorPairs(jsonObject) : filterOutHexColorPairs(jsonObject);
+    const filteredContent = JSON.stringify(filteredJsonObject, null, 2);
+
+    const dialog = new Gtk.FileChooserDialog({
+        title: 'Save File As',
+        action: Gtk.FileChooserAction.SAVE,
+    });
+
+    dialog.add_button(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL);
+    dialog.add_button(Gtk.STOCK_SAVE, Gtk.ResponseType.ACCEPT);
+    dialog.set_current_name(themeOnly ? 'hyprpanel_theme.json' : 'hyprpanel_config.json');
+
+    const response = dialog.run();
+
+    if (response === Gtk.ResponseType.ACCEPT) {
+        const file_path = dialog.get_filename();
+        console.info(`Original file path: ${file_path}`);
+
+        const getIncrementedFilePath = (filePath: string): string => {
+            let increment = 1;
+            const baseName = filePath.replace(/(\.\w+)$/, '');
+            const match = filePath.match(/(\.\w+)$/);
+            const extension = match ? match[0] : '';
+
+            let newFilePath = filePath;
+            let file = Gio.File.new_for_path(newFilePath);
+
+            while (file.query_exists(null)) {
+                newFilePath = `${baseName}_${increment}${extension}`;
+                file = Gio.File.new_for_path(newFilePath);
+                increment++;
+            }
+
+            return newFilePath;
+        };
+
+        const finalFilePath = getIncrementedFilePath(file_path as string);
+        console.info(`File will be saved at: ${finalFilePath}`);
+
+        try {
+            const save_file = Gio.File.new_for_path(finalFilePath);
+            const outputStream = save_file.replace(null, false, Gio.FileCreateFlags.NONE, null);
+            const dataOutputStream = new Gio.DataOutputStream({
+                base_stream: outputStream,
+            });
+
+            dataOutputStream.put_string(filteredContent, null);
+
+            dataOutputStream.close(null);
+
+            Notify({
+                summary: 'File Saved Successfully',
+                body: `At ${finalFilePath}.`,
+                iconName: icons.ui.info,
+                timeout: 5000,
+            });
+        } catch (e) {
+            if (e instanceof Error) {
+                console.error('Failed to write to file:', e.message);
+            }
+        }
+    }
+
+    dialog.destroy();
+};
+
+export const importFiles = (themeOnly: boolean = false): void => {
+    const dialog = new Gtk.FileChooserDialog({
+        title: `Import ${themeOnly ? 'Theme' : 'Config'}`,
+        action: Gtk.FileChooserAction.OPEN,
+    });
+    dialog.set_current_folder(`${App.configDir}/themes`);
+    dialog.add_button(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL);
+    dialog.add_button(Gtk.STOCK_OPEN, Gtk.ResponseType.ACCEPT);
+
+    const response = dialog.run();
+
+    if (response === Gtk.ResponseType.CANCEL) {
+        dialog.destroy();
+        return;
+    }
+    if (response === Gtk.ResponseType.ACCEPT) {
+        const filePath: string | null = dialog.get_filename();
+
+        if (filePath === null) {
+            Notify({
+                summary: 'Failed to import',
+                body: 'No file selected.',
+                iconName: icons.ui.warning,
+                timeout: 5000,
+            });
+            return;
+        }
+
+        const importedConfig = loadJsonFile(filePath);
+
+        if (!importedConfig) {
+            dialog.destroy();
+            return;
+        }
+
+        Notify({
+            summary: `Importing ${themeOnly ? 'Theme' : 'Config'}`,
+            body: `Importing: ${filePath}`,
+            iconName: icons.ui.info,
+            timeout: 7000,
+        });
+
+        const tmpConfigFile = Gio.File.new_for_path(`${TMP}/config.json`);
+        const optionsConfigFile = Gio.File.new_for_path(OPTIONS);
+
+        const [tmpSuccess, tmpContent] = tmpConfigFile.load_contents(null);
+        const [optionsSuccess, optionsContent] = optionsConfigFile.load_contents(null);
+
+        if (!tmpSuccess || !optionsSuccess) {
+            console.error('Failed to read existing configuration files.');
+            dialog.destroy();
+            return;
+        }
+
+        let tmpConfig = JSON.parse(new TextDecoder('utf-8').decode(tmpContent));
+        let optionsConfig = JSON.parse(new TextDecoder('utf-8').decode(optionsContent));
+
+        if (themeOnly) {
+            const filteredConfig = filterConfigForThemeOnly(importedConfig);
+            tmpConfig = { ...tmpConfig, ...filteredConfig };
+            optionsConfig = { ...optionsConfig, ...filteredConfig };
+        } else {
+            const filteredConfig = filterConfigForNonTheme(importedConfig);
+            tmpConfig = { ...tmpConfig, ...filteredConfig };
+            optionsConfig = { ...optionsConfig, ...filteredConfig };
+        }
+
+        saveConfigToFile(tmpConfig, `${TMP}/config.json`);
+        saveConfigToFile(optionsConfig, OPTIONS);
+    }
+    dialog.destroy();
+    bash('pkill ags && ags');
+};

ags/HyprPanel/widget/settings/shared/Header.ts

@@ -0,0 +1,18 @@
+import { GBox } from 'lib/types/widget';
+
+export const Header = (headerName: string): GBox => {
+    return Widget.Box({
+        class_name: 'options-header',
+        children: [
+            Widget.Label({
+                class_name: 'label-name',
+                label: headerName,
+            }),
+            Widget.Separator({
+                vpack: 'center',
+                hexpand: true,
+                class_name: 'menu-separator',
+            }),
+        ],
+    });
+};

ags/HyprPanel/widget/settings/shared/Inputter.ts

@@ -0,0 +1,63 @@
+import { RowProps } from 'lib/types/options';
+import { Variable } from 'types/variable';
+import { BoxWidget } from 'lib/types/widget';
+import { numberInputter } from './components/number';
+import { objectInputter } from './components/object';
+import { stringInputter } from './components/string';
+import { booleanInputter } from './components/boolean';
+import { imageInputter } from './components/image';
+import { importInputter } from './components/import';
+import { wallpaperInputter } from './components/wallpaper';
+import { colorInputter } from './components/color';
+import { enumInputter } from './components/enum';
+import { fontInputter } from './components/font';
+
+export const Inputter = <T extends string | number | boolean | object>(
+    {
+        opt,
+        type = typeof opt.value as RowProps<T>['type'],
+        enums,
+        disabledBinding,
+        dependencies,
+        exportData,
+        min = 0,
+        max = 1000000,
+        increment = 1,
+    }: RowProps<T>,
+    className: string,
+    isUnsaved: Variable<boolean>,
+): BoxWidget => {
+    return Widget.Box({
+        vpack: 'center',
+        class_name: /export|import/.test(type || '') ? '' : 'inputter-container',
+        setup: (self) => {
+            switch (type) {
+                case 'number':
+                    return numberInputter(self, opt, min, max, increment, isUnsaved);
+                case 'float':
+                case 'object':
+                    return objectInputter(self, opt, isUnsaved, className);
+                case 'string':
+                    return stringInputter(self, opt, isUnsaved);
+                case 'enum':
+                    return enumInputter(self, opt, enums!);
+                case 'boolean':
+                    return booleanInputter(self, opt, disabledBinding, dependencies);
+                case 'img':
+                    return imageInputter(self, opt);
+                case 'config_import':
+                    return importInputter(self, exportData);
+                case 'wallpaper':
+                    return wallpaperInputter(self, opt);
+                case 'font':
+                    return fontInputter(self, opt);
+                case 'color':
+                    return colorInputter(self, opt);
+                default:
+                    return (self.child = Widget.Label({
+                        label: `No setter with type ${type}`,
+                    }));
+            }
+        },
+    });
+};

ags/HyprPanel/widget/settings/shared/Label.ts

@@ -0,0 +1,34 @@
+import { GBox, GButton, GLabel } from 'lib/types/widget';
+
+export const Label = (name: string, sub = '', subtitleLink = ''): GBox => {
+    const subTitle = (): GButton | GLabel => {
+        if (subtitleLink.length) {
+            return Widget.Button({
+                hpack: 'start',
+                vpack: 'center',
+                class_name: 'options-sublabel-link',
+                label: sub,
+                on_primary_click: () => Utils.execAsync(`bash -c 'xdg-open ${subtitleLink}'`),
+            });
+        }
+        return Widget.Label({
+            hpack: 'start',
+            vpack: 'center',
+            class_name: 'options-sublabel',
+            label: sub,
+        });
+    };
+    return Widget.Box({
+        vertical: true,
+        hpack: 'start',
+        children: [
+            Widget.Label({
+                hpack: 'start',
+                vpack: 'center',
+                class_name: 'options-label',
+                label: name,
+            }),
+            subTitle(),
+        ],
+    });
+};

ags/HyprPanel/widget/settings/shared/Option.ts

@@ -0,0 +1,33 @@
+import { Label } from './Label';
+import { Inputter } from './Inputter';
+import icons from 'lib/icons';
+import { RowProps } from 'lib/types/options';
+import { GBox } from 'lib/types/widget';
+
+export const Option = <T extends string | number | boolean | object>(
+    props: RowProps<T>,
+    className: string = '',
+): GBox => {
+    const isUnsaved = Variable(false);
+
+    return Widget.Box({
+        class_name: 'option-item',
+        hexpand: true,
+        children: [
+            Widget.Box({
+                hpack: 'start',
+                vpack: 'center',
+                hexpand: true,
+                child: Label(props.title, props.subtitle || '', props.subtitleLink),
+            }),
+            Inputter(props, className, isUnsaved),
+            Widget.Button({
+                vpack: 'center',
+                class_name: 'reset-options',
+                child: Widget.Icon(icons.ui.refresh),
+                on_clicked: () => props.opt.reset(),
+                sensitive: props.opt.bind().as((v) => v !== props.opt.initial),
+            }),
+        ],
+    });
+};

ags/HyprPanel/widget/settings/shared/components/boolean.ts

@@ -0,0 +1,29 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+import { dependencies as checkDependencies } from 'lib/utils';
+
+export const booleanInputter = <T>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    disabledBinding: Variable<boolean> | undefined,
+    dependencies: string[] | undefined,
+): Attribute => {
+    return (self.child = Widget.Switch({
+        sensitive: disabledBinding !== undefined ? disabledBinding.bind('value').as((disabled) => !disabled) : true,
+    })
+        .on('notify::active', (self) => {
+            if (disabledBinding !== undefined && disabledBinding.value) {
+                return;
+            }
+            if (self.active && dependencies !== undefined && !dependencies.every((d) => checkDependencies(d))) {
+                self.active = false;
+                return;
+            }
+            opt.value = self.active as T;
+        })
+        .hook(opt, (self) => {
+            self.active = opt.value as boolean;
+        }));
+};

ags/HyprPanel/widget/settings/shared/components/color.ts

@@ -0,0 +1,19 @@
+import Gdk from 'gi://Gdk';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+
+export const colorInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
+    return (self.child = Widget.ColorButton()
+        .hook(opt, (self) => {
+            const rgba = new Gdk.RGBA();
+            rgba.parse(opt.value as string);
+            self.rgba = rgba;
+        })
+        .on('color-set', ({ rgba: { red, green, blue } }) => {
+            const hex = (n: number): string => {
+                const c = Math.floor(255 * n).toString(16);
+                return c.length === 1 ? `0${c}` : c;
+            };
+            opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T;
+        }));
+};

ags/HyprPanel/widget/settings/shared/components/enum.ts

@@ -0,0 +1,36 @@
+import { Opt } from 'lib/option';
+import { BoxWidget } from 'lib/types/widget';
+import icons from 'lib/icons';
+import { Box } from 'types/@girs/gtk-3.0/gtk-3.0.cjs';
+
+export const enumInputter = <T extends string | number | boolean | object>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    values: T[],
+): Box => {
+    const lbl = Widget.Label({ label: opt.bind().as((v) => `${v}`) });
+    const step = (dir: 1 | -1): void => {
+        const i = values.findIndex((i) => i === lbl.label);
+        opt.setValue(
+            dir > 0
+                ? i + dir > values.length - 1
+                    ? values[0]
+                    : values[i + dir]
+                : i + dir < 0
+                  ? values[values.length - 1]
+                  : values[i + dir],
+        );
+    };
+    const next = Widget.Button({
+        child: Widget.Icon(icons.ui.arrow.right),
+        on_clicked: () => step(+1),
+    });
+    const prev = Widget.Button({
+        child: Widget.Icon(icons.ui.arrow.left),
+        on_clicked: () => step(-1),
+    });
+    return (self.child = Widget.Box({
+        class_name: 'enum-setter',
+        children: [lbl, prev, next],
+    }));
+};

ags/HyprPanel/widget/settings/shared/components/font.ts

@@ -0,0 +1,14 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget, Child } from 'lib/types/widget';
+import FontButton from 'types/widgets/fontbutton';
+
+export const fontInputter = <T>(self: BoxWidget, opt: Opt<T>): FontButton<Child, Attribute> => {
+    return (self.child = Widget.FontButton({
+        show_size: false,
+        use_size: false,
+        setup: (self) =>
+            self
+                .hook(opt, () => (self.font = opt.value as string))
+                .on('font-set', ({ font }) => (opt.value = font!.split(' ').slice(0, -1).join(' ') as T)),
+    }));
+};

ags/HyprPanel/widget/settings/shared/components/image.ts

@@ -0,0 +1,31 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget, Child } from 'lib/types/widget';
+import FileChooserButton from 'types/widgets/filechooserbutton';
+
+export const imageInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
+    self.child = createFileChooserButton(opt);
+    return self.child;
+};
+
+const createFileChooserButton = <T>(opt: Opt<T>): FileChooserButton<Child, Attribute> => {
+    return Widget.FileChooserButton({
+        class_name: 'image-chooser',
+        on_file_set: handleFileSet(opt),
+    });
+};
+
+const handleFileSet =
+    <T>(opt: Opt<T>) =>
+    ({ uri }: { uri: string | null }): void => {
+        if (!uri) {
+            console.warn('No URI selected');
+            return;
+        }
+
+        try {
+            const decodedPath = decodeURIComponent(uri.replace('file://', ''));
+            opt.value = decodedPath as T;
+        } catch (error) {
+            console.error('Failed to decode URI:', error);
+        }
+    };

ags/HyprPanel/widget/settings/shared/components/import.ts

@@ -0,0 +1,24 @@
+import { ThemeExportData } from 'lib/types/options';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { importFiles, saveFileDialog } from '../FileChooser';
+
+export const importInputter = (self: BoxWidget, exportData?: ThemeExportData): Attribute => {
+    return (self.child = Widget.Box({
+        children: [
+            Widget.Button({
+                class_name: 'options-import',
+                label: 'import',
+                on_clicked: () => {
+                    importFiles(exportData?.themeOnly as boolean);
+                },
+            }),
+            Widget.Button({
+                class_name: 'options-export',
+                label: 'export',
+                on_clicked: () => {
+                    saveFileDialog(exportData?.filePath as string, exportData?.themeOnly as boolean);
+                },
+            }),
+        ],
+    }));
+};

ags/HyprPanel/widget/settings/shared/components/number.ts

@@ -0,0 +1,45 @@
+import icons from 'lib/icons';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+export const numberInputter = <T>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    min: number,
+    max: number,
+    increment = 1,
+    isUnsaved: Variable<boolean>,
+): Attribute => {
+    return (self.children = [
+        Widget.Box({
+            class_name: 'unsaved-icon-container',
+            child: isUnsaved.bind('value').as((unsvd) => {
+                if (unsvd) {
+                    return Widget.Icon({
+                        class_name: 'unsaved-icon',
+                        icon: icons.ui.warning,
+                        tooltipText: "Press 'Enter' to apply your changes.",
+                    });
+                }
+                return Widget.Box();
+            }),
+        }),
+        Widget.SpinButton({
+            setup(self) {
+                self.set_range(min, max);
+                self.set_increments(1 * increment, 5 * increment);
+                self.on('value-changed', () => {
+                    opt.value = self.value as T;
+                });
+                self.hook(opt, () => {
+                    self.value = opt.value as number;
+                    isUnsaved.value = Number(self.text) !== (opt.value as number);
+                });
+                self.connect('key-release-event', () => {
+                    isUnsaved.value = Number(self.text) !== (opt.value as number);
+                });
+            },
+        }),
+    ]);
+};

ags/HyprPanel/widget/settings/shared/components/object.ts

@@ -0,0 +1,37 @@
+import icons from 'lib/icons';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+export const objectInputter = <T>(
+    self: BoxWidget,
+    opt: Opt<T>,
+    isUnsaved: Variable<boolean>,
+    className: string,
+): Attribute => {
+    return (self.children = [
+        Widget.Box({
+            class_name: 'unsaved-icon-container',
+            child: isUnsaved.bind('value').as((unsvd) => {
+                if (unsvd) {
+                    return Widget.Icon({
+                        class_name: 'unsaved-icon',
+                        icon: icons.ui.warning,
+                        tooltipText: "Press 'Enter' to apply your changes.",
+                    });
+                }
+                return Widget.Box();
+            }),
+        }),
+        Widget.Entry({
+            class_name: className,
+            on_change: (self) => (isUnsaved.value = self.text !== JSON.stringify(opt.value)),
+            on_accept: (self) => (opt.value = JSON.parse(self.text || '')),
+            setup: (self) =>
+                self.hook(opt, () => {
+                    self.text = JSON.stringify(opt.value);
+                    isUnsaved.value = self.text !== JSON.stringify(opt.value);
+                }),
+        }),
+    ]);
+};

ags/HyprPanel/widget/settings/shared/components/string.ts

@@ -0,0 +1,34 @@
+import icons from 'lib/icons';
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Variable } from 'types/variable';
+
+export const stringInputter = <T>(self: BoxWidget, opt: Opt<T>, isUnsaved: Variable<boolean>): Attribute => {
+    return (self.children = [
+        Widget.Box({
+            class_name: 'unsaved-icon-container',
+            child: isUnsaved.bind('value').as((unsvd) => {
+                if (unsvd) {
+                    return Widget.Icon({
+                        class_name: 'unsaved-icon',
+                        icon: icons.ui.warning,
+                        tooltipText: "Press 'Enter' to apply your changes.",
+                    });
+                }
+                return Widget.Box();
+            }),
+        }),
+        Widget.Entry({
+            class_name: isUnsaved.bind('value').as((unsaved) => (unsaved ? 'unsaved' : '')),
+            on_change: (self) => (isUnsaved.value = self.text !== opt.value),
+            on_accept: (self) => {
+                opt.value = self.text as T;
+            },
+            setup: (self) =>
+                self.hook(opt, () => {
+                    isUnsaved.value = self.text !== opt.value;
+                    self.text = opt.value as string;
+                }),
+        }),
+    ]);
+};

ags/HyprPanel/widget/settings/shared/components/wallpaper.ts

@@ -0,0 +1,20 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import Wallpaper from 'services/Wallpaper';
+
+export const wallpaperInputter = <T extends string | number | boolean | object>(
+    self: BoxWidget,
+    opt: Opt<T>,
+): Attribute | void => {
+    if (typeof opt.value === 'string') {
+        return (self.child = Widget.FileChooserButton({
+            on_file_set: ({ uri }) => {
+                const newValue: string = uri!.replace('file://', '');
+                opt.value = newValue as T;
+                if (options.wallpaper.enable.value) {
+                    Wallpaper.set(newValue);
+                }
+            },
+        }));
+    }
+};