feat: Adds the ability to set an emoji for help center category (#8111)

app/controllers/api/v1/accounts/categories_controller.rb

@@ -48,7 +48,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
 
   def category_params
     params.require(:category).permit(
-      :name, :description, :position, :slug, :locale, :parent_category_id, :associated_category_id
+      :name, :description, :position, :slug, :locale, :icon, :parent_category_id, :associated_category_id
     )
   end
 

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

@@ -1,6 +1,7 @@
 {
   "EMOJI": {
     "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "NOT_FOUND": "No emoji match your search",
+    "REMOVE": "Remove"
   }
 }

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

@@ -365,7 +365,7 @@
         "NAME": {
           "LABEL": "Name",
           "PLACEHOLDER": "Category name",
-          "HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
+          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
           "ERROR": "Name is required"
         },
         "SLUG": {
@@ -396,7 +396,7 @@
         "NAME": {
           "LABEL": "Name",
           "PLACEHOLDER": "Category name",
-          "HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
+          "HELP_TEXT": "The category name and icon will be used in the public facing portal to categorize articles.",
           "ERROR": "Name is required"
         },
         "SLUG": {

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -224,7 +224,9 @@ export default {
           key: 'category',
           children: this.categories.map(category => ({
             id: category.id,
-            label: category.name,
+            label: category.icon
+              ? `${category.icon} ${category.name}`
+              : category.name,
             count: category.meta.articles_count,
             truncateLabel: true,
             toState: frontendURL(

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -21,15 +21,14 @@
             </label>
           </div>
         </div>
-        <woot-input
+        <category-name-icon-input
-          v-model.trim="name"
-          :class="{ error: $v.name.$error }"
-          class="w-full"
-          :error="nameError"
           :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
-          @input="onNameChange"
+          :has-error="$v.name.$error"
+          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
+          @name-change="onNameChange"
+          @icon-change="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"
@@ -72,8 +71,10 @@ import alertMixin from 'shared/mixins/alertMixin';
 import { required, minLength } from 'vuelidate/lib/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
+import CategoryNameIconInput from './NameEmojiInput.vue';
 
 export default {
+  components: { CategoryNameIconInput },
   mixins: [alertMixin],
   props: {
     show: {
@@ -96,6 +97,7 @@ export default {
   data() {
     return {
       name: '',
+      icon: '',
       slug: '',
       description: '',
     };
@@ -115,12 +117,6 @@ export default {
         ? this.$route.params.portalSlug
         : this.portalSlug;
     },
-    nameError() {
-      if (this.$v.name.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
-      }
-      return '';
-    },
     slugError() {
       if (this.$v.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
@@ -129,7 +125,8 @@ export default {
     },
   },
   methods: {
-    onNameChange() {
+    onNameChange(name) {
+      this.name = name;
       this.slug = convertToCategorySlug(this.name);
     },
     onCreate() {
@@ -138,11 +135,15 @@ export default {
     onClose() {
       this.$emit('cancel');
     },
+    onClickInsertEmoji(emoji) {
+      this.icon = emoji;
+    },
 
     async addCategory() {
-      const { name, slug, description, locale } = this;
+      const { name, slug, description, locale, icon } = this;
       const data = {
         name,
+        icon,
         slug,
         description,
         locale,

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue

@@ -24,7 +24,7 @@
       <tbody>
         <tr v-for="category in categories" :key="category.id">
           <td>
-            <span>{{ category.name }}</span>
+            <span>{{ category.icon }} {{ category.name }}</span>
           </td>
           <td>
             <span>{{ category.description }}</span>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -21,15 +21,16 @@
             </label>
           </div>
         </div>
-        <woot-input
+        <category-name-icon-input
-          v-model.trim="name"
-          :class="{ error: $v.name.$error }"
-          class="w-full"
-          :error="nameError"
           :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
-          @input="onNameChange"
+          :has-error="$v.name.$error"
+          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
+          :existing-name="category.name"
+          :saved-icon="category.icon"
+          @name-change="changeName"
+          @icon-change="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"
@@ -72,8 +73,10 @@ import alertMixin from 'shared/mixins/alertMixin';
 import { required, minLength } from 'vuelidate/lib/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
+import CategoryNameIconInput from './NameEmojiInput.vue';
 
 export default {
+  components: { CategoryNameIconInput },
   mixins: [alertMixin],
   props: {
     show: {
@@ -101,6 +104,7 @@ export default {
     return {
       id: this.category.id,
       name: '',
+      icon: '',
       slug: '',
       description: '',
     };
@@ -115,12 +119,6 @@ export default {
     },
   },
   computed: {
-    nameError() {
-      if (this.$v.name.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
-      }
-      return '';
-    },
     slugError() {
       if (this.$v.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
@@ -135,12 +133,17 @@ export default {
     updateDataFromStore() {
       const { category } = this;
       this.name = category.name;
+      this.icon = category.icon;
       this.slug = category.slug;
       this.description = category.description;
     },
-    onNameChange() {
+    changeName(name) {
+      this.name = name;
       this.slug = convertToCategorySlug(this.name);
     },
+    onClickInsertEmoji(emoji) {
+      this.icon = emoji;
+    },
     onUpdate() {
       this.$emit('update');
     },
@@ -148,10 +151,11 @@ export default {
       this.$emit('cancel');
     },
     async editCategory() {
-      const { id, name, slug, description } = this;
+      const { id, name, slug, icon, description } = this;
       const data = {
         id,
         name,
+        icon,
         slug,
         description,
       };

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="flex items-center relative">
+    <woot-button
+      variant="hollow"
+      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[25px] h-[2.45rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
+      color-scheme="secondary"
+      @click="toggleEmojiPicker"
+    >
+      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
+      <fluent-icon
+        v-else
+        size="18"
+        icon="emoji-add"
+        type="outline"
+        class="text-slate-400 dark:text-slate-600"
+      />
+    </woot-button>
+    <woot-input
+      v-model="name"
+      :class="{ error: hasError }"
+      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:ml-12 rtl:[&>input]:mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
+      :error="nameErrorMessage"
+      :label="label"
+      :placeholder="placeholder"
+      :help-text="helpText"
+      @input="onNameChange"
+    />
+    <emoji-input
+      v-if="showEmojiPicker"
+      v-on-clickaway="hideEmojiPicker"
+      class="left-0 top-16"
+      :show-remove-button="true"
+      :on-click="onClickInsertEmoji"
+    />
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+
+const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+
+export default {
+  components: { EmojiInput },
+  mixins: [clickaway],
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    helpText: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    existingName: {
+      type: String,
+      default: '',
+    },
+    savedIcon: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      name: '',
+      icon: '',
+      showEmojiPicker: false,
+    };
+  },
+  computed: {
+    nameErrorMessage() {
+      if (this.hasError) {
+        return this.errorMessage;
+      }
+      return '';
+    },
+  },
+  mounted() {
+    this.updateDataFromStore();
+  },
+  methods: {
+    updateDataFromStore() {
+      this.name = this.existingName;
+      this.icon = this.savedIcon;
+    },
+    toggleEmojiPicker() {
+      this.showEmojiPicker = !this.showEmojiPicker;
+    },
+    onClickInsertEmoji(emoji = '') {
+      this.icon = emoji;
+      this.$emit('icon-change', emoji);
+      this.showEmojiPicker = false;
+    },
+    onNameChange() {
+      this.$emit('name-change', this.name);
+    },
+    hideEmojiPicker() {
+      if (this.showEmojiPicker) {
+        this.showEmojiPicker = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.emoji-dialog::before {
+  @apply hidden;
+}
+</style>

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

@@ -92,6 +92,7 @@
   "credit-card-person-outline": "M2 7.25A3.25 3.25 0 0 1 5.25 4h13.5A3.25 3.25 0 0 1 22 7.25V10h-.258A3.74 3.74 0 0 0 20.5 7.455V7.25a1.75 1.75 0 0 0-1.75-1.75H5.25A1.75 1.75 0 0 0 3.5 7.25v.25h11.95c-.44.409-.782.922-.987 1.5H3.5v5.75c0 .966.784 1.75 1.75 1.75h6.78c.06.522.217 1.028.458 1.5H5.25A3.25 3.25 0 0 1 2 14.75v-7.5Zm21 8.25a1.5 1.5 0 0 0-1.5-1.5h-7a1.5 1.5 0 0 0-1.5 1.5v.5c0 1.971 1.86 4 5 4 3.14 0 5-2.029 5-4v-.5Zm-2.25-5.25a2.75 2.75 0 1 0-5.5 0 2.75 2.75 0 0 0 5.5 0Z",
   "delete-outline": "M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75Zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5ZM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75Zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75Zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25Z",
   "dismiss-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.446 4.897.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072Z",
+  "dismiss-circle-filled": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2Zm3.53 6.47l-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47l-.084-.072a.75.75 0 0 0-.882-.007l-.094.08l-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47l-.072.084a.75.75 0 0 0-.007.882l.08.094l.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47l.084.072a.75.75 0 0 0 .882.007l.094-.08l.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47l.072-.084a.75.75 0 0 0 .007-.882l-.08-.094l-.084-.073l.084.073Z",
   "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
   "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
   "document-error-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 7ZM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0ZM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25Z",
@@ -100,6 +101,7 @@
   "dual-screen-clock-outline": "M10.019 6.002a6.632 6.632 0 0 0 .058 1.5H3.75a.25.25 0 0 0-.25.25v12.494c0 .138.112.25.25.25h7.498l-.001-10.167c.416.57.924 1.07 1.5 1.479v8.69h7.498a.25.25 0 0 0 .25-.25v-8.62a6.535 6.535 0 0 0 1.501-1.656V20.25a1.75 1.75 0 0 1-1.75 1.75h-8.998l-.001-.003H3.75A1.75 1.75 0 0 1 2 20.246V7.751c0-.966.784-1.75 1.75-1.75h6.269Zm6.22 11.498a.75.75 0 0 1 .101 1.493L16.24 19h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-6.996 0a.75.75 0 0 1 .102 1.493L9.243 19H7.74a.75.75 0 0 1-.102-1.493l.102-.007h1.502ZM16.498 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-1 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.001a.5.5 0 0 0 0-1h-2.501V3.5a.5.5 0 0 0-.5-.5Z",
   "edit-outline": "M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0ZM15 6.06 5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06Zm2.03-2.03-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94Z",
   "emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
+  "emoji-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 10.999a5.5 5.5 0 0 1 0-11ZM12 1.997c5.524 0 10.002 4.478 10.002 10.002c0 .263-.01.524-.03.782a6.503 6.503 0 0 0-1.475-1.052a8.501 8.501 0 1 0-8.765 8.767c.28.54.635 1.036 1.05 1.474c-.257.02-.518.03-.782.03c-5.524 0-10.002-4.478-10.002-10.001S6.476 1.998 12 1.998Zm5.5 12l-.09.008a.5.5 0 0 0-.402.402l-.008.09v2.5L14.498 17l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17v2.504l.008.09a.5.5 0 0 0 .402.401l.09.009l.09-.009a.5.5 0 0 0 .402-.402l.008-.09v-2.504l2.504.001l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18v-2.5l-.008-.09a.5.5 0 0 0-.402-.403l-.09-.008Zm-9.038.785a4.494 4.494 0 0 0 2.63 1.626a6.449 6.449 0 0 0-.079 1.51a5.982 5.982 0 0 1-3.73-2.208a.75.75 0 1 1 1.179-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499a1.25 1.25 0 0 1 0-2.499Z",
   "error-circle-outline": "M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm-.001 10.835a.999.999 0 1 1 0 1.998.999.999 0 0 1 0-1.998ZM11.994 7a.75.75 0 0 1 .744.648l.007.101.004 4.502a.75.75 0 0 1-1.493.103l-.007-.102-.004-4.501a.75.75 0 0 1 .75-.751Z",
   "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",
   "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",

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

@@ -4,14 +4,24 @@
     class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
   >
     <div class="flex flex-col">
-      <div class="emoji-search--wrap">
+      <div class="emoji-search--wrap flex gap-2">
         <input
           ref="searchbar"
           v-model="search"
           type="text"
-          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-blue-dark"
+          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
+        <woot-button
+          v-if="showRemoveButton"
+          size="small"
+          variant="smooth"
+          class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
+          color-scheme="secondary"
+          @click="onClick('')"
+        >
+          {{ $t('EMOJI.REMOVE') }}
+        </woot-button>
       </div>
       <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
         <h5 class="emoji-category--title">
@@ -99,6 +109,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    showRemoveButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -171,13 +185,13 @@ export default {
   .box-shadow-blue {
     box-shadow:
       0 0 0 1px #1f93ff,
-      0 0 2px 3px #c7e3ff;
+      0 0 1px 2px #c7e3ff;
   }
 
-  .box-shadow-blue-dark {
+  .box-shadow-dark {
     box-shadow:
-      0 0 0 1px #1f93ff,
+      0 0 0 1px #212222,
-      0 0 2px 3px #4c5155;
+      0 0 1px 2px #4c5155;
   }
 }
 </style>
@@ -217,7 +231,7 @@ export default {
   @apply m-2 sticky top-2;
 
   .emoji-search--input {
-    @apply text-sm focus-visible:border-transparent text-slate-800 dark:text-slate-100 h-8 m-0 p-2 w-full rounded-md bg-slate-75 dark:bg-slate-800 border border-solid border-transparent dark:border-slate-800/50;
+    @apply text-sm focus-visible:border-transparent text-slate-800 dark:text-slate-100 h-8 m-0 p-2 w-full rounded-md bg-slate-50 dark:bg-slate-800 border border-solid border-transparent dark:border-slate-800/50;
   }
 }
 

app/models/category.rb

@@ -4,6 +4,7 @@
 #
 #  id                     :bigint           not null, primary key
 #  description            :text
+#  icon                   :string           default("")
 #  locale                 :string           default("en")
 #  name                   :string
 #  position               :integer

app/views/api/v1/accounts/categories/_category.json.jbuilder

@@ -5,6 +5,7 @@ json.locale category.locale
 json.description category.description
 json.position category.position
 json.account_id category.account_id
+json.icon category.icon
 
 json.related_categories do
   if category.related_categories.any?

db/migrate/20231013072802_add_icon_to_categories.rb

@@ -0,0 +1,5 @@
+class AddIconToCategories < ActiveRecord::Migration[7.0]
+  def change
+    add_column :categories, :icon, :string, default: ''
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_10_11_041615) do
+ActiveRecord::Schema[7.0].define(version: 2023_10_13_072802) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -231,6 +231,7 @@ ActiveRecord::Schema[7.0].define(version: 2023_10_11_041615) do
     t.string "slug", null: false
     t.bigint "parent_category_id"
     t.bigint "associated_category_id"
+    t.string "icon", default: ""
     t.index ["associated_category_id"], name: "index_categories_on_associated_category_id"
     t.index ["locale", "account_id"], name: "index_categories_on_locale_and_account_id"
     t.index ["locale"], name: "index_categories_on_locale"