UBER-376 Implement new style for the tooltips (#3418)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/workbench-resources/src/components/HelpAndSupport.svelte

@@ -3,7 +3,9 @@
   import setting, { settingId } from '@hcengineering/setting'
   import {
     Button,
+    capitalizeFirstLetter,
     closePopup,
+    formatKey,
     getCurrentResolvedLocation,
     Icon,
     IconArrowLeft,
@@ -34,28 +36,6 @@
     navigate(loc)
   }
 
-  const capitalizeFirstLetter = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
-
-  function formatKey (key: string): string[][] {
-    const thens = key.split('->')
-    const result: string[][] = []
-    for (const r of thens) {
-      result.push(
-        r.split('+').map((it) =>
-          it
-            .replaceAll('key', '')
-            .replaceAll(/Meta|meta/g, isMac ? '⌘' : 'Ctrl')
-            .replaceAll('ArrowUp', '↑')
-            .replaceAll('ArrowDown', '↓')
-            .replaceAll('ArrowLeft', '←')
-            .replaceAll('ArrowRight', '→')
-            .replaceAll('Backspace', '⌫')
-        )
-      )
-    }
-    return result
-  }
-
   async function getActions () {
     categories = await getClient().findAll(view.class.ActionCategory, [])
     const rawActions = await client.findAll(view.class.Action, [])
@@ -82,8 +62,6 @@
   }
   getActions()
 
-  const isMac = /Macintosh/i.test(navigator.userAgent)
-
   const cards = [
     {
       icon: DocumentationIcon,