Fix: remove hotbar name from status bar (#4679)

* Show tooltip with hotbar name manually

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

* Remove this.refreshPosition() call

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

* Remove hotbar name from status bar

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

* Convert HotbarSelector to use css modules

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

* Remove unused export

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

* Fixing linter

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

* Clean up

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

* Invert invisible prop

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

* Linter fix

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

src/renderer/components/hotbar/hotbar-selector.module.scss

@@ -4,6 +4,8 @@
  */
 
 .HotbarSelector {
+  display: flex;
+  align-items: center;
   height: 26px;
   background-color: var(--layoutBackground);
   position: relative;
@@ -17,7 +19,13 @@
     top: -20px;
   }
 
-  .SelectorIndex {
+  .HotbarIndex {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  .Badge {
     cursor: pointer;
     background: var(--secondaryBackground);
     width: 100%;

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

@@ -3,21 +3,18 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./hotbar-selector.scss";
-import React from "react";
+import styles from "./hotbar-selector.module.scss";
+import React, { useRef, useState } from "react";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
 import hotbarManagerInjectable from "../../../common/hotbar-store.injectable";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
-import { TooltipPosition } from "../tooltip";
+import { Tooltip, TooltipPosition } from "../tooltip";
 import { observer } from "mobx-react";
 import type { Hotbar } from "../../../common/hotbar-types";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
-
-export interface HotbarSelectorProps {
-  hotbar: Hotbar;
-}
+import { cssNames } from "../../utils";
 
 interface Dependencies {
   hotbarManager: {
@@ -29,25 +26,63 @@ interface Dependencies {
   openCommandOverlay: (component: React.ReactElement) => void;
 }
 
-const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => (
-  <div className="HotbarSelector flex align-center">
-    <Icon material="play_arrow" className="previous box" onClick={() => hotbarManager.switchToPrevious()} />
-    <div className="box grow flex align-center">
-      <Badge
-        id="hotbarIndex"
-        small
-        label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
-        onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
-        tooltip={{
-          preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
-          children: hotbar.name,
-        }}
-        className="SelectorIndex"
+export interface HotbarSelectorProps extends Partial<Dependencies> {
+  hotbar: Hotbar;
+}
+
+const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const tooltipTimeout = useRef<NodeJS.Timeout>();
+
+  function clearTimer() {
+    clearTimeout(tooltipTimeout.current);
+  }
+
+  function onTooltipShow() {
+    setTooltipVisible(true);
+    clearTimer();
+    tooltipTimeout.current = setTimeout(() => setTooltipVisible(false), 1500);
+  }
+
+  function onArrowClick(switchTo: () => void) {
+    onTooltipShow();
+    switchTo();
+  }
+
+  function onMouseEvent(event: React.MouseEvent) {
+    clearTimer();
+    setTooltipVisible(event.type == "mouseenter");
+  }
+
+  return (
+    <div className={styles.HotbarSelector}>
+      <Icon
+        material="play_arrow"
+        className={cssNames(styles.Icon, styles.previous)}
+        onClick={() => onArrowClick(hotbarManager.switchToPrevious)}
       />
+      <div className={styles.HotbarIndex}>
+        <Badge
+          id="hotbarIndex"
+          small
+          label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
+          onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
+          className={styles.Badge}
+          onMouseEnter={onMouseEvent}
+          onMouseLeave={onMouseEvent}
+        />
+        <Tooltip
+          visible={tooltipVisible}
+          targetId="hotbarIndex"
+          preferredPositions={[TooltipPosition.TOP, TooltipPosition.TOP_LEFT]}
+        >
+          {hotbar.name}
+        </Tooltip>
+      </div>
+      <Icon material="play_arrow" className={styles.Icon} onClick={() => onArrowClick(hotbarManager.switchToNext)} />
     </div>
-    <Icon material="play_arrow" className="next box" onClick={() => hotbarManager.switchToNext()} />
-  </div>
-));
+  );
+});
 
 export const HotbarSelector = withInjectables<Dependencies, HotbarSelectorProps>(NonInjectedHotbarSelector, {
   getProps: (di, props) => ({