Hotbar command palette + switching (#2552)

* fix initial hotbar not showing

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* hotbar command palette + switching

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* lint fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* add clickable index to switcher

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix typo

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remote notifications

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix add to hotbar

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* don't show remove-from-hotbar on catalog context menu

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/common/__tests__/hotbar-store.test.ts

@@ -21,4 +21,14 @@ describe("HotbarStore", () => {
       expect(HotbarStore.getInstance().hotbars.length).toEqual(1);
     });
   });
+
+  describe("add", () => {
+    it("adds a hotbar", () => {
+      const hotbarStore = HotbarStore.getInstanceOrCreate();
+
+      hotbarStore.load();
+      hotbarStore.add({ name: "hottest" });
+      expect(hotbarStore.hotbars.length).toEqual(2);
+    });
+  });
 });

src/common/hotbar-store.ts

@@ -1,6 +1,7 @@
 import { action, comparer, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
+import * as uuid from "uuid";
 
 export interface HotbarItem {
   entity: {
@@ -12,16 +13,25 @@ export interface HotbarItem {
 }
 
 export interface Hotbar {
+  id: string;
   name: string;
   items: HotbarItem[];
 }
 
+export interface HotbarCreateOptions {
+  id?: string;
+  name: string;
+  items?: HotbarItem[];
+}
+
 export interface HotbarStoreModel {
   hotbars: Hotbar[];
+  activeHotbarId: string;
 }
 
 export class HotbarStore extends BaseStore<HotbarStoreModel> {
   @observable hotbars: Hotbar[] = [];
+  @observable private _activeHotbarId: string;
 
   constructor() {
     super({
@@ -34,32 +44,103 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     });
   }
 
+  get activeHotbarId() {
+    return this._activeHotbarId;
+  }
+
+  set activeHotbarId(id: string) {
+    if (this.getById(id)) {
+      this._activeHotbarId = id;
+    }
+  }
+
+  get activeHotbarIndex() {
+    return this.hotbars.findIndex((hotbar) => hotbar.id === this.activeHotbarId);
+  }
+
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
     if (data.hotbars?.length === 0) {
       this.hotbars = [{
-        name: "default",
+        id: uuid.v4(),
+        name: "Default",
         items: []
       }];
     } else {
       this.hotbars = data.hotbars;
     }
+
+    if (data.activeHotbarId) {
+      if (this.getById(data.activeHotbarId)) {
+        this.activeHotbarId = data.activeHotbarId;
+      }
+    }
+
+    if (!this.activeHotbarId) {
+      this.activeHotbarId = this.hotbars[0].id;
+    }
+  }
+
+  getActive() {
+    return this.getById(this.activeHotbarId);
   }
 
   getByName(name: string) {
     return this.hotbars.find((hotbar) => hotbar.name === name);
   }
 
-  add(hotbar: Hotbar) {
-    this.hotbars.push(hotbar);
+  getById(id: string) {
+    return this.hotbars.find((hotbar) => hotbar.id === id);
   }
 
+  add(data: HotbarCreateOptions) {
+    const {
+      id = uuid.v4(),
+      items = [],
+      name,
+    } = data;
+
+    const hotbar = { id, name, items };
+
+    this.hotbars.push(hotbar as Hotbar);
+
+    return hotbar as Hotbar;
+  }
+
+  @action
   remove(hotbar: Hotbar) {
     this.hotbars = this.hotbars.filter((h) => h !== hotbar);
+
+    if (this.activeHotbarId === hotbar.id) {
+      this.activeHotbarId = this.hotbars[0].id;
+    }
+  }
+
+  switchToPrevious() {
+    const hotbarStore = HotbarStore.getInstance();
+    let index = hotbarStore.activeHotbarIndex - 1;
+
+    if (index < 0) {
+      index = hotbarStore.hotbars.length - 1;
+    }
+
+    hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id;
+  }
+
+  switchToNext() {
+    const hotbarStore = HotbarStore.getInstance();
+    let index = hotbarStore.activeHotbarIndex + 1;
+
+    if (index >= hotbarStore.hotbars.length) {
+      index = 0;
+    }
+
+    hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id;
   }
 
   toJSON(): HotbarStoreModel {
     const model: HotbarStoreModel = {
-      hotbars: this.hotbars
+      hotbars: this.hotbars,
+      activeHotbarId: this.activeHotbarId
     };
 
     return toJS(model, {