feat: Improve sidebar UI, add emoji icons instead of ionicons (#1605)

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/shared/components/EmojiOrIcon.vue

@@ -0,0 +1,47 @@
+<template>
+  <i v-if="showWrap" :class="className">{{ iconContent }}</i>
+</template>
+
+<script>
+import { hasEmojiSupport } from 'shared/helpers/emoji';
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    icon: { type: String, default: '' },
+    emoji: { type: String, default: '' },
+  },
+  computed: {
+    ...mapGetters({ uiSettings: 'getUISettings' }),
+    isIconTypeEmoji() {
+      const { icon_type: iconType } = this.uiSettings;
+      return iconType === 'emoji';
+    },
+    showEmoji() {
+      return this.isIconTypeEmoji && this.emoji && hasEmojiSupport(this.emoji);
+    },
+    showIcon() {
+      return !this.showEmoji && this.icon;
+    },
+    showWrap() {
+      return this.showEmoji || this.showIcon;
+    },
+    iconContent() {
+      return this.showEmoji ? this.emoji : '';
+    },
+    className() {
+      return {
+        'icon--emoji': this.showEmoji,
+        'icon--font': this.showIcon,
+        [this.icon]: this.showIcon,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.icon--emoji {
+  font-style: normal;
+}
+</style>

app/javascript/shared/helpers/emoji.js

@@ -0,0 +1,34 @@
+/**
+ * Detects support for emoji character sets.
+ *
+ * Based on the Modernizr emoji detection.
+ * https://github.com/Modernizr/Modernizr/blob/347ddb078116cee91b25b6e897e211b023f9dcb4/feature-detects/emoji.js
+ *
+ * @return {Boolean} true or false
+ * @example
+ *
+ * hasEmojiSupport()
+ * // => true|false
+ */
+export const hasEmojiSupport = () => {
+  const pixelRatio = window.devicePixelRatio || 1;
+  const offset = 12 * pixelRatio;
+  const node = document.createElement('canvas');
+
+  // canvastext support
+  if (
+    !node.getContext ||
+    !node.getContext('2d') ||
+    typeof node.getContext('2d').fillText !== 'function'
+  ) {
+    return false;
+  }
+
+  const ctx = node.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.textBaseline = 'top';
+  ctx.font = '32px Arial';
+  ctx.fillText('\ud83d\udc28', 0, 0); // U+1F428 KOALA
+  return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
+};