From e8edc9ebf58758eb7e54d2d80815302afd8fb512 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 23 Jun 2026 20:53:31 +0530
Subject: [PATCH] feat: allow users to set an icon or emoji for teams (#14767)

---
 .../api/v1/accounts/teams_controller.rb       |  2 +-
 .../emoji-icon-picker/EmojiIconPicker.vue     |  1 +
 .../conversation/ConversationAction.vue       |  1 +
 .../routes/dashboard/settings/teams/Index.vue | 10 ++-
 .../dashboard/settings/teams/TeamForm.vue     | 90 ++++++++++++++++---
 .../components/ui/MultiselectDropdown.vue     | 18 +++-
 .../ui/MultiselectDropdownItems.vue           | 18 +++-
 app/models/team.rb                            |  6 +-
 app/views/api/v1/models/_team.json.jbuilder   |  2 +
 .../20260616120000_add_icon_to_teams.rb       |  6 ++
 db/schema.rb                                  |  2 +
 11 files changed, 139 insertions(+), 17 deletions(-)
 create mode 100644 db/migrate/20260616120000_add_icon_to_teams.rb

diff --git a/app/controllers/api/v1/accounts/teams_controller.rb b/app/controllers/api/v1/accounts/teams_controller.rb
index e8688dcfb..6239e00eb 100644
--- a/app/controllers/api/v1/accounts/teams_controller.rb
+++ b/app/controllers/api/v1/accounts/teams_controller.rb
@@ -29,6 +29,6 @@ class Api::V1::Accounts::TeamsController < Api::V1::Accounts::BaseController
   end
 
   def team_params
-    params.require(:team).permit(:name, :description, :allow_auto_assign)
+    params.require(:team).permit(:name, :description, :allow_auto_assign, :icon, :icon_color)
   end
 end
diff --git a/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue b/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue
index 2272d1b7b..1dfcc51c2 100644
--- a/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue
+++ b/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue
@@ -168,6 +168,7 @@ const selectEmoji = emoji => {
       <Button
         v-if="showRemoveButton && value"
         v-tooltip.top="t('EMOJI_ICON_PICKER.REMOVE')"
+        type="button"
         variant="ghost"
         color="slate"
         size="sm"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 8543968fe..fede6e3cb 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -252,6 +252,7 @@ export default {
       <MultiselectDropdown
         :options="teamsList"
         :selected-item="assignedTeam"
+        show-emoji-icon
         :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
         :multiselector-placeholder="$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')"
         :no-search-result="
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 03e1a8089..b500ca420 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -11,6 +11,7 @@ import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const store = useStore();
 const { t } = useI18n();
@@ -123,9 +124,16 @@ const confirmPlaceHolderText = computed(() =>
         >
           <div class="flex items-start gap-4">
             <div
-              class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
+              class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1 text-lg"
             >
+              <EmojiIcon
+                v-if="team.icon"
+                :value="team.icon"
+                :color="team.icon_color"
+                class="size-5"
+              />
               <Icon
+                v-else
                 icon="i-lucide-users-round"
                 class="size-4 text-n-slate-11"
               />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index 0773e0d08..0a231568a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -1,15 +1,27 @@
 <script>
 import validations from './helpers/validations';
 import FormInput from 'v3/components/Form/Input.vue';
-import { reactive } from 'vue';
+import { reactive, ref, defineAsyncComponent } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
+import { OnClickOutside } from '@vueuse/components';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
+);
 
 export default {
   components: {
     NextButton,
     FormInput,
+    OnClickOutside,
+    EmojiIcon,
+    Icon,
+    EmojiIconPicker,
   },
   props: {
     onSubmit: {
@@ -35,19 +47,38 @@ export default {
       description = '',
       name: title = '',
       allow_auto_assign: allowAutoAssign = true,
+      icon = '',
+      icon_color: iconColor = '',
     } = formData;
 
     const state = reactive({
       description,
       title,
       allowAutoAssign,
+      icon,
+      iconColor,
     });
 
+    const isIconPickerOpen = ref(false);
+
     const rules = validations;
     const v$ = useVuelidate(rules, state);
-    return { state, v$ };
+    return { state, v$, isIconPickerOpen };
   },
   methods: {
+    onSelectIcon({ type, value, color }) {
+      this.state.icon = value;
+      this.state.iconColor = type === 'icon' ? color : '';
+      this.isIconPickerOpen = false;
+    },
+    onColorChange(color) {
+      this.state.iconColor = color;
+    },
+    onRemoveIcon() {
+      this.state.icon = '';
+      this.state.iconColor = '';
+      this.isIconPickerOpen = false;
+    },
     handleSubmit() {
       this.v$.$touch();
       if (this.v$.$invalid) {
@@ -57,6 +88,8 @@ export default {
         description: this.state.description,
         name: this.state.title,
         allow_auto_assign: this.state.allowAutoAssign,
+        icon: this.state.icon,
+        icon_color: this.state.iconColor,
       });
     },
   },
@@ -66,16 +99,49 @@ export default {
 <template>
   <div class="flex-shrink-0 w-full">
     <form class="mx-0 grid gap-4" @submit.prevent="handleSubmit">
-      <FormInput
-        v-model="state.title"
-        name="title"
-        spacing="compact"
-        :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
-        :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
-        :has-error="v$.title.$error"
-        :error-message="v$.title.$error ? v$.title.$errors[0].$message : ''"
-        @blur="v$.title.$touch"
-      />
+      <div class="relative">
+        <FormInput
+          v-model="state.title"
+          class="!ps-12"
+          name="title"
+          spacing="compact"
+          :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
+          :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
+          :has-error="v$.title.$error"
+          :error-message="v$.title.$error ? v$.title.$errors[0].$message : ''"
+          @blur="v$.title.$touch"
+        />
+        <OnClickOutside
+          class="absolute top-[1.75rem] start-0"
+          @trigger="isIconPickerOpen = false"
+        >
+          <NextButton
+            type="button"
+            variant="ghost"
+            color="slate"
+            class="text-lg !size-[2.5rem] !p-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+            @click="isIconPickerOpen = !isIconPickerOpen"
+          >
+            <EmojiIcon
+              v-if="state.icon"
+              :value="state.icon"
+              :color="state.iconColor"
+              class="size-5 text-xl !leading-5"
+            />
+            <Icon v-else icon="i-lucide-smile-plus " class="size-4" />
+          </NextButton>
+          <EmojiIconPicker
+            v-if="isIconPickerOpen"
+            class="start-0 top-10"
+            :value="state.icon"
+            :color="state.iconColor"
+            show-remove-button
+            @select="onSelectIcon"
+            @color-change="onColorChange"
+            @remove="onRemoveIcon"
+          />
+        </OnClickOutside>
+      </div>
       <FormInput
         v-model="state.description"
         name="description"
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index b06aef852..898f89db4 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -6,6 +6,7 @@ import { useToggle } from '@vueuse/core';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
 const props = defineProps({
@@ -37,6 +38,10 @@ const props = defineProps({
     type: String,
     default: 'Search',
   },
+  showEmojiIcon: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['select']);
@@ -96,8 +101,18 @@ const hasIcon = computed(() => {
           hide-offline-status
           rounded-full
         />
+        <div
+          v-if="hasValue && hasIcon && showEmojiIcon"
+          class="flex items-center justify-center flex-shrink-0 text-sm rounded-full size-6 outline outline-1 -outline-offset-1 outline-n-weak"
+        >
+          <EmojiIcon
+            :value="selectedItem.icon"
+            :color="selectedItem.icon_color"
+            class="size-3.5 !text-sm"
+          />
+        </div>
         <Icon
-          v-if="hasValue && hasIcon"
+          v-else-if="hasValue && hasIcon"
           :icon="selectedItem.icon"
           class="size-5 text-n-slate-11"
         />
@@ -124,6 +139,7 @@ const hasIcon = computed(() => {
           :has-thumbnail="hasThumbnail"
           :input-placeholder="inputPlaceholder"
           :no-search-result="noSearchResult"
+          :show-emoji-icon="showEmojiIcon"
           @select="onClickSelectItem"
         />
       </div>
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index e3d072dd8..4fdb9cdb3 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -3,6 +3,7 @@ import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
@@ -11,6 +12,7 @@ export default {
     WootDropdownMenu,
     Avatar,
     Icon,
+    EmojiIcon,
     NextButton,
   },
 
@@ -35,6 +37,10 @@ export default {
       type: String,
       default: 'No results found',
     },
+    showEmojiIcon: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['select'],
 
@@ -116,8 +122,18 @@ export default {
                 hide-offline-status
                 rounded-full
               />
+              <div
+                v-if="option.icon && showEmojiIcon"
+                class="flex items-center justify-center flex-shrink-0 text-sm rounded-full size-6 outline outline-1 -outline-offset-1 outline-n-weak"
+              >
+                <EmojiIcon
+                  :value="option.icon"
+                  :color="option.icon_color"
+                  class="size-3.5 !text-sm"
+                />
+              </div>
               <Icon
-                v-if="option.icon"
+                v-else-if="option.icon"
                 :icon="option.icon"
                 class="size-5 text-n-slate-11"
               />
diff --git a/app/models/team.rb b/app/models/team.rb
index a2b69c7fb..48990b488 100644
--- a/app/models/team.rb
+++ b/app/models/team.rb
@@ -5,6 +5,8 @@
 #  id                :bigint           not null, primary key
 #  allow_auto_assign :boolean          default(TRUE)
 #  description       :text
+#  icon              :string           default("")
+#  icon_color        :string           default("")
 #  name              :string           not null
 #  created_at        :datetime         not null
 #  updated_at        :datetime         not null
@@ -62,7 +64,9 @@ class Team < ApplicationRecord
   def push_event_data
     {
       id: id,
-      name: name
+      name: name,
+      icon: icon,
+      icon_color: icon_color
     }
   end
 end
diff --git a/app/views/api/v1/models/_team.json.jbuilder b/app/views/api/v1/models/_team.json.jbuilder
index 9aaab89e8..911648bc4 100644
--- a/app/views/api/v1/models/_team.json.jbuilder
+++ b/app/views/api/v1/models/_team.json.jbuilder
@@ -2,5 +2,7 @@ json.id resource.id
 json.name resource.name
 json.description resource.description
 json.allow_auto_assign resource.allow_auto_assign
+json.icon resource.icon
+json.icon_color resource.icon_color
 json.account_id resource.account_id
 json.is_member Current.user.teams.include?(resource)
diff --git a/db/migrate/20260616120000_add_icon_to_teams.rb b/db/migrate/20260616120000_add_icon_to_teams.rb
new file mode 100644
index 000000000..fc3712c32
--- /dev/null
+++ b/db/migrate/20260616120000_add_icon_to_teams.rb
@@ -0,0 +1,6 @@
+class AddIconToTeams < ActiveRecord::Migration[7.1]
+  def change
+    add_column :teams, :icon, :string, default: '' unless column_exists?(:teams, :icon)
+    add_column :teams, :icon_color, :string, default: '' unless column_exists?(:teams, :icon_color)
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 15ba36cb6..05afea9a1 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1266,6 +1266,8 @@ ActiveRecord::Schema[7.1].define(version: 2026_06_20_000000) do
     t.bigint "account_id", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.string "icon", default: ""
+    t.string "icon_color", default: ""
     t.index ["account_id"], name: "index_teams_on_account_id"
     t.index ["name", "account_id"], name: "index_teams_on_name_and_account_id", unique: true
   end