Implemented strict linting standards and prettier formatting config. (#248)

* Implemented strict linting standards and prettier formatting config.

* More linter fixes and type updates.

* More linter updates and type fixes

* Remove noisy comments

* Linter and type updates

* Linter, formatting and type updates.

* Linter updates

* Type updates

* Type updates

* fixed all linter errors

* Fixed all linting, formatting and type issues.

* Resolve merge conflicts.

widget/settings/shared/FileChooser.ts

@@ -1,43 +1,42 @@
-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";
+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"
-];
+const whiteListedThemeProp = ['theme.bar.buttons.style'];
 
 export const loadJsonFile = (filePath: string): Config | null => {
-    let file = Gio.File.new_for_path(filePath as string);
-    let [success, content] = file.load_contents(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;
     }
 
-    let jsonString = new TextDecoder("utf-8").decode(content);
+    const jsonString = new TextDecoder('utf-8').decode(content);
     return JSON.parse(jsonString);
-}
+};
 
 export const saveConfigToFile = (config: object, filePath: string): void => {
-    let file = Gio.File.new_for_path(filePath);
-    let outputStream = file.replace(null, false, Gio.FileCreateFlags.NONE, null);
-    let dataOutputStream = new Gio.DataOutputStream({ base_stream: outputStream });
+    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 });
 
-    let jsonString = JSON.stringify(config, null, 2);
+    const jsonString = JSON.stringify(config, null, 2);
     dataOutputStream.put_string(jsonString, null);
     dataOutputStream.close(null);
-}
+};
 
 export const filterConfigForThemeOnly = (config: Config): Config => {
-    let filteredConfig: Config = {};
+    const filteredConfig: Config = {};
 
-    for (let key in config) {
-        if (typeof config[key] === 'string' && hexColorPattern.test(config[key])) {
+    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];
@@ -47,12 +46,14 @@ export const filterConfigForThemeOnly = (config: Config): Config => {
 };
 
 export const filterConfigForNonTheme = (config: Config): Config => {
-    let filteredConfig: Config = {};
-    for (let key in config) {
+    const filteredConfig: Config = {};
+    for (const key in config) {
         if (whiteListedThemeProp.includes(key)) {
             continue;
         }
-        if (!(typeof config[key] === 'string' && hexColorPattern.test(config[key]))) {
+
+        const value = config[key];
+        if (!(typeof value === 'string' && hexColorPattern.test(value))) {
             filteredConfig[key] = config[key];
         }
     }
@@ -62,44 +63,45 @@ export const filterConfigForNonTheme = (config: Config): Config => {
 export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
     const original_file_path = filePath;
 
-    let file = Gio.File.new_for_path(original_file_path);
-    let [success, content] = file.load_contents(null);
+    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;
     }
 
-    let jsonString = new TextDecoder("utf-8").decode(content);
-    let jsonObject = JSON.parse(jsonString);
+    const jsonString = new TextDecoder('utf-8').decode(content);
+    const jsonObject = JSON.parse(jsonString);
 
     // Function to filter hex color pairs
-    const filterHexColorPairs = (jsonObject: Config) => {
-        let filteredObject: Config = {};
+    const filterHexColorPairs = (jsonObject: Config): Config => {
+        const filteredObject: Config = {};
 
-        for (let key in jsonObject) {
-            if (typeof jsonObject[key] === 'string' && isHexColor(jsonObject[key])) {
+        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) => {
-        let filteredObject: Config = {};
+    const filterOutHexColorPairs = (jsonObject: Config): Config => {
+        const filteredObject: Config = {};
 
-        for (let key in jsonObject) {
+        for (const key in jsonObject) {
             // do not add key-value pair if its in whiteListedThemeProp
             if (whiteListedThemeProp.includes(key)) {
                 continue;
             }
 
-            if (!(typeof jsonObject[key] === 'string' && isHexColor(jsonObject[key]))) {
+            const value = jsonObject[key];
+            if (!(typeof value === 'string' && isHexColor(value))) {
                 filteredObject[key] = jsonObject[key];
             }
         }
@@ -108,29 +110,29 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
     };
 
     // Filter the JSON object based on the themeOnly flag
-    let filteredJsonObject = themeOnly ? filterHexColorPairs(jsonObject) : filterOutHexColorPairs(jsonObject);
-    let filteredContent = JSON.stringify(filteredJsonObject, null, 2);
+    const filteredJsonObject = themeOnly ? filterHexColorPairs(jsonObject) : filterOutHexColorPairs(jsonObject);
+    const filteredContent = JSON.stringify(filteredJsonObject, null, 2);
 
-    let dialog = new Gtk.FileChooserDialog({
-        title: "Save File As",
+    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");
+    dialog.set_current_name(themeOnly ? 'hyprpanel_theme.json' : 'hyprpanel_config.json');
 
-    let response = dialog.run();
+    const response = dialog.run();
 
     if (response === Gtk.ResponseType.ACCEPT) {
-        let file_path = dialog.get_filename();
+        const file_path = dialog.get_filename();
         console.info(`Original file path: ${file_path}`);
 
-        const getIncrementedFilePath = (filePath: string) => {
+        const getIncrementedFilePath = (filePath: string): string => {
             let increment = 1;
-            let baseName = filePath.replace(/(\.\w+)$/, '');
-            let match = filePath.match(/(\.\w+)$/);
-            let extension = match ? match[0] : '';
+            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);
@@ -144,14 +146,14 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
             return newFilePath;
         };
 
-        let finalFilePath = getIncrementedFilePath(file_path as string);
+        const finalFilePath = getIncrementedFilePath(file_path as string);
         console.info(`File will be saved at: ${finalFilePath}`);
 
         try {
-            let save_file = Gio.File.new_for_path(finalFilePath);
-            let outputStream = save_file.replace(null, false, Gio.FileCreateFlags.NONE, null);
-            let dataOutputStream = new Gio.DataOutputStream({
-                base_stream: outputStream
+            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);
@@ -159,49 +161,50 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
             dataOutputStream.close(null);
 
             Notify({
-                summary: "File Saved Successfully",
+                summary: 'File Saved Successfully',
                 body: `At ${finalFilePath}.`,
                 iconName: icons.ui.info,
-                timeout: 5000
+                timeout: 5000,
             });
-
-        } catch (e: any) {
-            console.error("Failed to write to file:", e.message);
+        } catch (e) {
+            if (e instanceof Error) {
+                console.error('Failed to write to file:', e.message);
+            }
         }
     }
 
     dialog.destroy();
-}
+};
 
 export const importFiles = (themeOnly: boolean = false): void => {
-    let dialog = new Gtk.FileChooserDialog({
-        title: `Import ${themeOnly ? "Theme" : "Config"}`,
+    const dialog = new Gtk.FileChooserDialog({
+        title: `Import ${themeOnly ? 'Theme' : 'Config'}`,
         action: Gtk.FileChooserAction.OPEN,
     });
-    dialog.set_current_folder(`${App.configDir}/themes`)
+    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);
 
-    let response = dialog.run();
+    const response = dialog.run();
 
     if (response === Gtk.ResponseType.CANCEL) {
         dialog.destroy();
         return;
     }
     if (response === Gtk.ResponseType.ACCEPT) {
-        let filePath: string | null = dialog.get_filename();
+        const filePath: string | null = dialog.get_filename();
 
         if (filePath === null) {
             Notify({
-                summary: "Failed to import",
-                body: "No file selected.",
+                summary: 'Failed to import',
+                body: 'No file selected.',
                 iconName: icons.ui.warning,
-                timeout: 5000
+                timeout: 5000,
             });
             return;
         }
 
-        let importedConfig = loadJsonFile(filePath);
+        const importedConfig = loadJsonFile(filePath);
 
         if (!importedConfig) {
             dialog.destroy();
@@ -209,26 +212,26 @@ export const importFiles = (themeOnly: boolean = false): void => {
         }
 
         Notify({
-            summary: `Importing ${themeOnly ? "Theme" : "Config"}`,
+            summary: `Importing ${themeOnly ? 'Theme' : 'Config'}`,
             body: `Importing: ${filePath}`,
             iconName: icons.ui.info,
-            timeout: 7000
+            timeout: 7000,
         });
 
-        let tmpConfigFile = Gio.File.new_for_path(`${TMP}/config.json`);
-        let optionsConfigFile = Gio.File.new_for_path(OPTIONS);
+        const tmpConfigFile = Gio.File.new_for_path(`${TMP}/config.json`);
+        const optionsConfigFile = Gio.File.new_for_path(OPTIONS);
 
-        let [tmpSuccess, tmpContent] = tmpConfigFile.load_contents(null);
-        let [optionsSuccess, optionsContent] = optionsConfigFile.load_contents(null);
+        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.");
+            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));
+        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);
@@ -244,5 +247,5 @@ export const importFiles = (themeOnly: boolean = false): void => {
         saveConfigToFile(optionsConfig, OPTIONS);
     }
     dialog.destroy();
-    bash("pkill ags && ags");
-}
+    bash('pkill ags && ags');
+};

widget/settings/shared/Header.ts

@@ -1,16 +1,18 @@
-export const Header = (headerName: string) => {
-  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",
-      }),
-    ],
-  });
+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',
+            }),
+        ],
+    });
 };

widget/settings/shared/Inputter.ts

@@ -1,220 +1,63 @@
-import { Opt } from "lib/option"
-import Gdk from "gi://Gdk"
-import icons from "lib/icons"
-import { RowProps } from "lib/types/options"
-import { Variable } from "types/variable";
-import Wallpaper from "services/Wallpaper";
-import { dependencies as checkDependencies } from "lib/utils";
-import options from "options";
-import { importFiles, saveFileDialog } from "./FileChooser";
+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';
 
-const EnumSetter = (opt: Opt<string>, values: string[]) => {
-    const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
-    const step = (dir: 1 | -1) => {
-        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 Widget.Box({
-        class_name: "enum-setter",
-        children: [lbl, prev, next],
-    })
-}
-
-export const Inputter = <T>({
-    opt,
-    type = typeof opt.value as RowProps<T>["type"],
-    enums,
-    max = 1000000,
-    min = 0,
-    increment = 1,
-    disabledBinding,
-    dependencies,
-    exportData,
-}: RowProps<T>,
+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>
-) => {
+    isUnsaved: Variable<boolean>,
+): BoxWidget => {
     return Widget.Box({
-        vpack: "center",
-        class_name: /export|import/.test(type || "") ? "" : "inputter-container",
-        setup: self => {
-
+        vpack: 'center',
+        class_name: /export|import/.test(type || '') ? '' : 'inputter-container',
+        setup: (self) => {
             switch (type) {
-                case "number": 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;
-                            })
-                        },
-                    })
-                ]
-
-                case "float":
-                case "object": 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);
-                        })
-                    })
-                ]
-
-
-                case "string": 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;
-                        }),
-                    })
-                ]
-
-                case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
-                case "boolean": 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
-                    })
-
-                case "img": return self.child = Widget.FileChooserButton({
-                    class_name: "image-chooser",
-                    on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
-                })
-
-                case "config_import": 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);
-                            }
-                        }),
-                    ]
-                })
-
-                case "wallpaper": return self.child = Widget.FileChooserButton({
-                    on_file_set: ({ uri }) => {
-                        opt.value = uri!.replace("file://", "") as T;
-                        if (options.wallpaper.enable.value) {
-                            Wallpaper.set(uri!.replace("file://", ""));
-                        }
-                    },
-                })
-
-                case "font": 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),
-                })
-
-                case "color": 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) => {
-                            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
-                    })
-
-                default: return self.child = Widget.Label({
-                    label: `no setter with type ${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}`,
+                    }));
             }
-        }
-    })
-}
+        },
+    });
+};

widget/settings/shared/Label.ts

@@ -1,33 +1,34 @@
-export const Label = (name: string, sub = "", subtitleLink = '') => {
-    const subTitle = () => {
+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",
+                hpack: 'start',
+                vpack: 'center',
+                class_name: 'options-sublabel-link',
                 label: sub,
-                // run a bash command to open the link in the default browswer
                 on_primary_click: () => Utils.execAsync(`bash -c 'xdg-open ${subtitleLink}'`),
-            })
+            });
         }
         return Widget.Label({
-            hpack: "start",
-            vpack: "center",
-            class_name: "options-sublabel",
-            label: sub
-        })
-    }
+            hpack: 'start',
+            vpack: 'center',
+            class_name: 'options-sublabel',
+            label: sub,
+        });
+    };
     return Widget.Box({
         vertical: true,
-        hpack: "start",
+        hpack: 'start',
         children: [
             Widget.Label({
-                hpack: "start",
-                vpack: "center",
-                class_name: "options-label",
-                label: name
+                hpack: 'start',
+                vpack: 'center',
+                class_name: 'options-label',
+                label: name,
             }),
-            subTitle()
-        ]
-    })
-}
+            subTitle(),
+        ],
+    });
+};

widget/settings/shared/Option.ts

@@ -1,29 +1,33 @@
-import { Label } from "./Label";
-import { Inputter } from "./Inputter";
-import icons from "lib/icons";
-import { RowProps } from "lib/types/options";
+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>(props: RowProps<T>, className: string = '') => {
+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",
+        class_name: 'option-item',
         hexpand: true,
         children: [
             Widget.Box({
-                hpack: "start",
-                vpack: "center",
+                hpack: 'start',
+                vpack: 'center',
                 hexpand: true,
-                child: Label(props.title, props.subtitle || "", props.subtitleLink),
+                child: Label(props.title, props.subtitle || '', props.subtitleLink),
             }),
             Inputter(props, className, isUnsaved),
             Widget.Button({
-                vpack: "center",
-                class_name: "reset-options",
+                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),
+                sensitive: props.opt.bind().as((v) => v !== props.opt.initial),
             }),
-        ]
-    })
-}
+        ],
+    });
+};

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;
+        }));
+};

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;
+        }));
+};

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],
+    }));
+};

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)),
+    }));
+};

widget/settings/shared/components/image.ts

@@ -0,0 +1,11 @@
+import { Opt } from 'lib/option';
+import { Attribute, BoxWidget } from 'lib/types/widget';
+
+export const imageInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
+    return (self.child = Widget.FileChooserButton({
+        class_name: 'image-chooser',
+        on_file_set: ({ uri }) => {
+            opt.value = uri!.replace('file://', '') as T;
+        },
+    }));
+};

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);
+                },
+            }),
+        ],
+    }));
+};

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);
+                });
+            },
+        }),
+    ]);
+};

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);
+                }),
+        }),
+    ]);
+};

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;
+                }),
+        }),
+    ]);
+};

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);
+                }
+            },
+        }));
+    }
+};