design: Improve discovery of command bar

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -16,6 +16,14 @@
       />
     </nav>
     <div class="menu vertical user-menu">
+      <woot-button
+        v-tooltip.right="commandBarTooltip"
+        variant="clear"
+        color-scheme="secondary"
+        :class="{ 'is-active': isControlCenterOpen }"
+        icon="flashlight"
+        @click="openControlCenter"
+      />
       <notification-bell @open-notification-panel="openNotificationPanel" />
       <agent-details @toggle-menu="toggleOptions" />
       <options-menu
@@ -70,8 +78,18 @@ export default {
   data() {
     return {
       showOptionsMenu: false,
+      isControlCenterOpen: false,
     };
   },
+  computed: {
+    commandBarTooltip() {
+      const isMacKeyboard =
+        navigator.userAgentData.platform.indexOf('Mac') > -1;
+      return isMacKeyboard
+        ? this.$t('COMMAND_BAR.TOOLTIP_NOT_MAC')
+        : this.$t('COMMAND_BAR.TOOLTIP_MAC');
+    },
+  },
   methods: {
     frontendURL,
     toggleOptions() {
@@ -86,6 +104,10 @@ export default {
     openNotificationPanel() {
       this.$emit('open-notification-panel');
     },
+    openControlCenter() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open();
+    },
   },
 };
 </script>

app/javascript/dashboard/i18n/locale/en/generalSettings.json

@@ -48,7 +48,7 @@
       }
     },
     "UPDATE_CHATWOOT": "An update %{latestChatwootVersion} for Chatwoot is available. Please update your instance.",
-    "LEARN_MORE":"Learn more"
+    "LEARN_MORE": "Learn more"
   },
   "FORMS": {
     "MULTISELECT": {
@@ -93,7 +93,10 @@
     }
   },
   "COMMAND_BAR": {
-    "SEARCH_PLACEHOLDER": "Search or jump to",
+    "SEARCH_PLACEHOLDER": "Search or jump to (ctrl + k)",
+    "SEARCH_PLACEHOLDER_MAC": "Search or jump to (cmd + k)",
+    "TOOLTIP_MAC": "Command bar (cmd + k)",
+    "TOOLTIP_NOT_MAC": "Command bar (ctrl + k)",
     "SECTIONS": {
       "GENERAL": "General",
       "REPORTS": "Reports",

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -4,7 +4,7 @@
     ref="ninjakeys"
     :no-auto-load-md-icons="true"
     hideBreadcrumbs
-    :placeholder="placeholder"
+    :placeholder="commandBarTooltip"
     @selected="setCommandbarData"
   />
 </template>
@@ -28,11 +28,6 @@ export default {
     goToCommandHotKeys,
   ],
 
-  data() {
-    return {
-      placeholder: this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER'),
-    };
-  },
   computed: {
     accountId() {
       return this.$store.getters.getCurrentAccountId;
@@ -43,6 +38,13 @@ export default {
     hotKeys() {
       return [...this.conversationHotKeys, ...this.goToCommandHotKeys];
     },
+    commandBarTooltip() {
+      const isMacKeyboard =
+        navigator.userAgentData.platform.indexOf('Mac') > -1;
+      return isMacKeyboard
+        ? this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER_MAC')
+        : this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER');
+    },
   },
   watch: {
     routeName() {

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -70,6 +70,7 @@
   "filter-outline": "M13.5 16a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h3Zm3-5a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1 0-1.5h9Zm3-5a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1 0-1.5h15Z",
   "file-upload-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9Zm2.354-4.854a.5.5 0 1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003l2 2Z",
   "flash-on-outline": "m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z",
+  "flashlight-outline": "M17.5 2A.75.75 0 0 0 16 2v1a.75.75 0 0 0 1.5 0V2Zm4.03.47a.75.75 0 0 0-1.06 0l-2 2a.75.75 0 0 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06ZM8.03 17.03l1.5-1.5a.75.75 0 1 0-1.06-1.06l-1.5 1.5a.75.75 0 1 0 1.06 1.06ZM8.25 6v4.69l-5.22 5.219a2.25 2.25 0 0 0 0 3.182L4.91 20.97a2.25 2.25 0 0 0 3.182 0l5.22-5.22H18a.75.75 0 0 0 .53-.22l1.94-1.939a2.25 2.25 0 0 0 0-3.182L13.59 3.53a2.25 2.25 0 0 0-3.182 0l-1.94 1.94A.75.75 0 0 0 8.25 6Zm3.22-1.409a.75.75 0 0 1 1.06 0l6.879 6.879a.75.75 0 0 1 0 1.06L18 13.94 10.06 6l1.41-1.409Zm-1.72 3.22 6.44 6.439h-2.88l-3.56-3.56V7.81ZM9 12.06 11.94 15l-4.91 4.909a.75.75 0 0 1-1.06 0L4.09 18.03a.75.75 0 0 1 0-1.06L9 12.06ZM21 8h1a.75.75 0 0 0 0-1.5h-1A.75.75 0 0 0 21 8Z",
   "folder-outline": "M8.207 4c.46 0 .908.141 1.284.402l.156.12L12.022 6.5h7.728a2.25 2.25 0 0 1 2.229 1.938l.016.158.005.154v9a2.25 2.25 0 0 1-2.096 2.245L19.75 20H4.25a2.25 2.25 0 0 1-2.245-2.096L2 17.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h3.957Zm1.44 5.979a2.25 2.25 0 0 1-1.244.512l-.196.009-4.707-.001v7.251c0 .38.282.694.648.743l.102.007h15.5a.75.75 0 0 0 .743-.648l.007-.102v-9a.75.75 0 0 0-.648-.743L19.75 8h-7.729L9.647 9.979ZM8.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L8.207 9a.75.75 0 0 0 .395-.113l.085-.06 1.891-1.578-1.89-1.575a.75.75 0 0 0-.377-.167L8.207 5.5Z",
   "globe-desktop-outline": "M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z",
   "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",