9 files changed, 1318 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/aerospace-display-manager.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/aerospace-display-manager.jsx
new file mode 100755
index 0000000..8c4fa98
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/aerospace-display-manager.jsx
@@ -0,0 +1,83 @@
+import * as Uebersicht from "uebersicht";
+import * as Utils from "../../utils";
+import * as Icons from "../icons/icons.jsx";
+const { React } = Uebersicht;
+/**
+ * UserWidgetsCreator component allows users to create and manage custom widgets.
+ * @param {Object} props - The component props.
+ * @param {Object} props.defaultValue - The default value for the widgets.
+ * @param {Function} props.onChange - The function to call when the widgets change.
+ * @returns {JSX.Element} The UserWidgetsCreator component.
+ */
+export default function AerospaceDisplayManager({ defaultValue, onChange }) {
+  const [indexes, setIndexes] = React.useState(defaultValue || {});
+  const [displays, setDisplays] = React.useState(Object.keys(defaultValue));
+  const addDisplay = () => {
+    setDisplays((current) => {
+      const highest = Math.max(...current, 0);
+      const newIndex = highest + 1;
+      setIndexes((current) => {
+        return { ...current, [newIndex]: Number(current[newIndex]) || 1 };
+      });
+      return [...current, newIndex];
+    });
+  };
+  const removeDisplay = (index) => {
+    setDisplays((current) => {
+      const newDisplays = current.filter((display) => display !== index);
+      setIndexes((current) => {
+        const newIndexes = { ...current };
+        delete newIndexes[index];
+        return newIndexes;
+      });
+      return newDisplays;
+    });
+  };
+  React.useEffect(() => {
+    const diffs = Utils.compareObjects(defaultValue, indexes);
+    const hasDiffs = Object.keys(diffs).length > 0;
+    if (hasDiffs) onChange({ target: { value: indexes } });
+  }, [defaultValue, onChange, indexes]);
+  return (
+    <div className="aerospace-display-manager">
+      <div className="aerospace-display-manager__label">
+        <em>AeroSpace</em> Custom display indexes
+      </div>
+      <div className="aerospace-display-manager__displays">
+        {displays.map((display) => {
+          const index = indexes[display] || 1;
+          const updateIndex = (e) => {
+            const value = e.target.value;
+            setIndexes((current) => {
+              return { ...current, [display]: Number(value) };
+            });
+          };
+          return (
+            <div key={display} className="aerospace-display-manager__display">
+              <span>{display}</span>:
+              <input type="number" value={index} onChange={updateIndex} />
+              <button
+                className="aerospace-display-manager__remove-display"
+                onClick={() => removeDisplay(display)}
+              >
+                <Icons.Close />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      <button className="aerospace-display-manager__add" onClick={addDisplay}>
+        <Icons.Add />
+        Add a display
+      </button>
+    </div>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/color-picker.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/color-picker.jsx
new file mode 100755
index 0000000..dbff879
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/color-picker.jsx
@@ -0,0 +1,109 @@
+import * as Uebersicht from "uebersicht";
+import * as Settings from "../../settings";
+const { React } = Uebersicht;
+/**
+ * ColorPicker component allows users to select a color from predefined options or input a custom color.
+ * @param {Object} props - The component props.
+ * @param {Function} props.callback - The callback function to handle color selection.
+ * @param {number} props.index - The index of the color picker.
+ * @param {string} props.selectedColor - The initially selected color.
+ * @returns {JSX.Element} The ColorPicker component.
+ */
+export default function ColorPicker({ callback, index, selectedColor }) {
+  // Determine if the selected color is a custom color
+  const isSelectedCustom = !Settings.userWidgetColors.includes(selectedColor);
+  // State to manage the open/close status of the color picker
+  const [open, setOpen] = React.useState(false);
+  // State to manage the currently selected color
+  const [selected, setSelected] = React.useState(selectedColor);
+  // State to manage the custom color input
+  const [customColor, setCustomColor] = React.useState(
+    isSelectedCustom ? selectedColor : undefined,
+  );
+  // Toggle the color picker open/close status
+  const onClick = () => setOpen(!open);
+  /**
+   * Handle custom color input change.
+   * @param {Object} e - The event object.
+   */
+  const onCustomColorChange = (e) => {
+    const value = e.target.value;
+    setCustomColor(value);
+    callback?.(index, "backgroundColor", value);
+  };
+  /**
+   * Handle custom color submission.
+   */
+  const onCustomColorSubmit = () => {
+    setSelected(customColor);
+    setOpen(false);
+  };
+  return (
+    <div className="color-picker">
+      <button
+        className="color-picker__button"
+        style={{
+          backgroundColor: isSelectedCustom ? customColor : `var(${selected})`,
+        }}
+        onClick={onClick}
+      />
+      {open && (
+        <div className="color-picker__colors" onClick={() => setOpen(false)}>
+          {Settings.userWidgetColors.map((color) => {
+            /**
+             * Handle predefined color selection.
+             * @param {Object} e - The event object.
+             */
+            const onClick = (e) => {
+              e.stopPropagation();
+              setCustomColor(undefined);
+              setSelected(color);
+              callback?.(index, "backgroundColor", color);
+              setOpen(false);
+            };
+            return (
+              <button
+                key={color}
+                onClick={onClick}
+                style={{ backgroundColor: `var(${color})` }}
+              />
+            );
+          })}
+          <div
+            className="color-picker__custom-color"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              className="color-picker__custom-color-preview"
+              style={{ backgroundColor: customColor }}
+            />
+            <input
+              type="text"
+              className="color-picker__custom-color-input"
+              placeholder="Or any valid css color value (hex, rgb-a, hsl)"
+              onChange={onCustomColorChange}
+              defaultValue={customColor}
+              autoCapitalize="false"
+              autoComplete="false"
+              autoCorrect="false"
+              spellCheck={false}
+            />
+            <button
+              className="color-picker__custom-color-submit"
+              disabled={!customColor}
+              onClick={onCustomColorSubmit}
+            >
+              Ok
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/icon-picker.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/icon-picker.jsx
new file mode 100755
index 0000000..ca3bdab
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/icon-picker.jsx
@@ -0,0 +1,130 @@
+import * as Uebersicht from "uebersicht";
+import * as Icons from "../icons/icons.jsx";
+import { SuspenseIcon } from "../icons/icon.jsx";
+const { React } = Uebersicht;
+/**
+ * IconPicker component allows users to select an icon from a list of available icons.
+ *
+ * @param {Object} props - The component props.
+ * @param {Function} props.callback - The callback function to be called when an icon is selected.
+ * @param {number} props.index - The index of the icon picker.
+ * @param {string} props.selectedIcon - The initially selected icon.
+ * @returns {JSX.Element} The IconPicker component.
+ */
+export default function IconPicker({ callback, index, selectedIcon }) {
+  // State to manage the open/close state of the icon picker dropdown
+  const [open, setOpen] = React.useState(false);
+  // State to manage the currently selected icon
+  const [selected, setSelected] = React.useState(selectedIcon);
+  // State to manage the search term for filtering icons
+  const [searchTerm, setSearchTerm] = React.useState("");
+  // Get the selected icon component
+  const Icon = Icons[selected];
+  // Get the list of all available icon keys
+  const keys = Object.keys(Icons);
+  // Filter icons based on search term
+  const filteredKeys = React.useMemo(() => {
+    if (!searchTerm.trim()) {
+      return keys;
+    }
+    return keys.filter((key) =>
+      key.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [keys, searchTerm]);
+  /**
+   * Toggles the open state of the icon picker dropdown.
+   */
+  const onClick = () => setOpen(!open);
+  /**
+   * Handles search input changes.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - The input change event.
+   */
+  const onSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+  /**
+   * Clears the search term.
+   */
+  const clearSearch = () => {
+    setSearchTerm("");
+  };
+  return (
+    <div className="icon-picker">
+      <button className="icon-picker__button" onClick={onClick}>
+        <SuspenseIcon>
+          <Icon />
+        </SuspenseIcon>
+      </button>
+      {open && (
+        <div className="icon-picker__dropdown">
+          <div
+            className="icon-picker__search"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              className="icon-picker__back"
+              onClick={() => setOpen(false)}
+              type="button"
+            >
+              <Icons.ChevronLeft />
+              Back
+            </button>
+            <input
+              type="text"
+              placeholder="Search icons..."
+              value={searchTerm}
+              onChange={onSearchChange}
+              className="icon-picker__search-input"
+              autoFocus
+            />
+            {searchTerm && (
+              <button
+                className="icon-picker__search-clear"
+                onClick={clearSearch}
+                type="button"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+          <div className="icon-picker__icons" onClick={() => setOpen(false)}>
+            {filteredKeys.length > 0 ? (
+              filteredKeys.map((key) => {
+                /**
+                 * Handles the icon selection.
+                 *
+                 * @param {React.MouseEvent} e - The click event.
+                 */
+                const onClick = (e) => {
+                  e.stopPropagation();
+                  setSelected(key);
+                  callback?.(index, "icon", key);
+                  setOpen(false);
+                };
+                const Icon = Icons[key];
+                return (
+                  <button key={key} onClick={onClick} title={key}>
+                    <Icon />
+                  </button>
+                );
+              })
+            ) : (
+              <div className="icon-picker__no-results">
+                No icons found for "{searchTerm}"
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-component.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-component.jsx
new file mode 100755
index 0000000..8e48b66
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-component.jsx
@@ -0,0 +1,159 @@
+import * as Uebersicht from "uebersicht";
+import * as Utils from "../../utils";
+import SettingsInner from "./settings-inner.jsx";
+import SettingsWidgets from "./settings-widgets.jsx";
+import * as Settings from "../../settings";
+const { React } = Uebersicht;
+const TABS_STORAGE_KEY = "simple-bar-last-current-settings-tab";
+const TABS = [
+  "global",
+  "themes",
+  "process",
+  "spacesDisplay",
+  "widgets",
+  "customStyles",
+];
+/**
+ * Main settings component.
+ * @param {Object} props - Component properties.
+ * @param {Function} props.closeSettings - Function to close the settings.
+ */
+export default function Component({ closeSettings }) {
+  // State to keep track of the current tab
+  const [currentTab, setCurrentTab] = React.useState(getLastCurrentTab());
+  // State to keep track of pending changes
+  const [pendingChanges, setPendingChanges] = React.useState(0);
+  // Get current settings
+  const settings = Settings.get();
+  // State to keep track of new settings
+  const [newSettings, setNewSettings] = React.useState(settings);
+  /**
+   * Update the current tab and store it in session storage.
+   * @param {number} tab - The index of the tab to switch to.
+   */
+  const updateTab = (tab) => {
+    setCurrentTab(tab);
+    window.sessionStorage.setItem(TABS_STORAGE_KEY, tab);
+  };
+  /**
+   * Refresh the simple-bar with new settings.
+   * @param {Event} e - The event object.
+   */
+  const refreshSimpleBar = async (e) => {
+    Utils.clickEffect(e);
+    setPendingChanges(0);
+    await Settings.set(newSettings);
+    Utils.hardRefresh();
+  };
+  // Effect to calculate the number of pending changes
+  React.useEffect(() => {
+    const diffs = Utils.compareObjects(settings, newSettings);
+    const deepDiffs = Object.keys(diffs).reduce(
+      (acc, key) => [...acc, ...Object.keys(diffs[key])],
+      [],
+    );
+    setPendingChanges(deepDiffs.length);
+  }, [newSettings, settings]);
+  return (
+    <div className="settings">
+      <div className="settings__overlay" onClick={closeSettings} />
+      <div className="settings__outer">
+        <div className="settings__header">
+          <button
+            className="settings__header-dot settings__header-dot--close"
+            onClick={closeSettings}
+          />
+          <span className="settings__header-dot settings__header-dot--disabled" />
+          <span className="settings__header-dot settings__header-dot--disabled" />
+          Settings
+        </div>
+        <div className="settings__tabs">
+          {Object.keys(Settings.defaultSettings).map((key) => {
+            const setting = Settings.data[key];
+            const hideTab = !TABS.includes(key);
+            if (!setting || hideTab) return null;
+            const { label } = setting;
+            const i = TABS.indexOf(key);
+            const classes = Utils.classNames("settings__tab", {
+              "settings__tab--current": i === currentTab,
+            });
+            return (
+              <button key={i} className={classes} onClick={() => updateTab(i)}>
+                {label}
+              </button>
+            );
+          })}
+        </div>
+        <div className="settings__inner">
+          {Object.keys(Settings.defaultSettings).map((key) => {
+            const setting = Settings.data[key];
+            const hideContent = !TABS.includes(key);
+            if (!setting || hideContent) return null;
+            const isWidgetsTab = key === "widgets";
+            const { label } = setting;
+            return (
+              <div
+                key={key}
+                className="settings__category"
+                style={{ transform: `translateX(-${100 * currentTab}%)` }}
+              >
+                {isWidgetsTab ? (
+                  <SettingsWidgets
+                    newSettings={newSettings}
+                    setNewSettings={setNewSettings}
+                  />
+                ) : (
+                  <React.Fragment>
+                    <div className="settings__inner-title">{label}</div>
+                    <SettingsInner
+                      settingKey={key}
+                      setting={setting}
+                      newSettings={newSettings}
+                      setNewSettings={setNewSettings}
+                    />
+                  </React.Fragment>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="settings__bottom">
+          {pendingChanges !== 0 && (
+            <div className="settings__pending-changes">
+              <b>{pendingChanges}</b> pending change{pendingChanges > 1 && "s"}
+            </div>
+          )}
+          <button
+            className="settings__refresh-button"
+            onClick={refreshSimpleBar}
+            disabled={!pendingChanges}
+          >
+            Confirm changes and refresh simple-bar
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+/**
+ * Get the last current tab from session storage.
+ * @returns {number} The index of the last current tab.
+ */
+function getLastCurrentTab() {
+  const storedLastCurrentTab = window.sessionStorage.getItem(TABS_STORAGE_KEY);
+  if (storedLastCurrentTab) return parseInt(storedLastCurrentTab, 10);
+  return 0;
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx
new file mode 100755
index 0000000..e318b25
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-inner.jsx
@@ -0,0 +1,123 @@
+import * as Uebersicht from "uebersicht";
+import * as Icons from "../icons/icons.jsx";
+import SettingsItem from "./settings-item.jsx";
+import * as Utils from "../../utils";
+import * as Settings from "../../settings";
+const { React } = Uebersicht;
+/**
+ * SettingsInner component to render each setting category.
+ * @param {Object} props - Component properties.
+ * @param {string} props.settingKey - Key of current setting.
+ * @param {Object} props.setting - Contains infos & documentation data.
+ * @param {string[]} props.setting.infos - Current settings information.
+ * @param {string} props.setting.documentation - Current setting documentation link.
+ * @param {Object} props.newSettings - Object containing current modified settings.
+ * @param {Function} props.setNewSettings - Function allowing to save newly modified settings.
+ */
+export default function SettingsInner({
+  settingKey,
+  setting,
+  newSettings,
+  setNewSettings,
+}) {
+  const { infos, documentation } = setting;
+  return (
+    <>
+      {Object.keys(Settings.defaultSettings[settingKey]).map((subKey) => {
+        const subSetting = Settings.data[subKey];
+        if (!subSetting) return null;
+        const {
+          Component,
+          fullWidth,
+          label,
+          options,
+          placeholder,
+          title,
+          type,
+          minHeight,
+        } = subSetting;
+        const code = settingKey + subKey;
+        const defaultValue = newSettings[settingKey][subKey];
+        const classes = Utils.classNames("settings__item", {
+          "settings__item--radio": type === "radio",
+          "settings__item--text":
+            type === "text" || type === "number" || type === "color",
+          "settings__item--textarea": type === "textarea",
+          "settings__item--color": type === "color",
+          "settings__item--full-width": fullWidth,
+        });
+        const onChange = (e) => {
+          let value = e.target.value;
+          if (type === "checkbox") {
+            value = e.target.checked;
+          }
+          if (type === "number") {
+            value = parseFloat(value);
+            if (isNaN(value)) {
+              value = 0;
+            }
+          }
+          const updatedSettings = {
+            ...newSettings,
+            [settingKey]: { ...newSettings[settingKey], [subKey]: value },
+          };
+          setNewSettings(updatedSettings);
+        };
+        return (
+          <React.Fragment key={code}>
+            {title && <div className="settings__item-title">{title}</div>}
+            <div
+              className={classes}
+              onChange={type === "radio" ? onChange : undefined}
+            >
+              <SettingsItem
+                code={code}
+                Component={Component}
+                defaultValue={defaultValue}
+                label={label}
+                onChange={onChange}
+                options={options}
+                placeholder={placeholder}
+                type={type}
+                minHeight={minHeight}
+              />
+            </div>
+          </React.Fragment>
+        );
+      })}
+      {documentation && (
+        <div className="settings__documentation">
+          <Icons.OpenBook className="settings__documentation-icon" />
+          <span className="settings__documentation-title">
+            You{"'"}ll find all the information about these settings{" "}
+            <a
+              href={`https://www.jeantinland.com/toolbox/simple-bar/documentation${documentation}`}
+            >
+              here on the documentation
+            </a>{" "}
+            hosted on jeantinland.com.
+          </span>
+        </div>
+      )}
+      {infos && infos.length && (
+        <div className="settings__infos">
+          <div className="settings__infos-title">Tips</div>
+          {infos.map((info, i) => (
+            <div
+              key={i}
+              className="settings__info"
+              dangerouslySetInnerHTML={{ __html: info }}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-item.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-item.jsx
new file mode 100755
index 0000000..91c6f54
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-item.jsx
@@ -0,0 +1,143 @@
+import * as Uebersicht from "uebersicht";
+import * as Utils from "../../utils";
+const { React } = Uebersicht;
+/**
+ * Item component to render different types of settings inputs.
+ * @param {Object} props - Component properties.
+ * @param {string} props.code - Unique code for the setting.
+ * @param {React.Component} props.Component - Custom component for the setting.
+ * @param {any} props.defaultValue - Default value of the setting.
+ * @param {string} props.label - Label for the setting.
+ * @param {string} props.type - Type of the setting input.
+ * @param {Array} [props.options] - Options for select or radio inputs.
+ * @param {string} [props.placeholder] - Placeholder for text inputs.
+ * @param {number} [props.minHeight] - Minimum height for textarea inputs.
+ * @param {Function} props.onChange - Change handler for the setting input.
+ */
+export default function SettingsItem({
+  code,
+  Component,
+  defaultValue,
+  label,
+  type,
+  options,
+  placeholder,
+  minHeight,
+  onChange,
+}) {
+  const onClick = (e) => Utils.clickEffect(e);
+  if (type === "component") {
+    return <Component defaultValue={defaultValue} onChange={onChange} />;
+  }
+  if (type === "select") {
+    return (
+      <React.Fragment>
+        <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
+        <select
+          id={code}
+          className="settings__select"
+          onChange={onChange}
+          defaultValue={defaultValue}
+        >
+          {options.map((option) => (
+            <option key={option.code} value={option.code}>
+              {option.name}
+            </option>
+          ))}
+        </select>
+      </React.Fragment>
+    );
+  }
+  if (type === "radio") {
+    return options.map((option) => (
+      <div className="settings__item-option" key={option} onClick={onClick}>
+        <input
+          name={code}
+          id={option}
+          value={option}
+          type="radio"
+          defaultChecked={option === defaultValue}
+        />
+        <label
+          htmlFor={option}
+          dangerouslySetInnerHTML={{ __html: `${option} ${label}` }}
+        />
+      </div>
+    ));
+  }
+  if (type === "text" || type === "color") {
+    return (
+      <React.Fragment>
+        <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
+        {type === "color" && (
+          <div
+            className="settings__item-color-pill"
+            style={{ backgroundColor: defaultValue || "transparent" }}
+          />
+        )}
+        <input
+          id={code}
+          type="text"
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          onChange={onChange}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+        />
+      </React.Fragment>
+    );
+  }
+  if (type === "number") {
+    return (
+      <React.Fragment>
+        <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
+        <input
+          id={code}
+          type="number"
+          value={defaultValue}
+          placeholder={placeholder}
+          onChange={onChange}
+          autoComplete="off"
+        />
+      </React.Fragment>
+    );
+  }
+  if (type === "textarea") {
+    return (
+      <React.Fragment>
+        <label htmlFor={code} dangerouslySetInnerHTML={{ __html: label }} />
+        <textarea
+          id={code}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          onChange={onChange}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          style={{ minHeight }}
+        />
+      </React.Fragment>
+    );
+  }
+  return (
+    <React.Fragment>
+      <input
+        id={code}
+        type="checkbox"
+        defaultChecked={defaultValue}
+        onChange={onChange}
+        onClick={onClick}
+      />
+      <label
+        htmlFor={code}
+        onClick={onClick}
+        dangerouslySetInnerHTML={{ __html: label }}
+      />
+    </React.Fragment>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-widgets.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-widgets.jsx
new file mode 100755
index 0000000..736e4bb
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-widgets.jsx
@@ -0,0 +1,180 @@
+import * as Uebersicht from "uebersicht";
+import * as Icons from "../icons/icons.jsx";
+import * as Utils from "../../utils";
+import * as Settings from "../../settings";
+import SettingsInner from "./settings-inner.jsx";
+const { React } = Uebersicht;
+const settingsKeys = {
+  batteryWidget: "batteryWidgetOptions",
+  browserTrackWidget: "browserTrackWidgetOptions",
+  cpuWidget: "cpuWidgetOptions",
+  cryptoWidget: "cryptoWidgetOptions",
+  dateWidget: "dateWidgetOptions",
+  gpuWidget: "gpuWidgetOptions",
+  memoryWidget: "memoryWidgetOptions",
+  keyboardWidget: "keyboardWidgetOptions",
+  micWidget: "micWidgetOptions",
+  mpdWidget: "mpdWidgetOptions",
+  musicWidget: "musicWidgetOptions",
+  netstatsWidget: "netstatsWidgetOptions",
+  nextMeetingWidget: "nextMeetingWidgetOptions",
+  notificationsWidget: "notificationsWidgetOptions",
+  soundWidget: "soundWidgetOptions",
+  spotifyWidget: "spotifyWidgetOptions",
+  stockWidget: "stockWidgetOptions",
+  timeWidget: "timeWidgetOptions",
+  vpnWidget: "vpnWidgetOptions",
+  githubWidget: "githubWidgetOptions",
+  weatherWidget: "weatherWidgetOptions",
+  wifiWidget: "networkWidgetOptions",
+  youtubeMusicWidget: "youtubeMusicWidgetOptions",
+  zoomWidget: "zoomWidgetOptions",
+  userWidgets: "userWidgets",
+};
+/**
+ * SettingsWidgets component to render widgets setting category.
+ * @param {Object} props - Component properties.
+ * @param {Object} props.newSettings - Object containing current modified settings.
+ * @param {Function} props.setNewSettings - Function allowing to save newly modified settings.
+ */
+export default function SettingsWidgets({ newSettings, setNewSettings }) {
+  const [currentWidget, setCurrentWidget] = React.useState(null);
+  const currentSetting = Settings.data[currentWidget];
+  /**
+   * Removes the current widget setting,
+   */
+  const removeCurrentWidget = () => {
+    setCurrentWidget(null);
+  };
+  /**
+   * Prevent checkbox click from propagating to the parent element,
+   * allowing to avoid triggering the widget selection.
+   */
+  const handleCheckboxClick = (e) => {
+    e.stopPropagation();
+    Utils.clickEffect(e);
+  };
+  /**
+   * Updates the current widget based on the clicked element.
+   * @param {string} widget - The key of the widget to update.
+   */
+  const updateCurrentWidget = (widget) => (e) => {
+    if (widget === "processWidget") return;
+    Utils.clickEffect(e);
+    const widgetKey = settingsKeys[widget];
+    setCurrentWidget(currentWidget === widgetKey ? null : widgetKey);
+  };
+  return (
+    <div className="settings__widgets">
+      <Breadcrumb
+        currentSetting={currentSetting}
+        removeCurrentWidget={removeCurrentWidget}
+      />
+      {!currentWidget ? (
+        <div className="settings__widgets-list">
+          <div
+            className="settings__widgets-item"
+            onClick={updateCurrentWidget("userWidgets")}
+          >
+            Custom widgets
+            <Icons.ChevronRight className="settings__widgets-item-icon" />
+          </div>
+          {Object.keys(Settings.defaultSettings.widgets).map((subKey) => {
+            const subSetting = Settings.data[subKey];
+            if (!subSetting) return null;
+            const { label } = subSetting;
+            const defaultValue = newSettings.widgets[subKey];
+            const isProcess = subKey === "processWidget";
+            const classes = Utils.classNames("settings__widgets-item", {
+              "settings__widgets-item--process": isProcess,
+            });
+            const onChange = (e) => {
+              const value = e.target.checked;
+              const updatedSettings = {
+                ...newSettings,
+                widgets: { ...newSettings.widgets, [subKey]: value },
+              };
+              setNewSettings(updatedSettings);
+            };
+            return (
+              <div
+                key={subKey}
+                className={classes}
+                onClick={updateCurrentWidget(subKey)}
+              >
+                <input
+                  type="checkbox"
+                  defaultChecked={defaultValue}
+                  onChange={onChange}
+                  onClick={handleCheckboxClick}
+                />
+                {label}
+                {!isProcess && (
+                  <Icons.ChevronRight className="settings__widgets-item-icon" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="settings__widget-settings">
+          <SettingsInner
+            settingKey={currentWidget}
+            setting={currentSetting}
+            newSettings={newSettings}
+            setNewSettings={setNewSettings}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+/**
+ * SettingsWidgets component to render widgets setting category.
+ * @param {Object} props - Component properties.
+ * @param {Object} props.currentSetting - Object containing the current setting.
+ * @param {Function} props.removeCurrentWidget - Function removing the current setting allowing to go back to widget list.
+ */
+function Breadcrumb({ currentSetting, removeCurrentWidget }) {
+  if (!currentSetting) {
+    return (
+      <div className="settings__widgets-breadcrumb">
+        <div className="settings__widgets-breadcrumb-title">Widgets</div>
+      </div>
+    );
+  }
+  const { label } = currentSetting;
+  return (
+    <div className="settings__widgets-breadcrumb">
+      <button
+        className="settings__widgets-breadcrumb-title"
+        onClick={removeCurrentWidget}
+      >
+        Widgets
+      </button>
+      <span className="settings__widgets-breadcrumb-current">
+        {">"} {label}
+      </span>
+      <button
+        className="settings__widgets-breadcrumb-back"
+        onClick={removeCurrentWidget}
+      >
+        <Icons.ChevronLeft className="settings__widgets-breadcrumb-back-icon" />
+        Back
+      </button>
+    </div>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx
new file mode 100755
index 0000000..c63f853
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx
@@ -0,0 +1,94 @@
+import * as Uebersicht from "uebersicht";
+import * as Utils from "../../utils";
+import * as Settings from "../../settings";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+export { settingsStyles as styles } from "../../styles/components/settings/settings";
+const { React } = Uebersicht;
+// Settings component is lazy loaded. That way,
+// it isn't loaded everytime simple-bar is refreshed
+const Component = React.lazy(() => import("./settings-component.jsx"));
+/**
+ * Wrapper component that handles keyboard shortcuts for various actions
+ * and manages the visibility of the settings component.
+ *
+ * @component
+ * @returns {React.Fragment} A fragment containing the settings component if visible.
+ */
+export function Wrapper() {
+  const { pushMissive } = useSimpleBarContext();
+  const [visible, setVisible] = React.useState(false);
+  const closeSettings = () => {
+    setVisible(false);
+    Utils.blurBar();
+  };
+  // Actions handled by this function are
+  // > Hard refresh simple-bar with cmd/ctrl + r
+  // > Open settings with cmd/ctrl + ,
+  // > Toggle dark theme with cmd/ctrl + t
+  const handleKeydown = React.useCallback(
+    (e) => {
+      const { ctrlKey, key, metaKey } = e;
+      if ((ctrlKey || metaKey) && key === "r") {
+        e.preventDefault();
+        Utils.hardRefresh();
+      }
+      if ((ctrlKey || metaKey) && key === ",") {
+        e.preventDefault();
+        setVisible(true);
+      }
+      if ((ctrlKey || metaKey) && key === "t") {
+        e.preventDefault();
+        // We retrieve the latest version of settings
+        const settings = Settings.get();
+        const AUTO = "auto";
+        // If current value is auto, it is stored as is
+        // otherwise, it is toggled
+        let newValue = AUTO;
+        if (settings.global.theme !== AUTO) {
+          newValue = settings.global.theme;
+        }
+        // OS is instructed to toggle dark theme
+        Uebersicht.run(
+          `osascript -e 'tell app "System Events" to tell appearance preferences to set dark mode to not dark mode'`,
+        );
+        // A notification is pushed either in Macos notification center or via internal missives system
+        Utils.notification("Toggling dark theme...", pushMissive);
+        if (newValue !== AUTO) {
+          // Only theme value is updated
+          const updatedSettings = {
+            ...settings,
+            global: { ...settings.global, theme: newValue },
+          };
+          // Settings are updated and simple-bar is hard refreshed
+          Settings.set(updatedSettings);
+          Utils.hardRefresh();
+        }
+      }
+    },
+    [pushMissive],
+  );
+  React.useEffect(() => {
+    // We bind keydown event on Übersicht document when <Settings /> component is mounted
+    // Event listener is removed on unmount
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [handleKeydown]);
+  // Only a fragment is returned if <Settings /> component is not visible
+  return (
+    <React.Fragment>
+      {visible && (
+        <React.Suspense fallback={<React.Fragment />}>
+          <Component visible={visible} closeSettings={closeSettings} />
+        </React.Suspense>
+      )}
+    </React.Fragment>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx
new file mode 100755
index 0000000..a026047
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/user-widgets-creator.jsx
@@ -0,0 +1,297 @@
+import * as Uebersicht from "uebersicht";
+import * as Icons from "../icons/icons.jsx";
+import * as Settings from "../../settings";
+import * as Utils from "../../utils";
+import ColorPicker from "./color-picker.jsx";
+import IconPicker from "./icon-picker.jsx";
+const { React } = Uebersicht;
+/**
+ * UserWidgetsCreator component allows users to create and manage custom widgets.
+ * @param {Object} props - The component props.
+ * @param {Object} props.defaultValue - The default value for the widgets.
+ * @param {Function} props.onChange - The function to call when the widgets change.
+ * @returns {JSX.Element} The UserWidgetsCreator component.
+ */
+export default function UserWidgetsCreator({ defaultValue, onChange }) {
+  const [widgets, setWidgets] = React.useState(defaultValue || {});
+  const keys = Object.keys(widgets);
+  // Determine the highest widget ID and calculate the new ID for a new widget
+  const highestId = keys.reduce((acc, key) => {
+    const keyAsNumber = parseInt(key, 10);
+    return keyAsNumber > acc ? keyAsNumber : acc;
+  }, 1);
+  const newId = highestId + 1;
+  // Function to add a new widget
+  const onClick = () =>
+    setWidgets((widgets) => ({
+      ...widgets,
+      [newId]: { ...Settings.userWidgetDefault },
+    }));
+  // Function to handle changes to a widget
+  const onWidgetChange = (index, field, value) => {
+    const newWidgets = { ...widgets };
+    const newKeys = Object.keys(newWidgets);
+    const updatedWidgets = newKeys.reduce((acc, key, i) => {
+      const widget = newWidgets[key];
+      return {
+        ...acc,
+        [i + 1]: key === index ? { ...widget, [field]: value } : widget,
+      };
+    }, {});
+    setWidgets(updatedWidgets);
+  };
+  // Effect to detect changes in widgets and call onChange prop
+  React.useEffect(() => {
+    const diffs = Utils.compareObjects(defaultValue, widgets);
+    const hasDiffs = Object.keys(diffs).length > 0;
+    if (hasDiffs) onChange({ target: { value: widgets } });
+  }, [defaultValue, onChange, widgets]);
+  return (
+    <div className="user-widgets-creator">
+      {keys.map((key, i) => (
+        <UserWidgetCreator
+          key={`${key}-${widgets[key].backgroundColor}`}
+          index={key}
+          onWidgetChange={onWidgetChange}
+          setWidgets={setWidgets}
+          widget={widgets[key]}
+          isFirst={i === 0}
+          isLast={i === keys.length - 1}
+        />
+      ))}
+      <button className="user-widgets-creator__add" onClick={onClick}>
+        <Icons.Add />
+        Add a custom widget
+      </button>
+    </div>
+  );
+}
+/**
+ * UserWidgetCreator component allows users to configure individual widgets.
+ * @param {Object} props - The component props.
+ * @param {string} props.index - The index of the widget.
+ * @param {boolean} props.isFirst - Whether the widget is the first in the list.
+ * @param {boolean} props.isLast - Whether the widget is the last in the list.
+ * @param {Function} props.onWidgetChange - The function to call when the widget changes.
+ * @param {Function} props.setWidgets - The function to set the widgets state.
+ * @param {Object} props.widget - The widget data.
+ * @returns {JSX.Element} The UserWidgetCreator component.
+ */
+function UserWidgetCreator({
+  index,
+  isFirst,
+  isLast,
+  onWidgetChange,
+  setWidgets,
+  widget,
+}) {
+  const {
+    title,
+    icon,
+    backgroundColor,
+    output,
+    onClickAction,
+    onRightClickAction,
+    onMiddleClickAction,
+    refreshFrequency,
+    active = true,
+    noIcon = false,
+    hideWhenNoOutput = true,
+    showOnDisplay = "",
+  } = widget;
+  const indexAsNumber = parseInt(index, 10);
+  // Function to remove a widget
+  const onRemoveClick = () => {
+    setWidgets((widgets) => {
+      const keys = Object.keys(widgets);
+      return keys.reduce(
+        (acc, key) => (key === index ? acc : { ...acc, [key]: widgets[key] }),
+        {},
+      );
+    });
+  };
+  // Function to handle changes to widget fields
+  const onChange = (field, chexbox = false) => {
+    return (e) => {
+      const value = (chexbox ? e?.target?.checked : e?.target?.value) ?? "";
+      onWidgetChange(index, field, value);
+    };
+  };
+  // Function to move the widget up in the list
+  const onBeforeClick = () => {
+    setWidgets((widgets) => {
+      const swapedWidget = widgets[indexAsNumber - 1];
+      return {
+        ...widgets,
+        [indexAsNumber - 1]: widget,
+        [indexAsNumber]: swapedWidget,
+      };
+    });
+  };
+  // Function to move the widget down in the list
+  const onAfterClick = () => {
+    setWidgets((widgets) => {
+      const swapedWidget = widgets[indexAsNumber + 1];
+      return {
+        ...widgets,
+        [indexAsNumber + 1]: widget,
+        [indexAsNumber]: swapedWidget,
+      };
+    });
+  };
+  return (
+    <div key={indexAsNumber} className="user-widget-creator">
+      <div className="user-widget-creator__sort-buttons">
+        {!isFirst && (
+          <button
+            className="user-widget-creator__sort-button user-widget-creator__sort-button--before"
+            onClick={onBeforeClick}
+          >
+            <Icons.ChevronTop />
+          </button>
+        )}
+        {!isLast && (
+          <button
+            className="user-widget-creator__sort-button user-widget-creator__sort-button--after"
+            onClick={onAfterClick}
+          >
+            <Icons.ChevronBottom />
+          </button>
+        )}
+      </div>
+      <button className="user-widget-creator__remove" onClick={onRemoveClick}>
+        <Icons.Remove />
+      </button>
+      <div className="user-widget-creator__index">
+        n°<b>{index}</b>
+      </div>
+      <IconPicker callback={onWidgetChange} index={index} selectedIcon={icon} />
+      <div className="user-widget-creator__right">
+        <div className="user-widget-creator__right-top">
+          <ColorPicker
+            callback={onWidgetChange}
+            index={index}
+            selectedColor={backgroundColor}
+          />
+          <input
+            className="user-widget-creator__title"
+            onChange={onChange("title")}
+            type="text"
+            defaultValue={title}
+          />
+          <label htmlFor={`refresh-frequency-${index}`}>
+            Refresh frequency (ms):
+          </label>
+          <input
+            className="user-widget-creator__refresh-frequency"
+            onChange={onChange("refreshFrequency")}
+            id={`refresh-frequency-${index}`}
+            type="text"
+            defaultValue={refreshFrequency}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`show-on-display-${index}`}>Show on display: </label>
+          <input
+            className="user-widget-creator__show-on-display"
+            onChange={onChange("showOnDisplay")}
+            id={`show-on-display-${index}`}
+            type="text"
+            defaultValue={showOnDisplay}
+            placeholder="example: 1,2 (leave blank to show on all displays)"
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`output-${index}`}>Command/script path: </label>
+          <input
+            className="user-widget-creator__output"
+            onChange={onChange("output")}
+            id={`output-${index}`}
+            type="text"
+            defaultValue={output}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`on-click-action-${index}`}>
+            On click command/script path:{" "}
+          </label>
+          <input
+            className="user-widget-creator__on-click-action"
+            onChange={onChange("onClickAction")}
+            id={`on-click-action-${index}`}
+            type="text"
+            defaultValue={onClickAction}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`on-right-click-action-${index}`}>
+            On right click command/script path:{" "}
+          </label>
+          <input
+            className="user-widget-creator__on-right-click-action"
+            onChange={onChange("onRightClickAction")}
+            id={`on-right-click-action-${index}`}
+            type="text"
+            defaultValue={onRightClickAction}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <label htmlFor={`on-middle-click-action-${index}`}>
+            On middle click command/script path:{" "}
+          </label>
+          <input
+            className="user-widget-creator__on-middle-click-action"
+            onChange={onChange("onMiddleClickAction")}
+            id={`on-middle-click-action-${index}`}
+            type="text"
+            defaultValue={onMiddleClickAction}
+            spellCheck={false}
+          />
+        </div>
+        <div className="user-widget-creator__input-group">
+          <input
+            id={`active-${index}`}
+            type="checkbox"
+            defaultChecked={active}
+            onChange={onChange("active", true)}
+          />
+          <label htmlFor={`active-${index}`}>Active</label>
+          <input
+            id={`no-icon-${index}`}
+            type="checkbox"
+            defaultChecked={noIcon}
+            onChange={onChange("noIcon", true)}
+          />
+          <label htmlFor={`no-icon-${index}`}>No icon</label>
+          <input
+            id={`hide-when-no-output-${index}`}
+            type="checkbox"
+            defaultChecked={hideWhenNoOutput}
+            onChange={onChange("hideWhenNoOutput", true)}
+          />
+          <label htmlFor={`hide-when-no-output-${index}`}>
+            Hide when no script output
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}