refactor(ui): Improve nesting buttons in lists

Author: oliversalzburg

packages/userscript/source/ui/TimeSkipSettingsUi.ts

@@ -2,6 +2,7 @@ import { Icons } from "../images/Icons";
 import { TimeSkipSettings } from "../settings/TimeSkipSettings";
 import { ucfirst } from "../tools/Format";
 import { UserScript } from "../UserScript";
+import { ButtonListItem } from "./components/ButtonListItem";
 import { TriggerButton } from "./components/buttons-icon/TriggerButton";
 import { MaxButton } from "./components/buttons-text/MaxButton";
 import { CyclesList } from "./components/CyclesList";
@@ -30,12 +31,7 @@ export class TimeSkipSettingsUi extends SettingsPanel<TimeSkipSettings> {
     this.children.add(this._trigger);
 
     this._maximum = new MaxButton(this._host, label, this.setting);
-    this.addChild(this._maximum);
 
-    const list = new SettingsList(this._host, {
-      hasDisableAll: false,
-      hasEnableAll: false,
-    });
     this._cycles = new Panel(
       this._host,
       new LabelListItem(host, ucfirst(this._host.engine.i18n("ui.cycles")), {
@@ -60,7 +56,16 @@ export class TimeSkipSettingsUi extends SettingsPanel<TimeSkipSettings> {
       }
     );
 
-    list.addChildren([this._cycles, this._seasons]);
-    this.addChild(list);
+    this.addChild(
+      new SettingsList(this._host, {
+        children: [
+          new ButtonListItem(host, this._maximum, { delimiter: true }),
+          this._cycles,
+          this._seasons,
+        ],
+        hasDisableAll: false,
+        hasEnableAll: false,
+      })
+    );
   }
 }

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

@@ -1,27 +1,20 @@
 import { UserScript } from "../../UserScript";
-import { ListItem } from "./ListItem";
+import { ListItem, ListItemOptions } from "./ListItem";
 import { TextButton } from "./TextButton";
-import { UiComponent } from "./UiComponent";
 
-export class ButtonListItem extends UiComponent implements ListItem {
-  readonly element: JQuery<HTMLElement>;
+export class ButtonListItem extends ListItem {
   readonly button: TextButton;
 
-  get elementLabel() {
-    return this.button.element;
-  }
-
-  constructor(host: UserScript, button: TextButton, delimiter = false) {
-    super(host);
+  constructor(host: UserScript, button: TextButton, options?: Partial<ListItemOptions>) {
+    super(host, options);
 
-    const element = $(`<li/>`);
-    for (const cssClass of ["ks-setting", delimiter ? "ks-delimiter" : ""]) {
-      element.addClass(cssClass);
-    }
+    this.button = button;
+    this.element.append(button.element);
+  }
 
-    element.append(button.element);
+  refreshUi(): void {
+    super.refreshUi();
 
-    this.element = element;
-    this.button = button;
+    this.button.refreshUi();
   }
 }