feat: allow custom icons on custom modules (#351)

* feat: allow custom icons on custom modules

* Update options.ts

* Update customModules/config.ts

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

customModules/config.ts

@@ -37,6 +37,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                     title: 'Button Border',
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.bar.customModules.ram.icon,
+                    title: 'Ram Icon',
+                    type: 'string',
+                }),
                 Option({
                     opt: options.bar.customModules.ram.label,
                     title: 'Show Label',
@@ -93,6 +98,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                     title: 'Button Border',
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.bar.customModules.cpu.icon,
+                    title: 'Cpu Icon',
+                    type: 'string',
+                }),
                 Option({
                     opt: options.bar.customModules.cpu.label,
                     title: 'Show Label',
@@ -156,8 +166,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.storage.icon,
                     title: 'Storage Icon',
-                    type: 'enum',
+                    type: 'string',
-                    enums: ['󰋊', '', '󱛟', '', '', ''],
                 }),
                 Option({
                     opt: options.bar.customModules.storage.label,
@@ -225,8 +234,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.netstat.icon,
                     title: 'Netstat Icon',
-                    type: 'enum',
+                    type: 'string',
-                    enums: ['󰖟', '󰇚', '󰕒', '󰛳', '', '󰣺', '󰖩', '', '󰈀'],
                 }),
                 Option({
                     opt: options.bar.customModules.netstat.label,
@@ -292,9 +300,8 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 }),
                 Option({
                     opt: options.bar.customModules.kbLayout.icon,
-                    title: 'kbLayout Icon',
+                    title: 'Keyboard Layout Icon',
-                    type: 'enum',
+                    type: 'string',
-                    enums: ['', '󰌌', '', '󰬴', '󰗊'],
                 }),
                 Option({
                     opt: options.bar.customModules.kbLayout.label,
@@ -357,8 +364,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.updates.icon,
                     title: 'Updates Icon',
-                    type: 'enum',
+                    type: 'string',
-                    enums: ['󰚰', '󰇚', '', '󱑢', '󱑣', '󰏖', '', '󰏔', '󰏗'],
                 }),
                 Option({
                     opt: options.bar.customModules.updates.label,
@@ -557,8 +563,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.power.icon,
                     title: 'Power Button Icon',
-                    type: 'enum',
+                    type: 'string',
-                    enums: ['', '', '󰍃', '󰿅', '󰒲', '󰤄'],
                 }),
                 Option({
                     opt: options.bar.customModules.power.leftClick,

customModules/cpu/index.ts

@@ -13,7 +13,7 @@ import { BarBoxChild } from 'lib/types/bar';
 import { Attribute, Child } from 'lib/types/widget';
 
 // All the user configurable options for the cpu module that are needed
-const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval } =
+const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval, icon } =
     options.bar.customModules.cpu;
 
 export const cpuUsage = Variable(0);
@@ -35,7 +35,7 @@ export const Cpu = (): BarBoxChild => {
     };
 
     const cpuModule = module({
-        textIcon: '',
+        textIcon: icon.bind('value'),
         label: Utils.merge([cpuUsage.bind('value'), round.bind('value')], (cpuUsg, rnd) => {
             return renderLabel(cpuUsg, rnd);
         }),

customModules/ram/index.ts

@@ -20,7 +20,8 @@ import { pollVariable } from 'customModules/PollVar';
 import { Attribute, Child } from 'lib/types/widget';
 
 // All the user configurable options for the ram module that are needed
-const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval } = options.bar.customModules.ram;
+const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval, icon } =
+    options.bar.customModules.ram;
 
 const defaultRamData: GenericResourceData = { total: 0, used: 0, percentage: 0, free: 0 };
 const ramUsage = Variable<GenericResourceData>(defaultRamData);
@@ -29,7 +30,7 @@ pollVariable(ramUsage, [round.bind('value')], pollingInterval.bind('value'), cal
 
 export const Ram = (): BarBoxChild => {
     const ramModule = module({
-        textIcon: '',
+        textIcon: icon.bind('value'),
         label: Utils.merge(
             [ramUsage.bind('value'), labelType.bind('value'), round.bind('value')],
             (rmUsg: GenericResourceData, lblTyp: ResourceLabelType, round: boolean) => {

lib/types/bar.d.ts

@@ -36,12 +36,7 @@ export type Module = {
 
 export type ResourceLabelType = 'used/total' | 'used' | 'percentage' | 'free';
 
-export type StorageIcon = '󰋊' | '' | '󱛟' | '' | '' | '';
-
-export type NetstatIcon = '󰖟' | '󰇚' | '󰕒' | '󰛳' | '' | '󰣺' | '󰖩' | '' | '󰈀';
 export type NetstatLabelType = 'full' | 'in' | 'out';
 export type RateUnit = 'GiB' | 'MiB' | 'KiB' | 'auto';
 
-export type UpdatesIcon = '󰚰' | '󰇚' | '' | '󱑢' | '󱑣' | '󰏖' | '' | '󰏔' | '󰏗';
 
-export type PowerIcon = '' | '' | '󰍃' | '󰿅' | '󰒲' | '󰤄';

lib/types/customModules/kbLayout.d.ts

@@ -1,7 +1,6 @@
 import { layoutMap } from 'customModules/kblayout/layouts';
 
 export type KbLabelType = 'layout' | 'code';
-export type KbIcon = '' | '󰌌' | '' | '󰬴' | '󰗊';
 
 export type HyprctlKeyboard = {
     address: string;

options.ts

@@ -1,14 +1,6 @@
 import { opt, mkOptions } from 'lib/option';
-import {
+import { NetstatLabelType, RateUnit, ResourceLabelType } from 'lib/types/bar';
-    NetstatIcon,
+import { KbLabelType } from 'lib/types/customModules/kbLayout';
-    NetstatLabelType,
-    PowerIcon,
-    RateUnit,
-    ResourceLabelType,
-    StorageIcon,
-    UpdatesIcon,
-} from 'lib/types/bar';
-import { KbIcon, KbLabelType } from 'lib/types/customModules/kbLayout';
 import {
     ActiveWsIndicator,
     BarButtonStyles,
@@ -951,6 +943,7 @@ const options = mkOptions(OPTIONS, {
         customModules: {
             scrollSpeed: opt(5),
             ram: {
+                icon: opt(''),
                 label: opt(true),
                 labelType: opt<ResourceLabelType>('percentage'),
                 round: opt(true),
@@ -960,6 +953,7 @@ const options = mkOptions(OPTIONS, {
                 middleClick: opt(''),
             },
             cpu: {
+                icon: opt(''),
                 label: opt(true),
                 round: opt(true),
                 pollingInterval: opt(2000),
@@ -971,7 +965,7 @@ const options = mkOptions(OPTIONS, {
             },
             storage: {
                 label: opt(true),
-                icon: opt<StorageIcon>('󰋊'),
+                icon: opt('󰋊'),
                 round: opt(false),
                 labelType: opt<ResourceLabelType>('percentage'),
                 pollingInterval: opt(2000),
@@ -982,7 +976,7 @@ const options = mkOptions(OPTIONS, {
             netstat: {
                 label: opt(true),
                 networkInterface: opt(''),
-                icon: opt<NetstatIcon>('󰖟'),
+                icon: opt('󰖟'),
                 round: opt(true),
                 labelType: opt<NetstatLabelType>('full'),
                 rateUnit: opt<RateUnit>('auto'),
@@ -994,7 +988,7 @@ const options = mkOptions(OPTIONS, {
             kbLayout: {
                 label: opt(true),
                 labelType: opt<KbLabelType>('code'),
-                icon: opt<KbIcon>('󰌌'),
+                icon: opt('󰌌'),
                 leftClick: opt(''),
                 rightClick: opt(''),
                 middleClick: opt(''),
@@ -1005,7 +999,7 @@ const options = mkOptions(OPTIONS, {
                 updateCommand: opt('$HOME/.config/ags/scripts/checkUpdates.sh -arch'),
                 label: opt(true),
                 padZero: opt(true),
-                icon: opt<UpdatesIcon>('󰏖'),
+                icon: opt('󰏖'),
                 pollingInterval: opt(1000 * 60 * 60 * 6),
                 leftClick: opt(''),
                 rightClick: opt(''),
@@ -1036,7 +1030,7 @@ const options = mkOptions(OPTIONS, {
                 scrollDown: opt(''),
             },
             power: {
-                icon: opt<PowerIcon>(''),
+                icon: opt(''),
                 showLabel: opt(true),
                 leftClick: opt('menu:powerdropdown'),
                 rightClick: opt(''),