From eeb8a8a35e65baf38e7d741aca8cf68355cb96c3 Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Fri, 1 Oct 2021 15:52:52 +0200
Subject: feat: show service number on icon when first key of switch service
 hotkey held (#2007)

---
 src/components/services/tabs/TabItem.js | 44 +++++++++++++++++++++++++++++++--
 src/styles/tabs.scss                    | 13 ++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 35224631e..2474682df 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -137,6 +137,40 @@ class TabItem extends Component {
 
   @observable isPollAnswered = false;
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      showShortcutIndex: false,
+    };
+  }
+
+  handleShowShortcutIndex = () => {
+    this.setState({ showShortcutIndex: true });
+  };
+
+  checkForLongPress = () => {
+    let longpressDelay = null;
+    const longpressDelayDuration = 1000;
+
+    document.addEventListener(
+      'keydown',
+      e => {
+        if (e.ctrlKey || e.metaKey) {
+          longpressDelay = setTimeout(
+            this.handleShowShortcutIndex,
+            longpressDelayDuration,
+          );
+        }
+      },
+      { capture: true },
+    );
+
+    document.addEventListener('keyup', () => {
+      clearTimeout(longpressDelay);
+      this.setState({ showShortcutIndex: false });
+    });
+  };
+
   componentDidMount() {
     const { service } = this.props;
 
@@ -159,6 +193,8 @@ class TabItem extends Component {
         }
       });
     }
+
+    this.checkForLongPress();
   }
 
   render() {
@@ -235,8 +271,9 @@ class TabItem extends Component {
             ? messages.wakeUpService
             : messages.hibernateService,
         ),
+        // eslint-disable-next-line no-confusing-arrow
         click: () =>
-          (service.isHibernating ? wakeUpService() : hibernateService()),
+          service.isHibernating ? wakeUpService() : hibernateService(),
         enabled: service.canHibernate,
       },
       {
@@ -281,7 +318,7 @@ class TabItem extends Component {
             service.unreadDirectMessageCount === 0 &&
             service.isIndirectMessageBadgeEnabled && (
               <span className="tab-item__message-count is-indirect">•</span>
-          )}
+            )}
           {service.isHibernating && (
             <span className="tab-item__message-count hibernating">•</span>
           )}
@@ -327,6 +364,9 @@ class TabItem extends Component {
             />
           </>
         )}
+        {shortcutIndex && this.state.showShortcutIndex && (
+          <span className="tab-item__shortcut-index">{shortcutIndex}</span>
+        )}
       </li>
     );
   }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index df10da77c..16318b9f6 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -120,6 +120,19 @@
     }
   }
 
+  .tab-item__shortcut-index {
+    align-items: center;
+    background: $theme-gray-light;
+    bottom: 8px;
+    color: #fff;
+    display: flex;
+    font-size: 11px;
+    min-height: 17px;
+    padding: 0px 5px;
+    position: absolute;
+    left: 8px;
+  }
+
   &.is-reordering {
     z-index: 99999;
   }
-- 
cgit v1.2.3-70-g09d2