feat(ui): Use regular label for Resource Control

This removes the ugly read-only checkbox from the UI that's just confusing and weird.

packages/userscript/source/ui/ResourcesSettingsUi.ts

@@ -3,6 +3,7 @@ import { ucfirst } from "../tools/Format";
 import { UserScript } from "../UserScript";
 import { ConsumeButton } from "./components/buttons-text/ConsumeButton";
 import { StockButton } from "./components/buttons-text/StockButton";
+import { LabelListItem } from "./components/LabelListItem";
 import { SettingListItem } from "./components/SettingListItem";
 import { SettingsList } from "./components/SettingsList";
 import { SettingsPanel, SettingsPanelOptions } from "./components/SettingsPanel";
@@ -16,10 +17,17 @@ export class ResourcesSettingsUi extends SettingsPanel<ResourcesSettings> {
     options?: SettingsPanelOptions<SettingsPanel<ResourcesSettings>>
   ) {
     const label = host.engine.i18n("ui.resources");
-    super(host, label, settings, options);
+    super(host, label, settings, {
+      ...options,
+      settingItem: new LabelListItem(
+        host,
+        label,
+        "M38.4 42 25.85 29.45l2.85-2.85 12.55 12.55ZM9.35 42 6.5 39.15 21 24.65l-5.35-5.35-1.15 1.15-2.2-2.2v4.25l-1.2 1.2L5 17.6l1.2-1.2h4.3L8.1 14l6.55-6.55q.85-.85 1.85-1.15 1-.3 2.2-.3 1.2 0 2.2.425 1 .425 1.85 1.275l-5.35 5.35 2.4 2.4-1.2 1.2 5.2 5.2 6.1-6.1q-.4-.65-.625-1.5-.225-.85-.225-1.8 0-2.65 1.925-4.575Q32.9 5.95 35.55 5.95q.75 0 1.275.15.525.15.875.4l-4.25 4.25 3.75 3.75 4.25-4.25q.25.4.425.975t.175 1.325q0 2.65-1.925 4.575Q38.2 19.05 35.55 19.05q-.9 0-1.55-.125t-1.2-.375Z"
+      ),
+    });
 
     // Disable checkbox. Resource control is always active.
-    this.readOnly = true;
+    //this.readOnly = true;
 
     // Add all the current resources
     this._resources = [];

packages/userscript/source/ui/UserInterface.ts

@@ -219,8 +219,8 @@ export class UserInterface extends UiComponent {
     this._addRule(
       `#ks ul li.ks-setting .ks-icon-label {
         display: inline-block;
-        margin-right: 10px;
-        margin-left: 3px;
+        margin-right: 4px;
+        margin-left: 2px;
         vertical-align: middle;
       }`
     );

packages/userscript/source/ui/components/LabelListItem.ts

@@ -1,45 +1,28 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
-
-export class LabelListItem extends UiComponent {
-  readonly element: JQuery<HTMLElement>;
+import { ListItem } from "./ListItem";
 
+export class LabelListItem extends ListItem {
   /**
    * Construct a new label list item.
    *
    * @param host The userscript instance.
    * @param label The label on the setting element.
    * @param icon When set to an SVG path, will be used as an icon on the label.
    * @param delimiter Should there be additional padding below this element?
-   * @param additionalClasses A list of CSS classes to attach to the element.
    */
   constructor(
     host: UserScript,
     label: string,
     icon: string | undefined = undefined,
-    delimiter = false,
-    additionalClasses = []
+    delimiter = false
   ) {
-    super(host);
-
-    const element = $(`<li/>`);
-    for (const cssClass of ["ks-setting", delimiter ? "ks-delimiter" : "", ...additionalClasses]) {
-      element.addClass(cssClass);
-    }
+    super(host, label, delimiter);
 
     if (icon) {
       const iconElement = $("<div/>", {
         html: `<svg style="width: 15px; height: 15px;" viewBox="0 0 48 48"><path fill="currentColor" d="${icon}"/></svg>`,
       }).addClass("ks-icon-label");
-      element.append(iconElement);
+      iconElement.insertBefore(this.elementLabel);
     }
-
-    const elementLabel = $("<label/>", {
-      text: label,
-    }).addClass("ks-label");
-
-    element.append(elementLabel);
-
-    this.element = element;
   }
 }

packages/userscript/source/ui/components/ListItem.ts

@@ -11,7 +11,7 @@ export class ListItem extends UiComponent {
    * @param host The userscript instance.
    * @param label The label on the setting element.
    * @param delimiter Should there be additional padding below this element?
-   * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
+   * @param upgradeIndicator Should an indicator be rendered in front of the element,
    * to indicate that this is an upgrade of a prior setting?
    */
   constructor(host: UserScript, label: string, delimiter = false, upgradeIndicator = false) {

packages/userscript/source/ui/components/SettingListItem.ts

@@ -1,10 +1,11 @@
 import { Setting } from "../../settings/Settings";
+import { isNil } from "../../tools/Maybe";
 import { UserScript } from "../../UserScript";
 import { ListItem } from "./ListItem";
 
 export class SettingListItem<TSetting extends Setting = Setting> extends ListItem {
   readonly setting: TSetting;
-  readonly checkbox: JQuery<HTMLElement>;
+  readonly checkbox?: JQuery<HTMLElement>;
 
   readOnly: boolean;
 
@@ -19,7 +20,7 @@ export class SettingListItem<TSetting extends Setting = Setting> extends ListIte
    * @param handler.onCheck Will be invoked when the user checks the checkbox.
    * @param handler.onUnCheck Will be invoked when the user unchecks the checkbox.
    * @param delimiter Should there be additional padding below this element?
-   * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
+   * @param upgradeIndicator Should an indicator be rendered in front of the element,
    * to indicate that this is an upgrade of a prior setting?
    * @param readOnly Should the user be prevented from changing the value of the input?
    */
@@ -62,7 +63,9 @@ export class SettingListItem<TSetting extends Setting = Setting> extends ListIte
   refreshUi() {
     super.refreshUi();
 
-    this.checkbox.prop("checked", this.setting.enabled);
-    this.checkbox.prop("disabled", this.readOnly);
+    if (!isNil(this.checkbox)) {
+      this.checkbox.prop("checked", this.setting.enabled);
+      this.checkbox.prop("disabled", this.readOnly);
+    }
   }
 }

packages/userscript/source/ui/components/SettingsPanel.ts

@@ -1,17 +1,17 @@
 import { Setting } from "../../settings/Settings";
 import { isNil, mustExist } from "../../tools/Maybe";
 import { UserScript } from "../../UserScript";
+import { ListItem } from "./ListItem";
 import { Panel, PanelOptions } from "./Panel";
 import { SettingListItem } from "./SettingListItem";
 
-export type SettingsPanelOptions<TListItem extends SettingListItem = SettingListItem> =
-  PanelOptions & {
-    settingItem?: TListItem;
-  };
+export type SettingsPanelOptions<TListItem extends ListItem = ListItem> = PanelOptions & {
+  settingItem?: TListItem;
+};
 
 export class SettingsPanel<
     TSetting extends Setting = Setting,
-    TListItem extends SettingListItem = SettingListItem
+    TListItem extends ListItem = ListItem
   >
   extends Panel
   implements SettingListItem
@@ -24,17 +24,15 @@ export class SettingsPanel<
   }
 
   // SettingListItem interface
-  get checkbox() {
-    return this.settingItem.checkbox;
-  }
   get elementLabel() {
     return this._head.element;
   }
+
   get readOnly() {
-    return this.settingItem.readOnly;
+    return true;
   }
   set readOnly(value: boolean) {
-    this.settingItem.readOnly = value;
+    /* noop */
   }
 
   /**