Generating 12 cells by default

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/hotbar-store.ts

@@ -32,6 +32,8 @@ export interface HotbarStoreModel {
   activeHotbarId: string;
 }
 
+export const defaultHotbarCells = 12; // Number is choosen to easy hit any item with keyboard
+
 export class HotbarStore extends BaseStore<HotbarStoreModel> {
   @observable hotbars: Hotbar[] = [];
   @observable private _activeHotbarId: string;
@@ -61,12 +63,16 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     return this.hotbars.findIndex((hotbar) => hotbar.id === this.activeHotbarId);
   }
 
+  get initialItems() {
+    return [...Array.from(Array(defaultHotbarCells).fill(null))];
+  }
+
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
     if (data.hotbars?.length === 0) {
       this.hotbars = [{
         id: uuid.v4(),
         name: "Default",
-        items: [],
+        items: this.initialItems,
       }];
     } else {
       this.hotbars = data.hotbars;
@@ -98,7 +104,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   add(data: HotbarCreateOptions) {
     const {
       id = uuid.v4(),
-      items = [],
+      items = this.initialItems,
       name,
     } = data;
 

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

@@ -12,10 +12,15 @@
     height: 4px; // extra spacing for mac-os "traffic-light" buttons
   }
 
+  &:hover {
+    .AddCellButton {
+      opacity: 1;
+    }
+  }
+
   .HotbarItems {
     --cellWidth: 40px;
     --cellHeight: 40px;
-    --cellFullHeight: 60px;
 
     box-sizing: content-box;
     margin: 0 auto;
@@ -108,13 +113,15 @@
     width: 40px;
     height: 40px;
     min-height: 40px;
-    margin: 8px auto;
+    margin: 12px auto 8px;
     background-color: transparent;
     color: var(--textColorDimmed);
     border-radius: 6px;
     transition: all 0.2s;
     cursor: pointer;
     z-index: 1;
+    opacity: 0;
+    transition: all 0.2s;
 
     &:hover {
       background-color: var(--sidebarBackground);

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

@@ -2,17 +2,16 @@ import "./hotbar-menu.scss";
 import "./hotbar.commands";
 
 import React, { ReactNode } from "react";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
-import { cssNames, cssVar, IClassName } from "../../utils";
+import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { HotbarItem, HotbarStore } from "../../../common/hotbar-store";
+import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
 import { catalogEntityRunContext } from "../../api/catalog-entity";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
-import { action, reaction } from "mobx";
 
 interface Props {
   className?: IClassName;
@@ -20,12 +19,6 @@ interface Props {
 
 @observer
 export class HotbarMenu extends React.Component<Props> {
-  componentDidMount() {
-    disposeOnUnmount(this, [
-      reaction(() => this.hotbar, () => this.createInitialCells(), { fireImmediately: true })
-    ]);
-  }
-
   get hotbar() {
     return HotbarStore.getInstance().getActive();
   }
@@ -52,20 +45,6 @@ export class HotbarMenu extends React.Component<Props> {
     CommandOverlay.open(<HotbarSwitchCommand />);
   }
 
-  @action
-  createInitialCells() {
-    if (this.hotbar.items.length) {
-      return;
-    }
-
-    const element = document.querySelector<HTMLDivElement>(".HotbarItems");
-    const height = element.offsetHeight;
-    const cellHeight = cssVar(element).get("--cellFullHeight").toString();
-    const cellsFit = Math.floor(height / parseInt(cellHeight)) - 1;
-
-    this.hotbar.items = [...Array.from(Array(cellsFit).fill(null))];
-  }
-
   renderGrid() {
     if (!this.hotbar.items.length) return;
 
@@ -109,7 +88,7 @@ export class HotbarMenu extends React.Component<Props> {
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="HotbarItems flex column gaps">
           {this.renderGrid()}
-          {this.renderAddCellButton()}
+          {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
         <div className="HotbarSelector flex align-center">
           <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />