feat(core): Update stored states

Author: oliversalzburg

packages/documentation/docs/development.md

@@ -121,7 +121,7 @@ Internals related:
 
 -   `core`
 
-    Relates to central behavior of KS
+    Relates to central behavior of KS. Also includes state management.
 
 -   `filters`
 

packages/documentation/docs/sections/state-management.md

@@ -34,7 +34,7 @@ Resets every setting to the state that KS would have if you used it for the firs
 
 When you have stored any states, they will appear in this list. Clicking on their name will load them.
 
-You can also copy the state to the clipboard, or delete it. When copying a state, the **Compress data** setting is respected.
+You can also sync the stored state with your current settings state, copy the state to the clipboard, or delete it. When copying a state, the **Compress data** setting is respected.
 
 <!-- prettier-ignore-start -->
 *[KG]: Kittens Game

packages/userscript/source/i18n/en.json

@@ -106,6 +106,7 @@
   "state.confirmDestruction": "Are you sure?",
   "state.deleted": "State loaded.",
   "state.loaded": "State loaded.",
+  "state.updated": "State updated.",
   "status.auto.disable": "Disable Auto {0}",
   "status.auto.enable": "Enable Auto {0}",
   "status.ks.disable": "Disabling the Kitten Scientists!",

packages/userscript/source/images/Icons.ts

@@ -44,6 +44,9 @@ export class Icons {
   static readonly Summary =
     "M15.45 16.95q.6 0 1.05-.45.45-.45.45-1.05 0-.6-.45-1.05-.45-.45-1.05-.45-.6 0-1.05.45-.45.45-.45 1.05 0 .6.45 1.05.45.45 1.05.45Zm0 8.55q.6 0 1.05-.45.45-.45.45-1.05 0-.6-.45-1.05-.45-.45-1.05-.45-.6 0-1.05.45-.45.45-.45 1.05 0 .6.45 1.05.45.45 1.05.45Zm0 8.55q.6 0 1.05-.45.45-.45.45-1.05 0-.6-.45-1.05-.45-.45-1.05-.45-.6 0-1.05.45-.45.45-.45 1.05 0 .6.45 1.05.45.45 1.05.45ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h23.1l9.9 9.9V39q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V17.55h-8.55V9H9v30ZM9 9v8.55V9v30V9Z";
 
+  static readonly Sync =
+    "M8.35 40v-3h6.5l-.75-.6q-3.2-2.55-4.65-5.55-1.45-3-1.45-6.7 0-5.3 3.125-9.525Q14.25 10.4 19.35 8.8v3.1q-3.75 1.45-6.05 4.825T11 24.15q0 3.15 1.175 5.475 1.175 2.325 3.175 4.025l1.5 1.05v-6.2h3V40Zm20.35-.75V36.1q3.8-1.45 6.05-4.825T37 23.85q0-2.4-1.175-4.875T32.75 14.6l-1.45-1.3v6.2h-3V8h11.5v3h-6.55l.75.7q3 2.8 4.5 6t1.5 6.15q0 5.3-3.1 9.55-3.1 4.25-8.2 5.85Z";
+
   static readonly Time =
     "m31.35 33.65 2.25-2.25-7.95-8V13.35h-3V24.6ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24t1.575-7.75q1.575-3.65 4.3-6.375 2.725-2.725 6.375-4.3Q19.9 4 24 4t7.75 1.575q3.65 1.575 6.375 4.3 2.725 2.725 4.3 6.375Q44 19.9 44 24t-1.575 7.75q-1.575 3.65-4.3 6.375-2.725 2.725-6.375 4.3Q28.1 44 24 44Zm0-20Zm0 17q7 0 12-5t5-12q0-7-5-12T24 7q-7 0-12 5T7 24q0 7 5 12t12 5Z";
 

packages/userscript/source/ui/StateManagementUi.ts

@@ -9,6 +9,7 @@ import { UserScript } from "../UserScript";
 import { ButtonListItem } from "./components/ButtonListItem";
 import { CopyButton } from "./components/buttons-icon/CopyButton";
 import { DeleteButton } from "./components/buttons-icon/DeleteButton";
+import { UpdateButton } from "./components/buttons-icon/UpdateButton";
 import { ExplainerListItem } from "./components/ExplainerListItem";
 import { HeaderListItem } from "./components/HeaderListItem";
 import { LabelListItem } from "./components/LabelListItem";
@@ -177,6 +178,13 @@ export class StateManagementUi extends SettingsPanel<StateSettings> {
       );
       listItem.addChild(copyButton);
 
+      const updateButton = new UpdateButton(this._host);
+      updateButton.element.on(
+        "click",
+        () => void this.updateState(state, this._host.engine.stateSerialize())
+      );
+      listItem.addChild(updateButton);
+
       this.stateList.addChild(listItem);
     }
   }
@@ -305,6 +313,30 @@ export class StateManagementUi extends SettingsPanel<StateSettings> {
     this._host.engine.imessage("state.loaded");
   }
 
+  updateState(state: StoredState, newState: EngineState) {
+    if (
+      !this.setting.noConfirm.enabled &&
+      !window.confirm(this._host.engine.i18n("state.confirmDestruction"))
+    ) {
+      return;
+    }
+
+    const index = this.states.indexOf(state);
+    if (index < 0) {
+      return;
+    }
+
+    this.states[index] = {
+      label: state.label,
+      state: newState,
+      timestamp: new Date().toISOString(),
+    };
+    this._storeStates();
+    this.refreshUi();
+
+    this._host.engine.imessage("state.updated");
+  }
+
   deleteState(state: StoredState) {
     if (
       !this.setting.noConfirm.enabled &&

packages/userscript/source/ui/components/buttons-icon/UpdateButton.ts

@@ -0,0 +1,18 @@
+import { Icons } from "../../../images/Icons";
+import { UserScript } from "../../../UserScript";
+import { IconButton } from "../IconButton";
+
+/**
+ * A button that is intended to initiate an update action.
+ */
+export class UpdateButton extends IconButton {
+  /**
+   * Constructs a `UpdateButton`.
+   *
+   * @param host A reference to the host.
+   * @param title The `title` of the button.
+   */
+  constructor(host: UserScript, title = "Update") {
+    super(host, Icons.Sync, title);
+  }
+}