fix initial hotbar not showing (#2551)

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

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

+import mockFs from "mock-fs";
+import { HotbarStore, hotbarStore } from "../hotbar-store";
+
+describe("HotbarStore", () => {
+  beforeEach(() => {
+    HotbarStore.resetInstance();
+    mockFs({ tmp: { "lens-hotbar-store.json": "{}" } });
+  });
+
+  afterEach(() => {
+    mockFs.restore();
+  });
+
+  describe("load", () => {
+    it("loads one hotbar by default", () => {
+      hotbarStore.load();
+      expect(hotbarStore.hotbars.length).toEqual(1);
+    });
+  });
+});

src/common/hotbar-store.ts

@@ -35,10 +35,14 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   }
 
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
-    this.hotbars = data.hotbars || [{
-      name: "default",
-      items: []
-    }];
+    if (data.hotbars?.length === 0) {
+      this.hotbars = [{
+        name: "default",
+        items: []
+      }];
+    } else {
+      this.hotbars = data.hotbars;
+    }
   }
 
   getByName(name: string) {

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -14,20 +14,24 @@ interface Props {
 
 @observer
 export class HotbarMenu extends React.Component<Props> {
-  render() {
-    const { className } = this.props;
+
+  get hotbarItems() {
     const hotbar = hotbarStore.getByName("default"); // FIXME
 
     if (!hotbar) {
-      return null;
+      return [];
     }
 
-    const items = hotbar.items.map((item) => catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid)).filter(Boolean);
+    return hotbar.items.map((item) => catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid)).filter(Boolean);
+  }
+
+  render() {
+    const { className } = this.props;
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="items flex column gaps">
-          {items.map((entity, index) => {
+          {this.hotbarItems.map((entity, index) => {
             return (
               <HotbarIcon
                 key={index}