feat: Add emoji & icon picker for Help Center categories (#14702)

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue

@@ -13,6 +13,7 @@ import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -131,7 +132,7 @@ const statusText = computed(() => {
 
 const categoryName = computed(() => {
   if (props.category?.slug) {
-    return `${props.category.icon} ${props.category.name}`;
+    return props.category.name;
   }
   return t(
     'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
@@ -222,7 +223,15 @@ const handleClick = id => {
             {{ authorName || '-' }}
           </span>
         </div>
-        <span class="block text-sm whitespace-nowrap text-n-slate-11">
+        <span
+          class="flex items-center gap-1 text-sm whitespace-nowrap text-n-slate-11"
+        >
+          <EmojiIcon
+            v-if="category?.icon"
+            :value="category.icon"
+            :color="category.icon_color"
+            class="flex-shrink-0 size-4"
+          />
           {{ categoryName }}
         </span>
         <div

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue

@@ -6,6 +6,7 @@ import { useToggle } from '@vueuse/core';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   id: {
@@ -20,6 +21,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  iconColor: {
+    type: String,
+    default: '',
+  },
   description: {
     type: String,
     required: true,
@@ -55,10 +60,6 @@ const categoryMenuItems = [
   },
 ];
 
-const categoryTitleWithIcon = computed(() => {
-  return `${props.icon} ${props.title}`;
-});
-
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -83,10 +84,16 @@ const handleAction = ({ action, value }) => {
       <div class="flex justify-between w-full gap-2">
         <div class="flex items-center justify-start w-full min-w-0 gap-2">
           <span
-            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
+            class="flex items-center gap-1.5 text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
             @click="handleClick(slug)"
           >
-            {{ categoryTitleWithIcon }}
+            <EmojiIcon
+              v-if="icon"
+              :value="icon"
+              :color="iconColor"
+              class="shrink-0 size-4"
+            />
+            <span class="truncate">{{ title }}</span>
           </span>
           <span
             class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue

@@ -8,6 +8,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
 
 const props = defineProps({
@@ -107,10 +108,11 @@ const selectedCategory = computed(() => {
 const categoryList = computed(() => {
   return (
     categories.value
-      .map(({ name, id, icon }) => ({
+      .map(({ name, id, icon, icon_color: iconColor }) => ({
         label: name,
         value: id,
         emoji: icon,
+        iconColor,
         isSelected: isNewArticle.value
           ? id === (selectedCategoryId.value || selectedCategory.value?.id)
           : id === props.article?.category?.id,
@@ -202,10 +204,6 @@ onMounted(() => {
     <div class="relative">
       <OnClickOutside @trigger="openCategoryList = false">
         <Button
-          :label="
-            selectedCategory?.name ||
-            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
-          "
           :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
           color="slate"
@@ -213,12 +211,20 @@ onMounted(() => {
           @click="openCategoryList = !openCategoryList"
         >
           <span
-            v-if="selectedCategory"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+            class="flex items-center gap-1.5 min-w-0 text-sm text-n-slate-12 hover:text-n-slate-11"
           >
-            {{
-              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
-            }}
+            <EmojiIcon
+              v-if="selectedCategory?.icon"
+              :value="selectedCategory.icon"
+              :color="selectedCategory.icon_color"
+              class="flex-shrink-0 size-4"
+            />
+            <span class="truncate">
+              {{
+                selectedCategory?.name ||
+                t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
+              }}
+            </span>
           </span>
         </Button>
         <DropdownMenu

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue

@@ -13,6 +13,7 @@ import {
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   categories: {
@@ -63,18 +64,15 @@ const activeTabIndex = computed(() => {
   return tabs.value.findIndex(tab => tab.value === tabParam);
 });
 
-const activeCategoryName = computed(() => {
-  const activeCategory = props.categories.find(
-    category => category.slug === route.params.categorySlug
-  );
+const activeCategory = computed(() =>
+  props.categories.find(category => category.slug === route.params.categorySlug)
+);
 
-  if (activeCategory) {
-    const { icon, name } = activeCategory;
-    return `${icon} ${name}`;
-  }
-
-  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
-});
+const activeCategoryName = computed(
+  () =>
+    activeCategory.value?.name ||
+    t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL')
+);
 
 const activeLocaleName = computed(() => {
   return props.allowedLocales.find(
@@ -94,6 +92,7 @@ const categoryMenuItems = computed(() => {
     value: category.slug,
     action: 'filter',
     emoji: category.icon,
+    iconColor: category.icon_color,
   }));
 
   const hasCategorySlug = !!route.params.categorySlug;
@@ -167,14 +166,23 @@ const handleTabChange = value => {
         <div v-if="hasCategoryMenuItems" class="relative group">
           <OnClickOutside @trigger="isCategoryMenuOpen = false">
             <Button
-              :label="activeCategoryName"
               icon="i-lucide-chevron-down"
               size="sm"
               color="slate"
               trailing-icon
               class="max-w-48"
               @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-            />
+            >
+              <span class="flex items-center gap-1.5 min-w-0">
+                <EmojiIcon
+                  v-if="activeCategory?.icon"
+                  :value="activeCategory.icon"
+                  :color="activeCategory.icon_color"
+                  class="flex-shrink-0 size-4"
+                />
+                <span class="truncate">{{ activeCategoryName }}</span>
+              </span>
+            </Button>
 
             <DropdownMenu
               v-if="isCategoryMenuOpen"

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -230,6 +230,7 @@ const categoryMenuItems = computed(() =>
     value: category.id,
     action: 'move',
     emoji: category.icon,
+    iconColor: category.icon_color,
   }))
 );
 

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue

@@ -38,8 +38,8 @@ const { t } = useI18n();
 const route = useRoute();
 
 const handleCategory = async formData => {
-  const { id, name, slug, icon, description, locale } = formData;
-  const categoryData = { name, icon, slug, description };
+  const { id, name, slug, icon, iconColor, description, locale } = formData;
+  const categoryData = { name, icon, icon_color: iconColor, slug, description };
 
   if (props.mode === 'create') {
     categoryData.locale = locale;

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -18,6 +18,7 @@ import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   mode: {
@@ -49,8 +50,9 @@ const props = defineProps({
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
 );
 
 const { t } = useI18n();
@@ -72,6 +74,7 @@ const state = reactive({
   id: '',
   name: '',
   icon: '',
+  iconColor: '',
   slug: '',
   description: '',
   locale: '',
@@ -109,8 +112,19 @@ const slugHelpText = computed(() => {
   });
 });
 
-const onClickInsertEmoji = emoji => {
-  state.icon = emoji;
+const onSelectIcon = ({ type, value, color }) => {
+  state.icon = value;
+  state.iconColor = type === 'icon' ? color : '';
+  isEmojiPickerOpen.value = false;
+};
+
+const onColorChange = color => {
+  state.iconColor = color;
+};
+
+const onRemoveIcon = () => {
+  state.icon = '';
+  state.iconColor = '';
   isEmojiPickerOpen.value = false;
 };
 
@@ -139,7 +153,14 @@ watch(
   newCategory => {
     if (props.mode === 'edit' && newCategory) {
       const { id, name, icon, slug, description } = newCategory;
-      Object.assign(state, { id, name, icon, slug, description });
+      Object.assign(state, {
+        id,
+        name,
+        icon,
+        iconColor: newCategory.icon_color || '',
+        slug,
+        description,
+      });
     }
   },
   { immediate: true }
@@ -197,19 +218,29 @@ defineExpose({ state, isSubmitDisabled });
           <template #prefix>
             <OnClickOutside @trigger="isEmojiPickerOpen = false">
               <Button
-                :label="state.icon"
-                color="slate"
-                size="sm"
                 type="button"
-                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.38rem] !w-[2.375rem] absolute top-[2rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                variant="ghost"
+                color="slate"
+                class="!h-[2.38rem] !w-[2.375rem] !p-0 absolute top-[2rem] start-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
-              />
-              <EmojiInput
+              >
+                <EmojiIcon
+                  v-if="state.icon"
+                  :value="state.icon"
+                  :color="state.iconColor"
+                  class="size-5 text-xl !leading-5"
+                />
+                <span v-else class="i-lucide-smile-plus size-4" />
+              </Button>
+              <EmojiIconPicker
                 v-if="isEmojiPickerOpen"
                 class="left-0 top-16"
+                :value="state.icon"
+                :color="state.iconColor"
                 show-remove-button
-                :on-click="onClickInsertEmoji"
+                @select="onSelectIcon"
+                @color-change="onColorChange"
+                @remove="onRemoveIcon"
               />
             </OnClickOutside>
           </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue

@@ -106,6 +106,7 @@ const breadcrumbItems = computed(() => {
         }
       ),
       emoji: selectedCategoryEmoji.value,
+      iconColor: selectedCategory.value?.icon_color,
     });
   }
   return items;

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue

@@ -68,6 +68,7 @@ watch(
           :id="element.id"
           :title="element.name"
           :icon="element.icon"
+          :icon-color="element.icon_color"
           :description="element.description"
           :articles-count="element.meta?.articles_count || 0"
           :slug="element.slug"

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue

@@ -52,8 +52,8 @@ const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
 const onUpdateCategory = async () => {
   if (!categoryFormRef.value) return;
   const { state } = categoryFormRef.value;
-  const { id, name, slug, icon, description } = state;
-  const categoryData = { name, icon, slug, description };
+  const { id, name, slug, icon, iconColor, description } = state;
+  const categoryData = { name, icon, icon_color: iconColor, slug, description };
   categoryData.id = id;
 
   try {

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -53,8 +53,9 @@ const generateUid = () => {
 const uploadAttachment = ref(null);
 const isEmojiPickerOpen = ref(false);
 
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
 );
 
 const {
@@ -215,10 +216,11 @@ useEventListener(document, 'paste', onPaste);
           class="!w-10"
           @click="isEmojiPickerOpen = !isEmojiPickerOpen"
         />
-        <EmojiInput
+        <EmojiIconPicker
           v-if="isEmojiPickerOpen"
+          mode="emoji"
           class="!top-auto !bottom-full mb-1.5 ltr:left-0 rtl:right-0"
-          :on-click="onClickInsertEmoji"
+          @select="onClickInsertEmoji($event.value)"
         />
       </div>
       <FileUpload

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 defineProps({
   items: {
@@ -47,8 +48,17 @@ const onClick = (item, index) => {
         </button>
 
         <!-- The last breadcrumb item is plain text -->
-        <span v-else class="text-sm truncate text-n-slate-12 min-w-0 block">
-          {{ item.emoji ? item.emoji : '' }} {{ item.label }}
+        <span
+          v-else
+          class="inline-flex items-center gap-1 text-sm truncate min-w-0"
+        >
+          <EmojiIcon
+            v-if="item.emoji"
+            :value="item.emoji"
+            :color="item.iconColor"
+            class="flex-shrink-0 size-4"
+          />
+          <span class="truncate text-n-slate-12">{{ item.label }}</span>
         </span>
       </li>
     </ol>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
@@ -207,9 +208,12 @@ onMounted(() => {
                 class="flex-shrink-0 size-3.5"
               />
             </slot>
-            <span v-if="item.emoji" class="flex-shrink-0">{{
-              item.emoji
-            }}</span>
+            <EmojiIcon
+              v-if="item.emoji"
+              :value="item.emoji"
+              :color="item.iconColor"
+              class="flex-shrink-0 size-4"
+            />
             <slot name="label" :item="item">
               <span
                 v-if="item.label"
@@ -260,7 +264,12 @@ onMounted(() => {
               class="flex-shrink-0 size-3.5"
             />
           </slot>
-          <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
+          <EmojiIcon
+            v-if="item.emoji"
+            :value="item.emoji"
+            :color="item.iconColor"
+            class="flex-shrink-0 size-4"
+          />
           <slot name="label" :item="item">
             <span
               v-if="item.label"

app/javascript/dashboard/components-next/emoji-icon-picker/ColorPalette.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ICON_COLORS } from './constants';
+
+const { t } = useI18n();
+const selectedColor = defineModel({ type: String, default: '' });
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-1 px-0.5 mx-2 py-1">
+    <button
+      v-for="color in ICON_COLORS"
+      :key="color.value"
+      v-tooltip.top="t(`EMOJI_ICON_PICKER.COLORS.${color.name}`)"
+      type="button"
+      class="flex items-center justify-center flex-shrink-0 transition-all rounded-full size-5 ring-offset-2 ring-offset-n-surface-2 hover:ring-2"
+      :class="{ 'ring-2': selectedColor === color.value }"
+      :style="{ backgroundColor: color.value, '--tw-ring-color': color.value }"
+      @click="selectedColor = color.value"
+    >
+      <span
+        v-if="selectedColor === color.value"
+        class="text-white i-lucide-check size-3"
+      />
+    </button>
+  </div>
+</template>

app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIcon.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { isIconValue, iconClassFor } from './constants';
+
+// Renders a saved picker value: a color-tinted icon or an emoji.
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+});
+
+const isIcon = computed(() => isIconValue(props.value));
+const iconClass = computed(() => iconClassFor(props.value));
+const iconStyle = computed(() =>
+  props.color ? { color: props.color } : undefined
+);
+</script>
+
+<template>
+  <span class="inline-flex items-center justify-center leading-none">
+    <Icon
+      v-if="isIcon"
+      :icon="iconClass"
+      class="size-full"
+      :style="iconStyle"
+    />
+    <span v-else v-dompurify-html="value" />
+  </span>
+</template>

app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue

@@ -0,0 +1,310 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Virtualizer } from 'virtua/vue';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ColorPalette from './ColorPalette.vue';
+import { CURATED_ICONS } from './icons';
+import {
+  DEFAULT_ICON_COLOR,
+  ICON_STYLE,
+  PICKER_MODE,
+  PICKER_TAB,
+  isIconValue,
+} from './constants';
+import {
+  buildEmojiSections,
+  getEmojiTint,
+  getRecentEmojis,
+  addRecentEmoji,
+} from './helper';
+
+const props = defineProps({
+  // 'both' shows Icons + Emojis tabs; 'emoji' shows only the emoji panel.
+  mode: {
+    type: String,
+    default: PICKER_MODE.BOTH,
+    validator: value => Object.values(PICKER_MODE).includes(value),
+  },
+  // Saved value: an emoji char or an icon name (e.g. "rocket-line").
+  value: {
+    type: String,
+    default: '',
+  },
+  // Current stored icon color (hex), used to preselect a swatch.
+  color: {
+    type: String,
+    default: '',
+  },
+  showRemoveButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select', 'remove', 'colorChange']);
+
+const { t } = useI18n();
+
+const showTabs = computed(() => props.mode === PICKER_MODE.BOTH);
+const showHeader = computed(
+  () => showTabs.value || (props.showRemoveButton && props.value)
+);
+
+const activeTab = ref(
+  props.value && !isIconValue(props.value)
+    ? PICKER_TAB.EMOJIS
+    : PICKER_TAB.ICONS
+);
+
+const tabs = computed(() => [
+  {
+    id: PICKER_TAB.ICONS,
+    label: t('EMOJI_ICON_PICKER.TABS.ICONS'),
+    icon: 'i-lucide-shapes',
+  },
+  {
+    id: PICKER_TAB.EMOJIS,
+    label: t('EMOJI_ICON_PICKER.TABS.EMOJIS'),
+    icon: 'i-lucide-smile',
+  },
+]);
+
+// Icons
+const iconSearch = ref('');
+const selectedColor = ref(props.color || DEFAULT_ICON_COLOR);
+// Preselect the outline/filled toggle from the saved icon's style suffix.
+const iconStyle = ref(
+  props.value.endsWith(`-${ICON_STYLE.FILL}`)
+    ? ICON_STYLE.FILL
+    : ICON_STYLE.LINE
+);
+
+const filteredIcons = computed(() => {
+  const term = iconSearch.value.trim().toLowerCase();
+  if (!term) return CURATED_ICONS;
+  return CURATED_ICONS.filter(
+    icon => icon.name.includes(term) || icon.keywords.includes(term)
+  );
+});
+
+const toggleIconStyle = () => {
+  iconStyle.value =
+    iconStyle.value === ICON_STYLE.LINE ? ICON_STYLE.FILL : ICON_STYLE.LINE;
+};
+
+// Each icon button tints its hover with the selected color (low opacity).
+const iconHoverStyle = computed(() => ({
+  '--ep-tint': `${selectedColor.value}24`,
+}));
+
+const selectIcon = icon => {
+  // Store the name with its style suffix, e.g. "rocket-fill".
+  const value = `${icon.name}-${iconStyle.value}`;
+  emit('select', {
+    type: 'icon',
+    value,
+    icon: value,
+    color: selectedColor.value,
+  });
+};
+
+watch(selectedColor, color => {
+  if (isIconValue(props.value)) emit('colorChange', color);
+});
+
+// Emojis
+const emojiSearch = ref('');
+const recentEmojis = ref([]);
+
+onMounted(() => {
+  recentEmojis.value = getRecentEmojis();
+});
+
+const emojiSections = computed(() =>
+  buildEmojiSections(
+    emojiSearch.value,
+    recentEmojis.value,
+    t('EMOJI_ICON_PICKER.FREQUENTLY_USED')
+  )
+);
+
+// Tints an emoji button with a light shade of the emoji's own color on hover.
+const applyEmojiTint = (event, emoji) => {
+  event.currentTarget.style.setProperty('--ep-tint', getEmojiTint(emoji));
+};
+
+const selectEmoji = emoji => {
+  recentEmojis.value = addRecentEmoji(emoji);
+  emit('select', { type: 'emoji', value: emoji.emoji, emoji: emoji.emoji });
+};
+</script>
+
+<template>
+  <div
+    role="dialog"
+    class="absolute z-20 flex flex-col overflow-hidden shadow-xl w-[22rem] bg-n-surface-2 backdrop-blur-[100px] rounded-2xl outline outline-1 outline-n-weak dark:outline-n-strong/50"
+  >
+    <div v-if="showHeader" class="flex items-center justify-between gap-2 p-2">
+      <div v-if="showTabs" class="flex gap-0.5 p-0.5 rounded-lg bg-n-alpha-1">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          v-tooltip.top="tab.label"
+          type="button"
+          class="flex items-center justify-center !p-0 transition-all rounded-md size-7 active:scale-[0.92]"
+          :class="
+            activeTab === tab.id
+              ? 'bg-n-surface-1 shadow-sm text-n-slate-12'
+              : 'text-n-slate-10 hover:text-n-slate-12'
+          "
+          @click="activeTab = tab.id"
+        >
+          <span :class="tab.icon" class="size-4" />
+        </button>
+      </div>
+      <Button
+        v-if="showRemoveButton && value"
+        v-tooltip.top="t('EMOJI_ICON_PICKER.REMOVE')"
+        variant="ghost"
+        color="slate"
+        size="sm"
+        icon="i-lucide-eraser"
+        class="flex-shrink-0"
+        @click="emit('remove')"
+      />
+    </div>
+
+    <!-- Icons panel -->
+    <div
+      v-if="showTabs && activeTab === PICKER_TAB.ICONS"
+      class="flex flex-col gap-1.5"
+      :style="iconHoverStyle"
+    >
+      <ColorPalette v-model="selectedColor" />
+      <div class="flex items-center gap-1 px-2">
+        <Input
+          v-model="iconSearch"
+          size="md"
+          class="flex-1"
+          :placeholder="t('EMOJI_ICON_PICKER.SEARCH_ICON')"
+          custom-input-class="!ps-9 !bg-transparent"
+          autofocus
+        >
+          <template #prefix>
+            <span
+              class="absolute z-10 -translate-y-1/2 i-lucide-search size-4 text-n-slate-10 top-1/2 start-3"
+            />
+          </template>
+        </Input>
+        <button
+          v-tooltip.top="
+            iconStyle === ICON_STYLE.FILL
+              ? t('EMOJI_ICON_PICKER.STYLE.FILLED')
+              : t('EMOJI_ICON_PICKER.STYLE.OUTLINE')
+          "
+          type="button"
+          class="flex items-center justify-center flex-shrink-0 transition-all rounded-lg !p-2 size-9 text-n-slate-11 hover:bg-[var(--ep-tint)] active:scale-[0.92]"
+          @click="toggleIconStyle"
+        >
+          <span
+            :class="
+              iconStyle === ICON_STYLE.FILL
+                ? 'i-ri-contrast-2-fill'
+                : 'i-ri-contrast-2-line'
+            "
+            class="size-[1.2rem]"
+            :style="{ color: selectedColor }"
+          />
+        </button>
+      </div>
+      <div
+        v-if="filteredIcons.length"
+        class="grid grid-cols-10 h-52 gap-0.5 overflow-y-auto no-scrollbar content-start px-2 pb-2"
+      >
+        <button
+          v-for="icon in filteredIcons"
+          :key="icon.name"
+          type="button"
+          :title="icon.name"
+          class="flex items-center justify-center !p-0 w-full max-w-[2rem] aspect-square transition-colors rounded-lg hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+          @click="selectIcon(icon)"
+        >
+          <span
+            :class="icon[iconStyle]"
+            class="size-[1.125rem]"
+            :style="{ color: selectedColor }"
+          />
+        </button>
+      </div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 h-52 text-n-slate-10"
+      >
+        <span class="i-lucide-search-x size-7" />
+        <span class="text-sm font-medium">
+          {{ t('EMOJI_ICON_PICKER.NO_ICON') }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Emojis panel -->
+    <div
+      v-if="!showTabs || activeTab === PICKER_TAB.EMOJIS"
+      class="flex flex-col gap-1.5"
+      :class="{ 'pt-2': !showHeader }"
+    >
+      <div class="px-2">
+        <Input
+          v-model="emojiSearch"
+          size="md"
+          :placeholder="t('EMOJI_ICON_PICKER.SEARCH_EMOJI')"
+          custom-input-class="!ps-9 !bg-transparent"
+          autofocus
+        >
+          <template #prefix>
+            <span
+              class="absolute z-10 -translate-y-1/2 i-lucide-search size-4 text-n-slate-10 top-1/2 start-3"
+            />
+          </template>
+        </Input>
+      </div>
+      <div
+        v-if="emojiSections.length"
+        class="h-60 overflow-y-auto px-2 no-scrollbar pb-2"
+      >
+        <Virtualizer v-slot="{ item: section }" :data="emojiSections">
+          <h5
+            class="px-1 pt-2 pb-1 m-0 text-xs font-medium tracking-wide uppercase text-n-slate-10"
+          >
+            {{ section.name }}
+          </h5>
+          <div class="grid grid-cols-10 gap-0.5">
+            <button
+              v-for="emoji in section.emojis"
+              :key="`${section.name}-${emoji.slug}`"
+              type="button"
+              :title="emoji.name"
+              class="flex items-center justify-center !p-0 w-full max-w-[2rem] text-xl transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+              @mouseenter="applyEmojiTint($event, emoji.emoji)"
+              @click="selectEmoji(emoji)"
+            >
+              {{ emoji.emoji }}
+            </button>
+          </div>
+        </Virtualizer>
+      </div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 h-60 text-n-slate-10"
+      >
+        <span class="i-lucide-smile-plus size-7" />
+        <span class="text-sm font-medium">
+          {{ t('EMOJI_ICON_PICKER.NO_EMOJI') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/emoji-icon-picker/constants.js

@@ -0,0 +1,44 @@
+// Prefix that turns a stored icon name (e.g. "rocket-line") into a class.
+// Swapping icon libraries means changing this and the curated set only.
+export const ICON_PREFIX = 'i-ri-';
+
+export const ICON_STYLE = {
+  LINE: 'line',
+  FILL: 'fill',
+};
+
+// Icon values are ascii names (e.g. "rocket-line"); emoji are non-ascii.
+export const isIconValue = value =>
+  typeof value === 'string' && /^[a-z][a-z0-9-]*$/.test(value);
+
+export const iconClassFor = value =>
+  value.startsWith(ICON_PREFIX) ? value : `${ICON_PREFIX}${value}`;
+
+export const ICON_COLORS = [
+  { name: 'SLATE', value: '#64748B' },
+  { name: 'RED', value: '#EF4444' },
+  { name: 'ORANGE', value: '#F97316' },
+  { name: 'AMBER', value: '#F59E0B' },
+  { name: 'GREEN', value: '#22C55E' },
+  { name: 'TEAL', value: '#14B8A6' },
+  { name: 'BLUE', value: '#3B82F6' },
+  { name: 'INDIGO', value: '#6366F1' },
+  { name: 'VIOLET', value: '#8B5CF6' },
+  { name: 'PINK', value: '#EC4899' },
+];
+
+export const DEFAULT_ICON_COLOR = '#3B82F6';
+
+// Recently used emojis persisted in localStorage.
+export const RECENT_EMOJI_KEY = 'emoji-icon-picker.recent-emojis';
+export const MAX_RECENT_EMOJIS = 16;
+
+export const PICKER_MODE = {
+  BOTH: 'both',
+  EMOJI: 'emoji',
+};
+
+export const PICKER_TAB = {
+  ICONS: 'icons',
+  EMOJIS: 'emojis',
+};

app/javascript/dashboard/components-next/emoji-icon-picker/helper.js

@@ -0,0 +1,90 @@
+import emojiGroups from 'shared/components/emoji/emojisGroup.json';
+import { MAX_RECENT_EMOJIS, RECENT_EMOJI_KEY } from './constants';
+
+const matchesSearch = (emoji, term) =>
+  emoji.slug.replaceAll('_', ' ').includes(term) ||
+  emoji.name.toLowerCase().includes(term);
+
+// Emoji sections for the search term; prepends "Frequently used" when idle.
+export const buildEmojiSections = (search, recentEmojis, frequentLabel) => {
+  const term = search.trim().toLowerCase();
+  if (term) {
+    return emojiGroups
+      .map(({ name, emojis }) => ({
+        name,
+        emojis: emojis.filter(e => matchesSearch(e, term)),
+      }))
+      .filter(group => group.emojis.length);
+  }
+  return [
+    ...(recentEmojis.length
+      ? [{ name: frequentLabel, emojis: recentEmojis }]
+      : []),
+    ...emojiGroups,
+  ];
+};
+
+// Samples an emoji's average color (via canvas) as a translucent hover tint. Cached per emoji.
+const emojiTintCache = new Map();
+const NEUTRAL_TINT = 'rgb(var(--slate-9) / 0.12)';
+
+const sampleEmojiTint = emoji => {
+  const canvas = Object.assign(document.createElement('canvas'), {
+    width: 16,
+    height: 16,
+  });
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  ctx.font = '14px serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(emoji, 8, 9);
+
+  const { data } = ctx.getImageData(0, 0, 16, 16);
+  const pixels = Array.from(
+    { length: data.length / 4 },
+    (_, i) => i * 4
+  ).filter(i => data[i + 3] > 16);
+  if (!pixels.length) return NEUTRAL_TINT;
+
+  const avg = offset =>
+    Math.round(
+      pixels.reduce((sum, i) => sum + data[i + offset], 0) / pixels.length
+    );
+
+  return `rgba(${avg(0)}, ${avg(1)}, ${avg(2)}, 0.16)`;
+};
+
+export const getEmojiTint = emoji => {
+  if (!emojiTintCache.has(emoji)) {
+    let tint = NEUTRAL_TINT;
+    try {
+      tint = sampleEmojiTint(emoji);
+    } catch {
+      /* canvas unavailable */
+    }
+    emojiTintCache.set(emoji, tint);
+  }
+  return emojiTintCache.get(emoji);
+};
+
+export const getRecentEmojis = () => {
+  try {
+    const stored = JSON.parse(localStorage.getItem(RECENT_EMOJI_KEY) ?? '[]');
+    return Array.isArray(stored) ? stored : [];
+  } catch {
+    return [];
+  }
+};
+
+export const addRecentEmoji = emoji => {
+  const updated = [
+    emoji,
+    ...getRecentEmojis().filter(item => item.slug !== emoji.slug),
+  ].slice(0, MAX_RECENT_EMOJIS);
+  try {
+    localStorage.setItem(RECENT_EMOJI_KEY, JSON.stringify(updated));
+  } catch {
+    /* private mode; recents are best-effort */
+  }
+  return updated;
+};

app/javascript/dashboard/components-next/emoji-icon-picker/icons.js

@@ -0,0 +1,983 @@
+// Curated Remix (ri) icons, each with a `line` and `fill` class. The class
+// literals are kept here so Tailwind generates them. { name, keywords, line, fill }
+
+export const CURATED_ICONS = [
+  {
+    name: 'home',
+    keywords: 'home house main',
+    line: 'i-ri-home-line',
+    fill: 'i-ri-home-fill',
+  },
+  {
+    name: 'star',
+    keywords: 'favorite star',
+    line: 'i-ri-star-line',
+    fill: 'i-ri-star-fill',
+  },
+  {
+    name: 'heart',
+    keywords: 'like love',
+    line: 'i-ri-heart-line',
+    fill: 'i-ri-heart-fill',
+  },
+  {
+    name: 'bookmark',
+    keywords: 'save',
+    line: 'i-ri-bookmark-line',
+    fill: 'i-ri-bookmark-fill',
+  },
+  {
+    name: 'flag-2',
+    keywords: 'flag report',
+    line: 'i-ri-flag-2-line',
+    fill: 'i-ri-flag-2-fill',
+  },
+  {
+    name: 'price-tag-3',
+    keywords: 'tag label',
+    line: 'i-ri-price-tag-3-line',
+    fill: 'i-ri-price-tag-3-fill',
+  },
+  {
+    name: 'map-pin',
+    keywords: 'location place',
+    line: 'i-ri-map-pin-line',
+    fill: 'i-ri-map-pin-fill',
+  },
+  {
+    name: 'sparkling-2',
+    keywords: 'magic ai shine sparkle',
+    line: 'i-ri-sparkling-2-line',
+    fill: 'i-ri-sparkling-2-fill',
+  },
+  {
+    name: 'fire',
+    keywords: 'flame hot trending',
+    line: 'i-ri-fire-line',
+    fill: 'i-ri-fire-fill',
+  },
+  {
+    name: 'lightbulb',
+    keywords: 'idea tip',
+    line: 'i-ri-lightbulb-line',
+    fill: 'i-ri-lightbulb-fill',
+  },
+  {
+    name: 'rocket',
+    keywords: 'launch startup ship',
+    line: 'i-ri-rocket-line',
+    fill: 'i-ri-rocket-fill',
+  },
+  {
+    name: 'focus-3',
+    keywords: 'target goal aim',
+    line: 'i-ri-focus-3-line',
+    fill: 'i-ri-focus-3-fill',
+  },
+  {
+    name: 'award',
+    keywords: 'prize badge medal',
+    line: 'i-ri-award-line',
+    fill: 'i-ri-award-fill',
+  },
+  {
+    name: 'trophy',
+    keywords: 'win achievement',
+    line: 'i-ri-trophy-line',
+    fill: 'i-ri-trophy-fill',
+  },
+  {
+    name: 'vip-crown-2',
+    keywords: 'crown premium vip',
+    line: 'i-ri-vip-crown-2-line',
+    fill: 'i-ri-vip-crown-2-fill',
+  },
+  {
+    name: 'vip-diamond',
+    keywords: 'gem diamond premium',
+    line: 'i-ri-vip-diamond-line',
+    fill: 'i-ri-vip-diamond-fill',
+  },
+  {
+    name: 'gift',
+    keywords: 'present reward',
+    line: 'i-ri-gift-line',
+    fill: 'i-ri-gift-fill',
+  },
+  {
+    name: 'notification-3',
+    keywords: 'bell alert',
+    line: 'i-ri-notification-3-line',
+    fill: 'i-ri-notification-3-fill',
+  },
+  {
+    name: 'global',
+    keywords: 'globe world web',
+    line: 'i-ri-global-line',
+    fill: 'i-ri-global-fill',
+  },
+  {
+    name: 'compass-3',
+    keywords: 'explore discover',
+    line: 'i-ri-compass-3-line',
+    fill: 'i-ri-compass-3-fill',
+  },
+  {
+    name: 'puzzle-2',
+    keywords: 'extension integration',
+    line: 'i-ri-puzzle-2-line',
+    fill: 'i-ri-puzzle-2-fill',
+  },
+  {
+    name: 'ticket-2',
+    keywords: 'support coupon',
+    line: 'i-ri-ticket-2-line',
+    fill: 'i-ri-ticket-2-fill',
+  },
+  {
+    name: 'megaphone',
+    keywords: 'announce broadcast marketing',
+    line: 'i-ri-megaphone-line',
+    fill: 'i-ri-megaphone-fill',
+  },
+  {
+    name: 'briefcase-4',
+    keywords: 'work job business',
+    line: 'i-ri-briefcase-4-line',
+    fill: 'i-ri-briefcase-4-fill',
+  },
+  {
+    name: 'building-2',
+    keywords: 'company office org',
+    line: 'i-ri-building-2-line',
+    fill: 'i-ri-building-2-fill',
+  },
+  {
+    name: 'store-2',
+    keywords: 'shop commerce',
+    line: 'i-ri-store-2-line',
+    fill: 'i-ri-store-2-fill',
+  },
+  {
+    name: 'community',
+    keywords: 'group team',
+    line: 'i-ri-community-line',
+    fill: 'i-ri-community-fill',
+  },
+  {
+    name: 'folder',
+    keywords: 'directory',
+    line: 'i-ri-folder-line',
+    fill: 'i-ri-folder-fill',
+  },
+  {
+    name: 'folder-open',
+    keywords: 'directory open',
+    line: 'i-ri-folder-open-line',
+    fill: 'i-ri-folder-open-fill',
+  },
+  {
+    name: 'file',
+    keywords: 'document',
+    line: 'i-ri-file-line',
+    fill: 'i-ri-file-fill',
+  },
+  {
+    name: 'file-text',
+    keywords: 'document doc',
+    line: 'i-ri-file-text-line',
+    fill: 'i-ri-file-text-fill',
+  },
+  {
+    name: 'file-copy',
+    keywords: 'documents files',
+    line: 'i-ri-file-copy-line',
+    fill: 'i-ri-file-copy-fill',
+  },
+  {
+    name: 'clipboard',
+    keywords: 'copy tasks',
+    line: 'i-ri-clipboard-line',
+    fill: 'i-ri-clipboard-fill',
+  },
+  {
+    name: 'book-2',
+    keywords: 'read guide book',
+    line: 'i-ri-book-2-line',
+    fill: 'i-ri-book-2-fill',
+  },
+  {
+    name: 'book-open',
+    keywords: 'read guide docs',
+    line: 'i-ri-book-open-line',
+    fill: 'i-ri-book-open-fill',
+  },
+  {
+    name: 'graduation-cap',
+    keywords: 'learn course education',
+    line: 'i-ri-graduation-cap-line',
+    fill: 'i-ri-graduation-cap-fill',
+  },
+  {
+    name: 'newspaper',
+    keywords: 'news article blog',
+    line: 'i-ri-newspaper-line',
+    fill: 'i-ri-newspaper-fill',
+  },
+  {
+    name: 'sticky-note',
+    keywords: 'note memo',
+    line: 'i-ri-sticky-note-line',
+    fill: 'i-ri-sticky-note-fill',
+  },
+  {
+    name: 'pencil',
+    keywords: 'write edit',
+    line: 'i-ri-pencil-line',
+    fill: 'i-ri-pencil-fill',
+  },
+  {
+    name: 'quill-pen',
+    keywords: 'write author',
+    line: 'i-ri-quill-pen-line',
+    fill: 'i-ri-quill-pen-fill',
+  },
+  {
+    name: 'mark-pen',
+    keywords: 'highlight',
+    line: 'i-ri-mark-pen-line',
+    fill: 'i-ri-mark-pen-fill',
+  },
+  {
+    name: 'calendar-2',
+    keywords: 'date schedule calendar',
+    line: 'i-ri-calendar-2-line',
+    fill: 'i-ri-calendar-2-fill',
+  },
+  {
+    name: 'calendar-event',
+    keywords: 'schedule event',
+    line: 'i-ri-calendar-event-line',
+    fill: 'i-ri-calendar-event-fill',
+  },
+  {
+    name: 'time',
+    keywords: 'clock time',
+    line: 'i-ri-time-line',
+    fill: 'i-ri-time-fill',
+  },
+  {
+    name: 'timer',
+    keywords: 'countdown',
+    line: 'i-ri-timer-line',
+    fill: 'i-ri-timer-fill',
+  },
+  {
+    name: 'history',
+    keywords: 'recent past',
+    line: 'i-ri-history-line',
+    fill: 'i-ri-history-fill',
+  },
+  {
+    name: 'hourglass',
+    keywords: 'wait time',
+    line: 'i-ri-hourglass-line',
+    fill: 'i-ri-hourglass-fill',
+  },
+  {
+    name: 'shopping-cart-2',
+    keywords: 'buy ecommerce cart',
+    line: 'i-ri-shopping-cart-2-line',
+    fill: 'i-ri-shopping-cart-2-fill',
+  },
+  {
+    name: 'shopping-bag-3',
+    keywords: 'buy purchase bag',
+    line: 'i-ri-shopping-bag-3-line',
+    fill: 'i-ri-shopping-bag-3-fill',
+  },
+  {
+    name: 'box-3',
+    keywords: 'package box shipping',
+    line: 'i-ri-box-3-line',
+    fill: 'i-ri-box-3-fill',
+  },
+  {
+    name: 'archive',
+    keywords: 'store box archive',
+    line: 'i-ri-archive-line',
+    fill: 'i-ri-archive-fill',
+  },
+  {
+    name: 'bank-card',
+    keywords: 'pay billing card credit',
+    line: 'i-ri-bank-card-line',
+    fill: 'i-ri-bank-card-fill',
+  },
+  {
+    name: 'wallet-3',
+    keywords: 'money pay wallet',
+    line: 'i-ri-wallet-3-line',
+    fill: 'i-ri-wallet-3-fill',
+  },
+  {
+    name: 'money-dollar-circle',
+    keywords: 'money price usd',
+    line: 'i-ri-money-dollar-circle-line',
+    fill: 'i-ri-money-dollar-circle-fill',
+  },
+  {
+    name: 'copper-coin',
+    keywords: 'coins money',
+    line: 'i-ri-copper-coin-line',
+    fill: 'i-ri-copper-coin-fill',
+  },
+  {
+    name: 'currency',
+    keywords: 'money exchange',
+    line: 'i-ri-currency-line',
+    fill: 'i-ri-currency-fill',
+  },
+  {
+    name: 'receipt',
+    keywords: 'invoice bill',
+    line: 'i-ri-receipt-line',
+    fill: 'i-ri-receipt-fill',
+  },
+  {
+    name: 'percent',
+    keywords: 'discount sale',
+    line: 'i-ri-percent-line',
+    fill: 'i-ri-percent-fill',
+  },
+  {
+    name: 'calculator',
+    keywords: 'math',
+    line: 'i-ri-calculator-line',
+    fill: 'i-ri-calculator-fill',
+  },
+  {
+    name: 'mail',
+    keywords: 'email message',
+    line: 'i-ri-mail-line',
+    fill: 'i-ri-mail-fill',
+  },
+  {
+    name: 'send-plane',
+    keywords: 'send submit',
+    line: 'i-ri-send-plane-line',
+    fill: 'i-ri-send-plane-fill',
+  },
+  {
+    name: 'chat-3',
+    keywords: 'chat talk message',
+    line: 'i-ri-chat-3-line',
+    fill: 'i-ri-chat-3-fill',
+  },
+  {
+    name: 'message-2',
+    keywords: 'chat comment',
+    line: 'i-ri-message-2-line',
+    fill: 'i-ri-message-2-fill',
+  },
+  {
+    name: 'question-answer',
+    keywords: 'chat conversation faq',
+    line: 'i-ri-question-answer-line',
+    fill: 'i-ri-question-answer-fill',
+  },
+  {
+    name: 'phone',
+    keywords: 'call',
+    line: 'i-ri-phone-line',
+    fill: 'i-ri-phone-fill',
+  },
+  {
+    name: 'vidicon',
+    keywords: 'video call meeting',
+    line: 'i-ri-vidicon-line',
+    fill: 'i-ri-vidicon-fill',
+  },
+  {
+    name: 'mic',
+    keywords: 'record voice audio',
+    line: 'i-ri-mic-line',
+    fill: 'i-ri-mic-fill',
+  },
+  {
+    name: 'group',
+    keywords: 'team people users',
+    line: 'i-ri-group-line',
+    fill: 'i-ri-group-fill',
+  },
+  {
+    name: 'user',
+    keywords: 'person account',
+    line: 'i-ri-user-line',
+    fill: 'i-ri-user-fill',
+  },
+  {
+    name: 'user-add',
+    keywords: 'add member',
+    line: 'i-ri-user-add-line',
+    fill: 'i-ri-user-add-fill',
+  },
+  {
+    name: 'contacts',
+    keywords: 'person card contact',
+    line: 'i-ri-contacts-line',
+    fill: 'i-ri-contacts-fill',
+  },
+  {
+    name: 'emotion-happy',
+    keywords: 'happy smile emoji',
+    line: 'i-ri-emotion-happy-line',
+    fill: 'i-ri-emotion-happy-fill',
+  },
+  {
+    name: 'thumb-up',
+    keywords: 'like approve',
+    line: 'i-ri-thumb-up-line',
+    fill: 'i-ri-thumb-up-fill',
+  },
+  {
+    name: 'hand-heart',
+    keywords: 'care support',
+    line: 'i-ri-hand-heart-line',
+    fill: 'i-ri-hand-heart-fill',
+  },
+  {
+    name: 'at',
+    keywords: 'mention email at',
+    line: 'i-ri-at-line',
+    fill: 'i-ri-at-fill',
+  },
+  {
+    name: 'image-2',
+    keywords: 'picture photo image',
+    line: 'i-ri-image-2-line',
+    fill: 'i-ri-image-2-fill',
+  },
+  {
+    name: 'camera-3',
+    keywords: 'photo camera',
+    line: 'i-ri-camera-3-line',
+    fill: 'i-ri-camera-3-fill',
+  },
+  {
+    name: 'film',
+    keywords: 'movie video',
+    line: 'i-ri-film-line',
+    fill: 'i-ri-film-fill',
+  },
+  {
+    name: 'music-2',
+    keywords: 'audio song music',
+    line: 'i-ri-music-2-line',
+    fill: 'i-ri-music-2-fill',
+  },
+  {
+    name: 'headphone',
+    keywords: 'audio support',
+    line: 'i-ri-headphone-line',
+    fill: 'i-ri-headphone-fill',
+  },
+  {
+    name: 'palette',
+    keywords: 'color design art',
+    line: 'i-ri-palette-line',
+    fill: 'i-ri-palette-fill',
+  },
+  {
+    name: 'brush-3',
+    keywords: 'paint design brush',
+    line: 'i-ri-brush-3-line',
+    fill: 'i-ri-brush-3-fill',
+  },
+  {
+    name: 'scissors-2',
+    keywords: 'cut',
+    line: 'i-ri-scissors-2-line',
+    fill: 'i-ri-scissors-2-fill',
+  },
+  {
+    name: 'code-s-slash',
+    keywords: 'develop code programming',
+    line: 'i-ri-code-s-slash-line',
+    fill: 'i-ri-code-s-slash-fill',
+  },
+  {
+    name: 'terminal-box',
+    keywords: 'console cli terminal',
+    line: 'i-ri-terminal-box-line',
+    fill: 'i-ri-terminal-box-fill',
+  },
+  {
+    name: 'git-branch',
+    keywords: 'version code git',
+    line: 'i-ri-git-branch-line',
+    fill: 'i-ri-git-branch-fill',
+  },
+  {
+    name: 'github',
+    keywords: 'git code',
+    line: 'i-ri-github-line',
+    fill: 'i-ri-github-fill',
+  },
+  {
+    name: 'cpu',
+    keywords: 'chip processor',
+    line: 'i-ri-cpu-line',
+    fill: 'i-ri-cpu-fill',
+  },
+  {
+    name: 'database-2',
+    keywords: 'storage data',
+    line: 'i-ri-database-2-line',
+    fill: 'i-ri-database-2-fill',
+  },
+  {
+    name: 'server',
+    keywords: 'host backend',
+    line: 'i-ri-server-line',
+    fill: 'i-ri-server-fill',
+  },
+  {
+    name: 'cloud',
+    keywords: 'storage cloud',
+    line: 'i-ri-cloud-line',
+    fill: 'i-ri-cloud-fill',
+  },
+  {
+    name: 'wifi',
+    keywords: 'network internet',
+    line: 'i-ri-wifi-line',
+    fill: 'i-ri-wifi-fill',
+  },
+  {
+    name: 'computer',
+    keywords: 'screen desktop monitor',
+    line: 'i-ri-computer-line',
+    fill: 'i-ri-computer-fill',
+  },
+  {
+    name: 'smartphone',
+    keywords: 'mobile phone',
+    line: 'i-ri-smartphone-line',
+    fill: 'i-ri-smartphone-fill',
+  },
+  {
+    name: 'macbook',
+    keywords: 'laptop computer',
+    line: 'i-ri-macbook-line',
+    fill: 'i-ri-macbook-fill',
+  },
+  {
+    name: 'bug',
+    keywords: 'issue error bug',
+    line: 'i-ri-bug-line',
+    fill: 'i-ri-bug-fill',
+  },
+  {
+    name: 'command',
+    keywords: 'keyboard shortcut',
+    line: 'i-ri-command-line',
+    fill: 'i-ri-command-fill',
+  },
+  {
+    name: 'settings-3',
+    keywords: 'config gear options settings',
+    line: 'i-ri-settings-3-line',
+    fill: 'i-ri-settings-3-fill',
+  },
+  {
+    name: 'equalizer',
+    keywords: 'controls adjust sliders filter',
+    line: 'i-ri-equalizer-line',
+    fill: 'i-ri-equalizer-fill',
+  },
+  {
+    name: 'tools',
+    keywords: 'fix tools config',
+    line: 'i-ri-tools-line',
+    fill: 'i-ri-tools-fill',
+  },
+  {
+    name: 'hammer',
+    keywords: 'build fix hammer',
+    line: 'i-ri-hammer-line',
+    fill: 'i-ri-hammer-fill',
+  },
+  {
+    name: 'key-2',
+    keywords: 'password access key',
+    line: 'i-ri-key-2-line',
+    fill: 'i-ri-key-2-fill',
+  },
+  {
+    name: 'lock',
+    keywords: 'secure private lock',
+    line: 'i-ri-lock-line',
+    fill: 'i-ri-lock-fill',
+  },
+  {
+    name: 'lock-unlock',
+    keywords: 'open access',
+    line: 'i-ri-lock-unlock-line',
+    fill: 'i-ri-lock-unlock-fill',
+  },
+  {
+    name: 'shield',
+    keywords: 'security protect',
+    line: 'i-ri-shield-line',
+    fill: 'i-ri-shield-fill',
+  },
+  {
+    name: 'shield-check',
+    keywords: 'secure verified',
+    line: 'i-ri-shield-check-line',
+    fill: 'i-ri-shield-check-fill',
+  },
+  {
+    name: 'eye',
+    keywords: 'view visible preview',
+    line: 'i-ri-eye-line',
+    fill: 'i-ri-eye-fill',
+  },
+  {
+    name: 'search',
+    keywords: 'find lookup search',
+    line: 'i-ri-search-line',
+    fill: 'i-ri-search-fill',
+  },
+  {
+    name: 'filter-3',
+    keywords: 'sort refine filter',
+    line: 'i-ri-filter-3-line',
+    fill: 'i-ri-filter-3-fill',
+  },
+  {
+    name: 'links',
+    keywords: 'url chain link',
+    line: 'i-ri-links-line',
+    fill: 'i-ri-links-fill',
+  },
+  {
+    name: 'share-forward',
+    keywords: 'share send distribute',
+    line: 'i-ri-share-forward-line',
+    fill: 'i-ri-share-forward-fill',
+  },
+  {
+    name: 'plug',
+    keywords: 'connect integration',
+    line: 'i-ri-plug-line',
+    fill: 'i-ri-plug-fill',
+  },
+  {
+    name: 'shut-down',
+    keywords: 'power on off',
+    line: 'i-ri-shut-down-line',
+    fill: 'i-ri-shut-down-fill',
+  },
+  {
+    name: 'qr-scan-2',
+    keywords: 'qr scan',
+    line: 'i-ri-qr-scan-2-line',
+    fill: 'i-ri-qr-scan-2-fill',
+  },
+  {
+    name: 'fingerprint',
+    keywords: 'identity auth fingerprint',
+    line: 'i-ri-fingerprint-line',
+    fill: 'i-ri-fingerprint-fill',
+  },
+  {
+    name: 'bar-chart',
+    keywords: 'analytics stats graph bar',
+    line: 'i-ri-bar-chart-line',
+    fill: 'i-ri-bar-chart-fill',
+  },
+  {
+    name: 'pie-chart',
+    keywords: 'analytics stats pie',
+    line: 'i-ri-pie-chart-line',
+    fill: 'i-ri-pie-chart-fill',
+  },
+  {
+    name: 'line-chart',
+    keywords: 'analytics trend graph line',
+    line: 'i-ri-line-chart-line',
+    fill: 'i-ri-line-chart-fill',
+  },
+  {
+    name: 'stock',
+    keywords: 'growth increase trending',
+    line: 'i-ri-stock-line',
+    fill: 'i-ri-stock-fill',
+  },
+  {
+    name: 'pulse',
+    keywords: 'activity health monitor',
+    line: 'i-ri-pulse-line',
+    fill: 'i-ri-pulse-fill',
+  },
+  {
+    name: 'dashboard-3',
+    keywords: 'speed performance dashboard gauge',
+    line: 'i-ri-dashboard-3-line',
+    fill: 'i-ri-dashboard-3-fill',
+  },
+  {
+    name: 'check',
+    keywords: 'done complete ok check',
+    line: 'i-ri-check-line',
+    fill: 'i-ri-check-fill',
+  },
+  {
+    name: 'checkbox-circle',
+    keywords: 'done success check',
+    line: 'i-ri-checkbox-circle-line',
+    fill: 'i-ri-checkbox-circle-fill',
+  },
+  {
+    name: 'close-circle',
+    keywords: 'error fail close',
+    line: 'i-ri-close-circle-line',
+    fill: 'i-ri-close-circle-fill',
+  },
+  {
+    name: 'information',
+    keywords: 'info information',
+    line: 'i-ri-information-line',
+    fill: 'i-ri-information-fill',
+  },
+  {
+    name: 'error-warning',
+    keywords: 'warning alert',
+    line: 'i-ri-error-warning-line',
+    fill: 'i-ri-error-warning-fill',
+  },
+  {
+    name: 'alert',
+    keywords: 'warning caution',
+    line: 'i-ri-alert-line',
+    fill: 'i-ri-alert-fill',
+  },
+  {
+    name: 'question',
+    keywords: 'support faq help',
+    line: 'i-ri-question-line',
+    fill: 'i-ri-question-fill',
+  },
+  {
+    name: 'layout-grid',
+    keywords: 'dashboard apps grid',
+    line: 'i-ri-layout-grid-line',
+    fill: 'i-ri-layout-grid-fill',
+  },
+  {
+    name: 'table',
+    keywords: 'grid data table',
+    line: 'i-ri-table-line',
+    fill: 'i-ri-table-fill',
+  },
+  {
+    name: 'function',
+    keywords: 'kanban board',
+    line: 'i-ri-function-line',
+    fill: 'i-ri-function-fill',
+  },
+  {
+    name: 'map-2',
+    keywords: 'location navigate map',
+    line: 'i-ri-map-2-line',
+    fill: 'i-ri-map-2-fill',
+  },
+  {
+    name: 'navigation',
+    keywords: 'direction gps',
+    line: 'i-ri-navigation-line',
+    fill: 'i-ri-navigation-fill',
+  },
+  {
+    name: 'car',
+    keywords: 'drive vehicle car',
+    line: 'i-ri-car-line',
+    fill: 'i-ri-car-fill',
+  },
+  {
+    name: 'truck',
+    keywords: 'delivery shipping',
+    line: 'i-ri-truck-line',
+    fill: 'i-ri-truck-fill',
+  },
+  {
+    name: 'plane',
+    keywords: 'travel flight plane',
+    line: 'i-ri-plane-line',
+    fill: 'i-ri-plane-fill',
+  },
+  {
+    name: 'bike',
+    keywords: 'cycle bike',
+    line: 'i-ri-bike-line',
+    fill: 'i-ri-bike-fill',
+  },
+  {
+    name: 'anchor',
+    keywords: 'ship marine anchor',
+    line: 'i-ri-anchor-line',
+    fill: 'i-ri-anchor-fill',
+  },
+  {
+    name: 'leaf',
+    keywords: 'eco nature green leaf',
+    line: 'i-ri-leaf-line',
+    fill: 'i-ri-leaf-fill',
+  },
+  {
+    name: 'plant',
+    keywords: 'nature plant grow',
+    line: 'i-ri-plant-line',
+    fill: 'i-ri-plant-fill',
+  },
+  {
+    name: 'sun',
+    keywords: 'day light weather sun',
+    line: 'i-ri-sun-line',
+    fill: 'i-ri-sun-fill',
+  },
+  {
+    name: 'moon',
+    keywords: 'night dark moon',
+    line: 'i-ri-moon-line',
+    fill: 'i-ri-moon-fill',
+  },
+  {
+    name: 'rainy',
+    keywords: 'weather rain',
+    line: 'i-ri-rainy-line',
+    fill: 'i-ri-rainy-fill',
+  },
+  {
+    name: 'umbrella',
+    keywords: 'rain protect umbrella',
+    line: 'i-ri-umbrella-line',
+    fill: 'i-ri-umbrella-fill',
+  },
+  {
+    name: 'landscape',
+    keywords: 'outdoor hike mountain',
+    line: 'i-ri-landscape-line',
+    fill: 'i-ri-landscape-fill',
+  },
+  {
+    name: 'drop',
+    keywords: 'water drop',
+    line: 'i-ri-drop-line',
+    fill: 'i-ri-drop-fill',
+  },
+  {
+    name: 'cup',
+    keywords: 'coffee drink cup',
+    line: 'i-ri-cup-line',
+    fill: 'i-ri-cup-fill',
+  },
+  {
+    name: 'restaurant',
+    keywords: 'food eat restaurant',
+    line: 'i-ri-restaurant-line',
+    fill: 'i-ri-restaurant-fill',
+  },
+  {
+    name: 'cake-3',
+    keywords: 'birthday celebrate cake',
+    line: 'i-ri-cake-3-line',
+    fill: 'i-ri-cake-3-fill',
+  },
+  {
+    name: 'goblet',
+    keywords: 'drink wine bar',
+    line: 'i-ri-goblet-line',
+    fill: 'i-ri-goblet-fill',
+  },
+  {
+    name: 'heart-pulse',
+    keywords: 'health medical',
+    line: 'i-ri-heart-pulse-line',
+    fill: 'i-ri-heart-pulse-fill',
+  },
+  {
+    name: 'stethoscope',
+    keywords: 'health doctor medical',
+    line: 'i-ri-stethoscope-line',
+    fill: 'i-ri-stethoscope-fill',
+  },
+  {
+    name: 'capsule',
+    keywords: 'medicine pill health',
+    line: 'i-ri-capsule-line',
+    fill: 'i-ri-capsule-fill',
+  },
+  {
+    name: 'add',
+    keywords: 'add new create plus',
+    line: 'i-ri-add-line',
+    fill: 'i-ri-add-fill',
+  },
+  {
+    name: 'delete-bin',
+    keywords: 'delete remove trash',
+    line: 'i-ri-delete-bin-line',
+    fill: 'i-ri-delete-bin-fill',
+  },
+  {
+    name: 'download',
+    keywords: 'save export download',
+    line: 'i-ri-download-line',
+    fill: 'i-ri-download-fill',
+  },
+  {
+    name: 'upload',
+    keywords: 'import upload',
+    line: 'i-ri-upload-line',
+    fill: 'i-ri-upload-fill',
+  },
+  {
+    name: 'refresh',
+    keywords: 'reload sync update refresh',
+    line: 'i-ri-refresh-line',
+    fill: 'i-ri-refresh-fill',
+  },
+  {
+    name: 'external-link',
+    keywords: 'open new external',
+    line: 'i-ri-external-link-line',
+    fill: 'i-ri-external-link-fill',
+  },
+  {
+    name: 'logout-box',
+    keywords: 'exit signout logout',
+    line: 'i-ri-logout-box-line',
+    fill: 'i-ri-logout-box-fill',
+  },
+  {
+    name: 'fullscreen',
+    keywords: 'expand maximize fullscreen',
+    line: 'i-ri-fullscreen-line',
+    fill: 'i-ri-fullscreen-fill',
+  },
+  {
+    name: 'drag-move',
+    keywords: 'drag reorder move',
+    line: 'i-ri-drag-move-line',
+    fill: 'i-ri-drag-move-fill',
+  },
+  {
+    name: 'paint-brush',
+    keywords: 'brush paint',
+    line: 'i-ri-paint-brush-line',
+    fill: 'i-ri-paint-brush-fill',
+  },
+];

app/javascript/dashboard/components-next/tabbar/TabBar.vue

@@ -81,6 +81,7 @@ const showDivider = index => {
     <template v-for="(tab, index) in tabs" :key="index">
       <button
         :ref="el => (tabRefs[index] = el)"
+        type="button"
         class="relative z-10 px-4 truncate py-1.5 text-sm border-0 outline-1 outline-transparent rounded-lg transition-all duration-200 ease-out hover:text-n-brand active:scale-[1.02]"
         :class="[
           activeTab === index

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -56,8 +56,9 @@ import { isFileTypeAllowedForChannel } from 'shared/helpers/FileHelper';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { emitter } from 'shared/helpers/mitt';
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
 );
 
 export default {
@@ -66,7 +67,7 @@ export default {
     AttachmentPreview,
     AudioRecorder,
     ReplyBoxBanner,
-    EmojiInput,
+    EmojiIconPicker,
     MessageSignatureMissingAlert,
     ReplyBottomPanel,
     ReplyEmailHead,
@@ -1284,13 +1285,15 @@ export default {
           :message="inReplyTo"
           @dismiss="resetReplyToMessage"
         />
-        <EmojiInput
+        <EmojiIconPicker
           v-if="showEmojiPicker"
           v-on-clickaway="hideEmojiPicker"
+          mode="emoji"
+          class="emoji-dialog"
           :class="{
             'emoji-dialog--expanded': isOnExpandedLayout,
           }"
-          :on-click="addIntoEditor"
+          @select="addIntoEditor($event.value)"
         />
         <ReplyEmailHead
           v-if="showReplyHead && isDefaultEditorMode"

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

@@ -3,5 +3,33 @@
     "PLACEHOLDER": "Search emojis",
     "NOT_FOUND": "No emoji match your search",
     "REMOVE": "Remove"
+  },
+  "EMOJI_ICON_PICKER": {
+    "TABS": {
+      "ICONS": "Icons",
+      "EMOJIS": "Emojis"
+    },
+    "SEARCH_EMOJI": "Search emoji…",
+    "SEARCH_ICON": "Search icons…",
+    "FREQUENTLY_USED": "Frequently used",
+    "NO_EMOJI": "No emoji match your search",
+    "NO_ICON": "No icons match your search",
+    "REMOVE": "Remove",
+    "STYLE": {
+      "OUTLINE": "Outline icons",
+      "FILLED": "Filled icons"
+    },
+    "COLORS": {
+      "SLATE": "Slate",
+      "RED": "Red",
+      "ORANGE": "Orange",
+      "AMBER": "Amber",
+      "GREEN": "Green",
+      "TEAL": "Teal",
+      "BLUE": "Blue",
+      "INDIGO": "Indigo",
+      "VIOLET": "Violet",
+      "PINK": "Pink"
+    }
   }
 }

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -1,255 +0,0 @@
-<script>
-import emojis from './emojisGroup.json';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-const SEARCH_KEY = 'Search';
-
-export default {
-  components: { FluentIcon, NextButton },
-  props: {
-    onClick: {
-      type: Function,
-      default: () => {},
-    },
-    showRemoveButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selectedKey: 'Search',
-      emojis,
-      search: '',
-    };
-  },
-  computed: {
-    categories() {
-      return [...this.emojis];
-    },
-    filterEmojisByCategory() {
-      const selectedCategoryName = this.emojis.find(category =>
-        category.name === this.selectedKey ? category.name : null
-      );
-      return selectedCategoryName?.emojis;
-    },
-    filterAllEmojisBySearch() {
-      return this.emojis.map(category => {
-        const allEmojis = category.emojis.filter(emoji =>
-          emoji.slug.replaceAll('_', ' ').includes(this.search.toLowerCase())
-        );
-        return allEmojis.length > 0
-          ? { ...category, emojis: allEmojis }
-          : { ...category, emojis: [] };
-      });
-    },
-    hasNoSearch() {
-      return this.selectedKey !== SEARCH_KEY && this.search === '';
-    },
-    hasEmptySearchResult() {
-      return this.filterAllEmojisBySearch.every(
-        category => category.emojis.length === 0
-      );
-    },
-  },
-  watch: {
-    search() {
-      this.selectedKey = 'Search';
-    },
-    selectedKey() {
-      return this.selectedKey === 'Search' ? this.focusSearchInput() : null;
-    },
-  },
-  mounted() {
-    this.focusSearchInput();
-  },
-  methods: {
-    changeCategory(category) {
-      this.search = '';
-      this.$refs.emojiItem.scrollTo({ top: 0 });
-      this.selectedKey = category;
-    },
-    getFirstEmojiByCategoryName(categoryName) {
-      const categoryItem = this.emojis.find(category =>
-        category.name === categoryName ? category : null
-      );
-      return categoryItem ? categoryItem.emojis[0].emoji : '';
-    },
-    focusSearchInput() {
-      this.$nextTick(() => {
-        this.$refs.searchbar.focus();
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    role="dialog"
-    class="emoji-dialog bg-n-background shadow-lg rounded-md outline outline-1 outline-n-weak box-content h-[18.75rem] absolute right-0 -top-[95px] w-80 z-20"
-  >
-    <div class="flex flex-col">
-      <div class="flex gap-2 m-2 sticky top-2">
-        <input
-          ref="searchbar"
-          v-model="search"
-          type="text"
-          class="focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
-          :placeholder="$t('EMOJI.PLACEHOLDER')"
-        />
-        <NextButton
-          v-if="showRemoveButton"
-          faded
-          sm
-          slate
-          class="flex-shrink-0"
-          :label="$t('EMOJI.REMOVE')"
-          @click="onClick('')"
-        />
-      </div>
-      <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
-        <h5
-          class="text-sm text-n-slate-12 font-medium leading-normal m-0 py-1 px-2 capitalize"
-        >
-          {{ selectedKey }}
-        </h5>
-        <div class="emoji--row">
-          <button
-            v-for="item in filterEmojisByCategory"
-            :key="item.slug"
-            v-dompurify-html="item.emoji"
-            class="emoji--item"
-            track-by="$index"
-            @click="onClick(item.emoji)"
-          />
-        </div>
-      </div>
-      <div v-else ref="emojiItem" class="emoji-item">
-        <div v-for="category in filterAllEmojisBySearch" :key="category.slug">
-          <h5
-            v-if="category.emojis.length > 0"
-            class="text-sm text-n-slate-12 font-medium leading-normal m-0 py-1 px-2 capitalize"
-          >
-            {{ category.name }}
-          </h5>
-          <div v-if="category.emojis.length > 0" class="emoji--row">
-            <button
-              v-for="item in category.emojis"
-              :key="item.slug"
-              v-dompurify-html="item.emoji"
-              class="emoji--item"
-              track-by="$index"
-              @click="onClick(item.emoji)"
-            />
-          </div>
-        </div>
-        <div
-          v-if="hasEmptySearchResult"
-          class="items-center flex flex-col h-[13.25rem] justify-center"
-        >
-          <div class="text-n-slate-11 mb-2">
-            <FluentIcon icon="emoji" size="48" />
-          </div>
-          <span class="text-n-slate-11 text-sm font-medium">
-            {{ $t('EMOJI.NOT_FOUND') }}
-          </span>
-        </div>
-      </div>
-
-      <div
-        class="emoji-dialog--footer relative w-full py-0 rounded-b-[0.34rem] px-1 bg-n-slate-3"
-        role="menu"
-      >
-        <ul
-          class="flex relative left-[2px] rtl:left-[unset] rtl:right-[2px] list-none m-0 overflow-auto py-1 px-0"
-        >
-          <li>
-            <button
-              class="emoji--item"
-              :class="{ active: selectedKey === 'Search' }"
-              @click="changeCategory('Search')"
-            >
-              <FluentIcon icon="search" size="16" class="text-n-slate-11" />
-            </button>
-          </li>
-          <li
-            v-for="category in categories"
-            :key="category.slug"
-            @click="changeCategory(category.name)"
-          >
-            <button
-              v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
-              class="emoji--item"
-              :class="{ active: selectedKey === category.name }"
-              @click="changeCategory(category.name)"
-            />
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@tailwind components;
-
-@layer components {
-  .box-shadow-blue {
-    box-shadow:
-      0 0 0 1px #1f93ff,
-      0 0 1px 2px #c7e3ff;
-  }
-
-  .box-shadow-dark {
-    box-shadow:
-      0 0 0 1px #212222,
-      0 0 1px 2px #4c5155;
-  }
-}
-</style>
-
-<style lang="scss">
-.emoji-dialog {
-  &::before {
-    @apply absolute -bottom-3 h-3 w-6 bg-n-slate-3 content-[""];
-    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
-  }
-}
-
-.emoji--item {
-  @apply bg-transparent border-0 rounded cursor-pointer text-lg h-6 m-0 py-0 px-1 hover:bg-n-slate-4;
-}
-
-.emoji--row {
-  @apply box-border p-1;
-
-  .emoji--item {
-    @apply h-[1.625rem] w-[1.625rem] leading-normal m-1;
-  }
-}
-
-.emoji-item {
-  @apply h-[13.25rem] overflow-y-auto;
-}
-
-.emoji-dialog--footer {
-  ul {
-    > li {
-      @apply items-center cursor-pointer flex justify-center p-1;
-    }
-
-    li .active {
-      @apply bg-n-background;
-    }
-
-    .emoji--item {
-      @apply items-center flex text-sm;
-
-      &:hover {
-        @apply bg-n-slate-2;
-      }
-    }
-  }
-}
-</style>

app/javascript/widget/assets/scss/woot.scss

@@ -272,6 +272,9 @@ blockquote {
     --gray-12: 32 32 32;
 
     --background-color: 253 253 253;
+    --surface-1: 254 254 254;
+    --surface-2: 255 255 255;
+    --surface-active: 255 255 255;
     --text-blue: 8 109 224;
     --border-container: 236 236 236;
     --border-strong: 235 235 235;
@@ -379,6 +382,9 @@ blockquote {
     --gray-12: 238 238 238;
 
     --background-color: 18 18 19;
+    --surface-1: 20 21 23;
+    --surface-2: 22 23 26;
+    --surface-active: 53 57 66;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;
     --solid-1: 23 23 26;

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
@@ -7,14 +8,17 @@ import { useAttachments } from '../composables/useAttachments';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 
-import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
+);
 
 export default {
   name: 'ChatInputWrap',
   components: {
     ChatAttachmentButton,
     ChatSendButton,
-    EmojiInput,
+    EmojiIconPicker,
     FluentIcon,
     ResizableTextArea,
   },
@@ -110,6 +114,9 @@ export default {
     emojiOnClick(emoji) {
       this.userInput = `${this.userInput}${emoji} `;
     },
+    onSelectEmoji({ value }) {
+      this.emojiOnClick(value);
+    },
     onTypingOff() {
       this.toggleTyping('off');
     },
@@ -148,7 +155,7 @@ export default {
       @focus="onFocus"
       @blur="onBlur"
     />
-    <div class="flex items-center ltr:pl-2 rtl:pr-2">
+    <div class="relative flex items-center ltr:pl-2 rtl:pr-2">
       <ChatAttachmentButton
         v-if="showAttachment"
         class="text-n-slate-12"
@@ -169,10 +176,12 @@ export default {
           }"
         />
       </button>
-      <EmojiInput
+      <EmojiIconPicker
         v-if="shouldShowEmojiPicker && showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
-        :on-click="emojiOnClick"
+        mode="emoji"
+        class="!bottom-full end-0 mb-2 max-w-[calc(100vw-3rem)]"
+        @select="onSelectEmoji"
         @keydown.esc="hideEmojiPicker"
       />
       <ChatSendButton
@@ -185,10 +194,6 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.emoji-dialog {
-  @apply max-w-full ltr:right-5 rtl:right-[unset] rtl:left-5 -top-[302px] before:ltr:right-2.5 before:rtl:right-[unset] before:rtl:left-2.5;
-}
-
 .user-message-input {
   @apply border-none outline-none w-full placeholder:text-n-slate-10 resize-none h-8 min-h-8 max-h-60 py-1 px-0 my-2 bg-n-background text-n-slate-12 transition-all duration-200;
 }

app/javascript/widget/i18n/locale/en.json

@@ -106,6 +106,11 @@
     "NOT_FOUND": "No emoji match your search",
     "ARIA_LABEL": "Emoji picker"
   },
+  "EMOJI_ICON_PICKER": {
+    "SEARCH_EMOJI": "Search emoji…",
+    "FREQUENTLY_USED": "Frequently used",
+    "NO_EMOJI": "No emoji match your search"
+  },
   "CSAT": {
     "TITLE": "Rate your conversation",
     "SUBMITTED_TITLE": "Thank you for submitting the rating",